s202226701018/wisdom-app/src/app/poem-picture/poem-picture.component.ts

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, FmodeChatCompletion } from 'fmode-ng';

@Component({
  selector: 'app-poem-picture',
  templateUrl: './poem-picture.component.html',
  styleUrls: ['./poem-picture.component.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, 
    IonButton,
    IonInput,
    IonTextarea
  ],
})

export class PoemPictureComponent  implements OnInit {
  /**
   * 用户输入的文本
   */
  userPrompt:string = ""
  promptInput(ev:any){
    console.log(ev.detail.value)
    if (ev.detail.value.length > 0){
      this.userPrompt = ev.detail.value;
    }
  }

  imagineWork:ImagineWork
  images:Array<string> = []
  constructor(
  ){
    // 示例任务，自己生成图片后请存储新的ID
    this.imagineWork = new ImagineWork("4mPR0IW1i5");
    this.imagineWork.fetchTask().then(work=>{
      if(work){
        this.imagineWork.id = work.id
      }
      this.images = this.imagineWork?.images || [];
    })
  }

  PictureDescResult:string = `` // 画面描述结果
  async createImage(){
    this.imagineWork = new ImagineWork();
    if (this.userPrompt.length > 0){
    // 文本生成
    let PromptTemplate = `您是一名专业的美术画家，请您根据下面提供的的内容，将其描述的画面、场景、人物、物品等用最简短的语言表达，直接写出画面，并且以中国的古风意境为主
    诗文如下：
    ${this.userPrompt}
    `
    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 PicturePrompt = `${this.PictureDescResult}\n风格：中国古风。画面不带任何文字。突出色彩。`
      let options:DalleOptions = {prompt:PicturePrompt}
      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");
          }
      })
      }
    })
  }
  else{
    this.userPrompt = "请提供您想要描述的诗文内容，我将根据其意境为您创作一幅古风画面的简短描述。"
  }
    
  }
  ngOnInit() {}

}