import { Component, OnInit } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonInput } from '@ionic/angular/standalone';
import { IonTextarea, IonButton } from "@ionic/angular/standalone";
import { DalleOptions, ImagineWork, FmodeChatCompletion } from 'fmode-ng';
@Component({
  selector: 'app-page-pictrue',
  templateUrl: './page-pictrue.component.html',
  styleUrls: ['./page-pictrue.component.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent,
    IonButton,
    IonInput,
    IonTextarea
  ],
})
export class PagePictrueComponent implements OnInit {

  userPrompt: string = "智慧健身logo"
  promptInput(ev: any) {
    this.userPrompt = ev.detail.value;
  }
  imagineWork: ImagineWork | undefined
  images: Array<string> = []
  constructor(
  ) {
    // 示例任务，自己生成图片后请存储新的ID
    this.imagineWork = new ImagineWork("lpJGiFwWeA");
    this.imagineWork.fetchTask().then(work => {
      this.images = this.imagineWork?.images || [];
    })
  }
  description: string = ``
  async createImage() {
    this.imagineWork = new ImagineWork();
    //文本生成
    let ProTemplate = `您是一名专业的logo设计师，请您根据以上内容设计一副(只要一副就可以了)非常形象并且简约易懂的logo，logo要求如下：${this.userPrompt}`
    let messageList = new FmodeChatCompletion([
      { role: "system", content: '' },
      { role: "user", content: ProTemplate }
    ]);
    messageList.sendCompletion().subscribe((message: any) => {
      // 打印消息体
      console.log(message.content)
      // 赋值消息内容给组件内属性
      this.description = message.content
      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
        let Pictruedescriprion = `${this.description},风格简约，易懂。`
        let options: DalleOptions = { prompt: Pictruedescriprion }
        //图片生成
        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() { }

}
