Improve UI

xenova · Mar 9, 2024 · 3e70c1b · 3e70c1b
1 parent 88e390f
commit 3e70c1b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"
  : ""