✨ feat: Add header options

lobehub · Nov 19, 2023 · 0ab0a4a · 0ab0a4a
1 parent 877ab0d
commit 0ab0a4a
Show file tree

Hide file tree

Showing 16 changed files with 74 additions and 80 deletions.
diff --git a/src/core/EdgeSpeechTTS/index.ts b/src/core/EdgeSpeechTTS/index.ts
@@ -9,16 +9,16 @@ import { getEdgeVoiceOptions } from './options';
 export type { EdgeSpeechPayload } from './createEdgeSpeech';
 
 export interface EdgeSpeechAPI {
-  backendUrl?: string;
+  serviceUrl?: string;
 }
 
 export class EdgeSpeechTTS {
   private locale?: string;
-  private BACKEND_URL: string | undefined;
+  private serviceUrl: string | undefined;
 
-  constructor({ backendUrl, locale }: EdgeSpeechAPI & { locale?: string } = {}) {
+  constructor({ serviceUrl, locale }: EdgeSpeechAPI & { locale?: string } = {}) {
     this.locale = locale;
-    this.BACKEND_URL = backendUrl;
+    this.serviceUrl = serviceUrl;
   }
 
   get voiceOptions() {
@@ -30,16 +30,16 @@ export class EdgeSpeechTTS {
   static voiceName = voiceName;
   static createRequest = createEdgeSpeech;
 
-  private fetch = async (payload: EdgeSpeechPayload) => {
-    const response = await (this.BACKEND_URL
-      ? fetch(this.BACKEND_URL, { body: JSON.stringify(payload), method: 'POST' })
+  private fetch = async (payload: EdgeSpeechPayload, headers?: Headers) => {
+    const response = await (this.serviceUrl
+      ? fetch(this.serviceUrl, { body: JSON.stringify(payload), headers, method: 'POST' })
       : createEdgeSpeech({ payload }));
 
     return response;
   };
 
-  create = async (payload: EdgeSpeechPayload): Promise<Response> => {
-    return this.fetch(payload);
+  create = async (payload: EdgeSpeechPayload, headers?: Headers): Promise<Response> => {
+    return this.fetch(payload, headers);
   };
 
   /**

diff --git a/src/core/MicrosoftSpeechTTS/index.ts b/src/core/MicrosoftSpeechTTS/index.ts
@@ -9,16 +9,16 @@ import azureVoiceList, { getAzureVoiceOptions } from './voiceList';
 export type { MicrosoftSpeechPayload } from './createMicrosoftSpeech';
 
 export interface MicrosoftSpeechAPI {
-  backendUrl?: string;
+  serviceUrl?: string;
 }
 
 export class MicrosoftSpeechTTS {
   private locale?: string;
-  private BACKEND_URL: string | undefined;
+  private serviceUrl: string | undefined;
 
-  constructor({ backendUrl, locale }: MicrosoftSpeechAPI & { locale?: string } = {}) {
+  constructor({ serviceUrl, locale }: MicrosoftSpeechAPI & { locale?: string } = {}) {
     this.locale = locale;
-    this.BACKEND_URL = backendUrl;
+    this.serviceUrl = serviceUrl;
   }
   get voiceOptions() {
     return getAzureVoiceOptions(this.locale);
@@ -31,16 +31,16 @@ export class MicrosoftSpeechTTS {
   static voiceName = voiceName;
   static styleList = styleList;
 
-  private fetch = async (payload: MicrosoftSpeechPayload) => {
-    const response = await (this.BACKEND_URL
-      ? fetch(this.BACKEND_URL, { body: JSON.stringify(payload), method: 'POST' })
+  private fetch = async (payload: MicrosoftSpeechPayload, headers?: Headers) => {
+    const response = await (this.serviceUrl
+      ? fetch(this.serviceUrl, { body: JSON.stringify(payload), headers, method: 'POST' })
       : createMicrosoftSpeech({ payload }));
 
     return response;
   };
 
-  create = async (payload: MicrosoftSpeechPayload): Promise<Response> => {
-    return await this.fetch(payload);
+  create = async (payload: MicrosoftSpeechPayload, headers?: Headers): Promise<Response> => {
+    return await this.fetch(payload, headers);
   };
 
   createAudio = async (payload: MicrosoftSpeechPayload): Promise<AudioBuffer> => {

diff --git a/src/core/OpenAISTT/index.ts b/src/core/OpenAISTT/index.ts
@@ -21,9 +21,9 @@ export interface OpenAISTTPayload {
 }
 
 export interface OpenAISTTAPI {
-  apiKey?: string;
-  backendUrl?: string;
-  baseUrl?: string;
+  OPENAI_API_KEY?: string;
+  OPENAI_PROXY_URL?: string;
+  serviceUrl?: string;
 }
 
 const genSTTBody = ({ speech, options }: OpenAISTTPayload) => {
@@ -43,20 +43,20 @@ const genSTTBody = ({ speech, options }: OpenAISTTPayload) => {
 export class OpenaiSTT {
   private OPENAI_BASE_URL: string;
   private OPENAI_API_KEY: string | undefined;
-  private BACKEND_URL: string | undefined;
+  private serviceUrl: string | undefined;
 
-  constructor({ baseUrl, apiKey, backendUrl }: OpenAISTTAPI = {}) {
-    this.OPENAI_BASE_URL = baseUrl || OPENAI_BASE_URL;
-    this.OPENAI_API_KEY = apiKey;
-    this.BACKEND_URL = backendUrl;
+  constructor(api: OpenAISTTAPI = {}) {
+    this.OPENAI_BASE_URL = api.OPENAI_PROXY_URL || OPENAI_BASE_URL;
+    this.OPENAI_API_KEY = api.OPENAI_API_KEY;
+    this.serviceUrl = api.serviceUrl;
   }
 
   static safeRecordMineType = getRecordMineType;
 
-  fetch = async (payload: OpenAISTTPayload) => {
+  fetch = async (payload: OpenAISTTPayload, headers?: Headers) => {
     const url = urlJoin(this.OPENAI_BASE_URL, 'audio/speech');
-    return this.BACKEND_URL
-      ? fetch(this.BACKEND_URL, { body: JSON.stringify(payload), method: 'POST' })
+    return this.serviceUrl
+      ? fetch(this.serviceUrl, { body: JSON.stringify(payload), headers, method: 'POST' })
       : fetch(url, {
           body: genSTTBody(payload),
           headers: new Headers({
@@ -65,8 +65,8 @@ export class OpenaiSTT {
           method: 'POST',
         });
   };
-  create = async (payload: OpenAISTTPayload): Promise<Response> => {
-    const response = await this.fetch(payload);
+  create = async (payload: OpenAISTTPayload, headers?: Headers): Promise<Response> => {
+    const response = await this.fetch(payload, headers);
 
     return response;
   };

diff --git a/src/core/OpenAITTS/index.ts b/src/core/OpenAITTS/index.ts
@@ -33,12 +33,12 @@ export interface OpenAITTSAPI {
 export class OpenAITTS {
   private OPENAI_BASE_URL: string;
   private OPENAI_API_KEY: string | undefined;
-  private BACKEND_URL: string | undefined;
+  private serviceUrl: string | undefined;
 
-  constructor({ OPENAI_PROXY_URL, OPENAI_API_KEY, serviceUrl }: OpenAITTSAPI = {}) {
-    this.OPENAI_BASE_URL = OPENAI_PROXY_URL || OPENAI_BASE_URL;
-    this.OPENAI_API_KEY = OPENAI_API_KEY;
-    this.BACKEND_URL = serviceUrl;
+  constructor(api: OpenAITTSAPI = {}) {
+    this.OPENAI_BASE_URL = api.OPENAI_PROXY_URL || OPENAI_BASE_URL;
+    this.OPENAI_API_KEY = api.OPENAI_API_KEY;
+    this.serviceUrl = api.serviceUrl;
   }
 
   get voiceOptions() {
@@ -47,10 +47,10 @@ export class OpenAITTS {
 
   static voiceList = voiceList;
 
-  fetch = async (payload: OpenAITTSPayload) => {
+  fetch = async (payload: OpenAITTSPayload, headers?: Headers) => {
     const url = urlJoin(this.OPENAI_BASE_URL, 'audio/speech');
-    return this.BACKEND_URL
-      ? fetch(this.BACKEND_URL, { body: JSON.stringify(payload), method: 'POST' })
+    return this.serviceUrl
+      ? fetch(this.serviceUrl, { body: JSON.stringify(payload), headers, method: 'POST' })
       : fetch(url, {
           body: JSON.stringify({
             input: payload.input,
@@ -65,8 +65,8 @@ export class OpenAITTS {
         });
   };
 
-  create = async (payload: OpenAITTSPayload): Promise<Response> => {
-    const response = await this.fetch(payload);
+  create = async (payload: OpenAITTSPayload, headers?: Headers): Promise<Response> => {
+    const response = await this.fetch(payload, headers);
 
     return response;
   };

diff --git a/src/react/hooks/useAudioPlayer.ts b/src/react/hooks/useAudioPlayer.ts
@@ -51,9 +51,6 @@ export const useAudioPlayer = ({
     const onTimeUpdate = () => {
       setCurrentTime(audioRef.current.currentTime);
     };
-    const onAudioError = () => {
-      console.error('Error useAudioPlayer:', 'loading audio', audioRef.current.error);
-    };
 
     const onEnded = async () => {
       setIsPlaying(false);
@@ -62,7 +59,7 @@ export const useAudioPlayer = ({
     };
 
     audioRef.current.addEventListener('ended', onEnded);
-    audioRef.current.addEventListener('error', onAudioError);
+
     audioRef.current.addEventListener('loadedmetadata', onLoadedMetadata);
     audioRef.current.addEventListener('timeupdate', onTimeUpdate);
 
@@ -72,7 +69,7 @@ export const useAudioPlayer = ({
       audioRef.current.removeEventListener('ended', onEnded);
       audioRef.current.removeEventListener('loadedmetadata', onLoadedMetadata);
       audioRef.current.removeEventListener('timeupdate', onTimeUpdate);
-      audioRef.current.removeEventListener('error', onAudioError);
+
       setIsGlobalLoading(true);
     };
   }, []);

diff --git a/src/react/hooks/useStreamAudioPlayer.ts b/src/react/hooks/useStreamAudioPlayer.ts
@@ -27,11 +27,7 @@ export const useStreamAudioPlayer = (): StreamAudioPlayerReturn => {
     const onTimeUpdate = () => {
       setCurrentTime(audioRef.current.currentTime);
     };
-    const onAudioError = () => {
-      console.error('Error useStreamAudioPlayer:', 'loading audio', audioRef.current.error);
-    };
 
-    audioRef.current.addEventListener('error', onAudioError);
     audioRef.current.addEventListener('loadedmetadata', onLoadedMetadata);
     audioRef.current.addEventListener('timeupdate', onTimeUpdate);
 
@@ -40,7 +36,6 @@ export const useStreamAudioPlayer = (): StreamAudioPlayerReturn => {
       audioRef.current.load();
       audioRef.current.removeEventListener('loadedmetadata', onLoadedMetadata);
       audioRef.current.removeEventListener('timeupdate', onTimeUpdate);
-      audioRef.current.removeEventListener('error', onAudioError);
     };
   }, []);
 

diff --git a/src/react/useEdgeSpeech/demos/index.tsx b/src/react/useEdgeSpeech/demos/index.tsx
@@ -15,10 +15,7 @@ export default () => {
 
   const api: any = useControls(
     {
-      backendUrl: {
-        label: 'EDGE_SPEECH_BACKEND_URL',
-        value: EDGE_SPEECH_BACKEND_URL,
-      },
+      serviceUrl: EDGE_SPEECH_BACKEND_URL,
     },
     { store },
   );

diff --git a/src/react/useEdgeSpeech/index.ts b/src/react/useEdgeSpeech/index.ts
@@ -5,19 +5,20 @@ import { type TTSConfig, useTTS } from '@/react/useTTS';
 
 export interface EdgeSpeechOptions extends Pick<EdgeSpeechPayload, 'options'>, TTSConfig {
   api?: EdgeSpeechAPI;
+  headers?: Headers;
   locale?: string;
 }
 
-export const useEdgeSpeech = (defaultText: string, config: EdgeSpeechOptions) => {
+export const useEdgeSpeech = (defaultText: string, init: EdgeSpeechOptions) => {
   const [text, setText] = useState<string>(defaultText);
-  const { options, api, locale, ...swrConfig } = config;
+  const { options, api, locale, headers, ...swrConfig } = init;
   const [response, setResponse] = useState<Response>();
   const rest = useTTS(
     options.voice,
     text,
     async (segmentText: string) => {
       const instance = new EdgeSpeechTTS({ ...api, locale });
-      const res = await instance.create({ input: segmentText, options });
+      const res = await instance.create({ input: segmentText, options }, headers);
       setResponse(res);
       return res.arrayBuffer();
     },

diff --git a/src/react/useMicrosoftSpeech/demos/index.tsx b/src/react/useMicrosoftSpeech/demos/index.tsx
@@ -14,10 +14,7 @@ export default () => {
   const store = useCreateStore();
   const api: any = useControls(
     {
-      backendUrl: {
-        label: 'MICROSOFT_SPEECH_BACKEND_URL',
-        value: MICROSOFT_SPEECH_BACKEND_URL,
-      },
+      serviceUrl: MICROSOFT_SPEECH_BACKEND_URL,
     },
     { store },
   );

diff --git a/src/react/useMicrosoftSpeech/index.ts b/src/react/useMicrosoftSpeech/index.ts
@@ -9,19 +9,20 @@ import { type TTSConfig, useTTS } from '@/react/useTTS';
 
 export interface MicrosoftSpeechOptions extends Pick<MicrosoftSpeechPayload, 'options'>, TTSConfig {
   api?: MicrosoftSpeechAPI;
+  headers?: Headers;
   locale?: string;
 }
 
-export const useMicrosoftSpeech = (defaultText: string, config: MicrosoftSpeechOptions) => {
+export const useMicrosoftSpeech = (defaultText: string, init: MicrosoftSpeechOptions) => {
   const [text, setText] = useState<string>(defaultText);
-  const { options, locale, api, ...swrConfig } = config;
+  const { options, locale, api, headers, ...swrConfig } = init;
   const [response, setResponse] = useState<Response>();
   const rest = useTTS(
     options.voice,
     text,
     async (segmentText: string) => {
       const instance = new MicrosoftSpeechTTS({ ...api, locale });
-      const res = await instance.create({ input: segmentText, options });
+      const res = await instance.create({ input: segmentText, options }, headers);
       setResponse(res);
       return res.arrayBuffer();
     },

diff --git a/src/react/useOpenAISTT/demos/AutoStop.tsx b/src/react/useOpenAISTT/demos/AutoStop.tsx
@@ -10,14 +10,15 @@ export default () => {
   const store = useCreateStore();
   const api: any = useControls(
     {
-      apiKey: {
+      OPENAI_API_KEY: {
         label: 'OPENAI_API_KEY',
         value: '',
       },
-      baseUrl: {
-        label: 'OPENAI_BASE_URL',
+      OPENAI_PROXY_URL: {
+        label: 'OPENAI_PROXY_URL',
         value: OPENAI_BASE_URL,
       },
+      serviceUrl: '',
     },
     { store },
   );

diff --git a/src/react/useOpenAISTT/demos/index.tsx b/src/react/useOpenAISTT/demos/index.tsx
@@ -10,14 +10,15 @@ export default () => {
   const store = useCreateStore();
   const api: any = useControls(
     {
-      apiKey: {
+      OPENAI_API_KEY: {
         label: 'OPENAI_API_KEY',
         value: '',
       },
-      baseUrl: {
-        label: 'OPENAI_BASE_URL',
+      OPENAI_PROXY_URL: {
+        label: 'OPENAI_PROXY_URL',
         value: OPENAI_BASE_URL,
       },
+      serviceUrl: '',
     },
     { store },
   );

diff --git a/src/react/useOpenAISTT/useOpenAISTTCore.ts b/src/react/useOpenAISTT/useOpenAISTTCore.ts
@@ -4,17 +4,18 @@ import { type OpenAISTTAPI, type OpenAISTTPayload, OpenaiSTT } from '@/core/Open
 
 export interface OpenAISTTCoreOptions extends OpenAISTTPayload, SWRConfiguration {
   api?: OpenAISTTAPI;
+  headers?: Headers;
   shouldFetch?: boolean;
 }
-export const useOpenAISTTCore = (config: OpenAISTTCoreOptions) => {
+export const useOpenAISTTCore = (init: OpenAISTTCoreOptions) => {
   const key = new Date().getDate().toString();
-  const { shouldFetch, api, options, speech, ...swrConfig } = config;
+  const { shouldFetch, api, options, speech, headers, ...swrConfig } = init;
 
   return useSWR(
     shouldFetch && speech ? key : null,
     async () => {
       const instance = new OpenaiSTT(api);
-      return instance.create({ options, speech });
+      return instance.create({ options, speech }, headers);
     },
     swrConfig,
   );

diff --git a/src/react/useOpenAISTT/useOpenAISTTRecorder.ts b/src/react/useOpenAISTT/useOpenAISTTRecorder.ts
@@ -11,6 +11,7 @@ export interface OpenAISTTRecorderOptions
   extends SpeechRecognitionRecorderOptions,
     SWRConfiguration,
     Partial<OpenAISTTCoreOptions> {
+  headers?: Headers;
   onFinished?: SWRConfiguration['onSuccess'];
 }
 

diff --git a/src/react/useOpenAITTS/demos/index.tsx b/src/react/useOpenAITTS/demos/index.tsx
@@ -14,14 +14,15 @@ export default () => {
 
   const api: any = useControls(
     {
-      apiKey: {
+      OPENAI_API_KEY: {
         label: 'OPENAI_API_KEY',
         value: '',
       },
-      baseUrl: {
-        label: 'OPENAI_BASE_URL',
+      OPENAI_PROXY_URL: {
+        label: 'OPENAI_PROXY_URL',
         value: OPENAI_BASE_URL,
       },
+      serviceUrl: '',
     },
     { store },
   );