♻️ refactor: refactor the demo usage

src/class/EdgeSpeechTTS.ts

@@ -8,13 +8,13 @@ export class EdgeSpeechTTS {
   constructor(locale?: string) {
     this.locale = locale;
   }
+
   get voiceOptions() {
     return getEdgeVoiceOptions(this.locale);
   }
-  get localeOptions() {
-    return getVoiceLocaleOptions();
-  }
-  voiceList = edgeVoiceList;
-  voiceName = voiceName;
+
+  static localeOptions = getVoiceLocaleOptions();
+  static voiceList = edgeVoiceList;
+  static voiceName = voiceName;
   fetch = fetchEdgeSpeech;
 }

src/class/MicrosoftSpeechTTS.ts

@@ -11,9 +11,9 @@ export class MicrosoftSpeechTTS {
   get voiceOptions() {
     return getAzureVoiceOptions(this.locale);
   }
-  get localeOptions() {
-    return getVoiceLocaleOptions();
-  }
+
+  static localeOptions = getVoiceLocaleOptions();
+
   voiceList = azureVoiceList;
   voiceName = voiceName;
   fetch = fetchMicrosoftSpeech;

src/class/OpenaiTTS.ts

@@ -3,12 +3,16 @@ import { fetchOpenaiTTS } from '@/services/fetchOpenaiTTS';
 import { getOpenaiVoiceOptions, getVoiceLocaleOptions } from '@/utils/getVoiceList';
 
 export class OpenaiTTS {
+  static voiceList = openaiVoiceList;
+
   get voiceOptions() {
     return getOpenaiVoiceOptions();
   }
   get localeOptions() {
     return getVoiceLocaleOptions();
   }
-  voiceList = openaiVoiceList;
+
+  static localeOptions = getVoiceLocaleOptions();
+
   fetch = fetchOpenaiTTS;
 }

src/index.ts

@@ -3,24 +3,12 @@ export { MicrosoftSpeechTTS } from './class/MicrosoftSpeechTTS';
 export { OpenaiSTT } from './class/OpenaiSTT';
 export { OpenaiTTS } from './class/OpenaiTTS';
 export { VoiceList } from './class/VoiceList';
-export { default as azureVoiceList } from './data/azureVoiceList';
-export { default as edgeVoiceList } from './data/edgeVoiceList';
-export { default as voiceLocale } from './data/locales';
-export { default as openaiVoiceList } from './data/openaiVoiceList';
-export { default as voiceList } from './data/voiceList';
-export { type EdgeSpeechOptions, fetchEdgeSpeech } from './services/fetchEdgeSpeech';
-export { fetchMicrosoftSpeech, type MicrosoftSpeechOptions } from './services/fetchMicrosoftSpeech';
-export { fetchOpenaiSTT, type OpenaiSttOptions } from './services/fetchOpenaiSTT';
-export { fetchOpenaiTTS, type OpenaiTtsOptions } from './services/fetchOpenaiTTS';
+export { type EdgeSpeechOptions } from './services/fetchEdgeSpeech';
+export { type MicrosoftSpeechOptions } from './services/fetchMicrosoftSpeech';
+export { type OpenaiSttOptions } from './services/fetchOpenaiSTT';
+export { type OpenaiTtsOptions } from './services/fetchOpenaiTTS';
 export { getRecordMineType, type RecordMineType } from './utils/getRecordMineType';
-export {
-  genLevaOptions,
-  getAzureVoiceOptions,
-  getEdgeVoiceOptions,
-  getOpenaiVoiceOptions,
-  getSpeechSynthesVoiceOptions,
-  getVoiceLocaleOptions,
-} from './utils/getVoiceList';
+export { getSpeechSynthesVoiceOptions } from './utils/getVoiceList';
 export {
   EDGE_SPEECH_API_URL,
   MICROSOFT_SPEECH_API_URL,

src/react/_util/leva.ts

@@ -0,0 +1,7 @@
+import { SelectProps } from 'antd';
+
+export const genLevaOptions = (options: SelectProps['options']) => {
+  const data: any = {};
+  options?.forEach((item: any) => (data[item?.label || item?.value] = item?.value));
+  return data;
+};

src/react/useEdgeSpeech/demos/index.tsx

@@ -1,10 +1,12 @@
-import { EDGE_SPEECH_API_URL, genLevaOptions, getEdgeVoiceOptions } from '@lobehub/tts';
+import { EDGE_SPEECH_API_URL, EdgeSpeechTTS } from '@lobehub/tts';
 import { AudioPlayer, useEdgeSpeech } from '@lobehub/tts/react';
 import { Icon, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { Button, Input } from 'antd';
 import { Volume2 } from 'lucide-react';
 import { Flexbox } from 'react-layout-kit';
 
+import { genLevaOptions } from '../../_util/leva';
+
 const defaultText = '这是一段使用 Edge Speech 的语音演示';
 
 export default () => {
@@ -20,7 +22,7 @@ export default () => {
   const options: any = useControls(
     {
       voice: {
-        options: genLevaOptions(getEdgeVoiceOptions()),
+        options: genLevaOptions(new EdgeSpeechTTS().voiceOptions),
         value: 'zh-CN-YunxiaNeural',
       },
     },

src/react/useMicrosoftSpeech/demos/index.tsx

@@ -1,10 +1,12 @@
-import { MICROSOFT_SPEECH_API_URL, genLevaOptions, getEdgeVoiceOptions } from '@lobehub/tts';
+import { MICROSOFT_SPEECH_API_URL, MicrosoftSpeechTTS } from '@lobehub/tts';
 import { AudioPlayer, useMicrosoftSpeech } from '@lobehub/tts/react';
 import { Icon, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { Button, Input } from 'antd';
 import { Volume2 } from 'lucide-react';
 import { Flexbox } from 'react-layout-kit';
 
+import { genLevaOptions } from '../../_util/leva';
+
 const defaultText = '这是一段使用 Microsoft Speech 的语音演示';
 
 export default () => {
@@ -49,7 +51,7 @@ export default () => {
         value: 'general',
       },
       voice: {
-        options: genLevaOptions(getEdgeVoiceOptions()),
+        options: genLevaOptions(new MicrosoftSpeechTTS().voiceOptions),
         value: 'zh-CN-YunxiaNeural',
       },
     },

src/react/useOpenaiTTS/demos/index.tsx

@@ -1,4 +1,4 @@
-import { OPENAI_TTS_API_URL, openaiVoiceList } from '@lobehub/tts';
+import { OPENAI_TTS_API_URL, OpenaiTTS } from '@lobehub/tts';
 import { AudioPlayer, useOpenaiTTS } from '@lobehub/tts/react';
 import { Icon, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { Button, Input } from 'antd';
@@ -28,7 +28,7 @@ export default () => {
   const options: any = useControls(
     {
       voice: {
-        options: openaiVoiceList,
+        options: OpenaiTTS.voiceList,
         value: 'alloy',
       },
     },

src/react/useSpeechSynthes/demos/index.tsx

@@ -1,10 +1,12 @@
-import { genLevaOptions, getSpeechSynthesVoiceOptions } from '@lobehub/tts';
+import { getSpeechSynthesVoiceOptions } from '@lobehub/tts';
 import { useSpeechSynthes } from '@lobehub/tts/react';
 import { Icon, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { Button, Input } from 'antd';
 import { StopCircle, Volume2 } from 'lucide-react';
 import { Flexbox } from 'react-layout-kit';
 
+import { genLevaOptions } from '../../_util/leva';
+
 const defaultText = '这是一段使用 Speech Synthes 的语音演示';
 
 export default () => {

src/utils/getVoiceList.ts

@@ -56,9 +56,3 @@ export const getOpenaiVoiceOptions = (): SelectProps['options'] => {
 export const getVoiceLocaleOptions = (): SelectProps['options'] => {
   return Object.entries(voiceLocale).map(([value, label]) => ({ label, value }));
 };
-
-export const genLevaOptions = (options: SelectProps['options']) => {
-  const data: any = {};
-  options?.forEach((item: any) => (data[item?.label || item?.value] = item?.value));
-  return data;
-};