update: Optimize aiplan page ai generation plan function

TFPower-app/angular.json

@@ -31,19 +31,8 @@
                 "output": "assets"
               }
             ],
-            "styles": [
-              "src/global.scss",
-              "src/theme/variables.scss",
-              "node_modules/prismjs/themes/prism-coy.css",
-              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
-            ],
-            "scripts": [
-              "node_modules/marked/marked.min.js",
-              "node_modules/prismjs/prism.js",
-              "node_modules/prismjs/components/prism-properties.min.js",
-              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js",
-              "node_modules/prismjs/components/prism-typescript.min.js"
-            ]
+            "styles": ["src/global.scss", "src/theme/variables.scss"],
+            "scripts": []
           },
           "configurations": {
             "production": {

TFPower-app/package.json

@@ -27,8 +27,8 @@
     "@capacitor/keyboard": "6.0.3",
     "@capacitor/status-bar": "6.0.2",
     "@ionic/angular": "^8.0.0",
+    "fmode-ng": "^0.0.62",
     "ionicons": "^7.2.1",
-    "ngx-markdown": "^19.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

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

@@ -40,7 +40,8 @@
       <ion-grid [fixed]="true">
         <ion-row style="text-align: center;">
           <ion-col><ion-button fill="outline" (click)="reset()">重置</ion-button></ion-col>
-          <ion-col><ion-button fill="outline" (click)="submit()">确定</ion-button></ion-col>
+          <!-- <ion-col><ion-button fill="outline" (click)="submit()">确定</ion-button></ion-col> -->
+          <ion-col><ion-button fill="outline" (click)="sendMessage()">确定</ion-button></ion-col>
         </ion-row>
       </ion-grid>
     </ion-list>
@@ -55,7 +56,16 @@
     </ion-card-header>
     <ion-list>
       <ion-item>
-        {{aiplan}}
+        <!-- {{aiplan}} -->
+        <!-- 展示：返回消息内容 -->
+        <!-- 消息传输过程中，实时预览 -->
+        @if(!isComplete){
+        <div>{{aiplan}}</div>
+        }
+        <!-- 消息传输完成后，实时预览Markdown格式 -->
+        @if(isComplete){
+        <fm-markdown-preview class="content-style" [content]="aiplan"></fm-markdown-preview>
+        }
       </ion-item>
     </ion-list>
   </ion-card>

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

@@ -17,7 +17,8 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { TestChatCompletion } from './fmode-chat-completion';
+/** 引用：从fmode-ng库引用FmodeChatCompletion类 */
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
   selector: 'app-aiplan-page',
@@ -41,6 +42,7 @@ import { TestChatCompletion } from './fmode-chat-completion';
     IonGrid,
     IonRow,
     IonCol,
+    MarkdownPreviewModule,
   ],
 })
 export class AiplanPageComponent implements OnInit {
@@ -77,18 +79,74 @@ export class AiplanPageComponent implements OnInit {
     });
   }
 
