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-consult-picture',
  templateUrl: './consult-picture.component.html',
  styleUrls: ['./consult-picture.component.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, 
    IonButton,IonInput,
    IonTextarea
  ],
})
export class ConsultPictureComponent  implements OnInit {

  userPrompt:string = "app名称为...的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 || [];
    })
  }
  PictureDescResult:string = `` // 画面描述结果
  async createImage(){
    this.imagineWork = new ImagineWork();
    //文本生成
    let PromptTemplate = `请你作为一名专业的设计师，结合logo的基础设计元素帮我设计一个贴切我项目的logo
    要求如下：
    ${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() {
    }
}