fix(stage-ui): range number parse & for speech

This commit is contained in:
Neko Ayaka
2025-03-14 17:50:38 +08:00
parent 270c886a51
commit 33ee62cd90
4 changed files with 20 additions and 50 deletions
@@ -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"