2 Revize cc8ad45fa1 ... 32824ccdbc

Autor SHA1 Zpráva Datum
  cpy 32824ccdbc 123 před 5 měsíci
  cpy 5f95a929bd 123 před 5 měsíci

+ 58 - 48
sport-app/src/app/tab2/tab2.page.html

@@ -1,48 +1,58 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      生成个性化运动计划
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <!-- 用户输入身高 -->
-  <ion-item>
-    <ion-label position="floating">身高 (cm)</ion-label>
-    <ion-input [(ngModel)]="userHeight" type="number" placeholder="请输入身高" required></ion-input>
-  </ion-item>
-
-  <!-- 用户输入体重 -->
-  <ion-item>
-    <ion-label position="floating">体重 (kg)</ion-label>
-    <ion-input [(ngModel)]="userWeight" type="number" placeholder="请输入体重" required></ion-input>
-  </ion-item>
-
-  <!-- 用户选择健身目标 -->
-  <ion-item>
-    <ion-label position="floating">健身目标</ion-label>
-    <ion-select [(ngModel)]="userGoal" placeholder="请选择健身目标" required>
-      <ion-select-option value="增肌">增肌</ion-select-option>
-      <ion-select-option value="减脂">减脂</ion-select-option>
-      <ion-select-option value="保持体形">保持体形</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <!-- 用户输入兴趣爱好 -->
-  
-
-  <!-- 执行生成运动计划的按钮 -->
-  <ion-button (click)="generateWorkoutPlan()" expand="block">生成运动计划</ion-button>
-  
-  <!-- 展示生成的运动计划 -->
-  <div *ngIf="workoutPlan">
-    <h2>个性化运动计划</h2>
-    <p>{{ workoutPlan }}</p>
-  </div>
-
-  <!-- 错误消息展示 -->
-  <div *ngIf="errorMessage" style="color: red;">
-    <p>{{ errorMessage }}</p>
-  </div>
-</ion-content>
+<ion-header>
+      <ion-toolbar>
+        <ion-title>运动计划生成</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content>
+      <!-- 输入字段 -->
+      <ion-item>
+        <ion-label position="floating">体重</ion-label>
+        <ion-input [(ngModel)]="userWeight" type="number" placeholder="请输入您的体重"></ion-input>
+      </ion-item>
+      
+      <ion-item>
+        <ion-label position="floating">身高</ion-label>
+        <ion-input [(ngModel)]="userHeight" type="number" placeholder="请输入您的身高"></ion-input>
+      </ion-item>
+    
+      <ion-item>
+        <ion-label position="floating">运动偏好</ion-label>
+        <ion-select [(ngModel)]="userPreference" placeholder="选择您的运动偏好">
+          <ion-select-option value="跑步">跑步</ion-select-option>
+          <ion-select-option value="游泳">游泳</ion-select-option>
+          <ion-select-option value="健身">健身</ion-select-option>
+        </ion-select>
+      </ion-item>
+    
+      <ion-item>
+        <ion-label position="floating">运动目标</ion-label>
+        <ion-select [(ngModel)]="userGoal" placeholder="选择您的目标">
+          <ion-select-option value="减脂">减脂</ion-select-option>
+          <ion-select-option value="增肌">增肌</ion-select-option>
+          <ion-select-option value="维持">维持</ion-select-option>
+        </ion-select>
+      </ion-item>
+    
+      <!-- 生成计划按钮 -->
+      <ion-button expand="full" (click)="generatePlan()">生成运动计划</ion-button>
+    
+      <!-- 显示生成的运动计划 -->
+      <div *ngIf="responsePlan">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>生成的运动计划</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+              @if(!isComplete){
+                  <p>{{ responsePlan }}</p >
+              }
+            
+          </ion-card-content>
+        </ion-card>
+      </div>
+      @if(isComplete){
+      <fm-markdown-preview class="content-style" [content]="responsePlan"></fm-markdown-preview>
+      }
+  </ion-content>
+    

