fix(stage-ui): range number parse & for speech
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { RadioCardSimple } from '@proj-airi/stage-ui/components'
|
||||
import { RadioCardSimple, Range } from '@proj-airi/stage-ui/components'
|
||||
import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted, ref } from 'vue'
|
||||
@@ -38,16 +38,6 @@ function updateVoiceName(value: string) {
|
||||
updateSSMLExample()
|
||||
}
|
||||
|
||||
function updatePitch(value: number) {
|
||||
pitch.value = value
|
||||
updateSSMLExample()
|
||||
}
|
||||
|
||||
function updateRate(value: number) {
|
||||
rate.value = value
|
||||
updateSSMLExample()
|
||||
}
|
||||
|
||||
function updateSSMLExample() {
|
||||
ssmlExample.value = `<speak>
|
||||
Hello, my name is <voice name="${voiceName.value || 'Default'}">
|
||||
@@ -201,11 +191,10 @@ function updateSSMLExample() {
|
||||
Pitch Adjustment (%)
|
||||
</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input
|
||||
v-model="pitch" type="range" min="-50" max="50" step="5"
|
||||
<Range
|
||||
v-model="pitch" :min="-50" :max="50" :step="5"
|
||||
class="w-full"
|
||||
@input="(event) => updatePitch(parseInt((event.target as HTMLInputElement).value))"
|
||||
>
|
||||
/>
|
||||
<span class="w-12 text-center">{{ pitch }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,11 +203,10 @@ function updateSSMLExample() {
|
||||
Speech Rate
|
||||
</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input
|
||||
v-model="rate" type="range" min="0.5" max="2" step="0.1"
|
||||
<Range
|
||||
v-model="rate" :min="0.5" :max="2" :step="0.1"
|
||||
class="w-full"
|
||||
@input="(event) => updateRate(parseFloat((event.target as HTMLInputElement).value))"
|
||||
>
|
||||
/>
|
||||
<span class="w-12 text-center">{{ rate }}x</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import type { Voice } from '@proj-airi/stage-ui/constants'
|
||||
import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
|
||||
|
||||
import { Collapsable } from '@proj-airi/stage-ui/components'
|
||||
import { Collapsable, Range } from '@proj-airi/stage-ui/components'
|
||||
import { voiceMap } from '@proj-airi/stage-ui/constants'
|
||||
import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
|
||||
import { useToggle } from '@vueuse/core'
|
||||
@@ -229,7 +229,7 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div flex="~ row" items-center gap-2>
|
||||
<input v-model="similarityBoost" type="range" min="0" max="1" step="0.01" w-full>
|
||||
<Range v-model="similarityBoost" :min="0" :max="1" :step="0.01" w-full />
|
||||
<span class="text-xs">{{ similarityBoost.toFixed(2) }}</span>
|
||||
</div>
|
||||
</label>
|
||||
@@ -244,7 +244,7 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div flex="~ row" items-center gap-2>
|
||||
<input v-model="stability" type="range" min="0" max="1" step="0.01" w-full>
|
||||
<Range v-model="stability" :min="0" :max="1" :step="0.01" w-full />
|
||||
<span class="text-xs">{{ stability.toFixed(2) }}</span>
|
||||
</div>
|
||||
</label>
|
||||
@@ -259,7 +259,7 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div flex="~ row" items-center gap-2>
|
||||
<input v-model="speed" type="range" min="0.7" max="1.2" step="0.01" w-full>
|
||||
<Range v-model="speed" :min="0.7" :max="1.2" :step="0.01" w-full />
|
||||
<span class="text-xs">{{ speed.toFixed(2) }}</span>
|
||||
</div>
|
||||
</label>
|
||||
@@ -274,7 +274,7 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div flex="~ row" items-center gap-2>
|
||||
<input v-model="style" type="range" min="0" max="1" step="0.01" w-full>
|
||||
<Range v-model="style" :min="0" :max="1" :step="0.01" w-full />
|
||||
<span class="text-xs">{{ style.toFixed(2) }}</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { RadioCardSimple } from '@proj-airi/stage-ui/components'
|
||||
import { RadioCardSimple, Range } from '@proj-airi/stage-ui/components'
|
||||
import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted, ref } from 'vue'
|
||||
@@ -38,16 +38,6 @@ function updateVoiceName(value: string) {
|
||||
updateSSMLExample()
|
||||
}
|
||||
|
||||
function updatePitch(value: number) {
|
||||
pitch.value = value
|
||||
updateSSMLExample()
|
||||
}
|
||||
|
||||
function updateRate(value: number) {
|
||||
rate.value = value
|
||||
updateSSMLExample()
|
||||
}
|
||||
|
||||
function updateSSMLExample() {
|
||||
ssmlExample.value = `<speak>
|
||||
Hello, my name is <voice name="${voiceName.value || 'Default'}">
|
||||
@@ -201,11 +191,10 @@ function updateSSMLExample() {
|
||||
Pitch Adjustment (%)
|
||||
</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input
|
||||
v-model="pitch" type="range" min="-50" max="50" step="5"
|
||||
<Range
|
||||
v-model="pitch" :min="-50" :max="50" :step="5"
|
||||
class="w-full"
|
||||
@input="(event) => updatePitch(parseInt((event.target as HTMLInputElement).value))"
|
||||
>
|
||||
/>
|
||||
<span class="w-12 text-center">{{ pitch }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,11 +203,10 @@ function updateSSMLExample() {
|
||||
Speech Rate
|
||||
</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input
|
||||
v-model="rate" type="range" min="0.5" max="2" step="0.1"
|
||||
<Range
|
||||
v-model="rate" :min="0.5" :max="2" :step="0.1"
|
||||
class="w-full"
|
||||
@input="(event) => updateRate(parseFloat((event.target as HTMLInputElement).value))"
|
||||
>
|
||||
/>
|
||||
<span class="w-12 text-center">{{ rate }}x</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,9 +253,3 @@ function updateSSMLExample() {
|
||||
<div text="40" i-lucide:volume-2 translate-x-10 translate-y-10 />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
stageTransition:
|
||||
name: slide
|
||||
</route>
|
||||
|
||||
@@ -53,7 +53,7 @@ function updateTrackColor() {
|
||||
<template>
|
||||
<input
|
||||
ref="sliderRef"
|
||||
v-model="sliderValue"
|
||||
v-model.number="sliderValue"
|
||||
type="range"
|
||||
:min="scaledMin"
|
||||
:max="scaledMax"
|
||||
|
||||
Reference in New Issue
Block a user