fix:picture AI

dream-app/src/app/dream-picture/dream-picture.component.html

@@ -0,0 +1,40 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      梦境生成{{imagineWork?.progress || 0}}
+    </ion-title> 
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- 生成提示词 -->
+  <ion-textarea 
+    [value]="userPrompt" 
+    (ionInput)="promptInput($event)" 
+    placeholder="DALLE3图片提示词" 
+    autoGrow="true">
+  </ion-textarea>
+  <ion-button (click)="createImage()" expand="block">生成梦境</ion-button>
+  
+  <!-- 生成梦境画面提示词 -->
+  <div>
+    {{PictureDescResult}}
+  </div>
+
+  <!-- 生成结果 -->
+  @if(images.length) {
+    @for(imageUrl of images; track imageUrl){
+      <img [src]="imageUrl" alt="梦境图片" srcset="">
+    }
+  }
+  
+  <!-- 生成状态 -->
+  @if(!images.length){
+    @if(imagineWork){
+      <h1>生成中</h1>
+    }
+    @if(!imagineWork){
+      <h1>未开始</h1>
+    }
+  }
+</ion-content>

dream-app/src/app/dream-picture/dream-picture.component.scss

@@ -0,0 +1,117 @@
+/* 定义 CSS 变量 */
+:root {
+  --primary-color: #4b0082; /* 靛青色 */
+  --secondary-color: #800080; /* 紫色 */
+  --light-bg-color: #f8f0ff; /* 淡紫色 */
+  --input-bg-color: rgba(255, 255, 255, 0.9);
+  --button-hover-color: lighten(#800080, 10%);
+  --text-color: #333;
+  --header-text-color: #ffffff;
+  --status-text-color: #ffffff;
+}
+
+/* 背景样式 */
+ion-content {
+  --background: linear-gradient(to bottom right, #4b0082, #800080, #ee82ee);
+  padding: 20px;
+}
+
+/* 标题样式 */
+ion-header {
+  background-color: var(--primary-color);
+}
+
+ion-title {
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: var(--header-text-color);
+  text-align: center;
+}
+
+/* 输入框样式 */
+ion-textarea {
+  --background: var(--input-bg-color);
+  border-radius: 10px;
+  padding: 15px;
+  font-size: 1rem;
+  color: var(--text-color);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: var(--secondary-color);
+  --border-radius: 8px;
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #ffffff;
+  transition: background-color 0.3s ease;
+}
+
+ion-button:hover {
+  --background: var(--button-hover-color);
+}
+
+/* 图片描述样式 */
+div {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 10px;
+  padding: 15px;
+  font-size: 1rem;
+  color: var(--text-color);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-top: 20px;
+  min-height: 60px;
+}
+
+/* 图片样式 */
+img {
+  width: 100%;
+  max-width: 300px;
+  height: auto;
+  border-radius: 10px;
+  margin: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+img:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* 状态文字样式 */
+h1 {
+  text-align: center;
+  color: var(--status-text-color);
+  font-size: 1.5rem;
+  margin-top: 30px;
+}
+
+/* 响应式设计 */
+@media (min-width: 768px) {
+  ion-content {
+    padding: 40px;
+  }
+
+  ion-title {
+    font-size: 2rem;
+  }
+
+  ion-textarea {
+    font-size: 1.1rem;
+  }
+
+  ion-button {
+    font-size: 1.3rem;
+  }
+
+  img {
+    max-width: 400px;
+  }
+
+  h1 {
+    font-size: 1.8rem;
+  }
+}

dream-app/src/app/dream-picture/dream-picture.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DreamPictureComponent } from './dream-picture.component';
+
+describe('DreamPictureComponent', () => {
+  let component: DreamPictureComponent;
+  let fixture: ComponentFixture<DreamPictureComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [DreamPictureComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DreamPictureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

dream-app/src/app/dream-picture/dream-picture.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonInput } from '@ionic/angular/standalone';
+import { IonTextarea, IonButton } from "@ionic/angular/standalone";
+import { DalleOptions, FmodeChatCompletion, ImagineWork } from 'fmode-ng';
+
+@Component({
+  selector: 'app-dream-picture',
+  templateUrl: './dream-picture.component.html',
+  styleUrls: ['./dream-picture.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, 
+    IonButton,
+    IonInput,
+    IonTextarea
+  ],
+})
+export class DreamPictureComponent  implements OnInit {
+
+  userPrompt: string = "我漫步在月光洒满的小径上，四周被高大的银白色树木环绕，树叶在微风中轻轻摇曳，发出沙沙的声音。远处，湖面如镜，倒映着满天的星辰和一轮明亮的圆月。空气中弥漫着淡淡的花香，令人感到宁静而祥和。忽然，几只发光的萤火虫在空中飞舞，点亮了夜晚的黑暗，整个世界仿佛笼罩在梦幻的光芒中。";
+
+  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 || [];
+    });
+  }
+
+  promptInput(ev: any) {
+    this.userPrompt = ev.detail.value;
+  }
+
+  async createImage() {
+    this.imagineWork = new ImagineWork();
+    
+    // 文本生成
+    const PromptTemplate = `你是一名专业的美术画家，请根据梦境的内容，将其描述的场景和画面、人物等细节描述出来，简短表达，以梦境为主
+梦境内容如下
+${this.userPrompt}`;
+
+    const completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: this.userPrompt }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.PictureDescResult = message.content;
+
+      if (message?.complete) {
+        // 图片生成
+        const options: DalleOptions = { prompt: this.userPrompt };
+        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() {}
+
+}

dream-app/src/app/tab1/tab1.page.html

@@ -30,7 +30,7 @@
 
       <!-- 梦境描绘 -->
       <ion-card
-        (click)="navigateTo('visualization')"
+        (click)="navigateTo('dream/picture')"
         style="background-image: url('assets/images/dream-visualization-bg.png'); background-size: cover; background-position: center;"
       >
         <ion-card-header>

dream-app/src/app/tabs/tabs.routes.ts

@@ -31,6 +31,11 @@ export const routes: Routes = [
         loadComponent: () =>
         import ('../page-dream-analysis/page-dream-analysis.component').then ((m) => m.PageDreamAnalysisComponent),
       },
+      {
+        path: 'dream/picture',
+        loadComponent: () =>
+        import ('../dream-picture/dream-picture.component').then ((m) => m.DreamPictureComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',

dream-app/src/index.html

@@ -4,7 +4,6 @@
 <head>
   <meta charset="utf-8" />
   <title>Ionic App</title>
-
   <base href="/" />
 
   <meta name="color-scheme" content="light dark" />