12.2

travel-app/src/app/tab1/tab1.page.html

@@ -25,7 +25,7 @@
     </ion-card-header>
     <ion-card-content>
       <ion-list>
-        <ion-item *ngFor="let route of recommendedRoutes" (click)="viewRoute(route)">
+        <ion-item *ngFor="let route of recommendedRoutes">
           <ion-thumbnail slot="start">
             <img [src]="route.thumbnail" />
           </ion-thumbnail>
@@ -33,7 +33,7 @@
             <h2>{{ route.title }}</h2>
             <p>{{ route.description }}</p>
           </ion-label>
-          <ion-button slot="end" fill="outline">立即查看</ion-button>
+          <ion-button slot="end" fill="outline" (click)="goToPage1()">立即查看</ion-button>
         </ion-item>
       </ion-list>
     </ion-card-content>

travel-app/src/app/tab1/tab1.page.ts

@@ -77,9 +77,10 @@ export class Tab1Page {
   constructor(private router: Router) {}
 
   goToPage1(){
-    this.router.navigate(['/tabs/travel1'])
+    this.router.navigate(['/tabs/TengwangPavilion'])
   }
 
+
   onSearch(event: any) {
     const query = event.target.value;
     // 处理搜索逻辑，例如过滤推荐路线或热门景点

travel-app/src/app/tabs/tabs.routes.ts

@@ -22,9 +22,9 @@ export const routes: Routes = [
           import('../tab3/tab3.page').then((m) => m.Tab3Page),
       },
       {
-        path: 'travel',
+        path: 'TengwangPavilion',
         loadComponent: () =>
-          import('../travel1/travel1.component').then((m) => m.Travel1Component),
+          import('../tengwang-pavilion/tengwang-pavilion.component').then((m) => m.TengwangPavilionComponent),
       },
       {
         

travel-app/src/app/tengwang-pavilion/tengwang-pavilion.component.html

@@ -0,0 +1,16 @@
+<ion-content>
+
+  <h1>滕王阁</h1>
+  <ion-input [value]="tengwangge" (ionInput)="tengwanggeInput($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>
+
+</ion-content>
+

travel-app/src/app/travel1/travel1.component.spec.ts → travel-app/src/app/tengwang-pavilion/tengwang-pavilion.component.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { Travel1Component } from './travel1.component';
+import { TengwangPavilionComponent } from './tengwang-pavilion.component';
 
-describe('Travel1Component', () => {
-  let component: Travel1Component;
-  let fixture: ComponentFixture<Travel1Component>;
+describe('TengwangPavilionComponent', () => {
+  let component: TengwangPavilionComponent;
+  let fixture: ComponentFixture<TengwangPavilionComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [Travel1Component],
+      imports: [TengwangPavilionComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(Travel1Component);
+    fixture = TestBed.createComponent(TengwangPavilionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

travel-app/src/app/tengwang-pavilion/tengwang-pavilion.component.ts

@@ -0,0 +1,47 @@
+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';
+
+@Component({
+  selector: 'app-tengwang-pavilion',
+  templateUrl: './tengwang-pavilion.component.html',
+  styleUrls: ['./tengwang-pavilion.component.scss'],
+  standalone: true,
+
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonTextarea,IonInput],
+})
+
+export class TengwangPavilionComponent  implements OnInit {
+  constructor() {}
+  ngOnInit(){}
+  // 用户输入提示词
+  tengwangge:string = "时间"
+  tengwanggeInput(ev:any){
+    this.tengwangge = ev.detail.value;
+  }
+  userPrompt:string = "请描述您的需求"
+  promptInput(ev:any){
+    this.userPrompt = ev.detail.value;
+  }
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg:any = ""
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  sendMessage(){
+    console.log("create")
+
+    let PromptTemplate = `您作为一名专业的滕王阁导游，请您根据用户描述的需求，给出旅游路线，用户游玩的时间是${this.tengwangge}
+    以下是用户的口述：${this.userPrompt}
+    `
+    let completion = new FmodeChatCompletion([
+      {role:"system",content:""},
+      {role:"user",content:PromptTemplate}
+    ])
+    completion.sendCompletion().subscribe((message:any)=>{
+      // 打印消息体
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+    })
+  }
+}

travel-app/src/app/travel1/travel1.component.html

@@ -1,31 +0,0 @@
-<p>
-  <ion-header [translucent]="true">
-    <ion-toolbar>
-      <ion-title>
-        示例：南昌特色{{imagineWork?.progress || 0}}
-      </ion-title> 
-    </ion-toolbar>
-  </ion-header>
-  
-  <ion-content [fullscreen]="true">
-    <!-- 生成提示词 -->
-    <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="南昌特色" autoGrow="true"></ion-textarea>
-    <ion-button (click)="createImage()" expand="block">生成南昌特色图案</ion-button>
-    <!-- 生成结果 -->
-    @if(images.length) {
-      @for(imageUrl of images;track imageUrl){
-        <img [src]="imageUrl" alt="" srcset="">
-      }
-    }
-    <!-- 生成状态 -->
-    @if(!images.length){
-      @if(imagineWork){
-        <h1>生成中</h1>
-      }
-      @if(!imagineWork){
-        <h1>未开始</h1>
-      }
-    }
-  
-  </ion-content>
-</p>

travel-app/src/app/travel1/travel1.component.ts

@@ -1,68 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { IonTextarea, IonButton,IonInput } from "@ionic/angular/standalone";
-import { DalleOptions, ImagineWork } from 'fmode-ng';
-
-
-@Component({
-  selector: 'app-travel1',
-  templateUrl: './travel1.component.html',
-  styleUrls: ['./travel1.component.scss'],
-  standalone: true,
-  imports: [
-    IonHeader, IonToolbar, IonTitle, IonContent, 
-    IonButton,
-    IonInput,
-    IonTextarea
-  ],
-})
-export class Travel1Component  implements OnInit {
-
-  userPrompt:string = "南昌特色，天下英雄城"
-  promptInput(ev:any){
-    this.userPrompt = ev.detail.value;
-  }
-  imagineWork:ImagineWork|undefined
-  images:Array<string> = []
-  constructor(
-    private cdRef:ChangeDetectorRef
-  ){
-    // 示例任务，自己生成图片后请存储新的ID
-    this.imagineWork = new ImagineWork("lpJGiFwWeA");
-    this.imagineWork.fetchTask().then(work=>{
-      this.images = this.imagineWork?.images || [];
-    })
-  }
-
-  async createImage(){
-    this.imagineWork = new ImagineWork();
-    let PromptTemplate = `您是一名专业的美术画家，请您根据上面的语句，将其描述的南昌画面、场景等细节描述出来
-    南昌特色：
-    ${this.userPrompt}
-    `
-    let PictureDescResult = `` //画面描述结果
-    let completion = new FmodeChatCompletion([
-      {role:"system",content:""},
-      {role:"user",content:PromptTemplate}
-    ])
-    completion.sendCompletion().subscribe((message:any)=>{
-      // 打印消息体
-      console.log(message.content)
-      // 赋值消息内容给组件内属性
-      this.PictureDescResult = message.content
-      if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
-
-
-    let options:DalleOptions = {prompt:this.userPrompt}
-    this.imagineWork.draw(options).subscribe(work=>{
-      console.log("imagineWork",work?.toJSON())
-      console.log("images",work?.get("images"))
-      if(work?.get("images")?.length){
-        this.images = work?.get("images");
-      }
-    })
-  }
-
-  ngOnInit() {}
-
-}