s202226701034/paint-app/src/app/picture/picture.component.ts

import { Component, OnInit } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonIcon, IonButtons } from '@ionic/angular/standalone';
import { IonTextarea, IonButton,IonInput } from "@ionic/angular/standalone";
import { DalleOptions, ImagineWork, FmodeChatCompletion } from 'fmode-ng';
import { Router } from '@angular/router';
import {chevronBack} from 'ionicons/icons';
addIcons({chevronBack})
import { addIcons } from 'ionicons';
import { CloudObject, CloudUser } from 'src/lib/ncloud';
@Component({
  selector: 'picture',
  templateUrl: './picture.component.html',
  styleUrls: ['./picture.component.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, 
    IonButton,
    IonInput,
    IonTextarea,IonItem,IonIcon,IonButtons
  ],
})
export class PictureComponent  implements OnInit {
  userPrompt: string = "请描述您的绘画想法"; // 用户输入的绘画想法
  promptInput(ev: any) {
    this.userPrompt = ev.detail.value; // 更新用户输入的绘画想法
  }
  
  imagineWork: ImagineWork | undefined; // 用于处理图像生成的实例
  images: Array<string> = []; // 存储生成的图像数组
  
  constructor(private router: Router) {
    // 初始化ImagineWork实例并获取初始任务
    this.imagineWork = new ImagineWork("");
    this.imagineWork.fetchTask().then(work => {
      this.images = this.imagineWork?.images || []; // 获取已有图像
      this.currentadivse = new CloudObject('padvise');
    });
  }
  
  PictureDescResult: string = ""; // 存储画面描述结果
  
  async createImage() {
    this.imagineWork = new ImagineWork(); // 创建新的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) {
        // 图片生成
        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");
            this.addadvise();
          }
        });
      }
    });
  }
  
  ngOnInit() {}

  gopage(){
    this.router.navigate(['/tabs/tab1'])
  }

  currentadivse: CloudObject | undefined; // 
  advisedata: any = {};
  async addadvise() {
    let currentUser = new CloudUser();
    if (currentUser?.id) {
      this.currentadivse?.addPointer('user', '_User', currentUser.id);
  }
    if(this.PictureDescResult){
      this.advisedata['content']=this.PictureDescResult;
      this.advisedata['type']='picture';
      this.advisedata['idea']=this.userPrompt;
    }
    if(this.images){
      this.advisedata['picture']=this.images[this.images.length-1];
    }
    this.currentadivse?.set(this.advisedata);
    await this.currentadivse?.save();
  }

}