From 88e390fe81005608ae3518fc37e114627eed2c73 Mon Sep 17 00:00:00 2001
From: untunt <unt_tianjin@163.com>
Date: Fri, 8 Mar 2024 12:50:40 +0800
Subject: [PATCH 1/3] Translate into Chinese and simplify UI

---
 src/App.tsx                         | 20 +------
 src/components/AudioManager.tsx     | 91 +++++++++++++----------------
 src/components/AudioRecorder.tsx    |  8 +--
 src/components/TranscribeButton.tsx |  6 +-
 src/components/Transcript.tsx       |  7 ++-
 src/components/modal/Modal.tsx      |  4 +-
 src/css/index.css                   |  6 ++
 src/utils/Constants.ts              |  7 ++-
 src/worker.js                       |  8 ++-
 vite.config.ts                      | 18 ++++++
 10 files changed, 90 insertions(+), 85 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cf9844e..1e87f50 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,27 +6,11 @@ function App() {
     const transcriber = useTranscriber();
 
     return (
-        <div className='flex justify-center items-center min-h-screen'>
-            <div className='container flex flex-col justify-center items-center'>
-                <h1 className='text-5xl font-extrabold tracking-tight text-slate-900 sm:text-7xl text-center'>
-                    Whisper Web
-                </h1>
-                <h2 className='mt-3 mb-5 px-4 text-center text-1xl font-semibold tracking-tight text-slate-900 sm:text-2xl'>
-                    ML-powered speech recognition directly in your browser
-                </h2>
+        <div className='flex justify-center min-h-screen'>
+            <div className='container flex flex-col items-center'>
                 <AudioManager transcriber={transcriber} />
                 <Transcript transcribedData={transcriber.output} />
             </div>
-
-            <div className='absolute bottom-4'>
-                Made with{" "}
-                <a
-                    className='underline'
-                    href='https://github.com/xenova/transformers.js'
-                >
-                    🤗 Transformers.js
-                </a>
-            </div>
         </div>
     );
 }
