aaaaaa

tailor-app/myapp/src/app/customization/customization.page.html

@@ -9,7 +9,7 @@
 
 
   <div>
-    <ion-button (click)="test()" ></ion-button>
+    <ion-button (click)="test()"></ion-button>
     <ion-card id="designers">
       <ion-card-header>
         <ion-card-title>设计师</ion-card-title>
@@ -37,87 +37,135 @@
     </ion-card>
   </div>
 
-  
+
   <!-- <fm-markdown-preview class="content-style" [content]="picdetail" ></fm-markdown-preview> -->
   <!-- {{gptre}} -->
   <ion-card-header>
     <ion-card-title>
-     <ion-segment [value]="type" (ionChange)="typeChange($event)">
-       <ion-segment-button value="require">
-         <ion-label>需求分析</ion-label>
-       </ion-segment-button>
-       <ion-segment-button value="detail">
-         <ion-label>细节称述</ion-label>
-       </ion-segment-button>
-       <ion-segment-button value="image">
-        <ion-label>样图展示</ion-label>
-      </ion-segment-button>
-     </ion-segment>
+      <ion-segment [value]="type" (ionChange)="typeChange($event)">
+        <ion-segment-button value="require">
+          <ion-label>需求分析</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="detail">
+          <ion-label>细节称述</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="image">
+          <ion-label>样图展示</ion-label>
+        </ion-segment-button>
+      </ion-segment>
     </ion-card-title>
