♻️ refactor: Update dumi

.dumirc.ts

@@ -52,10 +52,7 @@ export default defineConfig({
     'process.env': process.env,
   },
   favicons: ['https://lobehub.com/favicon.ico'],
-  locales: [
-    { id: 'en-US', name: 'English' },
-    { id: 'zh-CN', name: '简体中文' },
-  ],
+  locales: [{ id: 'en-US', name: 'English' }],
   // mfsu: isWin ? undefined : {},
   mfsu: false,
   npmClient: 'pnpm',

api/edge-speech.ts

@@ -1,13 +1,15 @@
-import { EdgeSpeechPayload, createEdgeSpeech } from '../src/core/EdgeSpeechTTS/createEdgeSpeech';
+import cors from '../lib/cors';
+import { EdgeSpeechPayload, EdgeSpeechTTS } from '../src/core';
 
 export const config = {
   runtime: 'edge',
 };
 
 export default async (req: Request) => {
   if (req.method !== 'POST') return new Response('Method Not Allowed', { status: 405 });
-
   const payload = (await req.json()) as EdgeSpeechPayload;
 
-  return createEdgeSpeech({ payload });
+  const res = await EdgeSpeechTTS.createRequest({ payload });
+
+  return cors(req, res);
 };

api/microsoft-speech.ts

@@ -1,7 +1,5 @@
-import {
-  MicrosoftSpeechPayload,
-  createMicrosoftSpeech,
-} from '../src/core/MicrosoftSpeechTTS/createMicrosoftSpeech';
+import cors from '../lib/cors';
+import { MicrosoftSpeechPayload, MicrosoftSpeechTTS } from '../src/core';
 
 export const config = {
   runtime: 'edge',
@@ -11,5 +9,7 @@ export default async (req: Request) => {
   if (req.method !== 'POST') return new Response('Method Not Allowed', { status: 405 });
   const payload = (await req.json()) as MicrosoftSpeechPayload;
 
-  return createMicrosoftSpeech({ payload });
+  const res = await MicrosoftSpeechTTS.createRequest({ payload });
+
+  return cors(req, res);
 };

api/openai-stt.ts

@@ -2,6 +2,7 @@ import OpenAI from 'openai';
 
 import { OpenAISTTPayload } from '@/core';
 
+import cors from '../lib/cors';
 import { createOpenaiAudioTranscriptions } from '../src/server/createOpenaiAudioTranscriptions';
 
 export const config = {
@@ -21,9 +22,12 @@ export default async (req: Request) => {
   const openai = new OpenAI({ apiKey: OPENAI_API_KEY, baseURL: OPENAI_BASE_URL });
   const res = await createOpenaiAudioTranscriptions({ openai, payload });
 
-  return new Response(JSON.stringify(res), {
-    headers: {
-      'content-type': 'application/json;charset=UTF-8',
-    },
-  });
+  return cors(
+    req,
+    new Response(JSON.stringify(res), {
+      headers: {
+        'content-type': 'application/json;charset=UTF-8',
+      },
+    }),
+  );
 };

api/openai-tts.ts

@@ -2,6 +2,7 @@ import OpenAI from 'openai';
 
 import { OpenAITTSPayload } from '@/core';
 
+import cors from '../lib/cors';
 import { createOpenaiAudioSpeech } from '../src/server/createOpenaiAudioSpeech';
 
 export const config = {
@@ -10,6 +11,7 @@ export const config = {
 
 export default async (req: Request) => {
   if (req.method !== 'POST') return new Response('Method Not Allowed', { status: 405 });
+
   const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
   const OPENAI_BASE_URL = process.env.OPENAI_BASE_URL;
 
@@ -19,5 +21,7 @@ export default async (req: Request) => {
 
   const openai = new OpenAI({ apiKey: OPENAI_API_KEY, baseURL: OPENAI_BASE_URL });
 
-  return createOpenaiAudioSpeech({ openai, payload });
+  const res = await createOpenaiAudioSpeech({ openai, payload });
+
+  return cors(req, res);
 };

docs/STT.tsx

@@ -0,0 +1,25 @@
+import { Icon } from '@lobehub/ui';
+import { Button, Input } from 'antd';
+import { Mic, StopCircle } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSpeechRecognition } from '@/react';
+
+export default () => {
+  const { text, start, stop, isLoading, formattedTime, url } = useSpeechRecognition('zh-CN');
+  return (
+    <Flexbox gap={8}>
+      {isLoading ? (
+        <Button block icon={<Icon icon={StopCircle} />} onClick={stop}>
+          Stop {formattedTime}
+        </Button>
+      ) : (
+        <Button block icon={<Icon icon={Mic} />} onClick={start} type={'primary'}>
+          Recognition
+        </Button>
+      )}
+      <Input.TextArea placeholder={'Recognition result...'} value={text} />
+      {url && <audio controls src={url} />}
+    </Flexbox>
+  );
+};

docs/TTS.tsx

@@ -0,0 +1,34 @@
+import { Icon } from '@lobehub/ui';
+import { Button, Input } from 'antd';
+import { Volume2 } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+
+import { AudioPlayer, useEdgeSpeech } from '@/react';
+
+export default () => {
+  const { setText, isGlobalLoading, start, stop, audio } = useEdgeSpeech('Edge Speech Example', {
+    api: {},
+    options: {
+      voice: 'zh-CN-YunxiaNeural',
+    },
+  });
+
+  return (
+    <Flexbox gap={8}>
+      {isGlobalLoading ? (
+        <Button block loading onClick={stop}>
+          Generating...
+        </Button>
+      ) : (
+        <Button block icon={<Icon icon={Volume2} />} onClick={start} type={'primary'}>
+          Speak
+        </Button>
+      )}
+      <Input.TextArea
+        defaultValue={'Edge Speech Example'}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <AudioPlayer audio={audio} isLoading={isGlobalLoading} onLoadingStop={stop} />
+    </Flexbox>
+  );
+};

docs/api-reference/edge-speech-tts.md

@@ -1,10 +1,12 @@
 ---
-group: TTS
+group: API Reference
 title: EdgeSpeechTTS
 apiHeader:
   pkg: '@lobehub/tts'
 ---
 
+## Introduction
+
 `EdgeSpeechTTS` is a class for text-to-speech conversion based on Edge Speech Service.
 
 This class supports converting text to speech and provides a set of methods to retrieve voice options and create speech synthesis requests.

docs/api-reference/edge-speech-tts.zh-CN.md

@@ -1,10 +1,12 @@
 ---
-group: TTS
+group: API Reference
 title: EdgeSpeechTTS
 apiHeader:
   pkg: '@lobehub/tts'
 ---
 
+## 介绍
+
 `EdgeSpeechTTS` 是一个基于 Edge 语音服务的文本转语音方法类。
 
 该类支持将文本转换为语音，并提供了一系列方法来获取语音选项，创建语音合成请求。

docs/api-reference/microsoft-speech-tts.md

@@ -1,10 +1,12 @@
 ---
-group: TTS
+group: API Reference
 title: MicrosoftSpeechTTS
 apiHeader:
   pkg: '@lobehub/tts'
 ---
 
+## Introduction
+
 `MicrosoftSpeechTTS` is a class for text-to-speech using Microsoft Speech Services.
 
 This class supports converting text to speech and provides a series of methods to retrieve speech options and create speech synthesis requests.
@@ -23,7 +25,6 @@ constructor(options: MicrosoftSpeechAPI): MicrosoftSpeechTTS
 
 ```js
 // index.js
-// index.js
 import { MicrosoftSpeechTTS } from '@lobehub/tts';
 
 // get MicrosoftSpeechTTS instance

docs/api-reference/microsoft-speech-tts.zh-CN.md

@@ -1,10 +1,12 @@
 ---
-group: TTS
+group: API Reference
 title: MicrosoftSpeechTTS
 apiHeader:
   pkg: '@lobehub/tts'
 ---
 
+## 介绍
+
 `MicrosoftSpeechTTS` 是一个基于 Microsoft 语音服务的文本转语音方法类。
 
 该类支持将文本转换为语音，并提供了一系列方法来获取语音选项，创建语音合成请求。

docs/api-reference/openai-tts.md

@@ -1,10 +1,12 @@
 ---
-group: TTS
+group: API Reference
 title: OpenAITTS
 apiHeader:
   pkg: '@lobehub/tts'
 ---
 
+## Introduction
+
 `OpenAITTS` is a class for text-to-speech using the OpenAI voice service.
 
 This class supports converting text into speech and provides a set of methods for getting voice options and creating speech synthesis requests.

docs/api-reference/openai-tts.zh-CN.md

@@ -1,10 +1,12 @@
 ---
-group: TTS
+group: API Reference
 title: OpenAITTS
 apiHeader:
   pkg: '@lobehub/tts'
 ---
 
+## 介绍
+
 `OpenAITTS` 是一个基于 OpenAI 语音服务的文本转语音方法类。
 
 该类支持将文本转换为语音，并提供了一系列方法来获取语音选项，创建语音合成请求。

docs/index.tsx

@@ -1,11 +1,25 @@
-import { Snippet } from '@lobehub/ui';
-import { Center } from 'react-layout-kit';
+import { Grid, Snippet } from '@lobehub/ui';
+import { Card } from 'antd';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import STT from './STT';
+import TTS from './TTS';
 
 export default () => {
   return (
-    <Center style={{ marginTop: -88 }}>
-      <h2 style={{ fontSize: 20 }}>To install Lobe TTS, run the following command:</h2>
-      <Snippet language={'bash'}>{'$ bun add @lobehub/tts'}</Snippet>
-    </Center>
+    <Flexbox gap={48} style={{ maxWidth: 960 }} width={'100%'}>
+      <Center>
+        <h2 style={{ fontSize: 20 }}>To install Lobe TTS, run the following command:</h2>
+        <Snippet language={'bash'}>{'$ bun add @lobehub/tts'}</Snippet>
+      </Center>
+      <Grid rows={2}>
+        <Card key={'STT'} title={'Speech Recognition'}>
+          <STT />
+        </Card>
+        <Card title={'Text to Speech'}>
+          <TTS />
+        </Card>
+      </Grid>
+    </Flexbox>
   );
 };