diff --git a/src/components/AudioManager.tsx b/src/components/AudioManager.tsx
index 6919a2d..46b361c 100644
--- a/src/components/AudioManager.tsx
+++ b/src/components/AudioManager.tsx
@@ -11,7 +11,7 @@ import AudioRecorder from "./AudioRecorder";
 
 function titleCase(str: string) {
     str = str.toLowerCase();
-    return (str.match(/\w+.?/g) || [])
+    return (str.match(/\w+.?|.*语 /g) || [])
         .map((word) => {
             return word.charAt(0).toUpperCase() + word.slice(1);
         })
@@ -23,7 +23,7 @@ function titleCase(str: string) {
 // https://github.com/openai/whisper/blob/248b6cb124225dd263bb9bd32d060b6517e067f8/whisper/tokenizer.py#L79
 const LANGUAGES = {
     en: "english",
-    zh: "chinese",
+    zh: "汉语 chinese",
     de: "german",
     es: "spanish/castilian",
     ru: "russian",
@@ -241,18 +241,22 @@ export function AudioManager(props: { transcriber: Transcriber }) {
         <>
             <div className='flex flex-col justify-center items-center rounded-lg bg-white shadow-xl shadow-black/5 ring-1 ring-slate-700/10'>
                 <div className='flex flex-row space-x-2 py-2 w-full px-2'>
-                    <UrlTile
-                        icon={<AnchorIcon />}
-                        text={"From URL"}
-                        onUrlUpdate={(e) => {
-                            props.transcriber.onInputChange();
-                            setAudioDownloadUrl(e);
-                        }}
-                    />
-                    <VerticalBar />
+                    {navigator.mediaDevices && (
+                        <>
+                            <RecordTile
+                                icon={<MicrophoneIcon />}
+                                text={"录制音频"}
+                                setAudioData={(e) => {
+                                    props.transcriber.onInputChange();
+                                    setAudioFromRecording(e);
+                                }}
+                            />
+                            <VerticalBar />
+                        </>
+                    )}
                     <FileTile
                         icon={<FolderIcon />}
-                        text={"From file"}
+                        text={"打开音频"}
                         onFileUpdate={(decoded, blobUrl, mimeType) => {
                             props.transcriber.onInputChange();
                             setAudioData({
@@ -263,19 +267,12 @@ export function AudioManager(props: { transcriber: Transcriber }) {
                             });
                         }}
                     />
-                    {navigator.mediaDevices && (
-                        <>
-                            <VerticalBar />
-                            <RecordTile
-                                icon={<MicrophoneIcon />}
-                                text={"Record"}
-                                setAudioData={(e) => {
-                                    props.transcriber.onInputChange();
-                                    setAudioFromRecording(e);
-                                }}
-                            />
-                        </>
-                    )}
+                    <VerticalBar />
+                    <SettingsTile
+                        text={"模型选项"}
+                        transcriber={props.transcriber}
+                        icon={<SettingsIcon />}
+                    />
                 </div>
                 {
                     <AudioDataBar
@@ -299,17 +296,11 @@ export function AudioManager(props: { transcriber: Transcriber }) {
                             // isAudioLoading ||
                             isTranscribing={props.transcriber.isBusy}
                         />
-
-                        <SettingsTile
-                            className='absolute right-4'
-                            transcriber={props.transcriber}
-                            icon={<SettingsIcon />}
-                        />
                     </div>
                     {props.transcriber.progressItems.length > 0 && (
                         <div className='relative z-10 p-4 w-full'>
                             <label>
-                                Loading model files... (only run once)
+                                正在下载语音识别模型，请耐心等待
                             </label>
                             {props.transcriber.progressItems.map((data) => (
                                 <div key={data.file}>
@@ -329,7 +320,7 @@ export function AudioManager(props: { transcriber: Transcriber }) {
 
 function SettingsTile(props: {
     icon: JSX.Element;
-    className?: string;
+    text: string;
     transcriber: Transcriber;
 }) {
     const [showModal, setShowModal] = useState(false);
@@ -347,15 +338,15 @@ function SettingsTile(props: {
     };
 
     return (
-        <div className={props.className}>
-            <Tile icon={props.icon} onClick={onClick} />
+        <>
+            <Tile icon={props.icon} text={props.text} onClick={onClick} />
             <SettingsModal
                 show={showModal}
                 onSubmit={onSubmit}
                 onClose={onClose}
                 transcriber={props.transcriber}
             />
-        </div>
+        </>
     );
 }
 
@@ -381,10 +372,10 @@ function SettingsModal(props: {
     return (
         <Modal
             show={props.show}
-            title={"Settings"}
+            title={"模型选项"}
             content={
                 <>
-                    <label>Select the model to use.</label>
+                    <label>选择要使用的模型：</label>
                     <select
                         className='mt-1 mb-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
                         defaultValue={props.transcriber.model}
@@ -428,28 +419,28 @@ function SettingsModal(props: {
                                 }}
                             ></input>
                             <label htmlFor={"multilingual"} className='ms-1'>
-                                Multilingual
+                                使用多语模型
                             </label>
                         </div>
                         <div className='flex'>
                             <input
                                 id='quantize'
                                 type='checkbox'
-                                checked={props.transcriber.quantized}
+                                checked={!props.transcriber.quantized}
                                 onChange={(e) => {
                                     props.transcriber.setQuantized(
-                                        e.target.checked,
+                                        !e.target.checked,
                                     );
                                 }}
                             ></input>
                             <label htmlFor={"quantize"} className='ms-1'>
-                                Quantized
+                                使用高精度模型
                             </label>
                         </div>
                     </div>
                     {props.transcriber.multilingual && (
                         <>
-                            <label>Select the source language.</label>
+                            <label>选择音频语言：</label>
                             <select
                                 className='mt-1 mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
                                 defaultValue={props.transcriber.language}
@@ -465,7 +456,7 @@ function SettingsModal(props: {
                                     </option>
                                 ))}
                             </select>
-                            <label>Select the task to perform.</label>
+                            <label>选择任务：</label>
                             <select
                                 className='mt-1 mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
                                 defaultValue={props.transcriber.subtask}
@@ -475,10 +466,8 @@ function SettingsModal(props: {
                                     );
                                 }}
                             >
-                                <option value={"transcribe"}>Transcribe</option>
-                                <option value={"translate"}>
-                                    Translate (to English)
-                                </option>
+                                <option value={"transcribe"}>转写</option>
+                                <option value={"translate"}>翻译成英语</option>
                             </select>
                         </>
                     )}
@@ -680,17 +669,17 @@ function RecordModal(props: {
     return (
         <Modal
             show={props.show}
-            title={"From Recording"}
+            title={"使用麦克风录制音频"}
             content={
                 <>
-                    {"Record audio using your microphone"}
                     <AudioRecorder onRecordingComplete={onRecordingComplete} />
                 </>
             }
             onClose={onClose}
-            submitText={"Load"}
+            submitText={"使用录音"}
             submitEnabled={audioBlob !== undefined}
             onSubmit={onSubmit}
+            closeText={"放弃录音"}
         />
     );
 }
diff --git a/src/components/AudioRecorder.tsx b/src/components/AudioRecorder.tsx
index 5bdfe6d..8dd4804 100644
--- a/src/components/AudioRecorder.tsx
+++ b/src/components/AudioRecorder.tsx
@@ -120,7 +120,7 @@ export default function AudioRecorder(props: {
 
     return (
         <div className='flex flex-col justify-center items-center'>
-            <button
+            {!recordedBlob && (<button
                 type='button'
                 className={`m-2 inline-flex justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 transition-all duration-200 ${
                     recording
@@ -130,9 +130,9 @@ export default function AudioRecorder(props: {
                 onClick={handleToggleRecording}
             >
                 {recording
-                    ? `Stop Recording (${formatAudioTimestamp(duration)})`
-                    : "Start Recording"}
-            </button>
+                    ? `结束录音 (${formatAudioTimestamp(duration)})`
+                    : "开始录音"}
+            </button>)}
 
             {recordedBlob && (
                 <audio className='w-full' ref={audioRef} controls>
diff --git a/src/components/TranscribeButton.tsx b/src/components/TranscribeButton.tsx
index 8dfa992..9365e52 100644
--- a/src/components/TranscribeButton.tsx
+++ b/src/components/TranscribeButton.tsx
@@ -17,11 +17,11 @@ export function TranscribeButton(props: Props): JSX.Element {
             className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center'
         >
             {isModelLoading ? (
-                <Spinner text={"Loading model..."} />
+                <Spinner text={"下载模型……"} />
             ) : isTranscribing ? (
-                <Spinner text={"Transcribing..."} />
+                <Spinner text={"正在转写……"} />
             ) : (
-                "Transcribe Audio"
+                "开始转写"
             )}
         </button>
     );
diff --git a/src/components/Transcript.tsx b/src/components/Transcript.tsx
index 698b771..f3ab2f8 100644
--- a/src/components/Transcript.tsx
+++ b/src/components/Transcript.tsx
@@ -58,7 +58,7 @@ export default function Transcript({ transcribedData }: Props) {
     return (
         <div
             ref={divRef}
-            className='w-full flex flex-col my-2 p-4 max-h-[20rem] overflow-y-auto'
+            className='w-full flex flex-col my-2 p-4 overflow-y-auto'
         >
             {transcribedData?.chunks &&
                 transcribedData.chunks.map((chunk, i) => (
@@ -74,17 +74,18 @@ export default function Transcript({ transcribedData }: Props) {
                 ))}
             {transcribedData && !transcribedData.isBusy && (
                 <div className='w-full text-right'>
+                    下载识别结果：
                     <button
                         onClick={exportTXT}
                         className='text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-4 py-2 text-center mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 inline-flex items-center'
                     >
-                        Export TXT
+                        TXT
                     </button>
                     <button
                         onClick={exportJSON}
                         className='text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-4 py-2 text-center mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 inline-flex items-center'
                     >
-                        Export JSON
+                        JSON
                     </button>
                 </div>
             )}
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index d001fb4..44b252f 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -7,6 +7,7 @@ export interface Props {
     onSubmit: () => void;
     submitText?: string;
     submitEnabled?: boolean;
+    closeText?: string;
     title: string | JSX.Element;
     content: string | JSX.Element;
 }
@@ -19,6 +20,7 @@ export default function Modal({
     content,
     submitText,
     submitEnabled = true,
+    closeText = '确定',
 }: Props) {
     return (
         <Transition appear show={show} as={Fragment}>
@@ -81,7 +83,7 @@ export default function Modal({
                                         className='inline-flex justify-center rounded-md border border-transparent bg-indigo-100 px-4 py-2 text-sm font-medium text-indigo-900 hover:bg-indigo-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 transition-all duration-300'
                                         onClick={onClose}
                                     >
-                                        Close
+                                        {closeText}
                                     </button>
                                 </div>
                             </Dialog.Panel>
diff --git a/src/css/index.css b/src/css/index.css
index 1a4215c..0e6ff9a 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -15,4 +15,10 @@ audio::-webkit-media-controls-panel {
 .container {
     width: 41rem /* 656px */;
     max-width: 95vw;
+    margin-top: 0.1em;
+    height: 790px;
+}
+
+.on-close-button-container {
+    margin-top: 0.8em;
 }
diff --git a/src/utils/Constants.ts b/src/utils/Constants.ts
index 9dffbbb..50d88a3 100644
--- a/src/utils/Constants.ts
+++ b/src/utils/Constants.ts
@@ -28,7 +28,8 @@ export default {
     }.wav`,
     DEFAULT_MODEL: "Xenova/whisper-tiny",
     DEFAULT_SUBTASK: "transcribe",
-    DEFAULT_LANGUAGE: "english",
-    DEFAULT_QUANTIZED: isMobileOrTablet,
-    DEFAULT_MULTILINGUAL: false,
+    DEFAULT_LANGUAGE: "zh",
+    DEFAULT_QUANTIZED: true,
+    // DEFAULT_QUANTIZED: isMobileOrTablet,
+    DEFAULT_MULTILINGUAL: true,
 };
diff --git a/src/worker.js b/src/worker.js
index 602edf3..ae120e0 100644
--- a/src/worker.js
+++ b/src/worker.js
@@ -1,8 +1,12 @@
 /* eslint-disable camelcase */
 import { pipeline, env } from "@xenova/transformers";
 
-// Disable local models
-env.allowLocalModels = false;
+// https://huggingface.co/docs/transformers.js/en/custom_usage
+// Specify a custom location for models
+env.localModelPath = '/transcribeapp/models/';
+
+// Disable the loading of remote models from the Hugging Face Hub
+env.allowRemoteModels = false;
 
 // Define model factories
 // Ensures only one model is created of each type
diff --git a/vite.config.ts b/vite.config.ts
index b0ab431..9bf51e1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,4 +7,22 @@ export default defineConfig({
   plugins: [
     react()
   ],
+  // https://stackoverflow.com/q/71180561
+  build: {
+    rollupOptions: {
+      output: {
+        assetFileNames: 'transcribeapp/assets/[name][extname]',
+        chunkFileNames: 'transcribeapp/assets/[name].js',
+        entryFileNames: 'transcribeapp/assets/[name].js',
+      },
+    },
+  },
+  // https://github.com/vitejs/vite/issues/12250
+  worker: {
+    rollupOptions: {
+      output: {
+        entryFileNames: 'transcribeapp/assets/[name].js',
+      }
+    }
+  }
 })

From 3e70c1bcdd94b20b85fdcb29f86207f945f420b5 Mon Sep 17 00:00:00 2001
From: untunt <unt_tianjin@163.com>
Date: Sat, 9 Mar 2024 16:39:11 +0800
Subject: [PATCH 2/3] Improve UI

---
 index.html                          |  2 +-
 src/components/AudioManager.tsx     | 10 ++++++----
 src/components/TranscribeButton.tsx | 11 ++++++++---
 src/components/modal/Modal.tsx      |  4 ++--
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index bf27bef..c4886ef 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Whisper Web</title>
+    <style>.bg-gray-300 { background-color: rgb(219 221 224); }</style>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/components/AudioManager.tsx b/src/components/AudioManager.tsx
index 46b361c..18b5580 100644
--- a/src/components/AudioManager.tsx
+++ b/src/components/AudioManager.tsx
@@ -286,15 +286,18 @@ export function AudioManager(props: { transcriber: Transcriber }) {
                         audioUrl={audioData.url}
                         mimeType={audioData.mimeType}
                     />
-
-                    <div className='relative w-full flex justify-center items-center'>
+                </>
+            )}
+                <>
+                    <div className={`relative w-full flex justify-center items-center ${audioData ? "" : "p-4"}`}>
                         <TranscribeButton
                             onClick={() => {
-                                props.transcriber.start(audioData.buffer);
+                                props.transcriber.start(audioData?.buffer);
                             }}
                             isModelLoading={props.transcriber.isModelLoading}
                             // isAudioLoading ||
                             isTranscribing={props.transcriber.isBusy}
+                            hasAudio={Boolean(audioData)}
                         />
                     </div>
                     {props.transcriber.progressItems.length > 0 && (
@@ -313,7 +316,6 @@ export function AudioManager(props: { transcriber: Transcriber }) {
                         </div>
                     )}
                 </>
-            )}
         </>
     );
 }
diff --git a/src/components/TranscribeButton.tsx b/src/components/TranscribeButton.tsx
index 9365e52..8b33254 100644
--- a/src/components/TranscribeButton.tsx
+++ b/src/components/TranscribeButton.tsx
@@ -1,10 +1,11 @@
 interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     isModelLoading: boolean;
     isTranscribing: boolean;
+    hasAudio: boolean;
 }
 
 export function TranscribeButton(props: Props): JSX.Element {
-    const { isModelLoading, isTranscribing, onClick, ...buttonProps } = props;
+    const { isModelLoading, isTranscribing, onClick, hasAudio, ...buttonProps } = props;
     return (
         <button
             {...buttonProps}
@@ -13,8 +14,12 @@ export function TranscribeButton(props: Props): JSX.Element {
                     onClick(event);
                 }
             }}
-            disabled={isTranscribing}
-            className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center'
+            disabled={isTranscribing || !hasAudio}
+            className={`${
+                hasAudio
+                    ? "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
+                    : "text-white bg-gray-300"
+            } font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 inline-flex items-center transition-all duration-300`}
         >
             {isModelLoading ? (
                 <Spinner text={"下载模型……"} />
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 44b252f..89e3ae3 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -67,8 +67,8 @@ export default function Modal({
                                             className={`inline-flex ml-4 justify-center rounded-md border border-transparent ${
                                                 submitEnabled
                                                     ? "bg-indigo-600"
-                                                    : "bg-grey-300"
-                                            } px-4 py-2 text-sm font-medium text-indigo-100 ${
+                                                    : "bg-gray-300"
+                                            } px-4 py-2 text-sm font-medium text-white ${
                                                 submitEnabled
                                                     ? "hover:bg-indigo-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
                                                     : ""

From fc87ffbd21a9253c751ab920b0fbbdac2cb74763 Mon Sep 17 00:00:00 2001
From: untunt <unt_tianjin@163.com>
Date: Sat, 23 Mar 2024 09:14:04 +0800
Subject: [PATCH 3/3] Force word break for button text

---
 src/css/index.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/css/index.css b/src/css/index.css
index 0e6ff9a..6c3b8a3 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -22,3 +22,19 @@ audio::-webkit-media-controls-panel {
 .on-close-button-container {
     margin-top: 0.8em;
 }
+
+@media screen and (max-width: 500px) and (min-width: 400px) {
+    .p-2 {
+        padding-left: 0.15rem;
+        padding-right: 0.15rem;
+    }
+    .ml-2 {
+        margin-left: 0.15rem;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .ml-2 {
+        max-width: 2em;
+    }
+}
\ No newline at end of file