+ 55 - 48
sport-app/src/app/tab2/tab2.page.ts

@@ -1,59 +1,66 @@
 import { Component } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
-import { FormsModule } from '@angular/forms';
-import { FmodeChatCompletion } from 'fmode-ng';
-import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng'; // 你的外部 API 相关导入
+
 @Component({
-  selector: 'app-tab2',
-  templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss'],
-  standalone: true,
-  imports: [
-    IonicModule,
-    FormsModule,CommonModule // 导入 FormsModule 来支持 ngModel 双向绑定
-  ]
+  selector: 'app-tab2',
+  templateUrl: 'tab2.page.html',
+  styleUrls: ['tab2.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    CommonModule,
+    MarkdownPreviewModule  
+  ]
 })
 export class Tab2Page {
-  // 用户输入数据
-  userHeight: number = 170;   // 默认身高
-  userWeight: number = 65;    // 默认体重
-  userGoal: string = '';      // 健身目标
-
-
-  // 生成的运动计划
-  workoutPlan: string = '';
-  errorMessage: string = '';  // 错误消息
-
-  constructor() {}
+  // 用户输入的变量
+  userWeight: number = 70;   // 默认体重
+  userHeight: number = 175;  // 默认身高
+  userPreference: string = "跑步"; // 默认运动偏好
+  userGoal: string = "减脂"; // 默认目标
 
-  // 处理用户输入并生成运动计划
-  generateWorkoutPlan() {
-    // 清空之前的错误消息和运动计划
-    this.workoutPlan = '';
-    this.errorMessage = '';
+  // 用于显示生成的运动计划
+  responsePlan: string = "";
+isComplete:boolean = false;
+  constructor() {}
 
-    // 检查用户输入是否完整
-   
+  ngOnInit() {}
 
-    // 生成模拟运动计划
-    this.workoutPlan = this.generateMockWorkoutPlan(this.userGoal);
+  // 当用户输入信息后,点击按钮生成运动计划
+  generatePlan() {
+    // 打印输入的信息,便于调试
+    console.log("用户体重:", this.userWeight);
+    console.log("用户身高:", this.userHeight);
+    console.log("用户运动偏好:", this.userPreference);
+    console.log("用户目标:", this.userGoal);
 
-    if (!this.workoutPlan) {
-      this.errorMessage = '无法生成运动计划,请稍后再试。';
-    }
-  }
+    // 创建一个包含用户输入的消息数组
+    let promptMessage = `根据以下信息,生成一个适合的运动计划:
+      体重: ${this.userWeight}kg
+      身高: ${this.userHeight}cm
+      运动偏好: ${this.userPreference}
+      目标: ${this.userGoal}`;
 
-  // 模拟根据健身目标生成运动计划
-  generateMockWorkoutPlan(goal: string): string {
-    switch (goal) {
-      case '增肌':
-        return '增肌计划:每周进行3次重量训练,结合有氧运动。包括卧推、深蹲、硬拉等基础动作。';
-      case '减脂':
-        return '减脂计划:每周进行4次高强度间歇训练(HIIT),结合适量的有氧运动,如跑步、游泳等。';
-      case '保持体形':
-        return '保持体形计划:每周进行3次中等强度的力量训练和2次有氧运动,保持体型的同时增强肌肉耐力。';
-      default:
-        return '';
-    }
-  }
+    // 调用 AI 接口生成运动计划
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "你是一个运动专家,能够根据用户的体重、身高、运动偏好和目标,生成个性化的运动计划。" },
+      { role: "user", content: promptMessage }
+    ]);
+    
+    // 发送请求并订阅生成的计划
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印生成的计划内容,便于调试
+      console.log("生成的运动计划:", message.content);
+      
+      // 将生成的计划赋值给组件变量,用于展示
+      this.responsePlan = message.content;
+      if(message?.complete){
+        this.isComplete = true
+      }
+    });
+  }
 }