0.7

src/app/tab1/tab1.page.html

@@ -13,11 +13,11 @@
   <div class="container">
     <ion-card>
       <ion-card-content>
-        <img id="face" src=" https://web2023.fmode.cn/jxufe/0225067/assets/images/home.png" class="captured-image" />
+        <img id="face" src=" /assets/images/home.png" class="captured-image" />
       </ion-card-content>
     </ion-card>
-    <ion-button class="capture-button" expand="block" routerLink="/study/results">
-      <ion-icon src=" https://web2023.fmode.cn/jxufe/0225067/assets/icon/camera.svg" class="button-icon"></ion-icon>
+    <ion-button class="capture-button" expand="block" routerLink="/study/camera">
+      <ion-icon src=" /assets/icon/camera.svg" class="button-icon"></ion-icon>
     </ion-button>
   </div>
 </ion-content>

src/modules/aigc/chat/class-rxjs-chat-completion.ts

@@ -31,8 +31,9 @@ export class TestRxjsChatCompletion {
               {
                 result:chatResult,    
                }    )
-               YCX.save2(ResultsPage.currentObjectId);
+               YCX.saveChat(ResultsPage.currentObjectId);
             // console.log(YCX);
+
         }
         SaveChatResult();
     }

src/modules/study/camera-page/camera-page.page.html

@@ -1,22 +1,19 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>camera-page</ion-title>
-  </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="ion-padding">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">camera-page</ion-title>
+      <ion-title size="large">请上传照片</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-item>
-    <ion-label>上传照片</ion-label>
-    <input type="file" (change)="handleFileInput($event)">
+    <ion-label position="stacked">上传照片</ion-label>
+    <input type="file" (change)="handleFileInput($event)" accept="image/*">
   </ion-item>
 
-  <ion-img *ngIf="getImageUrl()" [src]="getImageUrl()"></ion-img>
+  <ion-img *ngIf="getImageUrl()" [src]="getImageUrl()" class="uploaded-image"></ion-img>
 
-  <ion-button expand="full" (click)="submitForm()" routerLink="/study/results">提交</ion-button>
+  <ion-button expand="full" (click)="submitForm()" routerLink="/study/results" class="submit-button">提交</ion-button>
 </ion-content>

src/modules/study/camera-page/camera-page.page.scss

@@ -0,0 +1,11 @@
+.uploaded-image {
+    display: block;
+    margin: 20px auto;
+    max-width: 100%;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+  
+  .submit-button {
+    margin-top: 20px;
+  }

src/modules/study/camera-page/camera-page.page.ts

@@ -29,7 +29,6 @@ export class CameraPagePage {
       reader.readAsDataURL(this.uploadedImage);
       reader.onload = () => {
         CameraPagePage.imageUrl = reader.result as string;
-        console.log(CameraPagePage.imageUrl)
       };
     }
   }

src/modules/study/results/results-post.ts

@@ -129,6 +129,62 @@ export class ParseObject{
         return null
     }
 }
