|
|
@@ -0,0 +1,95 @@
|
|
|
+import { Component, OnInit } from '@angular/core';
|
|
|
+import { DalleOptions, ImagineWork, FmodeChatCompletion } from 'fmode-ng';
|
|
|
+import {
|
|
|
+ IonButton,
|
|
|
+ IonCard,
|
|
|
+ IonCardContent,
|
|
|
+ IonCardHeader,
|
|
|
+ IonCardSubtitle,
|
|
|
+ IonCardTitle,
|
|
|
+ IonContent,
|
|
|
+ IonGrid,
|
|
|
+ IonHeader,
|
|
|
+ IonItem,
|
|
|
+ IonList,
|
|
|
+ IonRow,
|
|
|
+ IonTextarea,
|
|
|
+ IonTitle,
|
|
|
+ IonToolbar,
|
|
|
+} from '@ionic/angular/standalone';
|
|
|
+
|
|
|
+@Component({
|
|
|
+ selector: 'app-aipicture-page',
|
|
|
+ templateUrl: './aipicture-page.component.html',
|
|
|
+ styleUrls: ['./aipicture-page.component.scss'],
|
|
|
+ standalone: true,
|
|
|
+ imports: [
|
|
|
+ IonHeader,
|
|
|
+ IonToolbar,
|
|
|
+ IonTitle,
|
|
|
+ IonContent,
|
|
|
+ IonTextarea,
|
|
|
+ IonButton,
|
|
|
+ IonCard,
|
|
|
+ IonCardContent,
|
|
|
+ IonCardHeader,
|
|
|
+ IonCardSubtitle,
|
|
|
+ IonCardTitle,
|
|
|
+ IonGrid,
|
|
|
+ IonList,
|
|
|
+ IonItem,
|
|
|
+ IonRow,
|
|
|
+ ],
|
|
|
+})
|
|
|
+export class AipicturePageComponent implements OnInit {
|
|
|
+ needs: string = '画一张logo， 主题是健身，要求精简大气';
|
|
|
+ promptInput(ev: any) {
|
|
|
+ this.needs = ev.detail.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ imagineWork: ImagineWork | undefined;
|
|
|
+ images: Array<string> = [];
|
|
|
+ PictureDescResult: string = ``;
|
|
|
+ constructor() {
|
|
|
+ // 示例任务，自己生成图片后请存储新的ID
|
|
|
+ this.imagineWork = new ImagineWork('lpJGiFwWeA');
|
|
|
+ this.imagineWork.fetchTask().then((work) => {
|
|
|
+ this.images = this.imagineWork?.images || [];
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ async createImage() {
|
|
|
+ this.imagineWork = new ImagineWork();
|
|
|
+
|
|
|
+ // ai生成更详细的内容
|
|
|
+ let PromptTemplate = `请您作为一名专业的美术大家，请根据以下需求给出更详细的补充，用最少的文字表达出来。需求有：${this.needs}`;
|
|
|
+ console.log(PromptTemplate);
|
|
|
+
|
|
|
+ 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) {
|
|
|
+ console.log(this.PictureDescResult);
|
|
|
+
|
|
|
+ let PicturePrompt = `${this.PictureDescResult}风格，画面不带任何文字。`;
|
|
|
+ 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() {}
|
|
|
+}
|
