modal-chat-voice-input.component.mjs 11 KB

12345678910
  1. /**
  2. * @copyright © 未来飞马 © 未来全栈 www.fmode.cn
  3. * 版权所有 © 未来飞马 © 江西脑控科技有限公司 Copyright © Fmode Technology Co., Ltd.
  4. * 保留所有权利 All Rights Reserved.
  5. * /home/ryan/workspace/nova/nova-admin/dist/fmode-ng/esm2022/lib/aigc/avatar/modal-chat-voice-input/modal-chat-voice-input.component.mjs
  6. */
  7. import{Component,Input}from"@angular/core";import{CommonModule}from"@angular/common";import{ToastController}from"@ionic/angular";import{Router,RouterModule}from"@angular/router";import{IonicModule,Platform}from"@ionic/angular";import{FmodeVoiceService}from"../../voice";import{FmodeChat,ChatService}from"../../service-fmai/service-chat";import{NovaCloudService}from"../../../nova-cloud/nova-cloud.service";import*as i0 from"@angular/core";import*as i1 from"@ionic/angular";import*as i2 from"@angular/router";import*as i3 from"../../voice";import*as i4 from"../../../nova-cloud/nova-cloud.service";import*as i5 from"../../service-fmai/service-chat";import*as i6 from"@angular/common";export class ModalChatVoiceInputComponent{constructor(t,e,o,n,i,r){this.platform=t,this.router=e,this.voiceServ=o,this.toastCtrl=n,this.ncloud=i,this.chatServ=r,this.talkMode="click",this.talkTips="点击话筒开始讲话",this.errorText="",this.player=new Audio}ngOnInit(){"press"==this.talkMode&&(this.talkTips="轻触底部开始讲话"),setTimeout((()=>{this.initVoiceSevice(),this.initVoiceASR()}),500)}async initVoiceASR(){this.voiceServ.requestPermission().then((()=>{this.voiceServ.openWithPriviledge(),this.startASRAwake()}))}async startASRAwake(){await this.voiceServ.openWithPriviledge(),new this.voiceServ.webSpeech(this.platform).startRecognition("Nihao | Hello")}playMusic(t){this.player.src=`/assets/avatar/voice/${t}.mp3`,this.player.play()}initVoiceSevice(){this.fmodeChat.userInput=this.voiceServ.resultText,this.voiceServ.requestPermission().then((()=>{this.voiceServ.openWithPriviledge()})),this.voiceServ.onBeforeStartTalk=()=>{this.fmodeChat.playAnimation("listening"),this.playMusic("start-talk")},this.voiceServ.onBeforeCancelTalk=()=>{this.playMusic("interupt-talk"),this.fmodeChat.playAnimation("waiting")},this.voiceServ.onAfterCancelTalk=()=>{this.startASRAwake()},this.voiceServ.onBeforeFinishTalk=()=>{this.fmodeChat.playAnimation("thinking"),this.playMusic("stop-talk")},this.voiceServ.onAfterFinishTalk=()=>{console.log("onAfterFinishTalk"),this.fmodeChat.userInput=this.voiceServ?.resultText,this.sendMessage(),this.startASRAwake()}}async sendMessage(){if(!this.fmodeChat.userInput){return this.errorText="内容不能为空",void(await this.toastCtrl.create({message:this.errorText,position:"top",icon:"alert",color:"warning-circle",duration:1e3})).present()}this.fmodeChat?.sendMessage(this.voiceServ.resultText,null,(t=>{}),{onSSMLComplete:t=>{console.log(t)}}),this.fmodeChat.userInput="",this.fmodeChat.userImage=""}testTTS(t){console.log(t),t=t||"你好呀,我是飞马小智!很高兴为您介绍脑控科技的发展历程。我们成立于2019年",new this.voiceServ.webSpeech(this.platform).speak(t)}testXunfeiTTS(){}static{this.ɵfac=i0.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"17.3.12",ngImport:i0,type:ModalChatVoiceInputComponent,deps:[{token:i1.Platform},{token:i2.Router},{token:i3.FmodeVoiceService},{token:i1.ToastController},{token:i4.NovaCloudService},{token:i5.ChatService}],target:i0.ɵɵFactoryTarget.Component})}static{this.ɵcmp=i0.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"17.3.12",type:ModalChatVoiceInputComponent,isStandalone:!0,selector:"fm-modal-chat-voice-input",inputs:{fmodeChat:"fmodeChat",talkMode:"talkMode"},providers:[FmodeVoiceService],ngImport:i0,template:' \n <ng-container *ngIf="fmodeChat">\n\n \x3c!-- 用户输入 提示区域 --\x3e\n <div class="user-asr-input" style="text-align: center;" *ngIf="!fmodeChat?.userInput && voiceServ.btnStatus!=\'OPEN\'">{{talkTips}}</div>\n <div class="user-asr-input">{{fmodeChat?.userInput}}</div>\n \n \x3c!-- 测试按钮 --\x3e\n <div class="test-button-group" *ngIf="false">\n <button class="button-record" (click)="voiceServ.toggleRecord()">开始录制 {{voiceServ.connStatus}} {{voiceServ.btnStatus}}</button>\n <br>\n <button class="button-record" (click)="voiceServ.playRecord()">播放录制结果</button>\n <br>\n <button class="button-record" (click)="voiceServ.playBuffers()">播放Buffers结果</button>\n <button (click)="testTTS()">测试TTS纯WEB</button>\n <button (click)="startASR()">测试ASR</button> \n <button (click)="testXunfeiTTS()">测试合成</button> \n </div>\n\n \n \n \x3c!-- 交互按钮 --\x3e\n <ion-fab slot="fixed" horizontal="center" vertical="bottom">\n <ng-container *ngIf="talkMode==\'click\'">\n \x3c!-- 默认按钮:开始讲话 --\x3e\n <ion-fab-button color="primary" closeIcon="checkmark" (click)="voiceServ.toggleRecord()">\n <ion-icon name="mic-outline"></ion-icon>\n </ion-fab-button>\n\n \x3c!-- 讲话中:取消发送 --\x3e\n <ion-fab-list side="end">\n <ion-fab-button [class]="\'loading\'" (click)="voiceServ.cancelTalk()">\n <ion-icon name="pause-outline"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n </ng-container>\n \n <ng-container *ngIf="talkMode==\'press\'">\n <ion-fab-button color="primary" closeIcon="mic-outline" (touchstart)="voiceServ.toggleRecord()" (touchend)="voiceServ.cancelTalk()">\n <ion-icon name="mic-outline"></ion-icon>\n </ion-fab-button>\n </ng-container>\n </ion-fab>\n\n\n \x3c!-- 音频波动 --\x3e\n <div class="record-wave">\n </div>\n</ng-container>\n',styles:['ion-fab{margin-bottom:10vh}.fab-button-close-active:before{content:"";position:absolute;top:-5px;left:-5px;width:66px;height:66px;border-radius:50%;border:5px solid #fff;border-top-color:transparent;animation:spin 2s ease-in-out infinite;animation-fill-mode:both;animation-play-state:running}.record-wave{position:fixed;bottom:0;width:100vw;height:6vh}\n'],dependencies:[{kind:"ngmodule",type:CommonModule},{kind:"directive",type:i6.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:IonicModule},{kind:"component",type:i1.IonFab,selector:"ion-fab",inputs:["activated","edge","horizontal","vertical"]},{kind:"component",type:i1.IonFabButton,selector:"ion-fab-button",inputs:["activated","closeIcon","color","disabled","download","href","mode","rel","routerAnimation","routerDirection","show","size","target","translucent","type"]},{kind:"component",type:i1.IonFabList,selector:"ion-fab-list",inputs:["activated","side"]},{kind:"component",type:i1.IonIcon,selector:"ion-icon",inputs:["color","flipRtl","icon","ios","lazy","md","mode","name","sanitize","size","src"]},{kind:"ngmodule",type:RouterModule}]})}}i0.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"17.3.12",ngImport:i0,type:ModalChatVoiceInputComponent,decorators:[{type:Component,args:[{selector:"fm-modal-chat-voice-input",standalone:!0,imports:[CommonModule,IonicModule,RouterModule],providers:[FmodeVoiceService],template:' \n <ng-container *ngIf="fmodeChat">\n\n \x3c!-- 用户输入 提示区域 --\x3e\n <div class="user-asr-input" style="text-align: center;" *ngIf="!fmodeChat?.userInput && voiceServ.btnStatus!=\'OPEN\'">{{talkTips}}</div>\n <div class="user-asr-input">{{fmodeChat?.userInput}}</div>\n \n \x3c!-- 测试按钮 --\x3e\n <div class="test-button-group" *ngIf="false">\n <button class="button-record" (click)="voiceServ.toggleRecord()">开始录制 {{voiceServ.connStatus}} {{voiceServ.btnStatus}}</button>\n <br>\n <button class="button-record" (click)="voiceServ.playRecord()">播放录制结果</button>\n <br>\n <button class="button-record" (click)="voiceServ.playBuffers()">播放Buffers结果</button>\n <button (click)="testTTS()">测试TTS纯WEB</button>\n <button (click)="startASR()">测试ASR</button> \n <button (click)="testXunfeiTTS()">测试合成</button> \n </div>\n\n \n \n \x3c!-- 交互按钮 --\x3e\n <ion-fab slot="fixed" horizontal="center" vertical="bottom">\n <ng-container *ngIf="talkMode==\'click\'">\n \x3c!-- 默认按钮:开始讲话 --\x3e\n <ion-fab-button color="primary" closeIcon="checkmark" (click)="voiceServ.toggleRecord()">\n <ion-icon name="mic-outline"></ion-icon>\n </ion-fab-button>\n\n \x3c!-- 讲话中:取消发送 --\x3e\n <ion-fab-list side="end">\n <ion-fab-button [class]="\'loading\'" (click)="voiceServ.cancelTalk()">\n <ion-icon name="pause-outline"></ion-icon>\n </ion-fab-button>\n </ion-fab-list>\n </ng-container>\n \n <ng-container *ngIf="talkMode==\'press\'">\n <ion-fab-button color="primary" closeIcon="mic-outline" (touchstart)="voiceServ.toggleRecord()" (touchend)="voiceServ.cancelTalk()">\n <ion-icon name="mic-outline"></ion-icon>\n </ion-fab-button>\n </ng-container>\n </ion-fab>\n\n\n \x3c!-- 音频波动 --\x3e\n <div class="record-wave">\n </div>\n</ng-container>\n',styles:['ion-fab{margin-bottom:10vh}.fab-button-close-active:before{content:"";position:absolute;top:-5px;left:-5px;width:66px;height:66px;border-radius:50%;border:5px solid #fff;border-top-color:transparent;animation:spin 2s ease-in-out infinite;animation-fill-mode:both;animation-play-state:running}.record-wave{position:fixed;bottom:0;width:100vw;height:6vh}\n']}]}],ctorParameters:()=>[{type:i1.Platform},{type:i2.Router},{type:i3.FmodeVoiceService},{type:i1.ToastController},{type:i4.NovaCloudService},{type:i5.ChatService}],propDecorators:{fmodeChat:[{type:Input}],talkMode:[{type:Input}]}});
  8. var MODULE_PATH_NEED = `6K+l5paH5Lu25piv5pys6aG555uu55qE5LiA6YOo5YiGIFRoaXMgZmlsZSBpcyBwYXJ0IG9mIHRoZSBDb21wb25lbnRzIGluIEZtb2RlIEluYy4KICAgIOeJiOadg+aJgOaciSDCqSDmnKrmnaXpo57pqawgwqkg5rGf6KW/6ISR5o6n56eR5oqA5pyJ6ZmQ5YWs5Y+4IENvcHlyaWdodCDCqSBGbW9kZSBUZWNobm9sb2d5IENvLiwgTHRkLgogICAg5L+d55WZ5omA5pyJ5p2D5YipIEFsbCBSaWdodHMgUmVzZXJ2ZWQuCiAgICDkuKXnpoHlnKjmnKrnu4/mjojmnYPnmoTmg4XlhrXkuIvvvIzpgJrov4fku7vkvZXlqpLku4vlpI3liLbmraTmlofku7YgVW5hdXRob3JpemVkIGNvcHlpbmcgb2YgdGhpcyBmaWxlLCB2aWEgYW55IG1lZGl1bSBpcyBzdHJpY3RseSBwcm9oaWJpdGVkCiAgICDor6Xmlofku7bmmK/kuJPmnInnmoTmnLrlr4bmlofku7YgUHJvcHJpZXRhcnkgYW5kIGNvbmZpZGVudGlhbAogICAKICAgIENvcHlyaWdodCAyMDIxLW5vdyBGbW9kZSBJbmMuIHN1cHBvcnRAZm1vZGUuY24uIDE4NjA3MDA3MDczLgogICAg5L+d55WZ5omA5pyJ5p2D5YipIEFsbCByaWdodHMgcmVzZXJ2ZWQuCgogICAgUEFUSDovaG9tZS9yeWFuL3dvcmtzcGFjZS9ub3ZhL25vdmEtYWRtaW4vZGlzdC9mbW9kZS1uZy9lc20yMDIyL2xpYi9haWdjL2F2YXRhci9tb2RhbC1jaGF0LXZvaWNlLWlucHV0L21vZGFsLWNoYXQtdm9pY2UtaW5wdXQuY29tcG9uZW50Lm1qcw==`