fix tab2

FilmDraw-app/src/app/page-airecommend/page-airecommend.component.html → FilmDraw-app/src/app/page-AIimagery/page-AIimagery.component.html

@@ -1,23 +1,20 @@
 <ion-content>
 
-  <h1>AI智能推荐</h1>
+  <!-- <h1>AI生成用户画像</h1>
   
-  <h2>类型</h2>
+  <h2>您常看的影视剧类型</h2>
   <ion-input  [value]="type" (ionInput)="typeInput($event)"></ion-input>
 
-  <h2>风格</h2>
-  <ion-input  [value]="style" (ionInput)="styleInput($event)"></ion-input>
+  <h2>您常看的影视剧风格</h2>
+  <ion-input  [value]="style" (ionInput)="styleInput($event)"></ion-input> -->
 
-  <h2>最近看过</h2>
+  <h2>您最近看过的影视剧</h2>
   <ion-input  [value]="last" (ionInput)="lastInput($event)"></ion-input>
-  
-  <h2>您的年龄段</h2>
-  <ion-input  [value]="age" (ionInput)="ageInput($event)"></ion-input>
-  
-  <h2>您的性别</h2>
-  <ion-input  [value]="sex" (ionInput)="sexInput($event)"></ion-input>
-  
-  <h2>故事情节偏好</h2>
+
+  <h2>您喜欢的演员</h2>
+  <ion-input  [value]="like" (ionInput)="likeInput($event)"></ion-input>
+
+  <h2>您喜欢的故事情节和走向</h2>
   <ion-textarea [value]="detail" (ionInput)="detailInput($event)" placeholder="剧情走向，男女主性格等" autoGrow="true"></ion-textarea>
   
   <!-- 按钮：执行消息生成函数 -->

FilmDraw-app/src/app/page-airecommend/page-airecommend.component.scss → FilmDraw-app/src/app/page-AIimagery/page-AIimagery.component.scss

@@ -44,16 +44,15 @@ ion-content {
   
   /* 按钮样式 */
   ion-button {
-    background-color: #007bff; /* 按钮背景色，蓝色 */
+    --background: #036a99;/* 按钮背景色，蓝色 */
     color: white; /* 按钮字体颜色 */
-    border-radius: 20px; /* 按钮圆角 */
+    --border-radius: 20px; /* 按钮圆角 */
     font-size: 18px; /* 按钮字体大小 */
     transition: background-color 0.3s ease, transform 0.2s; /* 动画效果 */
   }
   
   /* 按钮悬停样式 */
   ion-button:hover {
-    background-color: #0056b3; /* 悬停时的按钮背景色，深蓝色 */
     transform: scale(1.05); /* 悬停时放大按钮 */
   }
   

FilmDraw-app/src/app/page-airecommend/page-airecommend.component.spec.ts → FilmDraw-app/src/app/page-AIimagery/page-AIimagery.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { PageAirecommendComponent } from './page-airecommend.component';
+import { PageAirecommendComponent } from './page-AIimagery.component';
 
 describe('PageAirecommendComponent', () => {
   let component: PageAirecommendComponent;

FilmDraw-app/src/app/page-airecommend/page-airecommend.component.ts → FilmDraw-app/src/app/page-AIimagery/page-AIimagery.component.ts

@@ -4,16 +4,16 @@ import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, Io
 import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
-  selector: 'app-page-airecommend',
-  templateUrl: './page-airecommend.component.html',
-  styleUrls: ['./page-airecommend.component.scss'],
+  selector: 'app-page-AIimagery',
+  templateUrl: './page-AIimagery.component.html',
+  styleUrls: ['./page-AIimagery.component.scss'],
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonTextarea,IonInput,
     // 引入fm-markdown-preview组件模块
     MarkdownPreviewModule
   ],
 })
-export class PageAirecommendComponent  implements OnInit {
+export class PageAIimageryComponent  implements OnInit {
 
   constructor() { }
 
@@ -25,24 +25,19 @@ export class PageAirecommendComponent  implements OnInit {
     this.type = ev.detail.value;
   }
    // 用户输入提示词
-   style:string = "古装"
+   style:string = "古装/悬疑等"
    styleInput(ev:any){
      this.style = ev.detail.value;
    }
    // 用户输入提示词
-   last:string = "大梦归离"
+   last:string = " "
    lastInput(ev:any){
      this.last = ev.detail.value;
    }
    // 用户输入提示词
-   age:string = "20-25"
-   ageInput(ev:any){
-     this.age = ev.detail.value;
-   }
-   // 用户输入提示词
-   sex:string = "女"
-   sexInput(ev:any){
-     this.sex = ev.detail.value;
+   like:string = " "
+   likeInput(ev:any){
+     this.like = ev.detail.value;
    }
   // 用户输入提示词
   detail:string = "请描述您期望的故事情节"
@@ -57,16 +52,16 @@ export class PageAirecommendComponent  implements OnInit {
     console.log("create")
 
     let PromptTemplate = `
-    请根据以下用户描述生成推荐的影视剧作品列表。用户的偏好和兴趣如下：
+    请根据以下的用户描述生成该用户的用户画像。
 
     1. 用户喜欢的影视类型（如：电影、电视剧）：${this.type}
-    1. 用户喜欢的影视风格（如：动作、喜剧、爱情、科幻、悬疑等）：${this.style}
-    3. 用户对故事情节的偏好（如：喜欢紧张刺激的情节，或者温馨感人的故事）：${this.detail}
-    4. 用户的观看历史（例如：最近观看过的影视剧）：${this.last}
-    5. 用户的性别:${this.sex}
-    6. 用户的年龄段：${this.age}
+    2. 用户喜欢的影视风格（如：动作、喜剧、爱情、科幻、悬疑等）：${this.style}
+    3. 用户喜欢的演员：${this.like}
+    4. 用户对故事情节的偏好（如：喜欢紧张刺激的情节，或者温馨感人的故事）：${this.detail}
+    5. 用户的观看历史（例如：最近观看过的影视剧）：${this.last}
+
     
-    请根据以上信息，生成一份推荐的影视剧作品列表，包括每部作品的标题、类型、评分、简短描述和封面图像链接。
+    请根据以上信息，生成一份该用户的用户画像。每个特征之间以顿号隔开。
     `
     
     let completion = new FmodeChatCompletion([

FilmDraw-app/src/app/tab2/tab2.page.html

@@ -13,19 +13,35 @@
         </ion-card-header>
         <ion-card-content>
           <ion-item>
+          <!-- 未登录 -->
+          @if(!currentUser.id){
             <ion-avatar slot="start">
-              <img src="currentUser?.get('avatar')">
+              <img src="assets/user.png">
             </ion-avatar>
             <ion-label>
-              <h2>{{ username }}</h2>
-              <p>个性化标签: {{ userTags.join(', ') }}</p>
+              <h2>用户未登录</h2>
+              <p><a (click)="relogin()">请登录后重试</a></p>
             </ion-label>
-          </ion-item>
+          }
+          <!-- 已登录 -->
+          @if(currentUser.id){
+            <ion-avatar slot="start">
+              <img [src]="currentUser.get('avatar')" alt="avatar">
+            </ion-avatar>
+            <ion-label>
+              <h1>{{ currentUser.get("username") }}</h1>
+              <h3> 个人画像：{{ currentUser.get("imagery") }}</h3>
+            </ion-label>
+          }
+        </ion-item>
+        <ion-button (click)="goToPage()">
+          生成用户画像
+        </ion-button>
         </ion-card-content>
       </ion-card>
     </section>
   
-    <!-- AI智能推荐 -->
+    <!-- AI智能推荐
     <section>
       <ion-card>
         <ion-card-header>
@@ -33,12 +49,11 @@
         </ion-card-header>
         <ion-card-content>
           <ion-button expand="full" color="primary" size="large" (click)="goToPage()">
-            <!-- <ion-icon slot="start" name="bulb-outline"></ion-icon> -->
             AI推荐
           </ion-button>
         </ion-card-content>
       </ion-card>
-    </section>
+    </section> -->
 
     <!-- 推荐影视剧列表 -->
     <section>

FilmDraw-app/src/app/tab2/tab2.page.scss

@@ -12,10 +12,11 @@ ion-header {
   
   /* 按钮样式 */
 ion-button {
-  background-color: #3880ff; /* 按钮背景色 */
+  --background: #036a99; /* 按钮背景色 */
   color: white; /* 按钮字体颜色 */
-  border-radius: 8px; /* 按钮圆角 */
+  --border-radius: 5px; /* 按钮圆角 */
   font-size: 18px; /* 按钮字体大小 */
+  width: 100%;
 }
 
 /* 按钮图标样式 */
@@ -47,6 +48,17 @@ ion-icon {
     color: #333; // 设置标签文字颜色
   }
   
+  h1 {
+    font-size: 1.6em; // 设置二级标题字体大小
+    margin: 0; // 去掉默认外边距
+    font-weight: bold;
+  }
+  
+  h3 {
+    font-size: 1.2em; // 设置段落字体大小
+    color: #666; // 设置段落文字颜色
+  }
+  
   h2 {
     font-size: 1em; // 设置二级标题字体大小
     margin: 0; // 去掉默认外边距
@@ -64,8 +76,8 @@ ion-icon {
   
   ion-avatar {
     border-radius: 50%; // 设置头像圆形
-    width: 50px; // 设置头像宽度
-    height: 50px; // 设置头像高度
+    width: 80px; // 设置头像宽度
+    height: 80px; // 设置头像高度
   }
   
   ion-card-content {

FilmDraw-app/src/app/tab2/tab2.page.ts

@@ -2,10 +2,13 @@ import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, 
   IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
   IonItem, IonAvatar, IonLabel, IonList, IonThumbnail, 
-  IonIcon, IonButton} from '@ionic/angular/standalone';
+  IonIcon, IonButton, ModalController,
+} from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
+import { CloudObject, CloudUser } from 'src/lib/ncloud';
+import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 
 @Component({
   selector: 'app-tab2',
@@ -22,16 +25,27 @@ import { Router } from '@angular/router';
 })
 export class Tab2Page {
 
-  username: string = '用户A'; // 用户名
-  userTags: string[] = ['喜剧迷', '动作片爱好者']; // 用户个性化标签
+  currentUser = new CloudUser();
+    async relogin()
+    {
+      let user = await openUserLoginModal(this.modalCtrl);
+      if(user?.id){
+        this.currentUser = user
+      }
+      if(!user?.id){
+        return
+      }
+    }
   
-  constructor(private router: Router) {}
+    
+  constructor(
+    private modalCtrl:ModalController,
+    private router: Router) {}
   
   goToPage(){
-    this.router.navigate(['/tabs/airecommend'])
+    this.router.navigate(['/tabs/AIimagery'])
   }
 
-
   recommendedMovies = [
     {
       title: '某某剧名1',
@@ -48,20 +62,4 @@ export class Tab2Page {
     // 其他推荐影视剧...
   ];
 
-  similarMovies = [
-    {
-      title: '您可能喜欢的剧名1',
-      rating: '8.0',
-      description: '这部剧与您喜欢的风格相似...',
-      coverImage: 'assets/similar1.jpg',
-    },
-    {
-      title: '您可能喜欢的剧名2',
-      rating: '7.5',
-      description: '这部剧是基于相同主题的...',
-      coverImage: 'assets/similar2.jpg',
-    },
-    // 其他可能喜欢的影视剧...
-  ];
-
 }

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

@@ -27,9 +27,9 @@ export const routes: Routes = [
           import('../tab4/tab4.page').then((m) => m.Tab4Page),
       },
       {
-        path: 'airecommend',
+        path: 'AIimagery',
         loadComponent: () =>
-          import('../page-airecommend/page-airecommend.component').then((m) => m.PageAirecommendComponent),
+          import('../page-AIimagery/page-AIimagery.component').then((m) => m.PageAIimageryComponent),
       },
       {
         path: '',