-   </ion-card-header>
-
-
-   @if(type=="require"){
-     <ion-item>
-      <ion-card >{{gptre}}</ion-card>
-      <ion-button (click)="createImage()">继续</ion-button>
-      <ion-button >修改</ion-button>
-       <!-- <ion-input [value]="password2" (ionChange)="password2Change($event)" label="密码二次" type="password" value="password"></ion-input> -->
-     </ion-item>
-   }
- 
-   @if(type=="detail"){
-    <ion-item>
-     <ion-button >detail</ion-button>
-      <!-- <ion-input [value]="password2" (ionChange)="password2Change($event)" label="密码二次" type="password" value="password"></ion-input> -->
-    </ion-item>
-  }
-  @if(type=="image"){
-    <ion-item>
-     <ion-button >image</ion-button>
-      <!-- <ion-input [value]="password2" (ionChange)="password2Change($event)" label="密码二次" type="password" value="password"></ion-input> -->
-    </ion-item>
+  </ion-card-header>
+
+
+  @if(type=="require"){
+  <ion-grid>
+
+    <ion-row>
+      <ion-card style="width: 100%;min-height: 300px;">
+
+        <div style="margin: 20px;">
+          @if(progress!=0 && progress!=1){
+            <ion-progress-bar  [value]="progress"></ion-progress-bar>
+
+          }
+          @if(!requireComplete){
+          {{gptre}}}
+          @if(requireComplete){
+          <fm-markdown-preview class="content-style" [content]="gptre"></fm-markdown-preview>
+          }
+        </div>
+      </ion-card>
+    </ion-row>
+    @if(requireComplete){<ion-row>
+      <ion-col>
+        <ion-button expand="block" style="width: 100%;display: block;" (click)="createdetail()">继续</ion-button>
+      </ion-col>
+      <ion-col>
+        <ion-button expand="block" style="width: 100%;display: block;" (click)="modifyRequire()">修改</ion-button>
+
+      </ion-col>
+    </ion-row>}
+  </ion-grid>
   }
-   
+
+  @if(type=="detail"){
+  <ion-grid>
+
+    <ion-row>
+      <ion-card style="width: 100%;min-height: 300px;">
+
+        <div style="margin: 20px;">
+          @if(progress!=0 && progress!=1){
+            <ion-progress-bar  [value]="progress"></ion-progress-bar>
+
+          }
+          @if(!isComplete){
+          {{picdetail}}}
+          @if(isComplete){
+          <fm-markdown-preview class="content-style" [content]="picdetail"></fm-markdown-preview>
+          }
+        </div>
+      </ion-card>
+    </ion-row>
+    @if(isComplete){<ion-row>
+      <ion-col>
+        <ion-button expand="block" style="width: 100%;display: block;" (click)="modifyDetail()">修改</ion-button>
 
 
+      </ion-col>
+      <ion-col>
+        <ion-button expand="block" style="width: 100%;display: block;" (click)="getJson()">继续</ion-button>
 
+      </ion-col>
+      
+    </ion-row>}
+
+  </ion-grid>
 
 
-  @if(!isComplete){
-    {{gptre}}
-  {{picdetail}}}
- @if(isComplete){
-  <fm-markdown-preview class="content-style" [content]="picdetail" ></fm-markdown-preview>
- }
- 
 
 
-  @if(images.length) {
-    @for(imageUrl of images;track imageUrl){
-      <img [src]="imageUrl" alt="" srcset="">
-    }
   }
-  @if(JSONcomplete){
-    <ion-button (click)="toReport()">
-      查看定制表
-    </ion-button>
+  @if(type=="image"){
+
+
+    <ion-grid>
+
+      <ion-row>
+        <ion-card style="width: 100%;min-height: 300px;">
+  
+          <div style="margin: 20px;">
+            @if(progress!=0 && progress!=1){
+              <ion-progress-bar  [value]="progress"></ion-progress-bar>
+  
+            }
+            @if(images.length) {
+              @for(imageUrl of images;track imageUrl){
+              <img [src]="imageUrl" alt="" srcset="">
+              }
+              
+              }
+          </div>
+        </ion-card>
+      </ion-row>
+      @if(images.length){<ion-row>
+        <ion-col>
+          <ion-button (click)="toComment()" style="width: 100%;display: block;"  expand="block">
+            评论
+          </ion-button>
+  
+        </ion-col>
+        <ion-col>
+          <ion-button expand="block" style="width: 100%;display: block;" (click)="toReport()">查看定制表</ion-button>
+  
+  
+        </ion-col>
+      </ion-row>}
+  
+    </ion-grid>
+
+
   }
-  <ion-button (click)="toComment()">
-    评论
-  </ion-button>
-  <!-- <ion-button (click)="toReport()">
-    查看定制表
-  </ion-button> -->
-  <!-- 生成状态 -->
-  <!-- @if(!images.length){
-    @if(imagineWork){
-      <h1>生成中</h1>
-    }
-    @if(!imagineWork){
-      <h1>未开始</h1>
-    }
-  } -->
 
 
 
@@ -127,8 +175,12 @@
 
 
 
-  
 
 
-  
+
+
+
+
+
+
 </ion-content>

tailor-app/myapp/src/app/customization/customization.page.scss

@@ -66,200 +66,210 @@
 //     right: 16px;
 //   }
 .marquee-container {
-    width: 100%;
-    height: 100px; /* 设置走马灯的高度 */
-    overflow: hidden; /* 隐藏滚动条 */
-    position: relative;
-    background-color: #fff; /* 背景颜色 */
-    border: 1px solid #ccc; /* 边框样式 */
-  }
-  
-  .marquee {
-    display: flex;
-    animation: scroll 15s linear infinite; /* 设置滚动动画 */
-  }
-  
-  .card {
-    min-width: 150px; /* 卡片的最小宽度 */
-    height: 80px; /* 卡片的高度 */
-    margin: 10px;
-    background-color: #4CAF50; /* 卡片背景颜色 */
-    color: white; /* 卡片文字颜色 */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px; /* 圆角效果 */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
-  }
-  
-  @keyframes scroll {
-    0% {
-      transform: translateX(0); /* 从左侧开始 */
-    }
-    100% {
-      transform: translateX(-100%); /* 滚动到左侧 */
-    }
-  }
-  ion-button {
-    --background: #000;
-    --background-hover: #9ce0be;
-    --background-activated: #88f4be;
-    --background-focused: #88f4be;
-  
-    --color: #ecc422;
-  
-    --border-radius: 15px;
-    --border-color: #000;
-    --border-style: solid;
-    --border-width: 1px;
-  
-    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
-  
-    --ripple-color: deeppink;
-  
-    --padding-top: 10px;
-    --padding-bottom: 10px;
-  }
+  width: 100%;
+  height: 100px; /* 设置走马灯的高度 */
+  overflow: hidden; /* 隐藏滚动条 */
+  position: relative;
+  background-color: #fff; /* 背景颜色 */
+  border: 1px solid #ccc; /* 边框样式 */
+}
 
-  .searchbar-container {
-    display: flex; /* 使用 Flexbox 布局 */
-    align-items: center; /* 垂直居中 */
-    gap: 2px; /* 搜索框和按钮之间的间距 */
-  }
-  
-  .searchbar-container ion-searchbar {
-    flex: 1; /* 搜索框占满剩余空间 */
-  }
-  
-  .searchbar-container ion-button {
-    flex-shrink: 0; /* 按钮宽度保持固定 */
-    padding: 0 16px; /* 增加按钮的左右内边距 */
-    font-size: 16px; /* 调整按钮字体大小 */
+.marquee {
+  display: flex;
+  animation: scroll 15s linear infinite; /* 设置滚动动画 */
+}
+
+.card {
+  min-width: 150px; /* 卡片的最小宽度 */
+  height: 80px; /* 卡片的高度 */
+  margin: 10px;
+  background-color: #4CAF50; /* 卡片背景颜色 */
+  color: white; /* 卡片文字颜色 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px; /* 圆角效果 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0); /* 从左侧开始 */
   }
-  
-  .inquery{
-    width:100%;
-    height:100px;
-    // --background-color: #fd0000;
-    padding: 5px 0px;
-    box-sizing: border-box;
-    margin: 0px 0px;
-    ion-button{
-        width: 100%;
-        height: 100%;
-        display: inline-block;
-    }
+  100% {
+    transform: translateX(-100%); /* 滚动到左侧 */
   }
-  
-  .inquery-ai{
-    height: 100%;
-    width: 48%;
-    display: inline-block;
-    margin: 0;
-    padding: 0;
+}
+ion-button {
+  --background: #000;
+  --background-hover: #9ce0be;
+  --background-activated: #88f4be;
+  --background-focused: #88f4be;
+
+  --color: #ecc422;
+
+  --border-radius: 15px;
+  --border-color: #000;
+  --border-style: solid;
+  --border-width: 1px;
+
+  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+  --ripple-color: deeppink;
+
+  --padding-top: 10px;
+  --padding-bottom: 10px;
+}
+
+.searchbar-container {
+  display: flex; /* 使用 Flexbox 布局 */
+  align-items: center; /* 垂直居中 */
+  gap: 2px; /* 搜索框和按钮之间的间距 */
+}
+
+.searchbar-container ion-searchbar {
+  flex: 1; /* 搜索框占满剩余空间 */
+}
+
+.searchbar-container ion-button {
+  flex-shrink: 0; /* 按钮宽度保持固定 */
+  padding: 0 16px; /* 增加按钮的左右内边距 */
+  font-size: 16px; /* 调整按钮字体大小 */
+}
+
+.inquery{
+  width:100%;
+  height:100px;
+  // --background-color: #fd0000;
+  padding: 5px 0px;
+  box-sizing: border-box;
+  margin: 0px 0px;
+  ion-button{
+      width: 100%;
+      height: 100%;
+      display: inline-block;
   }
-  
-  .inquery-ai img{
-    width:50%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
+}
+
+.inquery-ai{
+  height: 100%;
+  width: 48%;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+
+.inquery-ai img{
+  width:50%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.inquery-human{
+  height: 100%;
+  width: 48%;
+  display: inline-block;
+  margin-left: 2%;
+  padding: 0;
+}
+
+.inquery-human img{
+  width:50%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+ion-item {
+  margin-bottom: 12px; /* 增加医生卡片之间的间距 */
+  padding: 12px; /* 调整卡片内边距 */
+  border-radius: 8px; /* 圆角设计 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加卡片阴影 */
+  background-color: #ffffff; /* 卡片背景色 */
+}
+
+ion-thumbnail {
+  width: 60px; /* 缩略图宽度 */
+  height: 60px; /* 缩略图高度 */
+  border-radius: 50%; /* 圆形头像 */
+}
+
+.doctor-info {
+  margin-left: 12px; /* 缩略图与文字的间距 */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.doctor-info h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.doctor-info p {
+  margin: 4px 0;
+  font-size: 14px;
+  color: #666; /* 字体颜色 */
+}
+
+// 功能区
+.function-area {
+    margin: 16px 0;
+    padding: 0 16px;
+    background: white;
     border-radius: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 960px; /* 最大宽度 */
   }
   
-  .inquery-human{
-    height: 100%;
-    width: 48%;
-    display: inline-block;
-    margin-left: 2%;
-    padding: 0;
-  }
+  .function-row {
+    display: flex; // 使用 Flexbox 布局
+    justify-content: space-between; // 按空间均匀分布
+    align-items: center; // 垂直居中
+    overflow-x: auto; // 允许水平滚动
+    scroll-snap-type: x mandatory; // 启用滚动捕捉
+    -webkit-overflow-scrolling: touch; // 平滑滚动
+    padding: 16px 0;
   
-  .inquery-human img{
-    width:50%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    border-radius: 10px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  }
-  ion-item {
-    margin-bottom: 12px; /* 增加医生卡片之间的间距 */
-    padding: 12px; /* 调整卡片内边距 */
-    border-radius: 8px; /* 圆角设计 */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加卡片阴影 */
-    background-color: #ffffff; /* 卡片背景色 */
-  }
+    .function-item {
+      flex: 1 0 20%; // 每个项目占 20% 宽度
+      min-width: 0; // 确保项目可以缩小
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      scroll-snap-align: start; // 滚动时对齐
   
-  ion-thumbnail {
-    width: 60px; /* 缩略图宽度 */
-    height: 60px; /* 缩略图高度 */
-    border-radius: 50%; /* 圆形头像 */
-  }
+      .icon {
+        font-size: 24px;
+        margin-bottom: 8px;
+      }
   
-  .doctor-info {
-    margin-left: 12px; /* 缩略图与文字的间距 */
+      .label {
+        font-size: 14px;
+        color: #333;
+      }
+    }
+  }
+  ion-col{
     display: flex;
-    flex-direction: column;
     justify-content: center;
+    align-items: center;
   }
-  
-  .doctor-info h3 {
-    margin: 0;
-    font-size: 16px;
-    font-weight: bold;
-  }
-  
-  .doctor-info p {
-    margin: 4px 0;
-    font-size: 14px;
-    color: #666; /* 字体颜色 */
+
+  ion-card {
+    border-radius: 15px; /* 圆角边框 */
+    background-color: #f9f9f9; /* 卡片内部背景颜色 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+    border: 1px solid #e0e0e0; /* 边框颜色 */
   }
-  
-  // 功能区
-  .function-area {
-      margin: 16px 0;
-      padding: 0 16px;
-      background: white;
-      border-radius: 10px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      width: 100%;
-      max-width: 960px; /* 最大宽度 */
-    }
-    
-    .function-row {
-      display: flex; // 使用 Flexbox 布局
-      justify-content: space-between; // 按空间均匀分布
-      align-items: center; // 垂直居中
-      overflow-x: auto; // 允许水平滚动
-      scroll-snap-type: x mandatory; // 启用滚动捕捉
-      -webkit-overflow-scrolling: touch; // 平滑滚动
-      padding: 16px 0;
-    
-      .function-item {
-        flex: 1 0 20%; // 每个项目占 20% 宽度
-        min-width: 0; // 确保项目可以缩小
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        scroll-snap-align: start; // 滚动时对齐
-    
-        .icon {
-          font-size: 24px;
-          margin-bottom: 8px;
-        }
-    
-        .label {
-          font-size: 14px;
-          color: #333;
-        }
-      }
-    }
-    ion-col{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  
+  ion-card:hover {
+    transform: scale(1.02); /* 悬停时放大效果 */
+    transition: transform 0.2s; /* 动画过渡效果 */
+  }

tailor-app/myapp/src/app/customization/customization.page.ts

@@ -1,9 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
+import { NavigationExtras, Router } from '@angular/router';
 
-import { IonCardSubtitle, IonTextarea, ModalController } from '@ionic/angular/standalone';
+import { IonCardSubtitle, IonProgressBar, IonTextarea, ModalController } from '@ionic/angular/standalone';
 import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonLabel, IonItem, IonList, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemOption, IonItemSliding, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime, IonFooter, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonGrid, IonChip, IonImg } from '@ionic/angular/standalone';
 import { TestChatCompletion } from './test-chat-completion';
 import { EditTagComponent } from '../edit-tag/edit-tag.component';
@@ -31,37 +31,238 @@ addIcons({ camera, trendingUpOutline, sparklesOutline, cloudyOutline, diceOutlin
   styleUrls: ['./customization.page.scss'],
   standalone: true,
 
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, IonInput, EditTagComponent, IonTextarea, IonItem, IonList, MarkdownPreviewModule, IonIcon, IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime, IonFooter, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonGrid, IonChip, IonImg, IonCardSubtitle, SwiperComponent, RouterModule,]
+  imports: [IonProgressBar,IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, IonInput, EditTagComponent, IonTextarea, IonItem, IonList, MarkdownPreviewModule, IonIcon, IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime, IonFooter, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonGrid, IonChip, IonImg, IonCardSubtitle, SwiperComponent, RouterModule,]
 })
 export class CustomizationPage implements OnInit {
+  public buffer = 0.06;
+  public progress = 0;
 
-  //修改ai回答内容
-  async modeify(respone:string,add:string){
-    let promt = `你是一名专业服装设计师，这是你的上次回答：
-    ${respone}
+
+  // 修改需求分析
+  async modifyRequire() {
+    this.requireComplete=false
+  
+    let a = await openCommentPostModal(this.modalCtrl, { "title": "需求修改", "title2": "修改" });
+    if (a == null) {
+      a = "";
+    }
+    let prompt = `你是一名专业服装设计师，这是你的上次回答：
+    ${this.gptre}
     基于你上次回答，我想做一些修改，修改如下：
-    ${add}
-    `
+    ${a},
+    请你将上次回答基于我提出的修改修改后再发一遍
+    `;
 
-        let completion = new FmodeChatCompletion([
-          { role: "system", content: "" },
-          { role: "user", content: promt }
-        ])
-        let result=""
-        completion.sendCompletion().subscribe((message: any) => {
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: prompt }
+    ]);
+    completion.sendCompletion().subscribe(
+      (message: any) => {
+      this.gptre=message.content
+        console.log("Received message:", message);
+        if(this.progress<0.97){
+          if(this.progress<0.5){
+            this.progress+=0.01
+          }
+          if(this.progress>=0.5){
+            this.progress+=0.001
+          }
+        }
+        if (message?.complete) {
+          this.requireComplete=true
+
+          this.progress=0
+          console.log("完成");
           
-          result = message.content
-          if (message?.complete) {
-            return result;
+        } 
+      }
+    )
+  }
+
+  async createdetail() {
+    this.type="detail"
+    let promotTemplate = `您是一名专业的美术画家，请您根据服装描述内容，将1.其描述的服装细节描述出来，服装描述如下：${this.gptre}`
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: promotTemplate }
+    ])
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content)
+      
+      // 赋值消息内容给组件内属性
+      this.picdetail = message.content
+      if(this.progress<0.97){
+        if(this.progress<0.5){
+          this.progress+=0.01
+        }
+        if(this.progress>=0.5){
+          this.progress+=0.001
+        }
+      }
+      if (message?.complete) {
+        this.isComplete = true;
+        // this.getJson()
+        this.progress=0
+
+      }
+    })
+
+  }
+  async modifyDetail() {
+    this.isComplete=false
+    
+    let a = await openCommentPostModal(this.modalCtrl, { "title": "细节修改", "title2": "修改" });
+    if (a == null) {
+      a = "";
+    }
+    let prompt = `你是一名专业服装设计师，这是你的上次回答：
+    ${this.picdetail}
+    基于你上次回答，我想做一些修改，修改如下：
+    ${a},
+    请你将上次回答基于我提出的修改修改后再发一遍
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: prompt }
+    ]);
+    completion.sendCompletion().subscribe(
+      (message: any) => {
+      this.picdetail=message.content
+        console.log("Received message:", message);
+        if(this.progress<0.97){
+          if(this.progress<0.5){
+            this.progress+=0.01
           }
-        })
+          if(this.progress>=0.5){
+            this.progress+=0.001
+          }
+        }
+        if (message?.complete) {
+    this.isComplete=true
 
+          console.log("完成");
+          this.progress=0
+          
+        } 
+      }
+    )
   }
-  //修改需求分析
-  modifyRequire(){
+
+
+  getJson() {
+    this.type="image"
+    let promt = `请你以以下json格式整合文段内容：
     
+    {
+    "goal":"客户定制服装目的",
+    "style":"风格",
+    "color":"颜色",
+    "feature":"客户特殊的身体特征胸围大点什么的，如果客户没有特殊的身体特征这里填空字符串",
+    "ACC":"配饰，耳环，领带什么的",
+    "rim":"辅料，纽扣，拉链什么的",
+    "period":"定制周期",
+    "clothing":"以衣服类型+推荐尺码这样的格式拼接，比如西装外套+XXL",
+    "trousers":"以裤子类型+推荐尺码这样的格式拼接，如果客户没有指定裤子类型，由你来选一种合适的裤子类型",
+    "shoe":"以鞋子类型+推荐尺码这样的格式拼接,如果客户没有指定鞋子类型，由你来选一种合适的鞋子类型",
+    "after":"售后信息",
+    "texture":"材质"
+    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示"
+
+}
+
+
+    内容如下：${this.picdetail} ${this.gptre}
+`
+
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: promt }
+    ])
+    completion.sendCompletion().subscribe((message: any) => {
+      if(this.progress<0.97){
+        if(this.progress<0.8){
+          this.progress+=0.005
+        }
+        if(this.progress>=0.8){
+          this.progress+=0.001
+        }
+      }
+      // 打印消息体
+      console.log(message.content)
+
+
+      // 赋值消息内容给组件内属性
+      this.JSONdes = message.content
+      if (message?.complete) {
+        console.log("json:", this.JSONdes);
+
+        this.imagineWork = new ImagineWork();
+        let options: DalleOptions = { prompt: this.picdetail }
+        this.imagineWork.draw(options).subscribe(async work => {
+          console.log("imagineWork", work?.toJSON())
+          console.log("images", work?.get("images"))
+          if (work?.get("images")?.length) {
+            this.images = work?.get("images");
+            this.progress=0
+
+
+
+            let a = extactAndParseJsonFromString(this.JSONdes)
+            // a.comment=await this.presentAlert();
+            // console.log("a.comment",a.comment);
+
+
+            a.detail = this.picdetail;
+            a.image =this.images[0]
+            this.JSONobject = a
+            this.JSONKeys = Object.keys(this.JSONobject)
+            this.JSONcomplete = true
+            console.log(a);
+
+            //加入数据库
+            let newDsign = {
+              "goal": a['goal'],
+              "style": a['style'],
+              "color": a['color'],
+              "feature": a['feature'],
+              "ACC": a['ACC'],
+              "rim": a['rim'],
+              "period": a['period'],
+              "clothing": a['clothing'],
+              "trousers": a['trousers'],
+              "shoe": a['shoe'],
+              "after": a['after'],
+              "texture": a['texture'],
+              "remark": a['remark'],
+              "image": a['image'],
+              "user": new CloudUser().toPointer(),
+              "detail": a['detail'],
+              "comment": ""
+
+
+            }
+            let newObject = new CloudObject("Designs")
+            newObject.set(newDsign)
+            newObject.id = (await newObject.save()).id
+            this.newObject = newObject;
+            console.log("添加成功");
+          }
+        })
+      }
+    })
+
+
+    return true;
   }
 
+
+
+
+
   //打开聊天窗口
   async openInquiry(doctor: CloudObject) {
     let currentUser = new CloudUser();
@@ -119,12 +320,23 @@ export class CustomizationPage implements OnInit {
           { role: "user", content: promt }
         ])
         completion.sendCompletion().subscribe((message: any) => {
-          
+          if(this.progress<0.97){
+            if(this.progress<0.5){
+              this.progress+=0.01
+            }
+            if(this.progress>=0.5){
+              this.progress+=0.001
+            }
+          }
+         
           console.log(message.content)
           console.log("complete:::::", this.isComplete);
           this.gptre = message.content
           if (message?.complete) {
-            this.createImage()
+            this.progress=0
+          this.requireComplete=true;
+
+            // this.createImage()
           }
         })
 
@@ -221,8 +433,8 @@ ${userPrompt}
 
 
   @Input()
-  type:"require"|"detail"|"image" = "require"
-  typeChange(ev:any){
+  type: "require" | "detail" | "image" = "require"
+  typeChange(ev: any) {
     this.type = ev?.detail?.value || ev?.value || 'require'
   }
 
@@ -230,32 +442,43 @@ ${userPrompt}
 
 
   public isComplete: boolean = false;
+  public requireComplete: boolean = true;
   editTags: Array<string> = []
   picdetail: string = ""
   public JSONKeys: string[] = []
   public JSONKeys2: string[] = []
 
-  async toComment(){
-    let a=await openCommentPostModal(this.modalCtrl)
-    if(a==null){
-      a=""
+
+
+  async toComment() {
+    let a = await openCommentPostModal(this.modalCtrl, { "title": "评论", "title2": "评论" })
+    if (a == null) {
+      a = ""
     }
-  
-  this.newObject.set({"comment":a})
-  this.newObject.save()
-  console.log("添加评论成功");
-    
+
+    this.newObject.set({ "comment": a })
+    this.newObject.save()
+    console.log("添加评论成功");
+
   }
 
 
 
 
   toReport() {
-    this.nav.navigateRoot(['report'], {
-      queryParams: {
-        'object': JSON.stringify(this.JSONobject)
-      }
-    });
+    // this.nav.navigateRoot(['report'], {
+    //   queryParams: {
+    //     'object': JSON.stringify(this.JSONobject)
+    //   }
+    // });
+
+
+    const state: any = { myObject: this.JSONobject }; // 你要传递的对象数据
+    const navigationExtras: NavigationExtras = {
+      state: state
+    };
+   
+    this.router.navigate(['/report'], navigationExtras);
 
     // this.router.navigate(['/report',this.JSONobject2])
 
@@ -287,7 +510,7 @@ ${userPrompt}
     }
     let newObject = new CloudObject("Designs")
     newObject.set(newDsign)
-   
+
     console.log(newObject.save());
 
 
@@ -300,39 +523,40 @@ ${userPrompt}
   ) {
     // 示例任务，自己生成图片后请存储新的ID
     console.log('ImagineWork instance:', this.imagineWork);
-
+    
     // this.imagineWork = new ImagineWork("Wx6o1Js1gA");
     // this.imagineWork.fetchTask().then(work => {
     //   this.images = this.imagineWork?.images || [];
     // })
   }
-  async createImage() {
-    let promotTemplate = `您是一名专业的美术画家，请您根据服装描述内容，将1.其描述的服装细节描述出来，服装描述如下：${this.gptre}`
-    let completion = new FmodeChatCompletion([
-      { role: "system", content: "" },
-      { role: "user", content: promotTemplate }
-    ])
-
-    completion.sendCompletion().subscribe((message: any) => {
-      // 打印消息体
-      console.log(message.content)
-      // 赋值消息内容给组件内属性
-      this.picdetail = message.content
-      if (message?.complete) {
-        this.isComplete = true;
-        this.getJson()
-
-      }
-    })
-
-
-
-  }
+  
 
 
   imagineWork: ImagineWork | undefined
   images: Array<string> = []
-  public gptre = ""
+  public gptre = `在这段对话中，我们可以分析出用户的需求和服装的细节设计。以下是详细分析：
+
+### 1. 用户对于定制服装的需求
+- **场合**：用户明确表示需要定制服装的场合是婚礼，这意味着服装需要正式且优雅。
+- **风格选择**：用户希望设计师帮忙选择风格，并没有明确的偏好，这表明用户可能对婚礼服装的具体风格不太了解或者希望设计师提供专业建议。
+- **颜色和材质**：用户在颜色和材质方面也没有特别要求，完全依赖设计师的选择，这显示出用户对设计师的信任。
+- **尺码和身体特征**：用户提供了身高和体重，并提到“胸围大点”，这意味着在服装的剪裁上需要特别注意胸部的合身度。
+- **售后服务**：用户希望有售后服务，特别是调整和清洗服务，显示出用户对服装的长期使用和维护的关注。
+
+### 2. 联想并补全服装的细节
+- **服装类型**：选择了经典的燕尾服，适合正式的婚礼场合。
+- **颜色**：选择了经典的黑色，符合婚礼的正式氛围。
+- **材质**：选择了丝绸，因其光泽感和柔软度，适合高档场合。
+- **配饰**：选择了黑色领结和白色口袋巾，经典而优雅，能够提升整体形象。
+- **辅料**：选择了黑色纽扣和丝绸衬里，确保整体风格统一且高档。
+- **定制周期**：设定为3周，符合一般定制的时间要求。
+- **尺码**：根据用户的身高和体重，推荐XXL尺码，特别注意胸围的合身。
+- **鞋子类型**：建议42-43码的皮鞋，符合用户的身高体重。
+- **售后服务**：包括免费调整和清洗服务，确保用户在婚礼后也能保持服装的最佳状态。
+- **备注**：用户希望随时联系，表明用户对沟通的重视。
+
+### 总结
+通过对用户需求的分析和对服装细节的补全，我们可以为用户提供一套完整的婚礼燕尾服定制方案。这不仅满足了用户对正式场合服装的需求，也考虑到了用户的个人特征和售后服务的期望。这样的定制方案将有助于用户在婚礼上展现最佳形象。`
   messageList: string[] = []
   title: string = "123"
   chatID = ""
@@ -340,109 +564,14 @@ ${userPrompt}
   JSONcomplete: boolean = false
   JSONdes = ""
   JSONobject: { [key: string]: string } = {}
-  
-
-  /** 示例：问诊ChatPanel面板 */
-
-  getJson() {
-
-    let promt = `请你以以下json格式整合文段内容：
-    
-    {
-    "goal":"客户定制服装目的",
-    "style":"风格",
-    "color":"颜色",
-    "feature":"客户特殊的身体特征胸围大点什么的，如果客户没有特殊的身体特征这里填空字符串",
-    "ACC":"配饰，耳环，领带什么的",
-    "rim":"辅料，纽扣，拉链什么的",
-    "period":"定制周期",
-    "clothing":"以衣服类型+推荐尺码这样的格式拼接，比如西装外套+XXL",
-    "trousers":"以裤子类型+推荐尺码这样的格式拼接，如果客户没有指定裤子类型，由你来选一种合适的裤子类型",
-    "shoe":"以鞋子类型+推荐尺码这样的格式拼接,如果客户没有指定鞋子类型，由你来选一种合适的鞋子类型",
-    "after":"售后信息",
-    "texture":"材质"
-    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示"
-
-}
 
 
-    内容如下：${this.picdetail} ${this.gptre}
-`
-
-    let completion = new FmodeChatCompletion([
-      { role: "system", content: "" },
-      { role: "user", content: promt }
-    ])
-    completion.sendCompletion().subscribe((message: any) => {
-      // 打印消息体
-      console.log(message.content)
-
-
-      // 赋值消息内容给组件内属性
-      this.JSONdes = message.content
-      if (message?.complete) {
-        console.log("json:", this.JSONdes);
-
-        this.imagineWork = new ImagineWork();
-        let options: DalleOptions = { prompt: this.picdetail }
-        this.imagineWork.draw(options).subscribe(async work => {
-          console.log("imagineWork", work?.toJSON())
-          console.log("images", work?.get("images"))
-          if (work?.get("images")?.length) {
-            this.images = work?.get("images");
-
-
-
-            let a = extactAndParseJsonFromString(this.JSONdes)
-            // a.comment=await this.presentAlert();
-            // console.log("a.comment",a.comment);
-
-
-            a.detail = this.picdetail;
-            a.image = work?.toJSON().objectId
-            this.JSONobject = a
-            this.JSONKeys = Object.keys(this.JSONobject)
-            this.JSONcomplete = true
-            console.log(a);
-
-            //加入数据库
-            let newDsign = {
-              "goal": a['goal'],
-              "style": a['style'],
-              "color": a['color'],
-              "feature": a['feature'],
-              "ACC": a['ACC'],
-              "rim": a['rim'],
-              "period": a['period'],
-              "clothing": a['clothing'],
-              "trousers": a['trousers'],
-              "shoe": a['shoe'],
-              "after": a['after'],
-              "texture": a['texture'],
-              "remark": a['remark'],
-              "image": a['image'],
-              "user": new CloudUser().toPointer(),
-              "detail": a['detail'],
-              "comment":""
-
-
-            }
-            let newObject = new CloudObject("Designs")
-            newObject.set(newDsign)
-            newObject.id= (await newObject.save()).id
-            this.newObject=newObject;
-            console.log("添加成功");
-          }
-        })
-      }
-    })
-
+  /** 示例：问诊ChatPanel面板 */
 
-    return true;
-  }
-  newObject:CloudObject=new  CloudObject("Designs")
-  shareData:any = {}
   
+  newObject: CloudObject = new CloudObject("Designs")
+  shareData: any = {}
+
 
 
 

tailor-app/myapp/src/app/customization/customization/A.json

@@ -0,0 +1,14 @@
+{
+    "goal":"客户定制服装目的",
+    "style":"风格",
+    "color":"颜色",
+    "feature":"客户特殊的身体特征胸围大点什么的，如果客户没有特殊的身体特征这里填空字符串",
+    "ACC":"配饰，耳环，领带什么的",
+    "rim":"辅料，纽扣，拉链什么的",
+    "period":"定制周期",
+    "clothing":"以衣服类型+推荐尺码这样的格式拼接，比如西装外套+XXL",
+    "trousers":"以裤子类型+推荐尺码这样的格式拼接",
+    "shoe":"以鞋子类型+推荐尺码这样的格式拼接",
+    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示"
+
+}

tailor-app/myapp/src/app/customization/customization/customization.page.html

@@ -0,0 +1,168 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>customization</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <swiper></swiper>
+
+
+  <div>
+    <ion-button (click)="test()"></ion-button>
+    <ion-card id="designers">
+      <ion-card-header>
+        <ion-card-title>设计师</ion-card-title>
+        <ion-card-subtitle>设计师简介</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content style="padding: 5px;">
+        <ion-list>
+          <ion-item *ngFor="let doctor of doctorList" lines="none">
+            <ion-thumbnail slot="start">
+              <img [src]="doctor.get('avater') || '../../assets/img/doctor7.png'" [alt]="doctor.get('name')" />
+            </ion-thumbnail>
+            <div class="doctor-info" style="width: 100px;">
+              <h3>{{ doctor.get('name') }}</h3>
+              <p>{{ doctor.get('title') }}</p>
+              <p>({{ doctor.get('age') }}岁)</p>
+            </div>
+            <div style="margin-left: 10px;">
+              <ion-button shape="round" size="small" (click)="openInquiry(doctor)"><ion-icon name="dice-outline"
+                  style="margin-right: 5px;"></ion-icon> 立刻定制</ion-button>
+
+            </div>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+
+  <!-- <fm-markdown-preview class="content-style" [content]="picdetail" ></fm-markdown-preview> -->
+  <!-- {{gptre}} -->
+  <ion-card-header>
+    <ion-card-title>
+      <ion-segment [value]="type" (ionChange)="typeChange($event)">
+        <ion-segment-button value="require">
+          <ion-label>需求分析</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="detail">
+          <ion-label>细节称述</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="image">
+          <ion-label>样图展示</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    </ion-card-title>
+  </ion-card-header>
+
+
+  @if(type=="require"){
+  <ion-grid>
+
+    <ion-row>
+      <ion-card style="width: 100%;min-height: 300px;">
+
+        <div style="margin: 20px;">
+          @if(progress!=0 && progress!=1){
+            <ion-progress-bar  [value]="progress"></ion-progress-bar>
+
+          }
+          @if(!requireComplete){
+          {{gptre}}}
+          @if(requireComplete){
+          <fm-markdown-preview class="content-style" [content]="gptre"></fm-markdown-preview>
+          }
+        </div>
+      </ion-card>
+    </ion-row>
+    @if(requireComplete){<ion-row>
+      <ion-col>
+        <ion-button expand="block" style="width: 100%;display: block;" (click)="createdetail()">继续</ion-button>
+      </ion-col>
+      <ion-col>
+        <ion-button expand="block" style="width: 100%;display: block;" (click)="modifyRequire()">修改</ion-button>
+
+      </ion-col>
+    </ion-row>}
+  </ion-grid>
+  }
+
+  @if(type=="detail"){
+  <ion-grid>
+
+    <ion-row>
+      <ion-card style="width: 100%;min-height: 300px;">
+
+        <div style="margin: 20px;">
+          @if(progress!=0 && progress!=1){
+            <ion-progress-bar  [value]="progress"></ion-progress-bar>
+
+          }
+          @if(!isComplete){
+          {{picdetail}}}
+          @if(isComplete){
+          <fm-markdown-preview class="content-style" [content]="picdetail"></fm-markdown-preview>
+          }
+        </div>
+      </ion-card>
+    </ion-row>
+    @if(isComplete){<ion-row>
+      <ion-col>
+        <ion-button expand="block" (click)="getJson()">继续</ion-button>
+
+      </ion-col>
+      <ion-col>
+        <ion-button expand="block" (click)="modifyDetail()">修改</ion-button>
+
+
+      </ion-col>
+    </ion-row>}
+
+  </ion-grid>
+
+
+
+
+  }
+  @if(type=="image"){
+  <ion-item>
+    
+    <ion-card style="width: 100%;min-height: 300px;">
+      @if(progress!=0 && progress!=1){
+        <ion-progress-bar  [value]="progress"></ion-progress-bar>
+  
+      }
+      @if(images.length) {
+      @for(imageUrl of images;track imageUrl){
+      <img [src]="imageUrl" alt="" srcset="">
+      }
+      
+      }
+    </ion-card>
+    @if(images.length) {
+      <ion-button (click)="toComment()" style="width: 100%;display: block;"  expand="block">
+        评论
+      </ion-button>
+    }
+    <!-- <ion-input [value]="password2" (ionChange)="password2Change($event)" label="密码二次" type="password" value="password"></ion-input> -->
+  </ion-item>
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</ion-content>

tailor-app/myapp/src/app/customization/customization/customization.page.scss

@@ -0,0 +1,275 @@
+// .carousel-container {
+//     display: flex;
+//     flex-direction: column;
+//     align-items: center;
+//     justify-content: center;
+//     height: 100%;
+//     overflow: hidden;
+//     position: relative;
+//   }
+   
+//   .carousel-wrapper {
+//     display: flex;
+//     overflow-x: scroll;
+//     scrollbar-width: none;  /* Firefox */
+//     -ms-overflow-style: none;  /* Internet Explorer 10+ */
+//     scroll-behavior: smooth;
+//     width: 100%;
+//     padding: 0 16px;
+//   }
+   
+//   .carousel-wrapper::-webkit-scrollbar {
+//     display: none;  /* Chrome, Safari and Opera */
+//   }
+   
+//   .carousel-item {
+//     min-width: 250px;
+//     margin: 0 8px;
+//     flex-shrink: 0;
+//   }
+   
+//   .card {
+//     width: 100%;
+//     border-radius: 12px;
+//     overflow: hidden;
+//     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+//   }
+   
+//   .card img {
+//     width: 100%;
+//     height: auto;
+//   }
+   
+//   .card-content {
+//     padding: 16px;
+//     background-color: white;
+//     text-align: center;
+//   }
+   
+//   .carousel-control {
+//     position: absolute;
+//     top: 50%;
+//     transform: translateY(-50%);
+//     background-color: rgba(0, 0, 0, 0.5);
+//     color: white;
+//     border: none;
+//     padding: 10px;
+//     cursor: pointer;
+//     z-index: 10;
+//   }
+   
+//   .prev {
+//     left: 16px;
+//   }
+   
+//   .next {
+//     right: 16px;
+//   }
+.marquee-container {
+    width: 100%;
+    height: 100px; /* 设置走马灯的高度 */
+    overflow: hidden; /* 隐藏滚动条 */
+    position: relative;
+    background-color: #fff; /* 背景颜色 */
+    border: 1px solid #ccc; /* 边框样式 */
+  }
+  
+  .marquee {
+    display: flex;
+    animation: scroll 15s linear infinite; /* 设置滚动动画 */
+  }
+  
+  .card {
+    min-width: 150px; /* 卡片的最小宽度 */
+    height: 80px; /* 卡片的高度 */
+    margin: 10px;
+    background-color: #4CAF50; /* 卡片背景颜色 */
+    color: white; /* 卡片文字颜色 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px; /* 圆角效果 */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+  }
+  
+  @keyframes scroll {
+    0% {
+      transform: translateX(0); /* 从左侧开始 */
+    }
+    100% {
+      transform: translateX(-100%); /* 滚动到左侧 */
+    }
+  }
+  ion-button {
+    --background: #000;
+    --background-hover: #9ce0be;
+    --background-activated: #88f4be;
+    --background-focused: #88f4be;
+  
+    --color: #ecc422;
+  
+    --border-radius: 15px;
+    --border-color: #000;
+    --border-style: solid;
+    --border-width: 1px;
+  
+    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+  
+    --ripple-color: deeppink;
+  
+    --padding-top: 10px;
+    --padding-bottom: 10px;
+  }
+
+  .searchbar-container {
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中 */
+    gap: 2px; /* 搜索框和按钮之间的间距 */
+  }
+  
+  .searchbar-container ion-searchbar {
+    flex: 1; /* 搜索框占满剩余空间 */
+  }
+  
+  .searchbar-container ion-button {
+    flex-shrink: 0; /* 按钮宽度保持固定 */
+    padding: 0 16px; /* 增加按钮的左右内边距 */
+    font-size: 16px; /* 调整按钮字体大小 */
+  }
+  
+  .inquery{
+    width:100%;
+    height:100px;
+    // --background-color: #fd0000;
+    padding: 5px 0px;
+    box-sizing: border-box;
+    margin: 0px 0px;
+    ion-button{
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+    }
+  }
+  
+  .inquery-ai{
+    height: 100%;
+    width: 48%;
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .inquery-ai img{
+    width:50%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+  
+  .inquery-human{
+    height: 100%;
+    width: 48%;
+    display: inline-block;
+    margin-left: 2%;
+    padding: 0;
+  }
+  
+  .inquery-human img{
+    width:50%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+  ion-item {
+    margin-bottom: 12px; /* 增加医生卡片之间的间距 */
+    padding: 12px; /* 调整卡片内边距 */
+    border-radius: 8px; /* 圆角设计 */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加卡片阴影 */
+    background-color: #ffffff; /* 卡片背景色 */
+  }
+  
+  ion-thumbnail {
+    width: 60px; /* 缩略图宽度 */
+    height: 60px; /* 缩略图高度 */
+    border-radius: 50%; /* 圆形头像 */
+  }
+  
+  .doctor-info {
+    margin-left: 12px; /* 缩略图与文字的间距 */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .doctor-info h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  
+  .doctor-info p {
+    margin: 4px 0;
+    font-size: 14px;
+    color: #666; /* 字体颜色 */
+  }
+  
+  // 功能区
+  .function-area {
+      margin: 16px 0;
+      padding: 0 16px;
+      background: white;
+      border-radius: 10px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      width: 100%;
+      max-width: 960px; /* 最大宽度 */
+    }
+    
+    .function-row {
+      display: flex; // 使用 Flexbox 布局
+      justify-content: space-between; // 按空间均匀分布
+      align-items: center; // 垂直居中
+      overflow-x: auto; // 允许水平滚动
+      scroll-snap-type: x mandatory; // 启用滚动捕捉
+      -webkit-overflow-scrolling: touch; // 平滑滚动
+      padding: 16px 0;
+    
+      .function-item {
+        flex: 1 0 20%; // 每个项目占 20% 宽度
+        min-width: 0; // 确保项目可以缩小
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        scroll-snap-align: start; // 滚动时对齐
+    
+        .icon {
+          font-size: 24px;
+          margin-bottom: 8px;
+        }
+    
+        .label {
+          font-size: 14px;
+          color: #333;
+        }
+      }
+    }
+    ion-col{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  
+    ion-card {
+      border-radius: 15px; /* 圆角边框 */
+      background-color: #f9f9f9; /* 卡片内部背景颜色 */
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+      border: 1px solid #e0e0e0; /* 边框颜色 */
+    }
+    ion-card:hover {
+      transform: scale(1.02); /* 悬停时放大效果 */
+      transition: transform 0.2s; /* 动画过渡效果 */
+    }

tailor-app/myapp/src/app/customization/customization/customization.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CustomizationPage } from './customization.page';
+
+describe('CustomizationPage', () => {
+  let component: CustomizationPage;
+  let fixture: ComponentFixture<CustomizationPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomizationPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tailor-app/myapp/src/app/customization/customization/customization.page.ts

@@ -0,0 +1,583 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { IonCardSubtitle, IonProgressBar, IonTextarea, ModalController } from '@ionic/angular/standalone';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonLabel, IonItem, IonList, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemOption, IonItemSliding, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime, IonFooter, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonGrid, IonChip, IonImg } from '@ionic/angular/standalone';
+import { TestChatCompletion } from './test-chat-completion';
+import { EditTagComponent } from '../edit-tag/edit-tag.component';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { DalleOptions, ImagineWork } from 'fmode-ng';
+import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';
+import { Icon } from 'ionicons/dist/types/components/icon/icon';
+import { camera, trendingUpOutline, sparklesOutline, cloudyOutline, diceOutline } from 'ionicons/icons';
+import { addIcons } from 'ionicons';
+import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
+import { SwiperComponent } from '../swiper/swiper.component';
+import { extactAndParseJsonFromString } from 'src/agent/agent.json';
+import { RouterModule } from '@angular/router';
+import { NavController } from '@ionic/angular';
+import { AlertController } from '@ionic/angular';
+import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
+import { openCommentPostModal } from 'src/lib/user/modal-comment-post/modal-comment-post.component';
+
+
+addIcons({ camera, trendingUpOutline, sparklesOutline, cloudyOutline, diceOutline })
+
+@Component({
+  selector: 'app-customization',
+  templateUrl: './customization.page.html',
+  styleUrls: ['./customization.page.scss'],
+  standalone: true,
+
+  imports: [IonProgressBar,IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, IonInput, EditTagComponent, IonTextarea, IonItem, IonList, MarkdownPreviewModule, IonIcon, IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime, IonFooter, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonGrid, IonChip, IonImg, IonCardSubtitle, SwiperComponent, RouterModule,]
+})
+export class CustomizationPage implements OnInit {
+  public buffer = 0.06;
+  public progress = 0;
+
+
+  // 修改需求分析
+  async modifyRequire() {
+    this.requireComplete=false
+  
+    let a = await openCommentPostModal(this.modalCtrl, { "title": "需求修改", "title2": "修改" });
+    if (a == null) {
+      a = "";
+    }
+    let prompt = `你是一名专业服装设计师，这是你的上次回答：
+    ${this.gptre}
+    基于你上次回答，我想做一些修改，修改如下：
+    ${a},
+    请你将上次回答基于我提出的修改修改后再发一遍
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: prompt }
+    ]);
+    completion.sendCompletion().subscribe(
+      (message: any) => {
+      this.gptre=message.content
+        console.log("Received message:", message);
+        if(this.progress<0.97){
+          if(this.progress<0.5){
+            this.progress+=0.01
+          }
+          if(this.progress>=0.5){
+            this.progress+=0.001
+          }
+        }
+        if (message?.complete) {
+          this.requireComplete=true
+
+          this.progress=0
+          console.log("完成");
+          
+        } 
+      }
+    )
+  }
+
+  async createdetail() {
+    this.type="detail"
+    let promotTemplate = `您是一名专业的美术画家，请您根据服装描述内容，将1.其描述的服装细节描述出来，服装描述如下：${this.gptre}`
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: promotTemplate }
+    ])
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content)
+      
+      // 赋值消息内容给组件内属性
+      this.picdetail = message.content
+      if(this.progress<0.97){
+        if(this.progress<0.5){
+          this.progress+=0.01
+        }
+        if(this.progress>=0.5){
+          this.progress+=0.001
+        }
+      }
+      if (message?.complete) {
+        this.isComplete = true;
+        // this.getJson()
+        this.progress=0
+
+      }
+    })
+
+  }
+  async modifyDetail() {
+    this.isComplete=false
+    
+    let a = await openCommentPostModal(this.modalCtrl, { "title": "细节修改", "title2": "修改" });
+    if (a == null) {
+      a = "";
+    }
+    let prompt = `你是一名专业服装设计师，这是你的上次回答：
+    ${this.picdetail}
+    基于你上次回答，我想做一些修改，修改如下：
+    ${a},
+    请你将上次回答基于我提出的修改修改后再发一遍
+    `;
+
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: prompt }
+    ]);
+    completion.sendCompletion().subscribe(
+      (message: any) => {
+      this.picdetail=message.content
+        console.log("Received message:", message);
+        if(this.progress<0.97){
+          if(this.progress<0.5){
+            this.progress+=0.01
+          }
+          if(this.progress>=0.5){
+            this.progress+=0.001
+          }
+        }
+        if (message?.complete) {
+    this.isComplete=true
+
+          console.log("完成");
+          this.progress=0
+          
+        } 
+      }
+    )
+  }
+
+
+  getJson() {
+    this.type="image"
+    let promt = `请你以以下json格式整合文段内容：
+    
+    {
+    "goal":"客户定制服装目的",
+    "style":"风格",
+    "color":"颜色",
+    "feature":"客户特殊的身体特征胸围大点什么的，如果客户没有特殊的身体特征这里填空字符串",
+    "ACC":"配饰，耳环，领带什么的",
+    "rim":"辅料，纽扣，拉链什么的",
+    "period":"定制周期",
+    "clothing":"以衣服类型+推荐尺码这样的格式拼接，比如西装外套+XXL",
+    "trousers":"以裤子类型+推荐尺码这样的格式拼接，如果客户没有指定裤子类型，由你来选一种合适的裤子类型",
+    "shoe":"以鞋子类型+推荐尺码这样的格式拼接,如果客户没有指定鞋子类型，由你来选一种合适的鞋子类型",
+    "after":"售后信息",
+    "texture":"材质"
+    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示"
+
+}
+
+
+    内容如下：${this.picdetail} ${this.gptre}
+`
+
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: promt }
+    ])
+    completion.sendCompletion().subscribe((message: any) => {
+      if(this.progress<0.97){
+        if(this.progress<0.5){
+          this.progress+=0.001
+        }
+        if(this.progress>=0.7){
+          this.progress+=0.0001
+        }
+      }
+      // 打印消息体
+      console.log(message.content)
+
+
+      // 赋值消息内容给组件内属性
+      this.JSONdes = message.content
+      if (message?.complete) {
+        console.log("json:", this.JSONdes);
+
+        this.imagineWork = new ImagineWork();
+        let options: DalleOptions = { prompt: this.picdetail }
+        this.imagineWork.draw(options).subscribe(async work => {
+          console.log("imagineWork", work?.toJSON())
+          console.log("images", work?.get("images"))
+          if (work?.get("images")?.length) {
+            this.images = work?.get("images");
+            this.progress=0
+
+
+
+            let a = extactAndParseJsonFromString(this.JSONdes)
+            // a.comment=await this.presentAlert();
+            // console.log("a.comment",a.comment);
+
+
+            a.detail = this.picdetail;
+            a.image = work?.toJSON().objectId
+            this.JSONobject = a
+            this.JSONKeys = Object.keys(this.JSONobject)
+            this.JSONcomplete = true
+            console.log(a);
+
+            //加入数据库
+            let newDsign = {
+              "goal": a['goal'],
+              "style": a['style'],
+              "color": a['color'],
+              "feature": a['feature'],
+              "ACC": a['ACC'],
+              "rim": a['rim'],
+              "period": a['period'],
+              "clothing": a['clothing'],
+              "trousers": a['trousers'],
+              "shoe": a['shoe'],
+              "after": a['after'],
+              "texture": a['texture'],
+              "remark": a['remark'],
+              "image": a['image'],
+              "user": new CloudUser().toPointer(),
+              "detail": a['detail'],
+              "comment": ""
+
+
+            }
+            let newObject = new CloudObject("Designs")
+            newObject.set(newDsign)
+            newObject.id = (await newObject.save()).id
+            this.newObject = newObject;
+            console.log("添加成功");
+          }
+        })
+      }
+    })
+
+
+    return true;
+  }
+
+
+
+
+
+  //打开聊天窗口
+  async openInquiry(doctor: CloudObject) {
+    let currentUser = new CloudUser();
+    let userPrompt = ``
+    if (!currentUser?.id) {
+      console.log("用户未登录，请登录后重试");
+      let user = await openUserLoginModal(this.modalCtrl);
+      if (!user?.id) {
+        return
+      }
+      currentUser = user;
+    }
+    if (currentUser?.get("realname")) {
+      userPrompt += `当前来访的患者，姓名：${currentUser?.get("realname")}`
+    }
+    if (currentUser?.get("gender")) {
+      userPrompt += `，性别：${currentUser?.get("gender")}`
+    }
+    if (currentUser?.get("age")) {
+      userPrompt += `，年龄：${currentUser?.get("age")}`
+    }
+
+
+    localStorage.setItem("company", "Svehl6FceL")
+    let options: ChatPanelOptions = {
+      roleId: "sVT0ezdJml",
+      chatId: this.chatID,
+      onClose: (chat: FmodeChat): boolean | Promise<boolean> => {
+        //开始分析用户和ai聊天记录
+        console.log("关闭");
+
+        if (!this.complete) { return true; }
+        console.log(this.isComplete);
+        console.log("开始分析");
+
+
+        this.complete = false;
+        console.log(chat.messageList);
+        let contentList = chat.messageList.map(item => ({
+          role: item.role,
+          content: item.content
+        }));
+        let stringArray = contentList.map(item => `${item.role}:\n ${item.content}`);
+        console.log(stringArray);
+
+        let contentStr = stringArray.slice(2).join("\n")
+        console.log(contentStr);
+
+
+        let promt = `您作为一名专业的服装推荐师，您的任务是为用户进行特定的服装设计，设计好后面料颜色等都要选定以便后续制造，请帮我分析以下用户user与一位服装设计师assistant的对话，详细分析出：1.用户对于定制服装的需求，2.联想并补全服装的细节，对话如下：${contentStr}
+    `
+
+        let completion = new FmodeChatCompletion([
+          { role: "system", content: "" },
+          { role: "user", content: promt }
+        ])
+        completion.sendCompletion().subscribe((message: any) => {
+          if(this.progress<0.97){
+            if(this.progress<0.5){
+              this.progress+=0.01
+            }
+            if(this.progress>=0.5){
+              this.progress+=0.001
+            }
+          }
+         
+          console.log(message.content)
+          console.log("complete:::::", this.isComplete);
+          this.gptre = message.content
+          if (message?.complete) {
+            this.progress=0
+          this.requireComplete=true;
+
+            // this.createImage()
+          }
+        })
+
+
+        return true;
+      },
+      onChatInit: (chat: FmodeChat) => {
+        console.log("onChatInit");
+        console.log("预设角色", chat.role);
+        chat.role.set("name", doctor?.get("name"));
+        chat.role.set("title", doctor?.get("title"));
+        chat.role.set("desc", `一名${doctor?.get("desc")}的服装设计专家，${doctor?.get("name")}，年龄${doctor?.get("age")}岁`);
+        chat.role.set("tags", ["服装", "设计"]);
+        chat.role.set("avatar", doctor?.get("avater") || "../../assets/img/doctor5.png")
+        chat.role.set("prompt", `
+
+    
+
+# 角色设定
+您是一名亲切和蔼的服装设计专家，${doctor?.get("name")}，年龄${doctor?.get("age")}岁，需要完成一次完整的服装定制服务。
+
+# 对话环节
+0.引导（根据用户基本情况，引导其描述需要定制的服装）
+1.预设的问询方式：询问顾客定制服装的目的（如婚礼、晚会、日常穿着等）。
+
+- 打招呼，以用户自述为主
+- 当信息充足时候，根据用户定制服装目的做出一些推荐服装来引导用户，并进入下一个环节
+2.拓展的问询细节
+例如：询问顾客的风格偏好（如休闲、正式、个性化等）。是否要指定特定的材质？倾向于哪种版型？英式、意式或其他？是否有特定的身体特征需要特别注意，例如肩宽、胸围、腰围等？是否有任何特殊的图案、标志或文字想要添加到服装上？是否需要这件服装与特定的配饰或鞋子或裤子搭配？是否需要特定的辅料，如纽扣、拉链、衬里等？是否需要特定的颜色或配色方案？对服装有没有什么特殊的需求？期望的定制周期是多久？您对售后服务有什么期望？
+- 以上这些问题要要逐个问，不能一次性给出让用户作答，每次问完都要根据之前回答和这次提问内容为用户推荐特定的服装来引导用户(比如前面用户回答是为了婚礼，那你应该先说一下婚礼的服装需要满足的特点，因为接下来你要问用户需要什么风格，你就可以基于用户婚礼这个回答先推荐西装，燕尾服等服装，然后再问用户需要什么风格的服装，推荐5个选择)，当问询细节补充完成后进入下一个环节
+3.初步的定制结果，并且同时列出定制项目
+初步结果：初步得出现在定制的结果要得出客户定制服装目的，风格，颜色，客户特殊的身体特征，配饰，辅料，定制周期，衣服类型，裤子类型，鞋子类型，售后信息，材质，备注
+定制项目：展现给用户看当前类似与现在定制结果的服装的市场趋势
+- 进入下一阶段
+4.在确定好服装后，询问客户身高体重，为他提供合适的尺码推荐
+- 等待用户提交身高体重，进入下一阶段
+4.给出初步的定制方案
+- 完成定制时，以json格式给出定制方案,json格式如下:
+{
+    "goal":"客户定制服装目的",
+    "style":"风格",
+    "color":"颜色",
+    "feature":"客户特殊的身体特征胸围大点什么的，如果客户没有特殊的身体特征这里填空字符串",
+    "ACC":"配饰，耳环，领带什么的",
+    "rim":"辅料，纽扣，拉链什么的",
+    "period":"定制周期",
+    "clothing":"以衣服类型+推荐尺码这样的格式拼接，比如西装外套+XXL",
+    "trousers":"以裤子类型+推荐尺码这样的格式拼接，如果客户没有指定裤子类型，由你来选一种合适的裤子类型",
+    "shoe":"以鞋子类型+推荐尺码这样的格式拼接,如果客户没有指定鞋子类型，由你来选一种合适的鞋子类型",
+    "after":"售后信息",
+    "texture":"材质"
+    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示"
+
+}
+，并在消息结尾附带: [完成]
+
+# 开始话语
+当您准备好了，可以以一个设计师的身份，向来访的用户打招呼。
+${userPrompt}
+
+`);
+      },
+      onMessage: (chat: FmodeChat, message: FmodeChatMessage) => {
+        console.log("onMessage", message)
+        let content: any = message?.content
+        this.messageList.push(content);
+        console.log("this.messageList", this.messageList);
+
+
+        if (typeof content == "string") {
+          if (content?.indexOf("[完成]") > -1) {
+            console.log("门诊已完成")
+            this.complete = true
+          }
+        }
+      },
+      onChatSaved: (chat: FmodeChat) => {
+        // chat?.chatSession?.id 本次会话的 chatId
+        console.log("onChatSaved", chat, chat?.chatSession, chat?.chatSession?.id)
+        this.chatID = chat?.chatSession?.id
+      },
+
+    }
+    openChatPanelModal(this.modalCtrl, options)
+    console.log(this.messageList);
+
+  }
+
+
+
+
+
+
+
+
+  @Input()
+  type: "require" | "detail" | "image" = "require"
+  typeChange(ev: any) {
+    this.type = ev?.detail?.value || ev?.value || 'require'
+  }
+
+
+
+
+  public isComplete: boolean = false;
+  public requireComplete: boolean = true;
+  editTags: Array<string> = []
+  picdetail: string = ""
+  public JSONKeys: string[] = []
+  public JSONKeys2: string[] = []
+
+
+
+  async toComment() {
+    let a = await openCommentPostModal(this.modalCtrl, { "title": "评论", "title2": "评论" })
+    if (a == null) {
+      a = ""
+    }
+
+    this.newObject.set({ "comment": a })
+    this.newObject.save()
+    console.log("添加评论成功");
+
+  }
+
+
+
+
+  toReport() {
+    this.nav.navigateRoot(['report'], {
+      queryParams: {
+        'object': JSON.stringify(this.JSONobject)
+      }
+    });
+
+    // this.router.navigate(['/report',this.JSONobject2])
+
+  }
+  ngOnInit() {
+    this.loadDoctorList()
+
+
+
+  }
+  test() {
+    console.log("开始");
+
+    let newDsign = {
+      "goal": "婚礼",
+      "style": "修身燕尾服",
+      "color": "黑色",
+      "feature": "",
+      "ACC": "领带",
+      "rim": "纽扣",
+      "period": "7天",
+      "clothing": "燕尾服+XXL",
+      "trousers": "裤子+XXL",
+      "shoe": "鞋子+42码",
+      "after": "清洗",
+      "texture": "丝绸",
+      "remark": "",
+      "detail": ""
+    }
+    let newObject = new CloudObject("Designs")
+    newObject.set(newDsign)
+
+    console.log(newObject.save());
+
+
+  }
+  constructor(
+    private modalCtrl: ModalController,
+    private router: Router,
+    public nav: NavController,
+    private alertController: AlertController
+  ) {
+    // 示例任务，自己生成图片后请存储新的ID
+    console.log('ImagineWork instance:', this.imagineWork);
+    
+    // this.imagineWork = new ImagineWork("Wx6o1Js1gA");
+    // this.imagineWork.fetchTask().then(work => {
+    //   this.images = this.imagineWork?.images || [];
+    // })
+  }
+  
+
+
+  imagineWork: ImagineWork | undefined
+  images: Array<string> = []
+  public gptre = `在这段对话中，我们可以分析出用户的需求和服装的细节设计。以下是详细分析：
+
+### 1. 用户对于定制服装的需求
+- **场合**：用户明确表示需要定制服装的场合是婚礼，这意味着服装需要正式且优雅。
+- **风格选择**：用户希望设计师帮忙选择风格，并没有明确的偏好，这表明用户可能对婚礼服装的具体风格不太了解或者希望设计师提供专业建议。
+- **颜色和材质**：用户在颜色和材质方面也没有特别要求，完全依赖设计师的选择，这显示出用户对设计师的信任。
+- **尺码和身体特征**：用户提供了身高和体重，并提到“胸围大点”，这意味着在服装的剪裁上需要特别注意胸部的合身度。
+- **售后服务**：用户希望有售后服务，特别是调整和清洗服务，显示出用户对服装的长期使用和维护的关注。
+
+### 2. 联想并补全服装的细节
+- **服装类型**：选择了经典的燕尾服，适合正式的婚礼场合。
+- **颜色**：选择了经典的黑色，符合婚礼的正式氛围。
+- **材质**：选择了丝绸，因其光泽感和柔软度，适合高档场合。
+- **配饰**：选择了黑色领结和白色口袋巾，经典而优雅，能够提升整体形象。
+- **辅料**：选择了黑色纽扣和丝绸衬里，确保整体风格统一且高档。
+- **定制周期**：设定为3周，符合一般定制的时间要求。
+- **尺码**：根据用户的身高和体重，推荐XXL尺码，特别注意胸围的合身。
+- **鞋子类型**：建议42-43码的皮鞋，符合用户的身高体重。
+- **售后服务**：包括免费调整和清洗服务，确保用户在婚礼后也能保持服装的最佳状态。
+- **备注**：用户希望随时联系，表明用户对沟通的重视。
+
+### 总结
+通过对用户需求的分析和对服装细节的补全，我们可以为用户提供一套完整的婚礼燕尾服定制方案。这不仅满足了用户对正式场合服装的需求，也考虑到了用户的个人特征和售后服务的期望。这样的定制方案将有助于用户在婚礼上展现最佳形象。`
+  messageList: string[] = []
+  title: string = "123"
+  chatID = ""
+  complete: boolean = false
+  JSONcomplete: boolean = false
+  JSONdes = ""
+  JSONobject: { [key: string]: string } = {}
+
+
+  /** 示例：问诊ChatPanel面板 */
+
+  
+  newObject: CloudObject = new CloudObject("Designs")
+  shareData: any = {}
+
+
+
+
+
+
+  async loadDoctorList() {
+    let query = new CloudQuery("Designer");
+    query.include("depart")
+    this.doctorList = await query.find()
+    console.log(this.doctorList);
+
+
+
+  }
+  doctorList: Array<CloudObject> = []
+
+}

