s202226701049/AIart-app/src/app/interest-picture/interest-picture.component.ts

import { Component, OnInit } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonProgressBar, IonButtons, IonBackButton, IonSpinner, IonIcon, IonButton } from '@ionic/angular/standalone';
import { IonTextarea } from "@ionic/angular/standalone";
import { DalleOptions, FmodeChatCompletion, ImagineWork } from 'fmode-ng';

@Component({
  selector: 'app-interest-picture',
  templateUrl: './interest-picture.component.html',
  styleUrls: ['./interest-picture.component.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent,
    IonProgressBar, IonButtons, IonBackButton,
    IonButton, IonTextarea, IonSpinner, IonIcon
  ],
})
export class InterestPictureComponent implements OnInit {
  userPrompt: string = "";
  PictureDescResult: string = '';
  imagineWork: ImagineWork | undefined;
  images: Array<string> = [];
  likedImages: Set<string> = new Set();

  constructor() {
    this.initializeWork();
  }

  ngOnInit(): void { }

  private initializeWork() {
    // 初始化或重置工作状态
    this.imagineWork = undefined;
    this.images = [];
    this.PictureDescResult = '';
  }

  promptInput(ev: any) {
    this.userPrompt = ev.detail.value;
  }

  async createImage() {
    if (!this.userPrompt.trim()) {
      this.showToast('请输入创作描述');
      return;
    }

    this.initializeWork();
    this.imagineWork = new ImagineWork();

    const promptTemplate = `
      您是一名专业的艺术创作顾问，请根据用户的描述，用简练的专业语言重新诠释其创作意图：
      ${this.userPrompt}
    `;

    const completion = new FmodeChatCompletion([
      { role: "system", content: "您是一位专业的艺术顾问，擅长理解和优化创作意图。" },
      { role: "user", content: promptTemplate }
    ]);

    completion.sendCompletion().subscribe({
      next: (message: any) => {
        this.PictureDescResult = message.content;

        if (message?.complete) {
          this.generateImage();
        }
      },
      error: (error) => {
        this.showToast('创作解读失败，请重试');
        this.initializeWork();
      }
    });
  }

  private generateImage() {
    const picturePrompt = `${this.PictureDescResult}\n请根据以上描述创作一幅意境图画。要求：画面构图完整，色彩和谐，风格现代。`;

    const options: DalleOptions = {
      prompt: picturePrompt,
      size: '1024x1024',
    };

    this.imagineWork?.draw(options).subscribe({
      next: (work) => {
        if (work?.get("images")?.length) {
          this.images = work.get("images");
        }
      },
      error: (error) => {
        this.showToast('图片生成失败，请重试');
        this.initializeWork();
      }
    });
  }

  private async showToast(message: string) {
    const toast = document.createElement('ion-toast');
    toast.message = message;
    toast.duration = 2000;
    toast.position = 'top';
    document.body.appendChild(toast);
    await toast.present();
  }

  getCurrentTime(): string {
    return new Date().toLocaleString('zh-CN', {
      month: 'numeric',
      day: 'numeric',
      hour: 'numeric',
      minute: 'numeric'
    });
  }

  async downloadImage(imageUrl: string) {
    try {
      const response = await fetch(imageUrl);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `AI创作_${new Date().getTime()}.png`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
      this.showToast('下载成功');
    } catch (error) {
      this.showToast('下载失败，请重试');
    }
  }

  async shareImage(imageUrl: string) {
    if (navigator.share) {
      try {
        await navigator.share({
          title: 'AI艺术创作',
          text: '查看我用AI创作的艺术作品',
          url: imageUrl
        });
      } catch (error) {
        this.showToast('分享失败，请重试');
      }
    } else {
      // 复制图片链接
      await navigator.clipboard.writeText(imageUrl);
      this.showToast('图片链接已复制到剪贴板');
    }
  }

  likeImage(imageUrl: string) {
    if (this.likedImages.has(imageUrl)) {
      this.likedImages.delete(imageUrl);
    } else {
      this.likedImages.add(imageUrl);
    }
  }

  isImageLiked(imageUrl: string): boolean {
    return this.likedImages.has(imageUrl);
  }

  async saveToCollection(imageUrl: string) {
    // 这里可以添加保存到收藏的逻辑
    this.showToast('已添加到收藏');
  }
}

// # "AI艺速"项目策划书
// 项目设想

//   - 行业：兴趣教育与技能培训领域
//     - 用户：对各类新鲜事物抱有三分钟热度、渴望快速入门体验的广大人群
//       - 功能：通过程序依据用户感兴趣的内容提供相应的浅显教学步骤及基础指导。