From 5e254903ceffe05df6c83de05266f4de4ee88105 Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Thu, 6 Feb 2025 22:05:43 -0500 Subject: [PATCH] Add translation feature and language selection - Implemented translation page for audio files - Added language selection dropdown with comprehensive language codes - Updated UI components to support language selection - Migrated from iframe to custom UI API - Added demo image to README - Updated package dependencies --- README.md | 2 + deno-src/{main.ts => transcribe.ts} | 10 +- deno-src/translate.ts | 22 ++++ package.json | 6 +- pnpm-lock.yaml | 10 +- src/api.types.ts | 1 + src/lib/components/ThemeCustomizer.svelte | 2 +- src/lib/components/app-sidebar.svelte | 9 +- src/lib/constants.ts | 59 +++++++++ src/routes/+layout.svelte | 2 +- src/routes/+page.svelte | 60 ++++++++- src/routes/preferences/+page.svelte | 2 +- src/routes/translate/+page.svelte | 143 ++++++++++++++++++++++ 13 files changed, 309 insertions(+), 19 deletions(-) rename deno-src/{main.ts => transcribe.ts} (59%) create mode 100644 deno-src/translate.ts create mode 100644 src/lib/constants.ts create mode 100644 src/routes/translate/+page.svelte diff --git a/README.md b/README.md index f7c7144..1d329de 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,5 @@ This extension helps you to convert an audio file to text. It uses OpenAI's Whisper model API to convert the audio to text. + +![Image](https://i.imgur.com/wWIM2nA.png) diff --git a/deno-src/main.ts b/deno-src/transcribe.ts similarity index 59% rename from deno-src/main.ts rename to deno-src/transcribe.ts index aa68ae7..ba6aff2 100644 --- a/deno-src/main.ts +++ b/deno-src/transcribe.ts @@ -4,7 +4,7 @@ const apiKey = Deno.env.get('OPENAI_API_KEY'); const openai = new OpenAI({ apiKey }); // expect a audio.m4a file in the current directory -const fileData = await Deno.readFile('./audio.m4a'); +const fileData = await Deno.readFile('./chinese.m4a'); // Convert to a File (filename is required) const file = new File([fileData], 'audio.m4a', { type: 'audio/m4a' }); @@ -12,8 +12,12 @@ const file = new File([fileData], 'audio.m4a', { type: 'audio/m4a' }); const transcription = await openai.audio.transcriptions.create({ file: file, model: 'whisper-1', - language: 'en' // this is optional but helps the model + language: 'zh' // this is optional but helps the model }); +// const transcription = await openai.audio.transcriptions.create({ +// file: file, +// model: 'whisper-1', +// language: 'en' // this is optional but helps the model +// }); console.log(transcription); -Deno.writeTextFileSync('transcription.txt', transcription.text); diff --git a/deno-src/translate.ts b/deno-src/translate.ts new file mode 100644 index 0000000..b16a4e7 --- /dev/null +++ b/deno-src/translate.ts @@ -0,0 +1,22 @@ +import OpenAI from 'openai'; + +const apiKey = Deno.env.get('OPENAI_API_KEY'); +const openai = new OpenAI({ apiKey }); + +// expect a audio.m4a file in the current directory +const fileData = await Deno.readFile('./chinese.m4a'); + +// Convert to a File (filename is required) +const file = new File([fileData], 'audio.m4a', { type: 'audio/m4a' }); + +const transcription = await openai.audio.translations.create({ + file: file, + model: 'whisper-1' +}); +// const transcription = await openai.audio.transcriptions.create({ +// file: file, +// model: 'whisper-1', +// language: 'en' // this is optional but helps the model +// }); + +console.log(transcription); diff --git a/package.json b/package.json index 1bcbe5b..3b48eeb 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ "type": "iconify", "value": "arcticons:live-transcribe" }, - "demoImages": [], + "demoImages": [ + "https://i.imgur.com/wWIM2nA.png" + ], "permissions": [ "event:drag-drop", "clipboard:write-text", @@ -75,7 +77,7 @@ "format": "prettier --write ." }, "dependencies": { - "@kksh/api": "0.1.0", + "@kksh/api": "0.1.1", "@kksh/svelte5": "0.1.15", "clsx": "^2.1.1", "lucide-svelte": "^0.469.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8d51c5d..ec527e3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@kksh/api': - specifier: 0.1.0 - version: 0.1.0(axios@1.7.9)(svelte@5.19.9)(typescript@5.7.3) + specifier: 0.1.1 + version: 0.1.1(axios@1.7.9)(svelte@5.19.9)(typescript@5.7.3) '@kksh/svelte5': specifier: 0.1.15 version: 0.1.15(lucide-svelte@0.469.0(svelte@5.19.9))(svelte-sonner@0.3.28(svelte@5.19.9))(svelte@5.19.9)(sveltekit-superforms@2.23.1(@sveltejs/kit@2.17.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.19.9)(vite@6.1.0(@types/node@22.13.1)(jiti@1.21.7)(yaml@2.7.0)))(svelte@5.19.9)(vite@6.1.0(@types/node@22.13.1)(jiti@1.21.7)(yaml@2.7.0)))(@types/json-schema@7.0.15)(svelte@5.19.9)(typescript@5.7.3))(typescript@5.7.3) @@ -458,8 +458,8 @@ packages: '@jsdevtools/ono@7.1.3': resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==} - '@kksh/api@0.1.0': - resolution: {integrity: sha512-lJyhfRUpj1Tx42aejaXCaVegBeSNDgIlDI9ZnGvnHykwJHUjvHk/2BrFJghtQAaraxmqD4XN+0BcQbpu6RfAvg==} + '@kksh/api@0.1.1': + resolution: {integrity: sha512-/9JLyOSAK4/dZ74LKzbqJ8LRT0otwtecS+I/k1Bs25m+DfYX8ONaWUwuwc5yufus6vqNbfAF/PHOCEs0aAE39A==} '@kksh/svelte5@0.1.15': resolution: {integrity: sha512-Cr/gSWsnRtQIQLpQAkGBODujWn5g4LlhDp865skRV95tkrOuAwbbWGjG5+oWx1fK+fiDu+rhe2UCqw61SW2B/Q==} @@ -2908,7 +2908,7 @@ snapshots: '@jsdevtools/ono@7.1.3': {} - '@kksh/api@0.1.0(axios@1.7.9)(svelte@5.19.9)(typescript@5.7.3)': + '@kksh/api@0.1.1(axios@1.7.9)(svelte@5.19.9)(typescript@5.7.3)': dependencies: '@huakunshen/jsr-client': 0.1.5(axios@1.7.9)(typescript@5.7.3) '@octokit/rest': 21.1.0 diff --git a/src/api.types.ts b/src/api.types.ts index 729939a..f934bc6 100644 --- a/src/api.types.ts +++ b/src/api.types.ts @@ -1,3 +1,4 @@ export interface API { transcribe(filepath: string, language: string): Promise; + translate(filepath: string): Promise; } diff --git a/src/lib/components/ThemeCustomizer.svelte b/src/lib/components/ThemeCustomizer.svelte index d7b86b2..f36ebbf 100644 --- a/src/lib/components/ThemeCustomizer.svelte +++ b/src/lib/components/ThemeCustomizer.svelte @@ -1,6 +1,6 @@
@@ -105,6 +117,46 @@ + + + + {#snippet child({ props }: { props: any })} + + {/snippet} + + + + + + No language found. + + {#each languageCodes as lang} + { + language = lang.value; + closeAndFocusTrigger(); + }} + > + + {lang.label} + + {/each} + + + + + + diff --git a/src/routes/preferences/+page.svelte b/src/routes/preferences/+page.svelte index d10149a..e781005 100644 --- a/src/routes/preferences/+page.svelte +++ b/src/routes/preferences/+page.svelte @@ -1,6 +1,6 @@ + +
+

Translate audio file to English

+ +
+ + +
+ + + {#if transcribing} +

Transcribing...

+ {:else} +