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 = "犬吠水声中，桃花带露浓。\n树深时见鹿，溪午不闻钟。"
  promptInput(ev:any){
    this.userPrompt = ev.detail.value;
  }
  imagineWork:ImagineWork|undefined
  images:Array<string> = []
  constructor(
  ){
    // 示例任务，自己生成图片后请存储新的ID
    this.imagineWork = new ImagineWork("4mPR0IW1i5");
    this.imagineWork.fetchTask().then(work=>{
      this.images = this.imagineWork?.images || [];
    })
  }

  PictureDescResult:string = `` // 画面描述结果
  async createImage(){
    this.imagineWork = new ImagineWork();
    // 文本生成
    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");
          }
      })
      }
    })

    
  }
  ngOnInit() {}

}
