fix: new files

fashion-app/src/app/tab2/tab2.page.html

@@ -1,11 +1,29 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Chat模块组件演示
-    </ion-title>
+      示例：图片生成{{imagineWork?.progress || 0}}
+    </ion-title> 
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  
-</ion-content>
+  <!-- 生成提示词 -->
+  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="DALLE3图片提示词" autoGrow="true"></ion-textarea>
+  <ion-button (click)="createImage()" expand="block">生成图片</ion-button>
+  <!-- 生成结果 -->
+  @if(images.length) {
+    @for(imageUrl of images;track imageUrl){
+      <img [src]="imageUrl" alt="" srcset="">
+    }
+  }
+  <!-- 生成状态 -->
+  @if(!images.length){
+    @if(imagineWork){
+      <h1>生成中</h1>
+    }
+    @if(!imagineWork){
+      <h1>未开始</h1>
+    }
+  }
+
+</ion-content>

fashion-app/src/app/tab2/tab2.page.ts

@@ -1,10 +1,7 @@
-import {  Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController } from '@ionic/angular/standalone';
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { IonTextarea, IonButton } from "@ionic/angular/standalone";
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
-import { FmChatModalInput, FmodeChat, } from 'fmode-ng';
-import { ModalAudioMessageComponent } from 'fmode-ng/lib/aigc/chat/chat-modal-input/modal-audio-message/modal-audio-message.component';
+import { DalleOptions, ImagineWork } from 'fmode-ng';
 
 @Component({
   selector: 'app-tab2', 
@@ -14,18 +11,36 @@ import { ModalAudioMessageComponent } from 'fmode-ng/lib/aigc/chat/chat-modal-in
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, 
     IonButton,
-    IonTextarea,
-   // ASR语音输入模块
-   FmChatModalInput,
-   // ModalAudioMessageComponent
+    IonTextarea
   ],
 })
 export class Tab2Page {
-constructor( private router: Router, private modalCtrl:ModalController,) {}
-goAIChatpage(){
-  this.router.navigate(['/tabs/AIChat']);
-}
-goChat(){
-  this.router.navigateByUrl("/chat/session/role/2DXJkRsjXK")
-}
+  userPrompt:string = "飞码产品LOGO，独角兽头部形象，极简风格，棱角分明，线条勾勒，蓝色紫色搭配。"
+  promptInput(ev:any){
+    this.userPrompt = ev.detail.value;
+  }
+  imagineWork:ImagineWork|undefined
+  images:Array<string> = []
+  constructor(
+    private cdRef:ChangeDetectorRef
+  ){
+    // 示例任务，自己生成图片后请存储新的ID
+    this.imagineWork = new ImagineWork("lpJGiFwWeA");
+    this.imagineWork.fetchTask().then(work=>{
+      this.images = this.imagineWork?.images || [];
+    })
+  }
+
+  async createImage(){
+    this.imagineWork = new ImagineWork();
+    let options:DalleOptions = {prompt:this.userPrompt}
+    this.imagineWork.draw(options).subscribe(work=>{
+      console.log("imagineWork",work?.toJSON())
+      console.log("images",work?.get("images"))
+      if(work?.get("images")?.length){
+        this.images = work?.get("images");
+      }
+    })
+  }
+
 }

fashion-app/src/app/tab3/tab3.page.html

@@ -77,22 +77,22 @@
 
     <!-- 图片展示区域 -->
     <div class="image-display-section">
-  
+      @if(!images.length){
+        @if(imagineWork){
+          <h3>生成中 {{ countdownTimer }} s</h3>
+        }
+        @if(!imagineWork){
+          <h3>图片展示区</h3>
+        }
+      }
+           <!-- 生成结果 -->
+      @if(images.length) {
+        @for(imageUrl of images;track imageUrl){
+          <img [src]="imageUrl" alt="" srcset="">
+        }
+      }
       <!-- 生成状态 -->
-  @if(!images.length){
-    @if(imagineWork){
-      <h3>生成中</h3>
-    }
-    @if(!imagineWork){
-      <h3>图片展示区</h3>
-    }
-  }
-       <!-- 生成结果 -->
-  @if(images.length) {
-    @for(imageUrl of images;track imageUrl){
-      <img [src]="imageUrl" alt="" srcset="">
-    }
-  }
+
     </div>
 
 <!-- 获取穿搭分析按钮 -->
@@ -116,7 +116,7 @@
       <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
     }
   </div>
-
+ 
 
   </div>
   
@@ -131,6 +131,7 @@
   
   <div *ngIf="selectedSegment === 'evaluate'">
     <h2>这是评价AI页面</h2>
+
   </div>
 
 </ion-content>

fashion-app/src/app/tab3/tab3.page.scss

@@ -116,12 +116,13 @@
     height: 325px;
   }
   
-  .display-image {
-    max-width: 100%; /* 图片最大宽度为100% */
-    height: auto;
+  .image-display-section img {
+    width: 100%; /* 图片宽度100% */
+    height: 100%; /* 图片高度100% */
+    object-fit: cover; /* 保持比例填充 */
     border-radius: 5px; /* 图片圆角 */
     margin-top: 10px; /* 图片与标题之间的间距 */
-  }
+}
 
   .analysis-button {
     --background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */

fashion-app/src/app/tab3/tab3.page.ts

@@ -34,6 +34,8 @@ export class Tab3Page {
     isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成
     isGenerating: boolean = false; // 按钮状态
     imagineWork:ImagineWork|undefined
+    countdownTimer: number = 0; // 计时器初始值
+    timerInterval: any; // 用于存储定时器的引用
   images:Array<string> = []
     constructor(private alertController: AlertController,private modalCtrl:ModalController,
       private router:Router, private cdRef:ChangeDetectorRef) { }
@@ -61,8 +63,11 @@ export class Tab3Page {
     }
     this.isComplete = false; // 重置完成状态
     this.isGenerating = true; // 开始生成时设置为 true
+    this.countdownTimer = 0; // 重置计时器
+    this.imagineWork=undefined;
+    this.images = []; // 清空原来的图片数组
     this.userPrompt =`有一位${this.selectedGender}用户，该用户${this.age}岁，身高${this.height}cm，体重${this.weight}kg，该用户的补充说明是
-    ${this.comments}，请你作为一名专业的服装穿搭大师并严格按照给定的例子格式，为该用户给出适合的服装搭配建议。
+    ${this.comments}，请你作为一名专业的服装穿搭大师并严格按照给定的例子格式，为该用户给出适合的服装搭配建议,再给出具体穿搭方案时里面的衣服颜色和类型一定要唯一，不要出现类似白色或绿色之类的句子。
     例子：嘿，兄弟，你的信息我收到了，让我来帮你计算一下BMI值，再给你一些穿搭方面的建议吧！
 
 **一、计算BMI值**
@@ -102,8 +107,10 @@ BMI是衡量身体状况的一个标准，计算方法是体重除以身高的
       if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
         
           this.isComplete = true;
-          this.isGenerating = false; // 生成完成后设置为 false
+          
            // 图片生成
+        this.startTimer(); // 启动计时器
+        this.imagineWork = new ImagineWork();
         let PicturePrompt = `描述：${this.responseMsg}\n请你作为一名专业的服装绘制大师，根据描述中的方案一生成对应的服装图片。`
         let options:DalleOptions = {prompt:PicturePrompt}
         this.imagineWork?.draw(options).subscribe(work=>{
@@ -111,6 +118,8 @@ BMI是衡量身体状况的一个标准，计算方法是体重除以身高的
             console.log("images",work?.get("images"))
             if(work?.get("images")?.length){
               this.images = work?.get("images");
+              this.stopTimer(); // 停止计时器
+              this.isGenerating = false; // 生成完成后设置为 false
             }
         })
       }
@@ -118,6 +127,17 @@ BMI是衡量身体状况的一个标准，计算方法是体重除以身高的
 
 }
 
+// 启动计时器
+startTimer() {
+  this.timerInterval = setInterval(() => {
+      this.countdownTimer++; // 每秒增加计时
+  }, 1000);
+}
+
+// 停止计时器
+stopTimer() {
+  clearInterval(this.timerInterval); // 清除定时器
+}
 
 openChat(){
   localStorage.setItem("company","E4KpGvTEto")