From 6c44622e95d8f143c7fa0d03a8d64baf47deb494 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 3 Jan 2025 16:41:42 +0800
Subject: [PATCH] feat: support autoplay answer for tts model

---
 .../views/application/ApplicationSetting.vue  | 160 +++++++++---------
 ui/src/workflow/nodes/base-node/index.vue     | 155 ++++++++---------
 2 files changed, 160 insertions(+), 155 deletions(-)

diff --git a/ui/src/views/application/ApplicationSetting.vue b/ui/src/views/application/ApplicationSetting.vue
index fbcce838c..a5800438f 100644
--- a/ui/src/views/application/ApplicationSetting.vue
+++ b/ui/src/views/application/ApplicationSetting.vue
@@ -402,9 +402,10 @@
                 <template #label>
                   <div class="flex-between">
                     <span class="mr-4">语音播放</span>
-                    <div>
+                    <div class="flex">
                       <el-checkbox v-model="applicationForm.tts_autoplay">自动播放</el-checkbox>
                       <el-switch
+                        class="ml-8"
                         size="small"
                         v-model="applicationForm.tts_model_enable"
                         @change="ttsModelEnableChange"
@@ -412,86 +413,87 @@
                     </div>
                   </div>
                 </template>
-                <el-radio-group
-                  v-model="applicationForm.tts_type"
-                  v-show="applicationForm.tts_model_enable"
-                  class="mb-8"
-                >
-                  <el-radio value="BROWSER">浏览器播放(免费)</el-radio>
-                  <el-radio value="TTS">TTS模型</el-radio>
-                </el-radio-group>
-                <el-select
-                  v-if="applicationForm.tts_type === 'TTS' && applicationForm.tts_model_enable"
-                  v-model="applicationForm.tts_model_id"
-                  class="w-full"
-                  popper-class="select-model"
-                  @change="ttsModelChange()"
-                  placeholder="请选择语音合成模型"
-                >
-                  <el-option-group
-                    v-for="(value, label) in ttsModelOptions"
-                    :key="value"
-                    :label="relatedObject(providerOptions, label, 'provider')?.name"
+                <div class="w-full">
+                  <el-radio-group
+                    v-model="applicationForm.tts_type"
+                    v-show="applicationForm.tts_model_enable"
+                    class="mb-8"
                   >
-                    <el-option
-                      v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
-                      :key="item.id"
-                      :label="item.name"
-                      :value="item.id"
-                      class="flex-between"
+                    <el-radio value="BROWSER">浏览器播放(免费)</el-radio>
+                    <el-radio value="TTS">TTS模型</el-radio>
+                  </el-radio-group>
+                </div>
+                <div class="flex-between w-full">
+                  <el-select
+                    v-if="applicationForm.tts_type === 'TTS' && applicationForm.tts_model_enable"
+                    v-model="applicationForm.tts_model_id"
+                    popper-class="select-model"
+                    @change="ttsModelChange()"
+                    placeholder="请选择语音合成模型"
+                  >
+                    <el-option-group
+                      v-for="(value, label) in ttsModelOptions"
+                      :key="value"
+                      :label="relatedObject(providerOptions, label, 'provider')?.name"
                     >
-                      <div class="flex align-center">
-                        <span
-                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
-                          class="model-icon mr-8"
-                        ></span>
-                        <span>{{ item.name }}</span>
-                        <el-tag
-                          v-if="item.permission_type === 'PUBLIC'"
-                          type="info"
-                          class="info-tag ml-8"
-                          >公用
-                        </el-tag>
-                      </div>
-                      <el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
-                        <Check />
-                      </el-icon>
-                    </el-option>
-                    <!-- 不可用 -->
-                    <el-option
-                      v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
-                      :key="item.id"
-                      :label="item.name"
-                      :value="item.id"
-                      class="flex-between"
-                      disabled
-                    >
-                      <div class="flex">
-                        <span
-                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
-                          class="model-icon mr-8"
-                        ></span>
-                        <span>{{ item.name }}</span>
-                        <span class="danger">{{
-                          $t('views.application.applicationForm.form.aiModel.unavailable')
-                        }}</span>
-                      </div>
-                      <el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
-                        <Check />
-                      </el-icon>
-                    </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-option
+                        v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                        class="flex-between"
+                      >
+                        <div class="flex align-center">
+                          <span
+                            v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                            class="model-icon mr-8"
+                          ></span>
+                          <span>{{ item.name }}</span>
+                          <el-tag
+                            v-if="item.permission_type === 'PUBLIC'"
+                            type="info"
+                            class="info-tag ml-8"
+                            >公用
+                          </el-tag>
+                        </div>
+                        <el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
+                          <Check />
+                        </el-icon>
+                      </el-option>
+                      <!-- 不可用 -->
+                      <el-option
+                        v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                        class="flex-between"
+                        disabled
+                      >
+                        <div class="flex">
+                          <span
+                            v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                            class="model-icon mr-8"
+                          ></span>
+                          <span>{{ item.name }}</span>
+                          <span class="danger">{{
+                            $t('views.application.applicationForm.form.aiModel.unavailable')
+                          }}</span>
+                        </div>
+                        <el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
+                          <Check />
+                        </el-icon>
+                      </el-option>
+                    </el-option-group>
+                  </el-select>
+                  <el-button
+                    v-if="applicationForm.tts_type === 'TTS'"
+                    @click="openTTSParamSettingDialog"
+                    :disabled="!applicationForm.tts_model_id"
+                    class="ml-8"
+                  >
+                    <el-icon><Operation /></el-icon>
+                  </el-button>
+                </div>
               </el-form-item>
             </el-form>
           </el-scrollbar>