+
+async saveChat(id:any){
+  console.log("Objectid3:",id)
+  let body = JSON.stringify(this.data)
+  let url = this.serverURL+"/classes/"+this.className+"/"+id  // 创建URL
+  let method = "PUT"
+  console.log(url,method,body,"11111111111111111",id)
+  let response = await fetch(url, {
+      "headers": {
+          // "content-type": "text/plain;charset=UTF-8",
+          "x-parse-application-id": "dev"
+      },
+      "body": body,
+      "method": method,
+      "mode": "cors",
+      "credentials": "omit"
+  });
+  console.log(body)
+  let text = await response?.text();
+  console.log(text)
+  let json = await response?.json();
+  if(json?.objectId){
+      console.log(json)
+     const foreheadHeight= document.getElementById('foreheadHeight');   
+     if (foreheadHeight) foreheadHeight.textContent = json.面部特征分析.分析;
+      
+       console.log("66666666666666",json.面部特征分析.形象设计建议)  
+        //  json.五眼比例.分析
+        //  json.五眼比例.形象设计建议
+        //  json.脸型.分析
+        //  json.脸型.形象设计建议
+        //  json.眉形.分析
+        //  json.眉形.形象设计建议
+        //  json.唇形.分析
+        //  json.唇形.形象设计建议
+        //  json.眼睛形状.分析
+        //  json.眼睛形状.形象设计建议
+        //  json.鼻形.分析
+        //  json.鼻形.形象设计建议
+        //  json.颧骨.分析
+        //  json.颧骨.形象设计建议
+        //  json.下巴.分析
+        //  json.下巴.形象设计建议
+        //  json.额头.分析
+        //  json.额头.形象设计建议
+        //  json.脸颊.分析
+        //  json.脸颊.形象设计建议
+      this.id = json?.objectId
+      return this
+  }else{
+      return null
+  }
+}
+
+
+
   async delete(id:any){
       let response = await fetch(this.serverURL+"/classes/"+this.className+"/"+id, {
           "headers": {

src/modules/study/results/results.page.html

@@ -1,20 +1,131 @@
+
 <ion-content [fullscreen]="true">
   <div class="container">
     <ion-card class="horizontal-cards">
       <ion-card-content>
         <img id="face" src="{{imageUrl}}" class="captured-image" />
-
-
       </ion-card-content>
     </ion-card>
 
     <ion-card class="horizontal-cards face-analysis-card">
       <ion-card-header>
-        <ion-card-title>面部特征结果分析</ion-card-title>
+        <ion-card-title>面部特征解析</ion-card-title>
       </ion-card-header>
       <ion-card-content class="horizontal-content">
-        <div class="analysis-item">
+        <div class="analysis-grid">
+          <div class="analysis-item">
+            <div class="item-label">三庭比例：</div>
+            <div>前庭：<div id="foreheadHeight"></div></div>
+            <div>中庭：<div id="noseLength"></div></div>
+            <div>下庭：<div id="chinHeight"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">五眼比例：<div id="wuYan"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">下巴：<div id="chinShape"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">唇形：<div id="lipShape"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">眉形：<div id="browShape"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">眼睛形状：<div id="eyeShape"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">脸型：<div id="faceShape"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">脸颊：<div id="cheeksShape"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">额头：<div id="foreheadShape"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">颧骨：<div id="cheekBones"></div></div>
+          </div>
+          <div class="analysis-item">
+            <div class="item-label">鼻形：<div id="noseShape"></div></div>
+          </div>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <!-- 面部特征结果推荐卡片 -->
+    <ion-card class="horizontal-cards face-recommendation-card">
+      <ion-card-header>
+        <ion-card-title>面部特征结果推荐</ion-card-title>
+      </ion-card-header>
+      <ion-card-content class="horizontal-content">
+        <div class="recommendation-grid">
+          <div class="recommendation-item">
+            <div class="item-label">三庭比例分析与推荐：</div>
+            <div><strong>分析：</strong>前庭较短，说明额头相对较窄；中庭较长，显示脸中部较长，鼻子和颧骨区域比较突出；下庭较短，表明下巴较短。</div>
+            <div><strong>形象设计建议：</strong>可以选择有刘海的发型，如空气刘海，增加额头的宽度。同时选择有层次感的发型，平衡脸部中庭的长度。使用高光在额头部位，增加视觉上的额头长度。同时在鼻子两侧使用阴影，缩短中庭的长度感</div>
+          </div>
+          <div class="recommendation-item">
+            <div class="item-label">五眼比例分析与推荐：</div>
+            <div><strong>分析：</strong></div><div>五眼比例较大，说明眼睛之间的间距相对较宽。</div>
+            <div><strong>形象设计建议：</strong></div><div>可以选择猫眼妆，通过延长眼线和使用深色眼影在眼角部分，增加眼睛的聚拢感。眉毛可以修剪得靠近眼睛的位置，增加眼睛的集中度。</div>
+          </div>         
+           <div class="recommendation-item">
+            <div class="item-label">下巴分析与推荐：</div>
+            <div><strong>分析：</strong></div><div>长形脸说明脸部长度较大，相对宽度较窄。</div>
+            <div><strong>形象设计建议：</strong></div><div>选择中长发或短发，卷发或大波浪可以增加脸部的宽度，减少脸部长度的视觉效果。侧分刘海也有助于缩短脸部长度。在脸颊中央使用腮红，增加脸部的饱满感，平衡脸部长度。</div>
+          </div>          
+          <div class="recommendation-item">
+            <div class="item-label">唇形分析及推荐：</div>
+            <div><strong>分析：</strong></div><div>薄唇说明嘴唇较为纤薄，需要增加唇部的丰满感。</div>
+            <div><strong>形象设计建议：</strong></div><div>使用唇线笔勾勒出唇部轮廓，稍微超出自然唇线，使唇形显得更加丰满。选择光泽感强的唇膏或唇蜜，增加唇部的立体感。</div>
+          </div>
+          <div class="recommendation-item">
+            <div class="item-label">眉形分析及推荐：</div>
+            <div><strong>分析：</strong></div><div>浓眉说明眉毛较为浓密，需要适当修饰使其更加整洁有型。</div>
+            <div><strong>形象设计建议：</strong></div><div>保持自然的浓眉，适当修饰眉毛的形状，避免过于锐利的眉形。可以使用眉刷和眉笔进行细致的修整，使其更加有型。</div>
+          </div>          
+          <div class="recommendation-item">
+            <div class="item-label">眼睛形状分析及推荐：</div>
+            <div><strong>分析：</strong></div><div>"圆形眼说明眼睛较为圆润，有一定的可爱感。</div>
+            <div><strong>形象设计建议：</strong></div><div>可以尝试猫眼妆或烟熏妆，增加眼部的深邃感。使用眼线笔或眼线液拉长眼尾，适当加粗眼线，增强眼部轮廓感。选择哑光和珠光结合的眼影，可以增加眼部的层次感。</div>
+          </div>          
+          <div class="recommendation-item">
+            <div class="item-label">脸颊分析及推荐：</div>
+            <div><strong>分析：</strong></div><div>瘦削脸颊说明脸颊较为瘦削，需要增加脸颊的饱满感。</div>
+            <div><strong>形象设计建议：</strong></div><div>使用腮红增加脸颊的饱满度，选择暖色调的腮红（如桃粉色、珊瑚色），从笑肌处轻扫至太阳穴，制造出健康红润的感觉。</div>
+          </div>          
+          <div class="recommendation-item">
+            <div class="item-label">额头分析及推荐：</div>
+            <div><strong>分析：</strong></div><div>窄额头说明额头较为窄小，需要增加额头的宽度感。</div>
+            <div><strong>形象设计建议：</strong></div><div>选择有刘海的发型，如空气刘海，增加额头的宽度感。</div>
+          </div>          
+          <div class="recommendation-item">
+            <div class="item-label">颧骨分析及推荐：</div>
+            <div><strong>分析：</strong></div><div>颧骨平说明颧骨不突出，面部轮廓较为平坦。</div>
+            <div><strong>形象设计建议：</strong></div><div>在颧骨部位使用阴影，增加颧骨的立体感，使面部轮廓更加分明。</div>
+          </div>          
+          <div class="recommendation-item">
+            <div class="item-label">鼻形分析及推荐：</div>
+            <div><strong>分析：</strong></div><div>鹰钩鼻说明鼻子的弧度较大，有一定的锐利感。</div>
+            <div><strong>形象设计建议：</strong></div><div>通过高光和修容来调整鼻子的视觉效果。在鼻梁和鼻头部位使用高光，在鼻翼两侧使用阴影，能够柔化鼻子的线条。</div>
+          </div>        
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>
+
+
+
+
+
+
+
+
+                <!-- <div class="analysis-item">
           <p>三庭比例:前庭（额头至眉毛）： <span id="sanTing">145.88 中庭（眉毛至鼻底）：173.07 下庭（鼻底至下巴）：63.76</span></p>
+          <div>前庭：{{sanTing.foreheadHeight}}</div>
           <div class="recommendation">前庭较短，前庭的长度较短，说明额头相对较窄。 中庭较长，中庭的长度较长，说明脸中部较长，鼻子和颧骨区域比较突出。 下庭较短，下庭的长度较短，说明下巴较短。 <br>形象设计建议：<br>发型：可以选择有刘海的发型，如空气刘海，增加额头的宽度。同时选择有层次感的发型，平衡脸部中庭的长度。<br>妆容：使用高光在额头部位，增加视觉上的额头长度。同时在鼻子两侧使用阴影，缩短中庭的长度感。</div>
         </div>
         <div class="analysis-item">
@@ -55,4 +166,4 @@
         </div>
         <div class="analysis-item">
           <p>脸颊: <span id="cheeksShape">脸颊：瘦削脸颊</span></p>
-          <div class="recommendation">瘦削脸颊说明脸
+          <div class="recommendation">瘦削脸颊说明脸 -->

src/modules/study/results/results.page.scss

@@ -2,12 +2,12 @@
   --ion-color-primary: #3880ff;
   --ion-color-secondary: #eb445a;
   --ion-padding: 16px;
-  --ion-border-radius: 16px; /* 更圆润的边角 */
-  --ion-color-gold: #FFD700; /* 定义金黄色 */
+  --ion-border-radius: 16px;
+  --ion-color-gold: #FFD700;
 }
 
 ion-content {
-  --background: url('/assets/images/BackGround.png') no-repeat center center / cover; /* 设置背景图像 */
+  --background: url('/assets/images/BackGround.png') no-repeat center center / cover;
 }
 
 .container {
@@ -16,15 +16,15 @@ ion-content {
   align-items: center;
   padding: var(--ion-padding);
   border-radius: var(--ion-border-radius);
-  color: var(--ion-color-gold); /* 文字颜色为金黄色 */
+  color: var(--ion-color-gold);
 }
 
 .horizontal-cards {
   width: 100%;
   max-width: 800px;
   margin-bottom: var(--ion-padding);
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* 增加卡片阴影和层次感 */
-  background: transparent; /* 设置为透明背景 */
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  background: transparent;
 }
 
 .captured-image {
@@ -34,39 +34,53 @@ ion-content {
   border-radius: var(--ion-border-radius);
 }
 
-.face-analysis-card {
-  background-color: transparent; /* 设置为透明背景 */
+.face-analysis-card, .face-recommendation-card {
+  background-color: transparent;
 }
 
 .horizontal-content {
   padding: var(--ion-padding);
 }
 
-.analysis-item {
+.analysis-item, .recommendation-item {
   margin-bottom: 12px;
   padding: 12px;
   border: 1px solid var(--ion-color-secondary);
   border-radius: var(--ion-border-radius);
-  background: linear-gradient(135deg, #eadef5 0%, #c1dcf8 100%); /* 渐变紫色背景 */
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); /* 增加阴影效果 */
-  color: var(--ion-color-gold); /* 文字颜色为金黄色 */
+  background: linear-gradient(135deg, #eadef5 0%, #c1dcf8 100%);
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
+  color: var(--ion-color-gold);
 }
 
-.analysis-item p,
-.recommendation {
-  color: var(--ion-color-gold) !important; /* 强制设置文字颜色为金黄色 */
+.analysis-item p, .recommendation {
+  color: var(--ion-color-gold) !important;
 }
 
 .recommendation {
   margin-top: 8px;
-  padding: 12px; /* 增加内边距 */
-  background: rgba(255, 255, 255, 0.6); /* 半透明白色背景，提升可读性 */
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.6);
   border-radius: var(--ion-border-radius);
   font-size: 14px;
-  color: var(--ion-color-gold) !important; /* 强制设置文字颜色为金黄色 */
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.analysis-grid, .recommendation-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 10px;
+  padding: 10px;
 }
 
+.item-label {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+/* results.page.scss */
+.title-bold {
+  font-size: 24px; /* 或者你喜欢的任何其他大小 */
+  color: #333; /* 或者你喜欢的任何其他颜色 */
+}
 @media (min-width: 768px) {
   .container {
     flex-direction: row;

src/modules/study/results/results.page.ts

@@ -264,8 +264,6 @@ export class ResultsPage implements OnInit {
 
       const face1: any | null = document.getElementById('face'); //获取html页面上face的src中的img链接
       const imageUrl: string = CameraPagePage.imageUrl!;
-       console.log("face1",face1)
-       console.log("imageUrl",imageUrl)
       if(!imageUrl)
       {
         alert("未上传照片请重试");
@@ -324,12 +322,13 @@ export class ResultsPage implements OnInit {
       console.log(`鼻形: ${noseShape}`);
       console.log(`颧骨: ${cheekBones}`);
       console.log(`下巴: ${chinShape}`);
-
       console.log(`额头: ${foreheadShape}`);
       console.log(`脸颊: ${cheeksShape}`);
 
       ResultsPage.currentObjectId = await SaveFace(FaceName, imageUrl, FaceDataJson,this.serverURL);
-      const sanTingElement = document.getElementById('sanTing');
+      const foreheadHeightElement = document.getElementById('foreheadHeight');
+      const noseLengthElement = document.getElementById('noseLength');
+      const chinHeightElement = document.getElementById('chinHeight');
       const wuYanElement = document.getElementById('wuYan');
       const faceShapeElement = document.getElementById('faceShape');
       const browShapeElement = document.getElementById('browShape');
@@ -341,7 +340,9 @@ export class ResultsPage implements OnInit {
       const foreheadShapeElement = document.getElementById('foreheadShape');
       const cheeksShapeElement = document.getElementById('cheeksShape');
 
-      if (sanTingElement) sanTingElement.textContent = `${sanTing.foreheadHeight}, ${sanTing.noseLength}, ${sanTing.chinHeight}`;
+      if (foreheadHeightElement) foreheadHeightElement.textContent = `${sanTing.chinHeight}`;
+      if (noseLengthElement) noseLengthElement.textContent = ` ${sanTing.noseLength}`;
+      if (chinHeightElement) chinHeightElement.textContent = ` ${sanTing.chinHeight}`;
       if (wuYanElement) wuYanElement.textContent = `${wuYan}`;
       if (faceShapeElement) faceShapeElement.textContent = faceShape;
       if (browShapeElement) browShapeElement.textContent = browShape;

src/modules/user/mine/mine.page.scss

@@ -0,0 +1,63 @@
+/* 全局变量 */
+:root {
+    --ion-color-primary: #3880ff;
+    --ion-color-secondary: #eb445a;
+    --ion-padding: 16px;
+    --ion-border-radius: 16px;
+    --ion-color-gold: #FFD700;
+  }
+  
+  /* 容器样式 */
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--ion-padding);
+    border-radius: var(--ion-border-radius);
+    color: var(--ion-color-gold);
+  }
+  
+  /* 卡片样式 */
+  .horizontal-cards {
+    width: 100%;
+    max-width: 800px;
+    margin-bottom: var(--ion-padding);
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+    background: transparent;
+  }
+  
+  .captured-image {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--ion-border-radius);
+  }
+  
+  /* 输入框样式 */
+  ion-item {
+    margin-bottom: 20px;
+  }
+  
+  ion-input {
+    --background: white;
+    --border-radius: 5px;
+    --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    --color: var(--ion-color-gold);
+  }
+  
+  /* 按钮样式 */
+  ion-button {
+    --background: var(--ion-color-primary);
+    --color: white;
+    --box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+    --border-radius: 5px;
+  }
+  
+  /* 图片样式 */
+  ion-img {
+    width: 100%;
+    max-width: 300px;
+    height: auto;
+    margin-bottom: 20px;
+  }
+