feat:update aichat

fashion-app/src/app/ai-chat-component/ai-chat-component.component.html

@@ -34,17 +34,34 @@
           <ion-icon name="mic-circle-outline" style="color: white; font-size: 40px;"></ion-icon>
         </ion-button>
         
-        <ion-modal trigger="open-modal" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]" handleBehavior="cycle">
-          <ng-template>
-            <ion-content style="background-color: #99d75c; display: flex; flex-direction: column; justify-content: center; align-items: center;">
-              <div style="display: flex; justify-content: space-between; width: 100%; padding: 10px;">
-                <ion-button (click)="cancelVoiceInput()" fill="clear" style="color: black;">取消</ion-button>
-                <div style="color: black; font-size: 24px;" id="timer">{{ timer }}</div>
-                <ion-button (click)="sendVoiceInput()" fill="clear" style="color: black;">发送</ion-button>
-              </div> 
-            </ion-content>
-          </ng-template>
-        </ion-modal>
+     <!-- 修改后的语音输入模态框 -->
+<ion-modal trigger="open-modal" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]" handleBehavior="cycle">
+  <ng-template>
+    <ion-content class="yuyinframe">
+      <div class="modal-content">
+        <ion-icon name="close-circle-outline" (click)="cancelVoiceInput()" class="cancle-button"></ion-icon>
+        
+        <div class="timer-container">
+          <div style="color: black; font-size: 24px;" id="timer">{{ timer }}</div>
+         
+          
+              <div class="light">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+              </div>
+          
+        </div>
+        
+        <div class="send-button">
+          <ion-icon name="send-outline" style="font-size: 40px;" (click)="sendVoiceInput()"> </ion-icon>
+        </div>
+      </div>
+    </ion-content>
+  </ng-template>
+</ion-modal>
         
       </ion-buttons>
 

fashion-app/src/app/ai-chat-component/ai-chat-component.component.scss

@@ -84,26 +84,209 @@ justify-content: center; /* 水平居中对齐 */
   word-wrap: break-word; /* 自动换行 */
 }
 
-.animation-container {
-  display: flex;
-  justify-content: center;
+.yuyinframe{
+  --background: transparent; 
+  background-color: #99d75c; 
+  display: flex; 
+  flex-direction: column; 
+  justify-content: center; 
   align-items: center;
-  height: 100px; /* 根据需要调整高度 */
+}
+.modal-content {
+  display: flex;
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  width: 100%; /* 宽度100% */
+  height: 25%;
+}
+
+.timer-container {
+  height: 100%;
+  flex-direction: column; /* 垂直排列 */
+  
+  justify-content: center; /* 水平居中对齐 */
+
+}
+
+#timer{
+  width: 100%;
+  margin-top: 30px; /* 可根据需要调整这个值 */
+  text-align: center; /* 确保文本居中 */
+  margin-bottom: 10px;
+}
+
+/*语音取消按钮的样式 */
+.cancle-button {
+  font-size: 75px;
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  color: white;
+  background-color: #99d75c; 
+  margin-right: 20px;
+}
+
+/*语音发送按钮的样式 */
+.send-button {
+  height:60px ;
+  width: 60px;
+  border-radius: 50%;//圆
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  color: white;
+  background-color: #99d75c; 
+  border: 5px solid white;
+  margin-left: 20px;
+}
+
+
+//音律跳动
+.light {
+  width: 100%;
+  height: 90px;
+  display: flex;
+}
+
+.light span {
+  width: 10px;
+  border-radius: 18px;
+  margin-right: 20px;
+}
+
+.light span:nth-child(1) {
+  animation: bar1 2s 0.2s infinite linear;
+}
+
+.light span:nth-child(2) {
+  animation: bar2 2s 0.4s infinite linear;
+}
+
+.light span:nth-child(3) {
+  animation: bar3 2s 0.6s infinite linear;
+}
+
+.light span:nth-child(4) {
+  animation: bar4 2s 0.8s infinite linear;
+}
+
+.light span:nth-child(5) {
+  animation: bar5 2s 1.0s infinite linear;
+}
+
+.light span:nth-child(6) {
+  animation: bar6 2s 1.2s infinite linear;
 }
 
