Skip to content

Commit 9be15b7

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
feat: support autoplay answer for tts model
1 parent 28b792a commit 9be15b7

File tree

2 files changed

+160
-155
lines changed

2 files changed

+160
-155
lines changed

‎ui/src/views/application/ApplicationSetting.vue‎

Lines changed: 81 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -402,96 +402,98 @@
402402
<template #label>
403403
<div class="flex-between">
404404
<span class="mr-4">语音播放</span>
405-
<div>
405+
<div class="flex">
406406
<el-checkbox v-model="applicationForm.tts_autoplay">自动播放</el-checkbox>
407407
<el-switch
408+
class="ml-8"
408409
size="small"
409410
v-model="applicationForm.tts_model_enable"
410411
@change="ttsModelEnableChange"
411412
/>
412413
</div>
413414
</div>
414415
</template>
415-
<el-radio-group
416-
v-model="applicationForm.tts_type"
417-
v-show="applicationForm.tts_model_enable"
418-
class="mb-8"
419-
>
420-
<el-radio value="BROWSER">浏览器播放(免费)</el-radio>
421-
<el-radio value="TTS">TTS模型</el-radio>
422-
</el-radio-group>
423-
<el-select
424-
v-if="applicationForm.tts_type === 'TTS' && applicationForm.tts_model_enable"
425-
v-model="applicationForm.tts_model_id"
426-
class="w-full"
427-
popper-class="select-model"
428-
@change="ttsModelChange()"
429-
placeholder="请选择语音合成模型"
430-
>
431-
<el-option-group
432-
v-for="(value, label) in ttsModelOptions"
433-
:key="value"
434-
:label="relatedObject(providerOptions, label, 'provider')?.name"
416+
<div class="w-full">
417+
<el-radio-group
418+
v-model="applicationForm.tts_type"
419+
v-show="applicationForm.tts_model_enable"
420+
class="mb-8"
435421
>
436-
<el-option
437-
v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
438-
:key="item.id"
439-
:label="item.name"
440-
:value="item.id"
441-
class="flex-between"
442-
>
443-
<div class="flex align-center">
444-
<span
445-
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
446-
class="model-icon mr-8"
447-
></span>
448-
<span>{{ item.name }}</span>
449-
<el-tag
450-
v-if="item.permission_type === 'PUBLIC'"
451-
type="info"
452-
class="info-tag ml-8"
453-
>公用
454-
</el-tag>
455-
</div>
456-
<el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
457-
<Check />
458-
</el-icon>
459-
</el-option>
460-
<!-- 不可用 -->
461-
<el-option
462-
v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
463-
:key="item.id"
464-
:label="item.name"
465-
:value="item.id"
466-
class="flex-between"
467-
disabled
422+
<el-radio value="BROWSER">浏览器播放(免费)</el-radio>
423+
<el-radio value="TTS">TTS模型</el-radio>
424+
</el-radio-group>
425+
</div>
426+
<div class="flex-between w-full">
427+
<el-select
428+
v-if="applicationForm.tts_type === 'TTS' && applicationForm.tts_model_enable"
429+
v-model="applicationForm.tts_model_id"
430+
popper-class="select-model"
431+
@change="ttsModelChange()"
432+
placeholder="请选择语音合成模型"
433+
>
434+
<el-option-group
435+
v-for="(value, label) in ttsModelOptions"
436+
:key="value"
437+
:label="relatedObject(providerOptions, label, 'provider')?.name"
468438
>
469-
<div class="flex">
470-
<span
471-
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
472-
class="model-icon mr-8"
473-
></span>
474-
<span>{{ item.name }}</span>
475-
<span class="danger">{{
476-
$t('views.application.applicationForm.form.aiModel.unavailable')
477-
}}</span>
478-
</div>
479-
<el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
480-
<Check />
481-
</el-icon>
482-
</el-option>
483-
</el-option-group>
484-
</el-select>
485-
<el-button
486-
v-if="applicationForm.tts_type === 'TTS'"
487-
type="primary"
488-
link
489-
@click="openTTSParamSettingDialog"
490-
:disabled="!applicationForm.tts_model_id"
491-
class="mr-8"
492-
>
493-
<el-icon class="mr-4"><Setting /></el-icon>
494-
</el-button>
439+
<el-option
440+
v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
441+
:key="item.id"
442+
:label="item.name"
443+
:value="item.id"
444+
class="flex-between"
445+
>
446+
<div class="flex align-center">
447+
<span
448+
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
449+
class="model-icon mr-8"
450+
></span>
451+
<span>{{ item.name }}</span>
452+
<el-tag
453+
v-if="item.permission_type === 'PUBLIC'"
454+
type="info"
455+
class="info-tag ml-8"
456+
>公用
457+
</el-tag>
458+
</div>
459+
<el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
460+
<Check />
461+
</el-icon>
462+
</el-option>
463+
<!-- 不可用 -->
464+
<el-option
465+
v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
466+
:key="item.id"
467+
:label="item.name"
468+
:value="item.id"
469+
class="flex-between"
470+
disabled
471+
>
472+
<div class="flex">
473+
<span
474+
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
475+
class="model-icon mr-8"
476+
></span>
477+
<span>{{ item.name }}</span>
478+
<span class="danger">{{
479+
$t('views.application.applicationForm.form.aiModel.unavailable')
480+
}}</span>
481+
</div>
482+
<el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
483+
<Check />
484+
</el-icon>
485+
</el-option>
486+
</el-option-group>
487+
</el-select>
488+
<el-button
489+
v-if="applicationForm.tts_type === 'TTS'"
490+
@click="openTTSParamSettingDialog"
491+
:disabled="!applicationForm.tts_model_id"
492+
class="ml-8"
493+
>
494+
<el-icon><Operation /></el-icon>
495+
</el-button>
496+
</div>
495497
</el-form-item>
496498
</el-form>
497499
</el-scrollbar>

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

