update: optimize taskchain-page to add error messages and progress visualizations

TFPower-app/src/app/page/aipicture-page/aipicture-page.component.ts

@@ -53,7 +53,7 @@ export class AipicturePageComponent implements OnInit {
   constructor() {
     // 示例任务，自己生成图片后请存储新的ID
     this.imagineWork = new ImagineWork('lpJGiFwWeA');
-    this.imagineWork.fetchTask().then((work) => {
+    this.imagineWork.fetchTask().then((work: any) => {
       this.images = this.imagineWork?.images || [];
     });
   }

TFPower-app/src/app/page/taskchain-page/taskchain-page.component.html

@@ -15,24 +15,35 @@
   @for(task of taskList; track task.title){
   <ion-card>
     <ion-card-content>
-      @if(task.progress === 0) {
-      <div class="loader"></div>
-      <!-- <ion-icon name="ellipse-outline"></ion-icon> -->
+      @if(task.progress === 0 && !task.error) {
+      <!-- <div class="loader"></div> -->
+      <ion-icon name="ellipse-outline"></ion-icon>
       }
-      @if(task.progress !==0 && task.progress !== 1){
+      @if(task.progress !== 0 && task.progress !== 1){
       <div class="loader"></div>
-      <!-- <ion-icon name="reload-circle-outline"></ion-icon> -->
       }
       @if(task.progress === 1) {
-      <ion-icon name="checkmark-circle-outline" style="color:green"></ion-icon>
+      <ion-icon name="checkmark-circle-outline" class="text-green"></ion-icon>
+      }
+      @if(task.error) {
+      <ion-icon name="close-circle-outline" class="text-red"></ion-icon>
+      }
+
+      <span style="margin-left: 10px;">{{task.title}} &nbsp;&nbsp;&nbsp;</span>
+      @if(task.progress && task.progress !== 1) {
+      <span>{{task.progress * 100 | number: '2.0-0'}}%</span>
+      }
+      @if(task.error){
+      <span class="place-right text-red">{{task.error}}</span>
       }
-      <span style="margin-left: 10px;">{{task.title}}</span>
     </ion-card-content>
   </ion-card>
   }
 
 
   <!-- 生成的图片 -->
+
+  @if(shareData.images) {
   <ion-card color="light">
     <ion-card-header>
       <ion-card-title>生成图片</ion-card-title>
@@ -41,14 +52,13 @@
     <ion-list>
       <ion-item>
         <!-- 生成结果 -->
-        @if(shareData.images) {
-        @for(imageUrl of shareData.images;track imageUrl){
+        @for(imageUrl of shareData.images; track imageUrl){
         <img [src]="imageUrl" alt="" srcset="">
         }
-        }
       </ion-item>
     </ion-list>
   </ion-card>
+  }
 
 
 </ion-content>

TFPower-app/src/app/page/taskchain-page/taskchain-page.component.scss

@@ -18,3 +18,12 @@
 ion-icon {
   width: 16px;
 }
+.place-right {
+  float: right;
+}
+.text-red {
+  color: red;
+}
+.text-green {
+  color: green;
+}

TFPower-app/src/app/page/taskchain-page/taskchain-page.component.ts

@@ -20,12 +20,19 @@ import { AgentTaskStep } from 'src/app/agent/agent.task';
 import { addIcons } from 'ionicons';
 import {
   checkmarkCircleOutline,
+  closeCircleOutline,
   ellipseOutline,
   reloadCircleOutline,
 } from 'ionicons/icons';
 import { AgentUserinputComponent } from 'src/app/agent/agent-userinput/agent-userinput.component';
 import { DalleOptions, FmodeChatCompletion, ImagineWork } from 'fmode-ng';
-addIcons({ ellipseOutline, checkmarkCircleOutline, reloadCircleOutline });
+import { DecimalPipe } from '@angular/common';
+addIcons({
+  ellipseOutline,
+  checkmarkCircleOutline,
+  reloadCircleOutline,
+  closeCircleOutline,
+});
 
 @Component({
   selector: 'app-taskchain-page',
@@ -47,6 +54,7 @@ addIcons({ ellipseOutline, checkmarkCircleOutline, reloadCircleOutline });
     IonProgressBar,
     IonIcon,
     IonList,
+    DecimalPipe,
   ],
 })
 export class TaskchainPageComponent {
@@ -103,9 +111,14 @@ export class TaskchainPageComponent {
             },
           ],
         });
-        console.log(userInput);
+        // console.log(userInput);
         // console.log(userInput['图片类型']);
 
+        // 输入内容不能为空，为空则停止执行
+        if (!userInput?.['绘图要求'] || !userInput?.['图片类型']) {
+          task1.error = '绘图要求或者图片类型不能为空';
+          resolve(false);
+        }
         // ai生成更详细的内容
         let PromptTemplate = `请您作为一名专业的美术大家，请根据以下需求给出更详细的补充，用最少的文字表达出来。需求有：${userInput['绘图要求']} + ${userInput['图片类型']}`;
         console.log(PromptTemplate);
@@ -118,6 +131,14 @@ export class TaskchainPageComponent {
         completion.sendCompletion().subscribe((message: any) => {
           // 打印消息体
           // console.log(message.content);
+
+          //进度
+          if (task1.progress < 0.5) {
+            task1.progress += 0.1;
+          }
+          if (task1.progress >= 0.5 && task1.progress < 1) {
+            task1.progress += 0.01;
+          }
           // 赋值消息内容给组件内属性
           this.shareData.PictureDescResult = message.content;
           if (message?.complete) {
@@ -136,6 +157,13 @@ export class TaskchainPageComponent {
     task2.handle = () => {
       return new Promise(async (resolve) => {
         // await this.wait(3000);
+
+        // 上一task执行结果不为空，为空则停止执行
+        if (!this.shareData.PictureDescResult) {
+          task2.error = '图片描述不存在';
+          resolve(false);
+        }
+
         console.log('AI生成图片,执行中...');
 
         let imagineWork = new ImagineWork();
@@ -144,9 +172,20 @@ export class TaskchainPageComponent {
         imagineWork?.draw(options).subscribe((work: any) => {
           // console.log('imagineWork', work?.toJSON());
           // console.log('images', work?.get('images'));
+
+          // 进度
+          let schedule = setInterval(() => {
+            if (task2.progress < 0.5) {
+              task2.progress += 0.1;
+            }
+            if (task2.progress >= 0.5 && task2.progress < 1) {
+              task2.progress += 0.01;
+            }
+          }, 1000);
           if (work?.get('images')?.length) {
             this.shareData.images = work?.get('images');
             task2.progress = 1;
+            clearInterval(schedule);
             resolve(true);
           }
         });
@@ -168,6 +207,9 @@ export class TaskchainPageComponent {
       if (result == false) {
         break;
       }
+      if (step.error) {
+        break;
+      }
       if (!step.error) {
       }
     }