12.1

travel-app/angular.json

@@ -126,7 +126,10 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@ionic/angular-toolkit"]
+    "schematicCollections": [
+      "@ionic/angular-toolkit"
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

travel-app/package.json

@@ -27,6 +27,7 @@
     "@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",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

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

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common'; // 导入 CommonModule
-import { FormsModule } from '@angular/forms'; // 导入 FormsModule
-import { IonicModule } from '@ionic/angular'; // 导入 IonicModule
-
-import { Tab1Page } from './tab1.page'; // 导入当前页面组件
-
-@NgModule({
-  imports: [
-    CommonModule, // 确保 CommonModule 在 imports 中
-    FormsModule, // 确保 FormsModule 在 imports 中
-    IonicModule // 确保 IonicModule 在 imports 中
-  ],
-  declarations: [Tab1Page] // 声明当前页面组件
-})
-export class Tab1PageModule {}

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

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { 
   IonButton, 
   IonCard, 
@@ -73,7 +74,11 @@ export class Tab1Page {
     { userAvatar: 'assets/images/user2.jpg', username: '用户2', content: '我喜欢这个地方！', rating: 4 }
   ]; // 用户反馈数据示例
 
-  constructor() {}
+  constructor(private router: Router) {}
+
+  goToPage1(){
+    this.router.navigate(['/tabs/travel1'])
+  }
 
   onSearch(event: any) {
     const query = event.target.value;

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

@@ -22,6 +22,12 @@ export const routes: Routes = [
           import('../tab3/tab3.page').then((m) => m.Tab3Page),
       },
       {
+        path: 'travel',
+        loadComponent: () =>
+          import('../travel1/travel1.component').then((m) => m.Travel1Component),
+      },
+      {
+        
         path: '',
         redirectTo: '/tabs/tab1',
         pathMatch: 'full',

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

@@ -0,0 +1,31 @@
+<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.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { Travel1Component } from './travel1.component';
+
+describe('Travel1Component', () => {
+  let component: Travel1Component;
+  let fixture: ComponentFixture<Travel1Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Travel1Component],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Travel1Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,68 @@
+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() {}
+
+}

travel-app/src/main.ts

@@ -5,10 +5,28 @@ import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalo
 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')
+
+// 注意：替换Token 根据Token设置Parse服务帐套权限
+Parse.User.become("r:E4KpGvTEto-139700736071732983416")
+
+
 bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
+     // 添加HttpClient供应器
+     provideHttpClient(),
+      // 添加Diagnostic
+    Diagnostic,
     provideRouter(routes, withPreloading(PreloadAllModules)),
   ],
 });

travel-app/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "allowSyntheticDefaultImports":true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,