tailor-app/myapp/src/app/customization/customization/test-chat-completion.ts

@@ -0,0 +1,99 @@
+export interface TestChatMessage{
+    role:string
+    content:string
+}
+export class TestChatCompletion{
+messageList:Array<TestChatMessage>
+constructor(messageList:Array<TestChatMessage>){
+    this.messageList = messageList
+}
+async createCompletionByStream() {
+
+let token = localStorage.getItem("token");
+let bodyJson = {
+  "token": `Bearer ${token}`,
+  "messages": this.messageList,
+  "model": "fmode-4.5-128k",
+  "temperature": 0.5,
+  "presence_penalty": 0,
+  "frequency_penalty": 0,
+  "top_p": 1,
+  "stream":true
+};
+
+let response = await fetch("https://test.fmode.cn/api/apig/aigc/gpt/v1/chat/completions", {
+  "headers": {
+    "accept": "text/event-stream",
+    "sec-fetch-dest": "empty",
+    "sec-fetch-mode": "cors",
+    "sec-fetch-site": "same-site"
+  },
+  "referrer": "https://ai.fmode.cn/",
+  "referrerPolicy": "strict-origin-when-cross-origin",
+  "body": JSON.stringify(bodyJson),
+  "method": "POST",
+  "mode": "cors",
+  "credentials": "omit"
+});
+
+let messageAiReply = ""
+let messageIndex = this.messageList.length
+let reader = response.body?.getReader();
+if (!reader) {
+  throw new Error("Failed to get the response reader.");
+}
+
+let decoder = new TextDecoder();
+let buffer = "";
+
+while (true) {
+  let { done, value } = await reader.read();
+  if (done) {
+    break;
+  }
+
+  buffer += decoder.decode(value);
+
+  // Split the buffer by newlines to get individual messages
+  let messages = buffer.split("\n");
+
+  // Process each message
+  for (let i = 0; i < messages.length - 1; i++) {
+    let message = messages[i];
+
+    // Process the message as needed
+    /**
+     * data: {"id":"chatcmpl-y2PLKqPDnwAFJIj2L5aqdH5TWK9Yv","object":"chat.completion.chunk","created":1696770162,"model":"fmode-4.5-128k","choices":[{"index":0,"delta":{"role":"assistant","content":""},"finish_reason":null}]}
+     * data: {"id":"chatcmpl-y2PLKqPDnwAFJIj2L5aqdH5TWK9Yv","object":"chat.completion.chunk","created":1696770162,"model":"fmode-4.5-128k","choices":[{"index":0,"delta":{},"finish_reason":"stop"}]}
+     * data: [DONE]
+     */
+    let dataText = message.replace("data:\ ","")
+    if(dataText.startsWith("{")){
+      try{
+        let dataJson = JSON.parse(dataText)
+        console.log(dataJson)
+        messageAiReply += dataJson?.choices?.[0]?.delta?.content || ""
+        this.messageList[messageIndex] = {
+          role:"assistant",
+          content:messageAiReply
+        }
+      }catch(err){}
+    }
+    if(dataText.startsWith("[")){
+      console.log(message)
+      console.log("完成")
+      this.messageList[messageIndex] = {
+        role:"assistant",
+        content:messageAiReply
+      }
+      messageAiReply = ""
+    }
+    // Parse the message as JSON
+    // let data = JSON.parse(message);
+
+    // Clear the processed message from the buffer
+    buffer = buffer.slice(message.length + 1);
+  }
+}
+}
+}

