feat: support autoplay answer for tts model
This commit is contained in:
wangdan-fit2cloud
刘瑞斌
parent
b2879da541
commit
6c44622e95
@ -402,9 +402,10 @@
|
|||||||
<template #label>
|
<template #label>
|
||||||
<div class="flex-between">
|
<div class="flex-between">
|
||||||
<span class="mr-4">语音播放</span>
|
<span class="mr-4">语音播放</span>
|
||||||
<div>
|
<div class="flex">
|
||||||
<el-checkbox v-model="applicationForm.tts_autoplay">自动播放</el-checkbox>
|
<el-checkbox v-model="applicationForm.tts_autoplay">自动播放</el-checkbox>
|
||||||
<el-switch
|
<el-switch
|
||||||
|
class="ml-8"
|
||||||
size="small"
|
size="small"
|
||||||
v-model="applicationForm.tts_model_enable"
|
v-model="applicationForm.tts_model_enable"
|
||||||
@change="ttsModelEnableChange"
|
@change="ttsModelEnableChange"
|
||||||
@ -412,86 +413,87 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<el-radio-group
|
<div class="w-full">
|
||||||
v-model="applicationForm.tts_type"
|
<el-radio-group
|
||||||
v-show="applicationForm.tts_model_enable"
|
v-model="applicationForm.tts_type"
|
||||||
class="mb-8"
|
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"
|
|
||||||
>
|
>
|
||||||
<el-option
|
<el-radio value="BROWSER">浏览器播放(免费)</el-radio>
|
||||||
v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
|
<el-radio value="TTS">TTS模型</el-radio>
|
||||||
:key="item.id"
|
</el-radio-group>
|
||||||
:label="item.name"
|
</div>
|
||||||
:value="item.id"
|
<div class="flex-between w-full">
|
||||||
class="flex-between"
|
<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">
|
<el-option
|
||||||
<span
|
v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
|
||||||
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
|
:key="item.id"
|
||||||
class="model-icon mr-8"
|
:label="item.name"
|
||||||
></span>
|
:value="item.id"
|
||||||
<span>{{ item.name }}</span>
|
class="flex-between"
|
||||||
<el-tag
|
>
|
||||||
v-if="item.permission_type === 'PUBLIC'"
|
<div class="flex align-center">
|
||||||
type="info"
|
<span
|
||||||
class="info-tag ml-8"
|
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
|
||||||
>公用
|
class="model-icon mr-8"
|
||||||
</el-tag>
|
></span>
|
||||||
</div>
|
<span>{{ item.name }}</span>
|
||||||
<el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
|
<el-tag
|
||||||
<Check />
|
v-if="item.permission_type === 'PUBLIC'"
|
||||||
</el-icon>
|
type="info"
|
||||||
</el-option>
|
class="info-tag ml-8"
|
||||||
<!-- 不可用 -->
|
>公用
|
||||||
<el-option
|
</el-tag>
|
||||||
v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
|
</div>
|
||||||
:key="item.id"
|
<el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
|
||||||
:label="item.name"
|
<Check />
|
||||||
:value="item.id"
|
</el-icon>
|
||||||
class="flex-between"
|
</el-option>
|
||||||
disabled
|
<!-- 不可用 -->
|
||||||
>
|
<el-option
|
||||||
<div class="flex">
|
v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
|
||||||
<span
|
:key="item.id"
|
||||||
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
|
:label="item.name"
|
||||||
class="model-icon mr-8"
|
:value="item.id"
|
||||||
></span>
|
class="flex-between"
|
||||||
<span>{{ item.name }}</span>
|
disabled
|
||||||
<span class="danger">{{
|
>
|
||||||
$t('views.application.applicationForm.form.aiModel.unavailable')
|
<div class="flex">
|
||||||
}}</span>
|
<span
|
||||||
</div>
|
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
|
||||||
<el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
|
class="model-icon mr-8"
|
||||||
<Check />
|
></span>
|
||||||
</el-icon>
|
<span>{{ item.name }}</span>
|
||||||
</el-option>
|
<span class="danger">{{
|
||||||
</el-option-group>
|
$t('views.application.applicationForm.form.aiModel.unavailable')
|
||||||
</el-select>
|
}}</span>
|
||||||
<el-button
|
</div>
|
||||||
v-if="applicationForm.tts_type === 'TTS'"
|
<el-icon class="check-icon" v-if="item.id === applicationForm.tts_model_id">
|
||||||
type="primary"
|
<Check />
|
||||||
link
|
</el-icon>
|
||||||
@click="openTTSParamSettingDialog"
|
</el-option>
|
||||||
:disabled="!applicationForm.tts_model_id"
|
</el-option-group>
|
||||||
class="mr-8"
|
</el-select>
|
||||||
>
|
<el-button
|
||||||
<el-icon class="mr-4"><Setting /></el-icon>
|
v-if="applicationForm.tts_type === 'TTS'"
|
||||||
</el-button>
|
@click="openTTSParamSettingDialog"
|
||||||
|
:disabled="!applicationForm.tts_model_id"
|
||||||
|
class="ml-8"
|
||||||
|
>
|
||||||
|
<el-icon><Operation /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
|||||||
@ -166,9 +166,10 @@
|
|||||||
<template #label>
|
<template #label>
|
||||||
<div class="flex-between">
|
<div class="flex-between">
|
||||||
<span class="mr-4">语音播放</span>
|
<span class="mr-4">语音播放</span>
|
||||||
<div>
|
<div class="flex">
|
||||||
<el-checkbox v-model="form_data.tts_autoplay">自动播放</el-checkbox>
|
<el-checkbox v-model="form_data.tts_autoplay">自动播放</el-checkbox>
|
||||||
<el-switch
|
<el-switch
|
||||||
|
class="ml-8"
|
||||||
size="small"
|
size="small"
|
||||||
v-model="form_data.tts_model_enable"
|
v-model="form_data.tts_model_enable"
|
||||||
@change="ttsModelEnableChange"
|
@change="ttsModelEnableChange"
|
||||||
@ -176,83 +177,85 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<el-radio-group v-model="form_data.tts_type" v-show="form_data.tts_model_enable">
|
<div class="w-full">
|
||||||
<el-radio label="浏览器播放(免费)" value="BROWSER" />
|
<el-radio-group v-model="form_data.tts_type" v-show="form_data.tts_model_enable">
|
||||||
<el-radio label="TTS模型" value="TTS" />
|
<el-radio label="浏览器播放(免费)" value="BROWSER" />
|
||||||
</el-radio-group>
|
<el-radio label="TTS模型" value="TTS" />
|
||||||
<el-select
|
</el-radio-group>
|
||||||
v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
|
</div>
|
||||||
v-model="form_data.tts_model_id"
|
<div class="flex-between w-full">
|
||||||
class="w-full"
|
<el-select
|
||||||
@wheel="wheel"
|
v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
|
||||||
popper-class="select-model"
|
v-model="form_data.tts_model_id"
|
||||||
@change="ttsModelChange()"
|
class="w-full"
|
||||||
placeholder="请选择语音合成模型"
|
@wheel="wheel"
|
||||||
:teleported="false"
|
popper-class="select-model"
|
||||||
>
|
@change="ttsModelChange()"
|
||||||
<el-option-group
|
placeholder="请选择语音合成模型"
|
||||||
v-for="(value, label) in ttsModelOptions"
|
:teleported="false"
|
||||||
:key="value"
|
|
||||||
:label="relatedObject(providerOptions, label, 'provider')?.name"
|
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option-group
|
||||||
v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
|
v-for="(value, label) in ttsModelOptions"
|
||||||
:key="item.id"
|
:key="value"
|
||||||
:label="item.name"
|
:label="relatedObject(providerOptions, label, 'provider')?.name"
|
||||||
:value="item.id"
|
|
||||||
class="flex-between"
|
|
||||||
>
|
>
|
||||||
<div class="flex align-center">
|
<el-option
|
||||||
<span
|
v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
|
||||||
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
|
:key="item.id"
|
||||||
class="model-icon mr-8"
|
:label="item.name"
|
||||||
></span>
|
:value="item.id"
|
||||||
<span>{{ item.name }}</span>
|
class="flex-between"
|
||||||
<el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
|
>
|
||||||
>公用
|
<div class="flex align-center">
|
||||||
</el-tag>
|
<span
|
||||||
</div>
|
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
|
||||||
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
|
class="model-icon mr-8"
|
||||||
<Check />
|
></span>
|
||||||
</el-icon>
|
<span>{{ item.name }}</span>
|
||||||
</el-option>
|
<el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
|
||||||
<!-- 不可用 -->
|
>公用
|
||||||
<el-option
|
</el-tag>
|
||||||
v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
|
</div>
|
||||||
:key="item.id"
|
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
|
||||||
:label="item.name"
|
<Check />
|
||||||
:value="item.id"
|
</el-icon>
|
||||||
class="flex-between"
|
</el-option>
|
||||||
disabled
|
<!-- 不可用 -->
|
||||||
>
|
<el-option
|
||||||
<div class="flex">
|
v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
|
||||||
<span
|
:key="item.id"
|
||||||
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
|
:label="item.name"
|
||||||
class="model-icon mr-8"
|
:value="item.id"
|
||||||
></span>
|
class="flex-between"
|
||||||
<span>{{ item.name }}</span>
|
disabled
|
||||||
<span class="danger">{{
|
>
|
||||||
$t('views.application.applicationForm.form.aiModel.unavailable')
|
<div class="flex">
|
||||||
}}</span>
|
<span
|
||||||
</div>
|
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
|
||||||
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
|
class="model-icon mr-8"
|
||||||
<Check />
|
></span>
|
||||||
</el-icon>
|
<span>{{ item.name }}</span>
|
||||||
</el-option>
|
<span class="danger">{{
|
||||||
</el-option-group>
|
$t('views.application.applicationForm.form.aiModel.unavailable')
|
||||||
</el-select>
|
}}</span>
|
||||||
<el-button
|
</div>
|
||||||
v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
|
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
|
||||||
type="primary"
|
<Check />
|
||||||
link
|
</el-icon>
|
||||||
@click="openTTSParamSettingDialog"
|
</el-option>
|
||||||
:disabled="!form_data.tts_model_id"
|
</el-option-group>
|
||||||
class="mr-4"
|
</el-select>
|
||||||
>
|
<el-button
|
||||||
<el-icon class="mr-4">
|
v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
|
||||||
<Setting />
|
@click="openTTSParamSettingDialog"
|
||||||
</el-icon>
|
:disabled="!form_data.tts_model_id"
|
||||||
</el-button>
|
class="ml-8"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<el-icon><Operation /></el-icon>
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
|
<TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user