fix：AI1

dream-app/src/app/page-dream-analysis/page-dream-analysis.component.html

@@ -1,36 +1,38 @@
-
 <ion-content>
 
   <h1>梦境背景</h1>
-  <ion-input [value]="background" (ionInput)="backgroundInput($event)"></ion-input>
-<!-- 文本域：生成提示词 -->
- <h1>梦境描述</h1>
-<ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="请描述您的梦境" autoGrow="true"></ion-textarea>
-
-<!-- 按钮：执行消息生成函数 -->
-<ion-button (click)="sendMessage()" expand="block">梦境分析</ion-button>
+  <ion-input 
+    [value]="background" 
+    (ionInput)="backgroundInput($event)">
+  </ion-input>
+
+  <!-- 文本域：生成提示词 -->
+  <h1>梦境描述</h1>
+  <ion-textarea 
+    [value]="userPrompt" 
+    (ionInput)="promptInput($event)" 
+    placeholder="请描述您的梦境" 
+    autoGrow="true">
+  </ion-textarea>
+
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button 
+    (click)="sendMessage()" 
+    expand="block">
+    梦境分析
+  </ion-button>
+    
+  <!-- 展示：返回消息内容 -->
+  <div>{{responseMsg}}</div>
+
+  <!-- 使用 *ngIf 进行条件渲染 -->
+  <fm-markdown-preview 
+    *ngIf="isComplete" 
+    class="content-style" 
+    [content]="responseMsg">
+  </fm-markdown-preview>
+
+  <!-- 显示加载指示器，当消息未完成时 -->
+  <ion-spinner *ngIf="!isComplete"></ion-spinner>
   
-<!-- 展示：返回消息内容 -->
-<div>{{responseMsg}}</div>
-</ion-content>
-
-
-
-<!-- <ion-list>
-  <ion-item>梦境标签</ion-item>
-  <ion-item>
-    <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
-  </ion-item>
-  <ion-item>
-    <ion-textarea [value]="dreamDesc" (ionInput)="userInput($event)" label="梦境描述" placeholder="具体描述你的感受、场景、人物、物品、事件" [autoGrow]="true"></ion-textarea>
-  </ion-item>
-  <ion-item>
-    <ion-button expand = "block" (click) = "analysisDream()">解析梦境</ion-button>
-  </ion-item>
-</ion-list>
-<div style="font-size: 18px">
-  {{dreamResult}}
-</div> -->
-
-
-
+</ion-content>

dream-app/src/app/page-dream-analysis/page-dream-analysis.component.ts

@@ -1,127 +1,79 @@
 import { Component, OnInit } from '@angular/core';
 import { IonButton, IonContent, IonHeader, IonInput, IonTextarea, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 /** 引用：从fmode-ng库引用FmodeChatCompletion类 */
-import { FmodeChatCompletion } from 'fmode-ng';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+
 @Component({
   selector: 'app-page-dream-analysis',
   templateUrl: './page-dream-analysis.component.html',
   styleUrls: ['./page-dream-analysis.component.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
-    IonTextarea,IonInput
+  imports: [
+    IonHeader, 
+    IonToolbar, 
+    IonTitle, 
+    IonContent, 
+    IonButton,
+    IonTextarea,
+    IonInput,
+    MarkdownPreviewModule,
   ],
 })
-export class PageDreamAnalysisComponent  implements OnInit {
-  constructor() {}
-  ngOnInit(): void {
-    
-  }
-    // 用户输入提示词
-    background:string = "梦境背景"
-    backgroundInput(ev:any){
-      this.background = ev.detail.value;
-    }
+export class PageDreamAnalysisComponent implements OnInit {
   // 用户输入提示词
-   userPrompt:string = "请描述您的梦境内容"
-  promptInput(ev:any){
-    this.userPrompt = ev.detail.value;
-  }
-  // 属性：组件内用于展示消息内容的变量
-  responseMsg:any = ""
-  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
-  sendMessage() {
-    console.log("创建消息模板");
-  
-    let PromptTemplate = `
-    对于最近发生的${this.background}，请你作为一名解梦师，请根据用户对于梦境的描述，给用户一些解释和建议。
-    以下是用户的梦境：${this.userPrompt}
-    `;
-  
-    console.log('PromptTemplate:', PromptTemplate); // 添加日志
-  
-    let completion = new FmodeChatCompletion([
-      { role: "system", content: "你是一名专业的解梦师。" }, // 可选的系统提示
-      { role: "user", content: PromptTemplate }
-    ]);
-  
-    completion.sendCompletion().subscribe((message: any) => {
-      // 打印消息体
-      console.log("AI 回复:", message.content);
-      // 赋值消息内容给组件内属性
-      this.responseMsg = message.content;
-    }, (error: any) => {
-      console.error("发送消息时发生错误:", error);
-      this.responseMsg = "抱歉，分析过程中出现了问题。请稍后再试。";
-    });
-  }
-}
-
+  background: string = "梦境背景";
+  userPrompt: string = "请描述您的梦境内容";
 
-// import { Component, OnInit } from '@angular/core';
-// import { EditTagComponent } from '../components/edit-tag/edit-tag.component';
-// import { IonButton, IonItem, IonList, IonTextarea } from '@ionic/angular/standalone';
-// import { FmodeChatCompletion } from 'fmode-ng';
-// @Component({
-//   selector: 'app-page-dream-analysis',
-//   templateUrl: './page-dream-analysis.component.html',
-//   styleUrls: ['./page-dream-analysis.component.scss'],
-//   imports:[
-//     EditTagComponent,
-//     IonList,IonItem,IonTextarea,IonButton
-//   ],
-//   standalone: true,
-// })
-// export class PageDreamAnalysisComponent  implements OnInit {
-
-//   // 梦境关键词
-//   dreamTags: Array<string> = []
-//   setTagsValue(ev:any){
-//     this.dreamTags = ev;
-//   }
-//   // 梦境描述
-//   dreamDesc:string = ""
-//   userInput(ev:any){
-//     this.dreamDesc = ev.detail.value
-//   }
-
-//   //解析梦境
-//   async analysisDream(){
-//     console.log("关键词",this.dreamTags)
-//     console.log("描述",this.dreamDesc)
-//     console.log("开始解析梦境")
-//     let prompt = `您作为一名专业的梦境解析大师，请帮我解析以下梦境。关键词：${this.dreamTags.join(",")}，梦境描述：${this.dreamDesc}`
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: string = "";
+  isComplete: boolean = false;
 
+  constructor() {}
 
-//     let TOKEN = `r:e20ef91b23e2c21d45cb50cd5ec1a122`;
-//     localStorage.setItem("token",TOKEN)
+  ngOnInit(): void {}
 
-//     let messageList:any = [
-//       {
-//         role:"system",content:`${new Date().toLocaleString()}`
-//       },
-//       {
-//         role:"user",content:prompt
-//       }
-//     ]
+  // 用户输入处理
+  backgroundInput(event: CustomEvent) {
+    this.background = event.detail.value;
+  }
 
-//     FmodeChatCompletion
+  promptInput(event: CustomEvent) {
+    this.userPrompt = event.detail.value;
+  }
 
-//     // 创建并发起一条新的消息补全
-//     let completion = new FmodeChatCompletion(messageList)
-//     // 持续更新事件推送的消息体内容绑定至消息变量
-//     completion.sendCompletion().subscribe((message:any)=>{
-//       this.dreamDesc= message
-//     })
+  // 发送消息方法
+  sendMessage() {
+    this.isComplete = false; // 开始发送，重置完成状态
+    console.log("创建消息模板");
 
-//     setInterval(()=>{
-//       console.log(messageList)
-//       this.dreamDesc = messageList[messageList.length-1]?.content;
-//     },1000)
-//   }
-  
+    const PromptTemplate = `
+      对于最近发生的${this.background}，请你作为一名解梦师，请根据用户对于梦境的描述，给用户一些解释和建议。
+      以下是用户的梦境：${this.userPrompt}
+    `;
 
-//   constructor() { }
+    console.log('PromptTemplate:', PromptTemplate); // 添加日志
 
-//   ngOnInit() {}
+    const completion = new FmodeChatCompletion([
+      { role: "system", content: "你是一名专业的解梦师。" }, // 可选的系统提示
+      { role: "user", content: PromptTemplate }
+    ]);
 
-// }
+    completion.sendCompletion().subscribe(
+      (message: any) => {
+        // 打印消息体
+        console.log("AI 回复:", message.content);
+        // 赋值消息内容给组件内属性
+        this.responseMsg = message.content;
+        if (message?.complete) {
+          this.isComplete = true;
+        }
+      },
+      (error: any) => {
+        // 处理错误
+        console.error("AI 回复错误:", error);
+        this.responseMsg = "抱歉，发生了错误。请稍后再试。";
+        this.isComplete = true; // 根据需求设置
+      }
+    );
+  }
+}