diff --git a/ui/src/workflow/nodes/base-node/index.vue b/ui/src/workflow/nodes/base-node/index.vue
index 3e0e69176..afbc71d5b 100644
--- a/ui/src/workflow/nodes/base-node/index.vue
+++ b/ui/src/workflow/nodes/base-node/index.vue
@@ -166,9 +166,10 @@
         <template #label>
           <div class="flex-between">
             <span class="mr-4">语音播放</span>
-            <div>
+            <div class="flex">
               <el-checkbox v-model="form_data.tts_autoplay">自动播放</el-checkbox>
               <el-switch
+                class="ml-8"
                 size="small"
                 v-model="form_data.tts_model_enable"
                 @change="ttsModelEnableChange"
@@ -176,83 +177,85 @@
             </div>
           </div>
         </template>
-        <el-radio-group v-model="form_data.tts_type" v-show="form_data.tts_model_enable">
-          <el-radio label="浏览器播放(免费)" value="BROWSER" />
-          <el-radio label="TTS模型" value="TTS" />
-        </el-radio-group>
-        <el-select
-          v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
-          v-model="form_data.tts_model_id"
-          class="w-full"
-          @wheel="wheel"
-          popper-class="select-model"
-          @change="ttsModelChange()"
-          placeholder="请选择语音合成模型"
-          :teleported="false"
-        >
-          <el-option-group
-            v-for="(value, label) in ttsModelOptions"
-            :key="value"
-            :label="relatedObject(providerOptions, label, 'provider')?.name"
+        <div class="w-full">
+          <el-radio-group v-model="form_data.tts_type" v-show="form_data.tts_model_enable">
+            <el-radio label="浏览器播放(免费)" value="BROWSER" />
+            <el-radio label="TTS模型" value="TTS" />
+          </el-radio-group>
+        </div>
+        <div class="flex-between w-full">
+          <el-select
+            v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
+            v-model="form_data.tts_model_id"
+            class="w-full"
+            @wheel="wheel"
+            popper-class="select-model"
+            @change="ttsModelChange()"
+            placeholder="请选择语音合成模型"
+            :teleported="false"
           >
-            <el-option
-              v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-              class="flex-between"
+            <el-option-group
+              v-for="(value, label) in ttsModelOptions"
+              :key="value"
+              :label="relatedObject(providerOptions, label, 'provider')?.name"
             >
-              <div class="flex align-center">
-                <span
-                  v-html="relatedObject(providerOptions, label, 'provider')?.icon"
-                  class="model-icon mr-8"
-                ></span>
-                <span>{{ item.name }}</span>
-                <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
-                  >公用
-                </el-tag>
-              </div>
-              <el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
-                <Check />
-              </el-icon>
-            </el-option>
-            <!-- 不可用 -->
-            <el-option
-              v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-              class="flex-between"
-              disabled
-            >
-              <div class="flex">
-                <span
-                  v-html="relatedObject(providerOptions, label, 'provider')?.icon"
-                  class="model-icon mr-8"
-                ></span>
-                <span>{{ item.name }}</span>
-                <span class="danger">{{
-                  $t('views.application.applicationForm.form.aiModel.unavailable')
-                }}</span>
-              </div>
-              <el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
-                <Check />
-              </el-icon>
-            </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-option
+                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+              >
+                <div class="flex align-center">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
+                  </el-tag>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+              <!-- 不可用 -->
+              <el-option
+                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                class="flex-between"
+                disabled
+              >
+                <div class="flex">
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
+                  <span>{{ item.name }}</span>
+                  <span class="danger">{{
+                    $t('views.application.applicationForm.form.aiModel.unavailable')
+                  }}</span>
+                </div>
+                <el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
+                  <Check />
+                </el-icon>
+              </el-option>
+            </el-option-group>
+          </el-select>
+          <el-button
+            v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
+            @click="openTTSParamSettingDialog"
+            :disabled="!form_data.tts_model_id"
+            class="ml-8"
+          >
+            <el-icon>
+              <el-icon><Operation /></el-icon>
+            </el-icon>
+          </el-button>
+        </div>
       </el-form-item>
     </el-form>
     <TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />