123

sport-app/src/app/page-exercise/page-exercise.component.html

@@ -1,3 +1,14 @@
 <p>
   page-exercise works!
 </p>
+<ion-content>
+  <h1>兴趣爱好</h1>
+  <ion-input></ion-input>
+  <!-- 文本域：生成提示词 -->
+  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"></ion-textarea>
+  
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">消息生成</ion-button>
+    
+  <!-- 展示：返回消息内容 -->
+  <div>{{responseMsg}}</div></ion-content>

sport-app/src/app/page-exercise/page-exercise.component.ts

@@ -1,15 +1,40 @@
 import { Component, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonInput, IonTextarea, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { FmodeChatCompletion } from 'fmode-ng';
 
 @Component({
   selector: 'app-page-exercise',
   templateUrl: './page-exercise.component.html',
   styleUrls: ['./page-exercise.component.scss'],
   standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
+    IonTextarea,IonInput
+    ],
 })
 export class PageExerciseComponent  implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}
+  constructor() {}
+  ngOnInit(): void {
+    
+  }
+  // 用户输入提示词
+   userPrompt:string = "飞码产品LOGO，独角兽头部形象，极简风格，棱角分明，线条勾勒，蓝色紫色搭配。"
+  promptInput(ev:any){
+    this.userPrompt = ev.detail.value;
+  }
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg:any = ""
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  sendMessage(){
+    console.log("create")
+    let completion = new FmodeChatCompletion([
+      {role:"system",content:""},
+      {role:"user",content:this.userPrompt}
+    ])
+    completion.sendCompletion().subscribe((message:any)=>{
+      // 打印消息体
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+    })
+  }
+}

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

@@ -5,8 +5,22 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
+<h1>兴趣爱好</h1>
 
-<ion-content [fullscreen]="true">
+<ion-content>
+<!-- 文本域：生成提示词 -->
+<ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"></ion-textarea>
+
+<!-- 按钮：执行消息生成函数 -->
+<ion-button (click)="sendMessage()" expand="block">消息生成</ion-button>
+  
+<!-- 展示：返回消息内容 -->
+<div>{{responseMsg}}</div>
+</ion-content>
+
+
+
+<!-- <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">Tab 2</ion-title>
@@ -14,4 +28,4 @@
   </ion-header>
 
   <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+</ion-content> -->

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

@@ -1,16 +1,86 @@
+// import { Component } from '@angular/core';
+// import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+// import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+// import { FmodeChatCompletion } from 'fmode-ng';
+// import { IonButton, IonInput, IonTextarea } from '@ionic/angular';
+
+// @Component({
+//   selector: 'app-tab2',
+//   templateUrl: 'tab2.page.html',
+//   styleUrls: ['tab2.page.scss'],
+//   standalone: true,
+//   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, IonButton,
+//     IonTextarea,IonInput]
+// })
+// export class Tab2Page {
+
+//   constructor() {}
+//   // 用户输入提示词
+//    userPrompt:string = "飞码产品LOGO，独角兽头部形象，极简风格，棱角分明，线条勾勒，蓝色紫色搭配。"
+//   promptInput(ev:any){
+//     this.userPrompt = ev.detail.value;
+//   }
+//   // 属性：组件内用于展示消息内容的变量
+//   responseMsg:any = ""
+//   // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+//   sendMessage(){
+//     console.log("create")
+//     let completion = new FmodeChatCompletion([
+//       {role:"system",content:""},
+//       {role:"user",content:this.userPrompt}
+//     ])
+//     completion.sendCompletion().subscribe((message:any)=>{
+//       // 打印消息体
+//       console.log(message.content)
+//       // 赋值消息内容给组件内属性
+//       this.responseMsg = message.content
+//     })
+//   }
+
+// }
+
+
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonicModule } from '@ionic/angular';  // 导入 IonicModule
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { FmodeChatCompletion } from 'fmode-ng';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  standalone: true,  // 保留 standalone 属性
+  imports: [
+    IonicModule,  // 引入 IonicModule 来使用 Ionic 组件
+    ExploreContainerComponent  // 如果有其他自定义组件需要引入，也可以在这里加入
+  ]
 })
 export class Tab2Page {
 
   constructor() {}
-
+  
+  // 用户输入提示词
+  userPrompt: string = "为运动爱好者、健身教练、运动员提供AI助手，帮助他们制定个性化的运动计划、实时监测运动数据、分析训练效果，从而提升运动表现和健康水平。"
+  
+  promptInput(ev: any) {
+    this.userPrompt = ev.detail.value;
+  }
+  
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = ""
+  
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  sendMessage() {
+    console.log("create")
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: this.userPrompt }
+    ])
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+    })
+  }
 }