feat: support autoplay answer for tts model

Author: liuruibin

apps/application/migrations/0022_application_tts_autoplay.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.15 on 2025-01-03 14:07
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('application', '0021_applicationpublicaccessclient_client_id_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='application',
+            name='tts_autoplay',
+            field=models.BooleanField(default=False, verbose_name='自动播放'),
+        ),
+    ]

apps/application/models/application.py

@@ -65,6 +65,7 @@ class Application(AppModelMixin):
     tts_model_enable = models.BooleanField(verbose_name="语音合成模型是否启用", default=False)
     stt_model_enable = models.BooleanField(verbose_name="语音识别模型是否启用", default=False)
     tts_type = models.CharField(verbose_name="语音播放类型", max_length=20, default="BROWSER")
+    tts_autoplay = models.BooleanField(verbose_name="自动播放", default=False)
     clean_time = models.IntegerField(verbose_name="清理时间", default=180)
     file_upload_enable = models.BooleanField(verbose_name="文件上传是否启用", default=False)
     file_upload_setting = models.JSONField(verbose_name="文件上传相关设置", default=dict)

apps/application/serializers/application_serializers.py

@@ -1009,7 +1009,7 @@ def edit(self, instance: Dict, with_valid=True):
             update_keys = ['name', 'desc', 'model_id', 'multiple_rounds_dialogue', 'prologue', 'status',
                            'dataset_setting', 'model_setting', 'problem_optimization', 'dialogue_number',
                            'stt_model_id', 'tts_model_id', 'tts_model_enable', 'stt_model_enable', 'tts_type',
-                           'file_upload_enable', 'file_upload_setting',
+                           'tts_autoplay', 'file_upload_enable', 'file_upload_setting',
                            'api_key_is_active', 'icon', 'work_flow', 'model_params_setting', 'tts_model_params_setting',
                            'problem_optimization_prompt', 'clean_time']
             for update_key in update_keys:
@@ -1073,6 +1073,8 @@ def get_work_flow_model(instance):
                         instance['tts_model_enable'] = node_data['tts_model_enable']
                     if 'tts_type' in node_data:
                         instance['tts_type'] = node_data['tts_type']
+                    if 'tts_autoplay' in node_data:
+                        instance['tts_autoplay'] = node_data['tts_autoplay']
                     if 'tts_model_params_setting' in node_data:
                         instance['tts_model_params_setting'] = node_data['tts_model_params_setting']
                     if 'file_upload_enable' in node_data:

ui/src/api/type/application.ts

@@ -21,6 +21,7 @@ interface ApplicationFormType {
   stt_model_enable?: boolean
   tts_model_enable?: boolean
   tts_type?: string
+  tts_autoplay?: boolean
 }
 interface Chunk {
   real_node_id: string

ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue

@@ -79,7 +79,7 @@
   <audio ref="audioPlayer" controls hidden="hidden"></audio>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { copyClick } from '@/utils/clipboard'
 import applicationApi from '@/api/application'
@@ -100,6 +100,7 @@ const props = withDefaults(
     applicationId: string
     tts: boolean
     tts_type: string
+    tts_autoplay: boolean
   }>(),
   {
     data: () => ({}),
@@ -243,5 +244,12 @@ const pausePlayAnswerText = () => {
     window.speechSynthesis.pause()
   }
 }
+
+onMounted(() => {
+  // 第一次回答后自动播放， 打开历史记录不自动播放
+  if (props.tts_autoplay && buttonData.value.write_ed && !buttonData.value.update_time) {
+    playAnswerText(buttonData.value.answer_text)
+  }
+})
 </script>
 <style lang="scss" scoped></style>

ui/src/components/ai-chat/component/operation-button/index.vue

@@ -32,6 +32,7 @@
       <ChatOperationButton
         :tts="application.tts_model_enable"
         :tts_type="application.tts_type"
+        :tts_autoplay="application.tts_autoplay"
         :data="chatRecord"
         :type="type"
         :applicationId="application.id"

ui/src/views/application/ApplicationSetting.vue

@@ -403,17 +403,7 @@
                   <div class="flex-between">
                     <span class="mr-4">语音播放</span>
                     <div>
-                      <el-button
-                        v-if="applicationForm.tts_type === 'TTS'"
-                        type="primary"
-                        link
-                        @click="openTTSParamSettingDialog"
-                        :disabled="!applicationForm.tts_model_id"
-                        class="mr-8"
-                      >
-                        <el-icon class="mr-4"><Setting /></el-icon>
-                        设置
-                      </el-button>
+                      <el-checkbox v-model="applicationForm.tts_autoplay">自动播放</el-checkbox>
                       <el-switch
                         size="small"
                         v-model="applicationForm.tts_model_enable"
@@ -492,6 +482,16 @@
                     </el-option>
                   </el-option-group>
                 </el-select>
+                <el-button
+                  v-if="applicationForm.tts_type === 'TTS'"
+                  type="primary"
+                  link
+                  @click="openTTSParamSettingDialog"
+                  :disabled="!applicationForm.tts_model_id"
+                  class="mr-8"
+                >
+                  <el-icon class="mr-4"><Setting /></el-icon>
+                </el-button>
               </el-form-item>
             </el-form>
           </el-scrollbar>

ui/src/workflow/nodes/base-node/index.vue

@@ -167,18 +167,7 @@
           <div class="flex-between">
             <span class="mr-4">语音播放</span>
             <div>
-              <el-button
-                v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
-                type="primary"
-                link
-                @click="openTTSParamSettingDialog"
-                :disabled="!form_data.tts_model_id"
-                class="mr-4"
-              >
-                <el-icon class="mr-4">
-                  <Setting />
-                </el-icon>
-              </el-button>
+              <el-checkbox v-model="form_data.tts_autoplay">自动播放</el-checkbox>
               <el-switch
                 size="small"
                 v-model="form_data.tts_model_enable"
@@ -252,6 +241,18 @@
             </el-option>
           </el-option-group>
         </el-select>
+        <el-button
+          v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
+          type="primary"
+          link
+          @click="openTTSParamSettingDialog"
+          :disabled="!form_data.tts_model_id"
+          class="mr-4"
+        >
+          <el-icon class="mr-4">
+            <Setting />
+          </el-icon>
+        </el-button>
       </el-form-item>
     </el-form>
     <TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />