1

wisdom-app/src/app/poem-picture/poem-picture.component.html

@@ -1,36 +1,39 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      示例：古诗文意境生成{{imagineWork.progress || 0}}
-    </ion-title> 
+  <ion-toolbar class="custom-toolbar">
+    <ion-title class="custom-title">
+      个性化头像生成
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <!-- 生成提示词 -->
-  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="请输入古诗" autoGrow="true"></ion-textarea>
-  <ion-button (click)="createImage()" expand="block">生成意境</ion-button>
+  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="请输入头像要求(示例：画风采用动漫风，一位长发飘飘的女孩抬头仰望着天空微笑。)" autoGrow="true"></ion-textarea>
+  <ion-button (click)="createImage()" expand="block" color="success">头像生成</ion-button>
   <!-- 意境画面提示词 -->
-   <div>
-    明月几时有，把酒问青天。不知天上宫阙，今夕是何年？
-   </div>
-  <div>
+  <div class="desc">
     {{PictureDescResult}}
   </div>
   <!-- 生成结果 -->
   @if(images.length) {
     @for(imageUrl of images;track imageUrl){
-      <img [src]="imageUrl" alt="" srcset="">
+      <img [src]="imageUrl || '../../assets/image/logo.png'" alt="" srcset="">
     }
+
+    <h3>图片地址：
+      <span class="copyable">{{images.join(', ')}}</span>
+    </h3>
+
   }
   <!-- 生成状态 -->
   @if(!images.length){
-    @if(imagineWork){
-      <h1>生成中</h1>
-    }
-    @if(!imagineWork){
-      <h1>未开始</h1>
+    <h2 style="display: grid; place-items: center;">欢迎使用头像生成器</h2>
+    @if(imagineWork.progress!=0){
+      <h1 style="display: grid; place-items: center;">生成中：{{imagineWork.progress}}</h1>
     }
+    <div style="display: grid; place-items: center;">
+      <img src="../../assets/image/头像生成器.png">
+    </div>
   }
 
 </ion-content>

wisdom-app/src/app/poem-picture/poem-picture.component.scss

@@ -0,0 +1,93 @@
+.custom-toolbar {
+    --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
+    display: flex; /* 使用 Flexbox 布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    padding: 0; /* 去掉默认内边距 */
+}
+
+.custom-title {
+    font-size: 1.3em; /* 字体大小 */
+    font-weight: bold; /* 加粗 */
+    color: #000000; 
+    text-align: center; /* 文字居中对齐 */
+    margin: 0; /* 去掉默认外边距 */
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影效果 */
+    /* 添加其他美化效果 */
+    font-family: "微软雅黑"; /* 自定义字体 */
+}
+
+/* 全局样式 */
+ion-content {
+    background-color: #7acbd9; /* 背景颜色 */
+    padding: 20px; /* 内边距 */
+    font-family: 'Arial', sans-serif; /* 字体 */
+  }
+  
+  /* 文本区域样式 */
+  ion-textarea {
+    border: 1px solid #55e788; /* ���框颜色 */
+    border-radius: 8px; /* 圆角 */
+    padding: 10px; /* 内边距 */
+    font-size: 16px; /* 字体大小 */
+    color: #333; /* 字体颜色 */
+    background-color: #fff; /* 背景颜色 */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  
+  /* 按钮样式 */
+  ion-button {
+    background-color: #6be4ea; /* 按钮背景颜色 */
+    color: white; /* 按钮文字颜色 */
+    border-radius: 8px; /* 圆角 */
+    font-size: 18px; /* 字体大小 */
+    padding: 10px; /* 内边距 */
+    transition: background-color 0.3s; /* 背景颜色过渡效果 */
+  }
+  
+  ion-button:hover {
+    background-color: #53d888; /* 悬停时的背景颜色 */
+  }
+  
+  /* 图片容器样式 */
+  img {
+    max-width: 100%; /* 最大宽度为100% */
+    height: auto; /* 高度自动 */
+    border-radius: 8px; /* 圆角 */
+    margin-top: 10px; /* 上边距 */
+  }
+  
+  /* 图片地址样式 */
+  h3 {
+    color: #555; /* 字体颜色 */
+    font-size: 14px; /* 字体大小 */
+    margin-top: 10px; /* 上边距 */
+  }
+  
+  /* 生成状态样式 */
+  h1 {
+    color: #333; /* 字体颜色 */
+    font-size: 24px; /* 字体大小 */
+    text-align: center; /* 居中对齐 */
+    margin-top: 20px; /* 上边距 */
+  }
+  
+  /* 意境画面提示词样式 */
+  .desc {
+    background-color: #8ceea6; /* 背景颜色 */
+    border: 1px solid #24e34e; /* 边框颜色 */
+    border-radius: 8px; /* 圆角 */
+    padding: 15px; /* 内边距 */
+    margin-top: 20px; /* 上边距 */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+
+  .copyable {
+    user-select: text; /* 允许文本选择 */
+    background-color: #f9f9f9; /* 背景颜色 */
+    padding: 5px; /* 内边距 */
+    border: 1px solid #ccc; /* 边框 */
+    border-radius: 4px; /* 圆角 */
+    display: inline-block; /* 使其呈现为块级元素 */
+    cursor: text; /* 鼠标悬停时显示文本光标 */
+  }

wisdom-app/src/app/poem-picture/poem-picture.component.ts

@@ -32,13 +32,13 @@ export class PoemPictureComponent  implements OnInit {
   images:Array<string> = []
   constructor(
   ){
-    // 示例任务，自己生成图片后请存储新的ID
-    this.imagineWork = new ImagineWork("4mPR0IW1i5");
+    // 示例任务，自己生成图片后请存储新的ID 
+    this.imagineWork = new ImagineWork("");
     this.imagineWork.fetchTask().then(work=>{
       if(work){
         this.imagineWork.id = work.id
       }
-      this.images = this.imagineWork?.images || [];
+      this.images = this.imagineWork?.images || '../../assets/image/头像示例.png';
     })
   }
 
@@ -47,8 +47,8 @@ export class PoemPictureComponent  implements OnInit {
     this.imagineWork = new ImagineWork();
     if (this.userPrompt.length > 0){
     // 文本生成
-    let PromptTemplate = `您是一名专业的美术画家，请您根据下面提供的的内容，将其描述的画面、场景、人物、物品等用最简短的语言表达，直接写出画面，并且以中国的古风意境为主
-    诗文如下：
+    let PromptTemplate = `您是一名专业的美术画家，擅长画各类型头像图，请您根据下面提供的需求内容，将其描述的画面、场景、人物、物品等用最简短的语言表达，直接写出画面，并且描述的画风为主
+    需求如下：
     ${this.userPrompt}
     `
     let completion = new FmodeChatCompletion([
@@ -62,7 +62,7 @@ export class PoemPictureComponent  implements OnInit {
       this.PictureDescResult = message.content
       if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
         // 图片生成
-        let PicturePrompt = `${this.PictureDescResult}\n风格：中国古风。画面不带任何文字。突出色彩。`
+        let PicturePrompt = `${this.PictureDescResult}\n风格：画面不带任何文字。人物为主体,人物要在图片的正中央。适合作为头像。符合现代人审美。`
       let options:DalleOptions = {prompt:PicturePrompt}
       this.imagineWork?.draw(options).subscribe(work=>{
           console.log("imagineWork",work?.toJSON())
@@ -75,7 +75,7 @@ export class PoemPictureComponent  implements OnInit {
     })
   }
   else{
-    this.userPrompt = "请提供您想要描述的诗文内容，我将根据其意境为您创作一幅古风画面的简短描述。"
+    this.userPrompt = "请提供您理想头像的组成内容，我将根据其意境为您创作一幅画面的简短描述。"
   }
     
   }

wisdom-app/src/app/tab4/tab4.page.html

@@ -36,7 +36,7 @@
         <ion-card-subtitle>姓名:{{currentUser?.get("realname")||"-"}} 性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</ion-card-subtitle>
       </ion-card-header> -->
       <ion-card-header class="card-header">
-        <img [src]="currentUser?.get('avatar')|| '../../assets/image/doctor7.png'" alt="头像" class="avatar" />
+        <img [src]="currentUser?.get('avatar')|| '../../assets/image/头像示例.png'" alt="头像" class="avatar" />
         <div class="user-info">
             <ion-card-title>账号：{{currentUser?.get("username")}}</ion-card-title>
             <ion-card-subtitle>
@@ -59,15 +59,15 @@
     </ion-card-content>
   </ion-card>
   @if(currentUser?.id){
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>我的收藏</ion-card-title>
-      <ion-card-subtitle>点击查看收藏内容</ion-card-subtitle>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-button expand="block" (click)="goToCollection()" color="success">查看收藏</ion-button>
-    </ion-card-content>
-  </ion-card>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>个性头像生成器</ion-card-title>
+        <ion-card-subtitle>点击创建个性化头像</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-button expand="block" (click)="goToAvatar()" color="success">前往生成</ion-button>
+      </ion-card-content>
+    </ion-card>
   }
   @if(currentUser?.id){
   <ion-card class="memo-card">
@@ -83,4 +83,5 @@
     </ul>
   </ion-card>
   }
+
 </ion-content>

wisdom-app/src/app/tab4/tab4.page.ts

@@ -4,6 +4,7 @@ import { CloudUser } from 'src/lib/ncloud';
 import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 import { EditTagComponent } from '../component/edit-tag/edit-tag.component';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab4',
@@ -20,8 +21,15 @@ export class Tab4Page {
     console.log("goToCollection");
   }
 
+  goToAvatar(){
+    console.log(['route'])
+    this.router.navigate(['/tabs/picture'])
+  }
+
   currentUser:CloudUser|undefined
-  constructor(private modalCtrl:ModalController) {
+  constructor(
+    private router: Router,
+    private modalCtrl:ModalController) {
     this.currentUser = new CloudUser();
   }
   async login(){