tailor-app/myapp/src/app/report/report.component.html

@@ -3,7 +3,7 @@
     <!-- <ion-button >
       Click me
     </ion-button> -->
-    <ion-button (click)="back()" >返回</ion-button>
+    <ion-back-button slot="start"></ion-back-button>
   </ion-toolbar>
 </ion-header>
 <ion-content>

tailor-app/myapp/src/app/report/report.component.ts

@@ -86,21 +86,22 @@ export class ReportComponent  implements OnInit {
 这套经典黑色西装结合了优雅的设计、舒适的合身和细致的配件，完美适应婚礼这一特殊场合，同时满足用户的个性化需求。`
 }
 
-  constructor(public activeRoute: ActivatedRoute, public nav:NavController) {
-    this.JSONKeys2 = Object.keys(this.JSONobject2) 
-
-    this.activeRoute.queryParams.subscribe((params: Params) => {
-      console.log(params);
-      
-      this.JSONobject= JSON.parse(params['object']);
-      this.JSONKeys= Object.keys(this.JSONobject) 
-      console.log(this.JSONobject);
-      
-    });
+  constructor(public activeRoute: ActivatedRoute, public nav:NavController,private router: Router) {
+    
    }
 
 
-  ngOnInit() {}
+  ngOnInit() {
+    const navigation = this.router.getCurrentNavigation();
+    if (navigation && navigation.extras && navigation.extras.state) {
+      const state = navigation.extras.state;
+      console.log(state['myObject']); // 访问传递的对象数据
+      this.JSONobject=state['myObject']
+      this.JSONKeys= Object.keys(this.JSONobject) 
+
+      
+    }
+  }
   back(){
     this.nav.navigateRoot(['/tabs/customization'],{
       

tailor-app/myapp/src/app/swiper/swiper.component.html

@@ -1,40 +1,65 @@
 <div class="swiper_box">
   <div class="swiper-container" id="swiper1">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide" style="display: flex;align-items: center;justify-content: center;">
-        <div style="margin-left: 15px;width: 50%;height: 90%;">
-            @for(imageUrl of image1;track imageUrl){
-              <img [src]="imageUrl" alt="" srcset="">
-            }
-
-        </div>
+    <div class="swiper-wrapper" >
+      <div class="swiper-slide" *ngFor="let design of designList" style="display: flex;align-items: center;justify-content: center;">
+        
         <ion-grid
-          style="height: 90%;margin: 0;padding: 0;margin-left: 10px;margin-right: 15px;background-color: #eaf4f7;">
-          <ion-row class="table-header">
-            <ion-col col-12 text-center>
-              <strong>服装设计方案表</strong>
-            </ion-col>
-          </ion-row>
+    style="width:  90%; margin: 0; padding: 0; margin-left: 10px; margin-right: 15px; background-color: #eaf4f7;">
+    <ion-row class="table-header">
+        <ion-col col-12 text-center>
+            <strong>服装设计方案表</strong>
+        </ion-col>
+    </ion-row>
+    <ion-row>
+      <div style="width: 100%;">
+        <img style="height: 100%;;" [src]="design.image" alt="">
+      </div>
+    </ion-row>
+    <!-- 横向表格内容 -->
+    <ion-row>
+        <ion-col col-4 text-left><strong>目的</strong></ion-col>
+        <ion-col col-4 text-left>{{design.goal}}</ion-col>
+        <ion-col col-4 text-left><strong>款式</strong></ion-col>
+        <ion-col col-4 text-left>{{design.style}}</ion-col>
+        
+    </ion-row>
+    <ion-row>
+      <ion-col col-4 text-left><strong>颜色</strong></ion-col>
+        <ion-col col-4 text-left>{{design.color}}</ion-col>
+        <ion-col col-4 text-left><strong>配饰</strong></ion-col>
+        <ion-col col-4 text-left>{{design.ACC}}</ion-col>
+        
+    </ion-row>
+    <ion-row>
+      <ion-col col-4 text-left><strong>辅料</strong></ion-col>
+        <ion-col col-4 text-left>{{design.rim}}</ion-col>
+        <ion-col col-4 text-left><strong>定制周期</strong></ion-col>
+        <ion-col col-4 text-left>{{design.period}}</ion-col>
+        
+    </ion-row>
+    <ion-row>
+      <ion-col col-4 text-left><strong>服装</strong></ion-col>
+        <ion-col col-4 text-left>{{design.clothing}}</ion-col>
+        <ion-col col-4 text-left><strong>裤子</strong></ion-col>
+        <ion-col col-4 text-left>{{design.trousers}}</ion-col>
+        
+        
+    </ion-row>
+
+    <ion-row>
+      <ion-col  col-4 text-left><strong>售后</strong></ion-col>
+        <ion-col col-4 text-left>{{design.after}}</ion-col>
+        <ion-col col-4 text-left><strong>材质</strong></ion-col>
+        <ion-col col-4 text-left>{{design.texture}}</ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col col-4 text-left><strong>鞋子</strong></ion-col>
+        <ion-col col-4 text-left>{{design.shoe}}</ion-col>
+    </ion-row>
+   
 
-          <!-- 表格内容 -->
-          <ion-row>
-            <ion-col col-4 text-left><strong>名字</strong></ion-col>
-            <ion-col col-8 text-left>小明</ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col col-4 text-left><strong>年龄</strong></ion-col>
-            <ion-col col-8 text-left>25</ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col col-4 text-left><strong>设计方案</strong></ion-col>
-            <ion-col col-8 text-left>现代简约风格</ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col col-4 text-left><strong>颜色</strong></ion-col>
-            <ion-col col-8 text-left>蓝色</ion-col>
-          </ion-row>
-          <!-- 可以继续添加更多行 -->
-        </ion-grid>
+    <!-- 可以继续添加更多行 -->
+</ion-grid>
       </div>
       <div class="swiper-slide">Slide 2</div>
       <div class="swiper-slide">Slide 3</div>

tailor-app/myapp/src/app/swiper/swiper.component.scss

@@ -1,6 +1,6 @@
 .swiper-container {
     width: 100%;
-    height: 300px;
+    height: 800px;
   }
   ion-grid {
     width: 100%;
@@ -49,4 +49,7 @@
   
     --padding-top: 10px;
     --padding-bottom: 10px;
+  }
+  ion-col{
+    height: 50px;
   }

tailor-app/myapp/src/app/swiper/swiper.component.ts

@@ -3,6 +3,28 @@ import { Component, OnInit } from '@angular/core';
 import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonLabel, IonItem, IonList, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemOption, IonItemSliding, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime, IonFooter, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonGrid, IonChip, IonImg } from '@ionic/angular/standalone';
 declare let Swiper: any;
 import { CommonModule } from '@angular/common';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+interface Design {
+  "goal": string,
+  "style": string,
+  "color": string,
+  "feature": string,
+  "ACC": string,
+  "rim": string,
+  "period": string,
+  "clothing": string,
+  "trousers": string,
+  "shoe": string,
+  "after": string,
+  "texture": string,
+  "remark":string,
+  "image": string,
+  "user": string,
+  "detail": string,
+  "comment": string
+
+
+}
 @Component({
   selector: 'swiper',
   templateUrl: './swiper.component.html',
@@ -19,13 +41,13 @@ export class SwiperComponent implements OnInit {
   ];
   constructor() { }
 
-  scrollToElement(){
+  scrollToElement() {
     const element = document.getElementById('designers');
     if (element) {
       element.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-    
-    
+
+
   }
 
   image1: Array<string> = []
@@ -35,6 +57,11 @@ export class SwiperComponent implements OnInit {
     //   observer:true,//修改swiper自己或子元素时，自动初始化swiper
     //   observeParents:true,//修改swiper的父元素时，自动初始化swiper
     // });
+
+    this.loadDesigne()
+
+
+
     this.imagineWork = new ImagineWork("0Jcfvd45WL");
     this.imagineWork.fetchTask().then(work => {
       this.image1 = this.imagineWork?.images || [];
@@ -42,8 +69,10 @@ export class SwiperComponent implements OnInit {
 
 
     var Swiper1 = new Swiper('#swiper1', {
+      height:600,
       parallax: true,
       // autoplay: true,
+      
       loop: true,
       observer: true,//修改swiper自己或子元素时，自动初始化swiper
       observeParents: true,//修改swiper的父元素时，自动初始化swiper
@@ -113,6 +142,59 @@ export class SwiperComponent implements OnInit {
 
 
 
+  }
+  count = 4
+  designList:Array<Design> = []
+  async loadDesigne() {
+    let query = new CloudQuery("Designs");
+    let designList: Array<CloudObject> = await query.find()
+    
+    let aa = designList.map(item => item.data)
+    console.log(aa);
+    aa = aa.filter(data => data['comment'] !== undefined && data['comment'] !== '')
+    console.log(aa);
+
+    let indices = Array.from({ length: aa.length }, (_, i) => i);
+
+    // 打乱索引数组
+    indices.sort(() => Math.random() - 0.5);
+
+    // 从打乱后的索引数组中选取前count个索引，并对应的从原数组中获取元素
+    let bb = indices.slice(0, this.count).map(index => aa[index]);
+    console.log(bb[0]['image']);
+
+    let cc:Array<Design>=bb.map(item=>{
+      let obj= {
+        "goal":item['goal'] ,
+        "style":item['style'] ,
+        "color":item['color'] ,
+        "feature":item['feature'] ,
+        "ACC":item['ACC'] ,
+        "rim":item['rim'] ,
+        "period":item['period'] ,
+        "clothing":item['clothing'] ,
+        "trousers":item['trousers'] ,
+        "shoe": item['shoe'],
+        "after":item['after'] ,
+        "texture":item['texture'] ,
+        "remark":item['remark'],
+        "image": item['image'],
+        "user":item['user'] ,
+        "detail":item['detail'] ,
+        "comment":item['comment'] 
+      
+      
+      }
+      return obj;
+    })
+    
+    this.designList = cc
+    console.log(this.designList[0].detail);
+    
+    console.log(designList);
+    
+    
+
   }
   ngAfterViewInit() {
   }

tailor-app/myapp/src/lib/user/modal-comment-post/modal-comment-post.component.html

@@ -2,9 +2,10 @@
 <ion-card>
   <ion-card-header>
     <ion-card-title>
-      评论：
+      {{object2.title}}
     </ion-card-title>
-    <ion-card-subtitle>请输入您的评论</ion-card-subtitle>
+    <ion-card-subtitle>      {{object2.title2}}
+    </ion-card-subtitle>
    </ion-card-header>
  <ion-card-content>
 

tailor-app/myapp/src/lib/user/modal-comment-post/modal-comment-post.component.ts

@@ -3,6 +3,10 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonInput, IonItem, IonSegment, IonSegmentButton, IonLabel, IonTextarea } from '@ionic/angular/standalone';
 import { CloudUser } from 'src/lib/ncloud';
+interface CommentObject {
+  title: string;
+  title2: string;
+}
 
 @Component({
   selector: 'app-modal-comment-post',
@@ -18,7 +22,7 @@ import { CloudUser } from 'src/lib/ncloud';
 export class ModalCommentPostComponent  implements OnInit {
 
   currentUser:CloudUser|undefined
-  
+  object2:CommentObject={ title: '', title2: '' };
 
   constructor(private modalCtrl:ModalController) { 
     
@@ -36,11 +40,13 @@ export class ModalCommentPostComponent  implements OnInit {
   }
 }
 
-export async function openCommentPostModal(modalCtrl:ModalController):Promise<string|null>{
+export async function openCommentPostModal(modalCtrl:ModalController,object:object):Promise<string|null>{
+  
   const modal = await modalCtrl.create({
     component: ModalCommentPostComponent,
     breakpoints:[0.7,1.0],
-    initialBreakpoint:0.7
+    initialBreakpoint:0.7,
+    componentProps:{object2:object}
   });
   modal.present();