may update transcription

xiaolai · May 8, 2024 · 8b009e6 · 8b009e6
1 parent 107fa97
commit 8b009e6
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 45 deletions.
diff --git a/enjoy/src/renderer/components/medias/index.ts b/enjoy/src/renderer/components/medias/index.ts
@@ -5,6 +5,7 @@ export * from "./media-recordings";
 export * from "./media-current-recording";
 export * from "./media-recorder";
 export * from "./media-transcription";
+export * from "./media-transcription-form";
 export * from "./media-player";
 export * from "./media-provider";
 export * from "./media-tabs";

diff --git a/enjoy/src/renderer/components/medias/media-transcription-form.tsx b/enjoy/src/renderer/components/medias/media-transcription-form.tsx
@@ -0,0 +1,111 @@
+import { MediaPlayerProviderContext } from "@renderer/context";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Textarea,
+  toast,
+} from "@renderer/components/ui";
+import { TimelineEntry } from "echogarden/dist/utilities/Timeline";
+import { t } from "i18next";
+import { useContext, useState } from "react";
+import { LoaderIcon } from "lucide-react";
+
+export const MediaTranscriptionForm = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <span className="capitalize">{t("edit")}</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-screen-sm xl:max-w-screen-md">
+        <TranscriptionForm setOpen={setOpen} />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const TranscriptionForm = (props: {
+  setOpen: (value: boolean) => void;
+}) => {
+  const { setOpen } = props;
+  const [saving, setSaving] = useState(false);
+  const { transcription, generateTranscription } = useContext(
+    MediaPlayerProviderContext
+  );
+  const [content, setContent] = useState<string>(
+    transcription.result.timeline.map((t: TimelineEntry) => t.text).join("\n\n")
+  );
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await generateTranscription(content);
+      setOpen(false);
+    } catch (e) {
+      toast.error(e.message);
+    }
+
+    setSaving(false);
+  };
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>{t("editTranscription")}</DialogTitle>
+      </DialogHeader>
+      <div>
+        <Textarea
+          className="h-96 text-lg font-serif resize-none"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+        />
+      </div>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="secondary">{t("cancel")}</Button>
+        </DialogClose>
+
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button>{t("save")}</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{t("saveTranscription")}</AlertDialogTitle>
+              <AlertDialogDescription>
+                {t("areYouSureToSaveTranscriptionAndMakeAlignment")}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={saving}>
+                {t("cancel")}
+              </AlertDialogCancel>
+              <AlertDialogAction disabled={saving} onClick={handleSave}>
+                {saving && <LoaderIcon className="animate-spin w-4 mr-2" />}
+                {t("save")}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </DialogFooter>
+    </>
+  );
+};
diff --git a/enjoy/src/renderer/components/medias/media-transcription.tsx b/enjoy/src/renderer/components/medias/media-transcription.tsx
@@ -26,6 +26,7 @@ import {
 } from "lucide-react";
 import { AlignmentResult } from "echogarden/dist/api/API.d.js";
 import { formatDuration } from "@renderer/lib/utils";
+import { MediaTranscriptionForm } from "./media-transcription-form";
 
 export const MediaTranscription = () => {
   const containerRef = useRef<HTMLDivElement>();
@@ -113,37 +114,42 @@ export const MediaTranscription = () => {
             )}
             <span className="capitalize">{t("transcript")}</span>
           </div>
-          <AlertDialog>
-            <AlertDialogTrigger asChild>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={transcribing || transcription.state === "processing"}
-                className="capitalize"
-              >
-                {(transcribing || transcription.state === "processing") && (
-                  <LoaderIcon className="animate-spin w-4 mr-2" />
-                )}
-                {transcription.result ? t("regenerate") : t("transcribe")}
-              </Button>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>{t("transcribe")}</AlertDialogTitle>
-                <AlertDialogDescription>
-                  {t("transcribeMediaConfirmation", {
-                    name: media.name,
-                  })}
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
-                <AlertDialogAction onClick={generateTranscription}>
-                  {t("transcribe")}
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+          <div className="flex space-x-2">
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={
+                    transcribing || transcription.state === "processing"
+                  }
+                  className="capitalize"
+                >
+                  {(transcribing || transcription.state === "processing") && (
+                    <LoaderIcon className="animate-spin w-4 mr-2" />
+                  )}
+                  {transcription.result ? t("regenerate") : t("transcribe")}
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t("transcribe")}</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t("transcribeMediaConfirmation", {
+                      name: media.name,
+                    })}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                  <AlertDialogAction onClick={() => generateTranscription("")}>
+                    {t("transcribe")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+            <MediaTranscriptionForm />
+          </div>
         </div>
       </div>
 

diff --git a/enjoy/src/renderer/components/ui/dialog.tsx b/enjoy/src/renderer/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

diff --git a/enjoy/src/renderer/context/media-player-provider.tsx b/enjoy/src/renderer/context/media-player-provider.tsx
@@ -66,7 +66,7 @@ type MediaPlayerContextType = {
   pitchChart: Chart;
   // Transcription
   transcription: TranscriptionType;
-  generateTranscription: () => void;
+  generateTranscription: (text?: string) => void;
   transcribing: boolean;
   transcribingProgress: number;
   transcriptionDraft: TranscriptionType["result"];

diff --git a/enjoy/src/renderer/hooks/use-transcriptions.tsx b/enjoy/src/renderer/hooks/use-transcriptions.tsx
@@ -52,14 +52,15 @@ export const useTranscriptions = (media: AudioType | VideoType) => {
         });
     };
 
-  const generateTranscription = async () => {
-    let originalText: string;
-    if (transcription?.targetId === media.id) {
-      originalText = transcription.result?.originalText;
-    } else {
-      const r = await findOrCreateTranscription();
-      if (r) {
-        originalText = r.result?.originalText;
+  const generateTranscription = async (originalText?: string) => {
+    if (originalText === undefined) {
+      if (transcription?.targetId === media.id) {
+        originalText = transcription.result?.originalText;
+      } else {
+        const r = await findOrCreateTranscription();
+        if (r) {
+          originalText = r.result?.originalText;
+        }
       }
     }
 
@@ -113,14 +114,17 @@ export const useTranscriptions = (media: AudioType | VideoType) => {
             const match = word?.match(/-|%/);
             if (!match) return;
 
-            if (word === '-' && token.text.toLowerCase() === words[j + 1]?.trim()?.toLowerCase()) {
+            if (
+              word === "-" &&
+              token.text.toLowerCase() === words[j + 1]?.trim()?.toLowerCase()
+            ) {
               sentence.timeline.splice(j, 0, {
-                type: 'token',
-                text: '-',
+                type: "token",
+                text: "-",
                 startTime: sentence.timeline[j - 1]?.endTime || 0,
                 endTime: sentence.timeline[j - 1]?.endTime || 0,
                 timeline: [],
-              })
+              });
               return;
             }