Few changes

angular.json

@@ -22,7 +22,9 @@
               "src/favicon.ico",
               "src/assets"
             ],
-            "styles": [
+            "styles": ["node_modules/primeicons/primeicons.css",
+            "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+            "node_modules/primeng/resources/primeng.min.css",
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"

package.json

@@ -25,8 +25,9 @@
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.2.0",
     "openai": "^3.1.0",
+    "primeicons": "^6.0.1",
+    "primeng": "^14.2.2",
     "rxjs": "~7.5.0",
-    "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -40,6 +41,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
+    "tslib": "^2.4.1",
     "typescript": "~4.7.2"
   }
-}
+}

src/app/app.component.html

@@ -10,7 +10,7 @@ <h1> Generate <span>Image</span> from <span>Text</span></h1>
       <div class="col"></div>
       <div class="col-6">
         <div class="form-group">
-          <textarea class="form-control" id="textArea" rows="4" 
+          <textarea class="form-control" id="textArea" rows="4"  [(ngModel)]="promtUser"
           placeholder="Please Enter the description of the image you want to generate. A.I. will generate for You!😊"></textarea>
         </div>
       </div>
@@ -20,11 +20,18 @@ <h1> Generate <span>Image</span> from <span>Text</span></h1>
       <div class="col"></div>
       <div class="col-6" >
         <div class="form-group" style="float:right;" id="buttonDiv">
-          <button >Create</button>
+          <button (click)="onClickButton()" [disabled]="hidden">Create</button>
         </div>
       </div>
       <div class="col"></div>
     </div>
+    <div class="row mt-2" *ngIf="imgURL.length > 0">
+      <div class="col"></div>
+      <div class="col-6">
+        <img [src]="imgURL" class="img-fluid" >
+      </div>
+      <div class="col"></div>
+    </div>
   </div>
 </div>
 <div class="footer mt-0 mb-0 pt-0 pb-0 text-center">

src/app/app.component.ts

@@ -12,18 +12,26 @@ import { reqBody } from './req-res.interface';
 export class AppComponent implements OnInit{
   dateNow : Date = new Date();
   hidden: boolean = false;
+  imgURL: string = '';
+  promtUser: string = '';
   constructor(public http : HttpClient){
 
   }
 
   ngOnInit(): void {
-    // this.getImage();
+
+  }
+  onClickButton(){
+    this.getImage();
+  }
+  getImage(){
+    this.hidden = true;
+    let val : reqBody = {prompt: this.promtUser, n: 1, size: '1024x1024'}
+    this.createImage(val).subscribe(resp => {
+      this.imgURL = resp.data[0].url;
+      this.hidden = false;
+  })
   }
-  // .subscribe(resp => {
-  //   console.log(resp.data[0].url);
-  // })
-
-
 
   createImage(inputBody: reqBody): Observable<any> {
     const headers = { 'Authorization': `Bearer ${environment.OPENAI_API_KEY}` };

src/app/app.module.ts

@@ -5,6 +5,9 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { HttpClientModule } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+import {ImageModule} from 'primeng/image';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -14,7 +17,10 @@ import { HttpClientModule } from '@angular/common/http';
     BrowserModule,
     AppRoutingModule,
     NgbModule,
-    HttpClientModule
+    HttpClientModule,
+    CommonModule,
+    ImageModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

tsconfig.json

@@ -27,6 +27,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": false
   }
 }