-  submit() {
-    // 提交表单数据
-    // let data = {
-    //   trainingType: this.trainingType,
-    //   weight: this.weight,
-    //   trainingTime: this.trainingTime,
-    //   trainingIntensity: this.trainingIntensity,
-    //   trainingSite: this.trainingSite,
-    //   needs: this.needs,
-    // };
+  // submit() {
+  //   // 提交表单数据
+  //   // let data = {
+  //   //   trainingType: this.trainingType,
+  //   //   weight: this.weight,
+  //   //   trainingTime: this.trainingTime,
+  //   //   trainingIntensity: this.trainingIntensity,
+  //   //   trainingSite: this.trainingSite,
+  //   //   needs: this.needs,
+  //   // };
 
+  //   // 用户输入数据提取
+  //   let ipts = document.querySelectorAll('ion-input');
+  //   let textarea = document.querySelectorAll('ion-textarea');
+  //   let userinputs = '';
+  //   ipts.forEach((ipt) => {
+  //     userinputs += ipt.value + ' ';
+  //   });
+  //   textarea.forEach((text) => {
+  //     userinputs += text.value + ' ';
+  //   });
+  //   let userinputlist = userinputs.split(' ');
+  //   let data = {
+  //     trainingType: userinputlist[0],
+  //     sex: userinputlist[1],
+  //     weight: userinputlist[2],
+  //     trainingTime: userinputlist[3],
+  //     trainingIntensity: userinputlist[4],
+  //     trainingSite: userinputlist[5],
+  //     needs: userinputlist[6],
+  //   };
+  //   console.log(data);
+
+  //   // ai对话实现
+  //   let prompt = `我是一名体重为${data.weight}kg的${data.sex}性，我只有${data.trainingTime}分钟来${data.trainingType}，我希望训练强度${data.trainingIntensity}一点，而我想训练的部位为${data.trainingSite}， 一些其他的需求有${data.needs}。 请你作为一名专业的健身教练，根据我提供的信息，为我制定${data.trainingType}计划。`;
+  //   console.log(prompt);
+
+  //   let token = `r:E4KpGvTEto-187799890851732794669`;
+  //   localStorage.setItem('token', token);
+
+  //   let messageList = [
+  //     {
+  //       role: 'system',
+  //       content: `${new Date().toLocaleString}`,
+  //     },
+  //     {
+  //       role: 'user',
+  //       content: prompt,
+  //     },
+  //   ];
+
+  //   //fmode-chat
+  //   let completion = new TestChatCompletion(messageList);
+  //   completion.createCompletionByStream();
+
+  //   this.aiplan = '';
+  //   setInterval(() => {
+  //     // console.log(messageList);
+  //     this.aiplan = messageList[messageList.length - 1].content;
+  //   }, 1000);
+  // }
+
+  isComplete: boolean = false;
+
+  sendMessage() {
     // 用户输入数据提取
+    this.isComplete = false;
+    this.aiplan = '';
     let ipts = document.querySelectorAll('ion-input');
     let textarea = document.querySelectorAll('ion-textarea');
     let userinputs = '';
@@ -114,28 +172,20 @@ export class AiplanPageComponent implements OnInit {
     let prompt = `我是一名体重为${data.weight}kg的${data.sex}性，我只有${data.trainingTime}分钟来${data.trainingType}，我希望训练强度${data.trainingIntensity}一点，而我想训练的部位为${data.trainingSite}， 一些其他的需求有${data.needs}。 请你作为一名专业的健身教练，根据我提供的信息，为我制定${data.trainingType}计划。`;
     console.log(prompt);
 
-    let token = `r:E4KpGvTEto-187799890851732794669`;
-    localStorage.setItem('token', token);
-
-    let messageList = [
-      {
-        role: 'system',
-        content: `${new Date().toLocaleString}`,
-      },
-      {
-        role: 'user',
-        content: prompt,
-      },
-    ];
+    let completion = new FmodeChatCompletion([
+      { role: 'system', content: '' },
+      { role: 'user', content: prompt },
+    ]);
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      // console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.aiplan = message.content;
 
-    //fmode-chat
-    let completion = new TestChatCompletion(messageList);
-    completion.createCompletionByStream();
-
-    this.aiplan = '';
-    setInterval(() => {
-      // console.log(messageList);
-      this.aiplan = messageList[messageList.length - 1].content;
-    }, 1000);
+      if (message?.complete) {
+        // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+      }
+    });
   }
 }

TFPower-app/src/app/app.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MarkdownModule } from 'ngx-markdown';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  imports: [MarkdownModule.forRoot(), AppComponent],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}

TFPower-app/src/app/todo-edit/todo-edit.component.ts

@@ -44,7 +44,7 @@ export class TodoEditComponent implements OnInit {
   ngOnInit() {}
 
   userInputText: string = '';
-  todolist: Array<string> = [];
+  todolist: Array<string> = ['have a good day'];
 
   userInput(ev: any) {
     this.userInputText = ev.detail.value;

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

@@ -36,7 +36,7 @@ export class TodolistPageComponent implements OnInit {
   constructor() {}
   ngOnInit() {}
 
-  todolist: Array<string> = ['have a good day'];
+  todolist: Array<string> = [];
   changeTodolist(ev: any) {
     this.todolist = ev;
   }

TFPower-app/src/main.ts

@@ -1,14 +1,41 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
-import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+import {
+  RouteReuseStrategy,
+  provideRouter,
+  withPreloading,
+  PreloadAllModules,
+} from '@angular/router';
+import {
+  IonicRouteStrategy,
+  provideIonicAngular,
+} from '@ionic/angular/standalone';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
 
+// 引用HttpClient方法
+import { provideHttpClient } from '@angular/common/http';
+// 引用移动端授权检测供应器
+import { Diagnostic } from '@awesome-cordova-plugins/diagnostic/ngx';
+// 设置Parse服务属性
+import Parse from 'parse';
+Parse.initialize('ncloudmaster');
+Parse.serverURL = 'https://server.fmode.cn/parse';
+localStorage.setItem(
+  'NOVA_APIG_SERVER',
+  'aHR0cHMlM0ElMkYlMkZzZXJ2ZXIuZm1vZGUuY24lMkZhcGklMkZhcGlnJTJG'
+);
+
+// let token = `r:E4KpGvTEto-187799890851732794669`;
+Parse.User.become('r:E4KpGvTEto-187799890851732794669');
 bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
     provideRouter(routes, withPreloading(PreloadAllModules)),
+    // 添加HttpClient供应器
+    provideHttpClient(),
+    // 添加Diagnostic
+    Diagnostic,
   ],
 });

TFPower-app/tsconfig.json

@@ -2,6 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,