-.pulse-animation {
-  width: 50px; /* 根据需要调整宽度 */
-  height: 50px; /* 根据需要调整高度 */
-  background-color: white; /* 音律跳动的颜色 */
-  border-radius: 50%; /* 圆形 */
-  animation: pulse 1s infinite; /* 调整动画速度 */
+.light span:nth-child(7) {
+  animation: bar7 2s 1.4s infinite linear;
 }
 
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
+.light span:nth-child(8) {
+  animation: bar8 2s 1.6s infinite linear;
+}
+
+.light span:nth-child(9) {
+  animation: bar9 2s 1.8s infinite linear;
+}
+
+@keyframes bar1 {
+  0% {
+      background: #f677b0;
+      margin-top: 25%;
+      height: 10%;
   }
+
+  50% {
+      background: #f677b0;
+      height: 100%;
+      margin-top: 0%;
+  }
+
+  100% {
+      background: #f677b0;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+
+@keyframes bar2 {
+  0% {
+      background: #df7ff2;
+      margin-top: 25%;
+      height: 10%;
+  }
+
+  50% {
+      background: #df7ff2;
+      height: 100%;
+      margin-top: 0%;
+  }
+
+  100% {
+      background: #df7ff2;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+
+@keyframes bar3 {
+  0% {
+      background: #8c7ff2;
+      margin-top: 25%;
+      height: 10%;
+  }
+
   50% {
-    transform: scale(1.2);
+      background: #8c7ff2;
+      height: 100%;
+      margin-top: 0%;
   }
-}
+
+  100% {
+      background: #8c7ff2;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+
+@keyframes bar4 {
+  0% {
+      background: #024b6a;
+      margin-top: 25%;
+      height: 10%;
+  }
+
+  50% {
+      background: #024b6a;
+      height: 100%;
+      margin-top: 0%;
+  }
+
+  100% {
+      background: #024b6a;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+
+@keyframes bar5 {
+  0% {
+      background: #7ff2d3;
+      margin-top: 25%;
+      height: 10%;
+  }
+
+  50% {
+      background: #7ff2d3;
+      height: 100%;
+      margin-top: 0%;
+  }
+
+  100% {
+      background: #7ff2d3;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+

fashion-app/src/app/ai-chat-component/ai-chat-component.component.ts

@@ -5,10 +5,10 @@ import {  NavController } from '@ionic/angular';
 import { IonButtons, IonHeader, IonToolbar,IonButton, IonIcon, IonTitle, IonInput, IonFooter, IonContent, AlertController,  } from '@ionic/angular/standalone';
 import { FmodeChatCompletion } from 'fmode-ng';
 import { addIcons } from 'ionicons';
-import { chevronBackSharp, ellipsisHorizontal, happyOutline, micCircleOutline, paperPlane } from 'ionicons/icons';
+import { chevronBackSharp,  closeCircleOutline,  ellipsisHorizontal, happyOutline, micCircleOutline, paperPlane, sendOutline } from 'ionicons/icons';
 import { IonModal, IonLabel } from '@ionic/angular/standalone'; // 导入独立组件
 
-addIcons({ chevronBackSharp,ellipsisHorizontal,micCircleOutline,happyOutline,paperPlane });
+addIcons({ chevronBackSharp,ellipsisHorizontal,micCircleOutline,happyOutline,paperPlane,closeCircleOutline,sendOutline });
 
 interface Window {
   SpeechRecognition: any; // 声明 SpeechRecognition 属性
@@ -22,7 +22,7 @@ interface Window {
   standalone: true,
   imports: [
     IonHeader,IonToolbar,IonButtons,IonButton,IonIcon,IonTitle,IonInput,IonFooter,CommonModule,IonContent,
-    FormsModule,IonModal,IonLabel
+    FormsModule,IonModal,IonLabel,
   ],
  
 })

fashion-app/src/app/page-yuyin/page-yuyin.component.ts

@@ -9,8 +9,107 @@ import { ModalController } from '@ionic/angular';
 })
 export class PageYuyinComponent  implements OnInit {
 
-  constructor() { }
-
   ngOnInit() {}
 
+   recognition: any; // 用于存储语音识别实例
+    recognizedContent: string = ''; // 用于存储识别到的语音内容
+    timer: string = '00:00'; // 用于显示计时器
+    interval: any; // 用于存储定时器的引用
+    elapsedSeconds: number = 0; // 计时器的秒数
+    isVoiceInputVisible: boolean = false; // 控制语音输入框的显示状态
+   
+  
+    constructor() {
+      // 初始化语音识别
+      this.initSpeechRecognition();
+     }
+  
+  
+  
+     
+    // 初始化语音识别
+  initSpeechRecognition() {
+    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    if (SpeechRecognition) {
+      this.recognition = new SpeechRecognition();
+      this.recognition.lang = 'zh-CN'; // 设置语言为中文
+      this.recognition.interimResults = false; // 不返回中间结果
+      this.recognition.maxAlternatives = 1; // 最大替代结果数
+      this.recognition.continuous = true; // 设置为连续识别
+      
+  
+      // 处理识别结果
+      this.recognition.onresult = (event: any) => {
+        this.recognizedContent += event.results[event.results.length - 1][0].transcript; // 追加识别结果
+        console.log("识别到的内容:", this.recognizedContent); // 打印识别到的内容
+      };
+  
+      // 处理识别错误
+      this.recognition.onerror = (event: any) => {
+        if (event.error === 'no-speech') {
+          console.warn('没有检测到语音，继续监听...');
+        } else {
+          console.error('语音识别错误:', event.error);
+        }
+      };
+    } else {
+      console.log('该浏览器不支持语音识别');
+    }
+  }
+  
+  
+  startVoice() {
+    if (this.recognition && this.recognition.state !== 'active') { // 检查识别状态
+      this.recognition.start(); // 启动语音识别
+      console.log('语音识别启动...');
+      this.startTimer(); // 启动计时器
+      this.isVoiceInputVisible = true; // 显示语音输入框
+    } else {
+      console.warn('语音识别已经在运行中'); // 提示用户语音识别已在运行
+    }
+  }
+  
+    // 启动计时器
+    startTimer() {
+      this.elapsedSeconds = 0; // 重置秒数
+      this.timer = '00:00'; // 重置计时器显示
+      this.interval = setInterval(() => {
+        this.elapsedSeconds++;
+        const minutes = Math.floor(this.elapsedSeconds / 60);
+        const seconds = this.elapsedSeconds % 60;
+        this.timer = `${this.padZero(minutes)}:${this.padZero(seconds)}`; // 更新计时器显示
+      }, 1000);
+    }
+  
+    // 格式化数字为两位数
+    padZero(num: number): string {
+      return num < 10 ? '0' + num : num.toString();
+    }
+  // 取消语音输入
+  cancelVoiceInput() {
+    if (this.recognition) {
+      this.recognition.stop(); // 停止语音识别
+      console.log('语音识别已停止');
+      clearInterval(this.interval); // 清除计时器
+      this.timer = '00:00'; // 重置计时器显示
+      this.recognizedContent = ''; // 清空识别内容
+    }
+    this.isVoiceInputVisible = false; // 隐藏语音输入框
+  
+  }
+  
+  // 发送语音输入
+  sendVoiceInput() {
+    if (this.recognition) {
+      this.recognition.stop(); // 停止语音识别
+      console.log('语音识别已停止');
+      clearInterval(this.interval); // 清除计时器
+      this.timer = '00:00'; // 重置计时器显示
+      // 将识别到的内容传到输入框中
+return this.recognizedContent;
+    }
+    this.isVoiceInputVisible = false; // 隐藏语音输入框
+  
+  }
+
 }