Fix: record without ffmpeg & others (#201)

* remove ffmpeg transcode when save recording

* fix model download

* trancode record audio in renderer

* fix transcribe dead loop when whisper not working

* force to select a model

* check model before transcribe

enjoy/src/renderer/components/medias/media-transcription.tsx

@@ -112,6 +112,10 @@ export const MediaTranscription = (props: {
     addDblistener(fetchSegmentStats);
     fetchSegmentStats();
 
+    if (transcription?.state == "pending") {
+      generate();
+    }
+
     return () => {
       removeDbListener(fetchSegmentStats);
     };
@@ -126,12 +130,6 @@ export const MediaTranscription = (props: {
       } as ScrollIntoViewOptions);
   }, [currentSegmentIndex, transcription]);
 
-  useEffect(() => {
-    if (transcription?.state !== "pending") return;
-
-    generate();
-  }, [transcription]);
-
   if (!transcription)
     return (
       <div className="p-4 w-full">

enjoy/src/renderer/components/record-button.tsx

@@ -7,6 +7,7 @@ import WaveSurfer from "wavesurfer.js";
 import { cn } from "@renderer/lib/utils";
 import { RadialProgress, toast } from "@renderer/components/ui";
 import { useHotkeys } from "react-hotkeys-hook";
+import { fetchFile } from "@ffmpeg/util";
 
 export const RecordButton = (props: {
   className?: string;
@@ -117,6 +118,26 @@ const RecordButtonPopover = (props: {
   onRecordEnd: (blob: Blob, duration: number) => void;
 }) => {
   const containerRef = useRef<HTMLDivElement>();
+  const { ffmpeg } = useContext(AppSettingsProviderContext);
+
+  const transcode = async (blob: Blob) => {
+    const input = `input.${blob.type.split("/")[1]}`;
+    const output = input.replace(/\.[^/.]+$/, ".wav");
+    await ffmpeg.writeFile(input, await fetchFile(blob));
+    await ffmpeg.exec([
+      "-i",
+      input,
+      "-ar",
+      "16000",
+      "-ac",
+      "1",
+      "-c:a",
+      "pcm_s16le",
+      output,
+    ]);
+    const data = await ffmpeg.readFile(output);
+    return new Blob([data], { type: "audio/wav" });
+  };
 
   useEffect(() => {
     if (!containerRef.current) return;
@@ -136,9 +157,10 @@ const RecordButtonPopover = (props: {
       startAt = Date.now();
     });
 
-    record.on("record-end", (blob: Blob) => {
+    record.on("record-end", async (blob: Blob) => {
       const duration = Date.now() - startAt;
-      props.onRecordEnd(blob, duration);
+      const output = await transcode(blob);
+      props.onRecordEnd(output, duration);
     });
 
     RecordPlugin.getAvailableAudioDevices()

enjoy/src/renderer/components/whisper-model-options.tsx

@@ -132,7 +132,7 @@ export const WhisperModelOptions = () => {
       if (state.state === "completed") {
         model.downloaded = true;
         setWhisperModel(model.name);
-      } else if (state.state === "cancelled") {
+      } else if (state.state === "cancelled" || state.state === "interrupted") {
         model.downloaded = false;
         model.downloadState = null;
       }

enjoy/src/renderer/pages/landing.tsx

@@ -32,7 +32,7 @@ export default () => {
         setCurrentStepValid(!!libraryPath);
         break;
       case 3:
-        setCurrentStepValid(true);
+        setCurrentStepValid(Boolean(whisperConfig.model));
         break;
       case 4:
         setCurrentStepValid(initialized);