Lines changed: 79 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -166,93 +166,96 @@
166166
<template #label>
167167
<div class="flex-between">
168168
<span class="mr-4">语音播放</span>
169-
<div>
169+
<div class="flex">
170170
<el-checkbox v-model="form_data.tts_autoplay">自动播放</el-checkbox>
171171
<el-switch
172+
class="ml-8"
172173
size="small"
173174
v-model="form_data.tts_model_enable"
174175
@change="ttsModelEnableChange"
175176
/>
176177
</div>
177178
</div>
178179
</template>
179-
<el-radio-group v-model="form_data.tts_type" v-show="form_data.tts_model_enable">
180-
<el-radio label="浏览器播放(免费)" value="BROWSER" />
181-
<el-radio label="TTS模型" value="TTS" />
182-
</el-radio-group>
183-
<el-select
184-
v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
185-
v-model="form_data.tts_model_id"
186-
class="w-full"
187-
@wheel="wheel"
188-
popper-class="select-model"
189-
@change="ttsModelChange()"
190-
placeholder="请选择语音合成模型"
191-
:teleported="false"
192-
>
193-
<el-option-group
194-
v-for="(value, label) in ttsModelOptions"
195-
:key="value"
196-
:label="relatedObject(providerOptions, label, 'provider')?.name"
180+
<div class="w-full">
181+
<el-radio-group v-model="form_data.tts_type" v-show="form_data.tts_model_enable">
182+
<el-radio label="浏览器播放(免费)" value="BROWSER" />
183+
<el-radio label="TTS模型" value="TTS" />
184+
</el-radio-group>
185+
</div>
186+
<div class="flex-between w-full">
187+
<el-select
188+
v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
189+
v-model="form_data.tts_model_id"
190+
class="w-full"
191+
@wheel="wheel"
192+
popper-class="select-model"
193+
@change="ttsModelChange()"
194+
placeholder="请选择语音合成模型"
195+
:teleported="false"
197196
>
198-
<el-option
199-
v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
200-
:key="item.id"
201-
:label="item.name"
202-
:value="item.id"
203-
class="flex-between"
204-
>
205-
<div class="flex align-center">
206-
<span
207-
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
208-
class="model-icon mr-8"
209-
></span>
210-
<span>{{ item.name }}</span>
211-
<el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
212-
>公用
213-
</el-tag>
214-
</div>
215-
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
216-
<Check />
217-
</el-icon>
218-
</el-option>
219-
<!-- 不可用 -->
220-
<el-option
221-
v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
222-
:key="item.id"
223-
:label="item.name"
224-
:value="item.id"
225-
class="flex-between"
226-
disabled
197+
<el-option-group
198+
v-for="(value, label) in ttsModelOptions"
199+
:key="value"
200+
:label="relatedObject(providerOptions, label, 'provider')?.name"
227201
>
228-
<div class="flex">
229-
<span
230-
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
231-
class="model-icon mr-8"
232-
></span>
233-
<span>{{ item.name }}</span>
234-
<span class="danger">{{
235-
$t('views.application.applicationForm.form.aiModel.unavailable')
236-
}}</span>
237-
</div>
238-
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
239-
<Check />
240-
</el-icon>
241-
</el-option>
242-
</el-option-group>
243-
</el-select>
244-
<el-button
245-
v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
246-
type="primary"
247-
link
248-
@click="openTTSParamSettingDialog"
249-
:disabled="!form_data.tts_model_id"
250-
class="mr-4"
251-
>
252-
<el-icon class="mr-4">
253-
<Setting />
254-
</el-icon>
255-
</el-button>
202+
<el-option
203+
v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
204+
:key="item.id"
205+
:label="item.name"
206+
:value="item.id"
207+
class="flex-between"
208+
>
209+
<div class="flex align-center">
210+
<span
211+
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
212+
class="model-icon mr-8"
213+
></span>
214+
<span>{{ item.name }}</span>
215+
<el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
216+
>公用
217+
</el-tag>
218+
</div>
219+
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
220+
<Check />
221+
</el-icon>
222+
</el-option>
223+
<!-- 不可用 -->
224+
<el-option
225+
v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
226+
:key="item.id"
227+
:label="item.name"
228+
:value="item.id"
229+
class="flex-between"
230+
disabled
231+
>
232+
<div class="flex">
233+
<span
234+
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
235+
class="model-icon mr-8"
236+
></span>
237+
<span>{{ item.name }}</span>
238+
<span class="danger">{{
239+
$t('views.application.applicationForm.form.aiModel.unavailable')
240+
}}</span>
241+
</div>
242+
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
243+
<Check />
244+
</el-icon>
245+
</el-option>
246+
</el-option-group>
247+
</el-select>
248+
<el-button
249+
v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
250+
@click="openTTSParamSettingDialog"
251+
:disabled="!form_data.tts_model_id"
252+
class="ml-8"
253+
>
254+
<el-icon>
255+
<el-icon><Operation /></el-icon>
256+
</el-icon>
257+
</el-button>
258+
</div>
256259
</el-form-item>
257260
</el-form>
258261
<TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />

0 commit comments

Comments
 (0)