|
|
@@ -1,41 +1,51 @@
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
-import { Component, OnInit } from '@angular/core';
|
|
|
-import { IonButton, IonContent, IonHeader, IonInput, IonSpinner, IonTextarea, IonTitle, IonToolbar } from '@ionic/angular/standalone';
|
|
|
-/** 引用：从fmode-ng库引用FmodeChatCompletion类 */
|
|
|
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
|
|
+import {
|
|
|
+ IonButton,
|
|
|
+ IonContent,
|
|
|
+ IonHeader,
|
|
|
+ IonIcon,
|
|
|
+ IonInput,
|
|
|
+ IonItem,
|
|
|
+ IonLabel,
|
|
|
+ IonSpinner,
|
|
|
+ IonTextarea,
|
|
|
+ IonTitle,
|
|
|
+ IonToolbar,
|
|
|
+} from '@ionic/angular/standalone';
|
|
|
import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-page-dream-analysis',
|
|
|
templateUrl: './page-dream-analysis.component.html',
|
|
|
styleUrls: ['./page-dream-analysis.component.scss'],
|
|
|
+ encapsulation: ViewEncapsulation.None, // 添加这一行
|
|
|
standalone: true,
|
|
|
imports: [
|
|
|
- IonHeader,
|
|
|
- IonToolbar,
|
|
|
- IonTitle,
|
|
|
- IonContent,
|
|
|
+ IonHeader,
|
|
|
+ IonToolbar,
|
|
|
+ IonTitle,
|
|
|
+ IonIcon,
|
|
|
+ IonContent,
|
|
|
IonButton,
|
|
|
IonTextarea,
|
|
|
IonInput,
|
|
|
+ IonItem,
|
|
|
+ IonLabel,
|
|
|
IonSpinner,
|
|
|
MarkdownPreviewModule,
|
|
|
- CommonModule
|
|
|
+ CommonModule,
|
|
|
],
|
|
|
})
|
|
|
export class PageDreamAnalysisComponent implements OnInit {
|
|
|
- // 用户输入提示词
|
|
|
- background: string = "梦境背景";
|
|
|
- userPrompt: string = "请描述您的梦境内容";
|
|
|
-
|
|
|
- // 属性：组件内用于展示消息内容的变量
|
|
|
- responseMsg: string = "";
|
|
|
+ background: string = '梦境背景';
|
|
|
+ userPrompt: string = '请描述您的梦境内容';
|
|
|
+ responseMsg: string = '';
|
|
|
isComplete: boolean = false;
|
|
|
-
|
|
|
- constructor() {}
|
|
|
+ isLoading: boolean = false; // 新增
|
|
|
|
|
|
ngOnInit(): void {}
|
|
|
|
|
|
- // 用户输入处理
|
|
|
backgroundInput(event: CustomEvent) {
|
|
|
this.background = event.detail.value;
|
|
|
}
|
|
|
@@ -44,38 +54,32 @@ export class PageDreamAnalysisComponent implements OnInit {
|
|
|
this.userPrompt = event.detail.value;
|
|
|
}
|
|
|
|
|
|
- // 发送消息方法
|
|
|
sendMessage() {
|
|
|
- this.isComplete = false; // 开始发送，重置完成状态
|
|
|
- console.log("创建消息模板");
|
|
|
-
|
|
|
+ this.isComplete = false;
|
|
|
+ this.isLoading = true; // 开始加载
|
|
|
const PromptTemplate = `
|
|
|
- 对于最近发生的${this.background}，请你作为一名解梦师，请根据用户对于梦境的描述，给用户一些解释和建议。
|
|
|
+ 对于最近发生的${this.background}，请你作为一名解梦师，根据用户的梦境描述，给出一些解释和建议。
|
|
|
以下是用户的梦境：${this.userPrompt}
|
|
|
`;
|
|
|
|
|
|
- console.log('PromptTemplate:', PromptTemplate); // 添加日志
|
|
|
-
|
|
|
const completion = new FmodeChatCompletion([
|
|
|
- { role: "system", content: "你是一名专业的解梦师。" }, // 可选的系统提示
|
|
|
- { role: "user", content: PromptTemplate }
|
|
|
+ { 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;
|
|
|
+ this.isLoading = false; // 加载结束
|
|
|
+ this.isComplete = true; // 解析完成
|
|
|
}
|
|
|
},
|
|
|
(error: any) => {
|
|
|
- // 处理错误
|
|
|
- console.error("AI 回复错误:", error);
|
|
|
- this.responseMsg = "抱歉，发生了错误。请稍后再试。";
|
|
|
- this.isComplete = true; // 根据需求设置
|
|
|
+ console.error('AI 回复错误:', error);
|
|
|
+ this.responseMsg = '抱歉，发生了错误。请稍后再试。';
|
|
|
+ this.isLoading = false; // 加载结束
|
|
|
+ this.isComplete = true;
|
|
|
}
|
|
|
);
|
|
|
}
|
