Merge branch 'main' of github.com:kurianbenoy/Indic-Subtitler

kurianbenoy · Mar 2, 2024 · dfa831c · dfa831c
2 parents 7b60026 + 533d1ef
commit dfa831c
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 71 deletions.
diff --git a/ui/src/components/CollectionTable.jsx b/ui/src/components/CollectionTable.jsx
@@ -6,7 +6,7 @@ import {
 import { useRouter } from "next/router";
 import DownloadFileDropdown from "./DownloadFileDropdown";
 import { IconEdit, IconTrash } from "@tabler/icons-react";
-import { SOURCE_LANGUAGES } from "@components/constants";
+import { LANGUAGES_PER_MODEL } from "@components/constants";
 
 export default function CollectionTable({ storedFiles, setStoredFiles }) {
   const router = useRouter();

diff --git a/ui/src/components/Dropdown.js b/ui/src/components/Dropdown.js
@@ -1,53 +1,44 @@
-import useLocalStorage from "@components/hooks/useLocalStorage";
+import { useMemo } from "react";
 import { useEffect } from "react";
 
 export default function Dropdown({
   label,
-  keyName,
   options = [],
   onChange,
+  selectedVal,
   defaultOption,
-  selectedModel,
-  isForModelDropdown = false,
 }) {
-  function Options({ options }) {
-    const model = options.find((item) => item.model === selectedModel);
-    return model?.languages.map((lang, index) => (
-      <option key={index} id={lang.id} value={lang.id}>
-        {lang.name}
-      </option>
-    ));
-  }
-  const [selectedOption, setSelectedOption] = useLocalStorage(keyName, "");
-
   const handleSelectChange = (event) => {
     const value = event.target.value;
-    setSelectedOption(value);
+    onChange(value);
   };
+  const isOptionValid = options.find((option) => option.id === selectedVal);
+
   useEffect(() => {
-    onChange(selectedOption);
-  }, [selectedOption]);
+    if (!isOptionValid) {
+      onChange(options[0]?.id);
+    } else {
+      onChange(selectedVal);
+    }
+  }, [isOptionValid]);
 
   return (
     <div className="flex flex-col ">
       <label className="font-medium text-wrap my-0">{label}:</label>
       <p className=" text-xs text-red-700 mt-[-5px]">Required</p>
+
       <select
         onChange={handleSelectChange}
         className="mt-1 border-2 w-full text-lg px-2 py-2 rounded-md cursor-pointer focus-visible:outline-none focus-visible:ring focus-visible:ring-primary-300 transition-all transition-75"
-        value={selectedOption}
+        value={isOptionValid ? selectedVal : options[0]?.id}
       >
         <option value="">{defaultOption}</option>
 
-        {selectedModel && !isForModelDropdown ? (
-          <Options options={options} />
-        ) : (
-          options?.map((element, index) => (
-            <option id={element.id} value={element.id} key={index}>
-              {element.name}
-            </option>
-          ))
-        )}
+        {options?.map((element, index) => (
+          <option id={element.id} value={element.id} key={index}>
+            {element.name}
+          </option>
+        ))}
       </select>
     </div>
   );

diff --git a/ui/src/components/FileUpload.js b/ui/src/components/FileUpload.js
@@ -4,7 +4,7 @@
 // import { formatFileSize } from "@components/utils";
 // import { toast } from "react-toastify";
 // import Dropdown from "./Dropdown";
-// import { SOURCE_LANGUAGES, TARGET_LANGUAGES } from "@components/constants";
+// import { LANGUAGES_PER_MODEL, TARGET_LANGUAGES } from "@components/constants";
 
 // const FileUpload = ({ onSubmit }) => {
 //   const [uploadedFiles, setUploadedFiles] = useState([]);
@@ -109,7 +109,7 @@
 //           <Dropdown
 //             onChange={(item) => setSoruceLanguage(item.id)}
 //             label="Select Source Language"
-//             options={SOURCE_LANGUAGES}
+//             options={LANGUAGES_PER_MODEL}
 //           />
 //           <Dropdown
 //             onChange={(item) => setTargetLanguage(item.id)}

diff --git a/ui/src/components/generate/UploadFile.jsx b/ui/src/components/generate/UploadFile.jsx
@@ -1,12 +1,15 @@
+import dynamic from "next/dynamic";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "react-toastify";
 import Dropzone from "@components/components/Dropzone";
 import { IconLink } from "@tabler/icons-react";
 import Dropdown from "@components/components/Dropdown";
-import { AVAILABLE_MODELS, SOURCE_LANGUAGES } from "@components/constants";
+import { AVAILABLE_MODELS, LANGUAGES_PER_MODEL } from "@components/constants";
 import { getRequestParamsForModel } from "@components/utils";
+import { formatLanguagesForDropdownOptions } from "@components/dropdownUtils";
+import useLocalStorage from "@components/hooks/useLocalStorage";
 
-export default function UploadFile({
+const UploadFile = ({
   uploadedFile,
   setUploadedFile,
   setYoutubeLink,
@@ -18,9 +21,12 @@ export default function UploadFile({
   setYoutubeTitle,
   selectedModel,
   setSelectedModel,
-}) {
+}) => {
   const [turnOnAdvanceOptions, setTurnOnAdvanceOptions] = useState(false);
-  const [targetLanguage, setTargetLanguage] = useState();
+  const [targetLanguage, setTargetLanguage] = useLocalStorage(
+    "target-language",
+    ""
+  );
 
   const [disabled, setDisabled] = useState(true);
   const [submitCounter, setSubmitCounter] = useState(0);
@@ -163,11 +169,14 @@ export default function UploadFile({
   function toggleAdvanceMode() {
     if (turnOnAdvanceOptions) {
       setSelectedModel("seamlessM4t");
-      localStorage.setItem("llm-model", JSON.stringify("seamlessM4t"));
     }
     setTurnOnAdvanceOptions(!turnOnAdvanceOptions);
   }
 
+  const handleModelChange = (item) => {
+    console.log("changing model");
+    setSelectedModel(item);
+  };
   const uploadButtonRef = useRef();
   return (
     <div className="overflow-hidden overflow-y-auto  lg:px-4">
@@ -211,21 +220,20 @@ export default function UploadFile({
       {turnOnAdvanceOptions ? (
         <div className="space-y-5">
           <Dropdown
-            onChange={(item) => setSelectedModel(item)}
+            onChange={handleModelChange}
             label="Generation Model"
             options={AVAILABLE_MODELS}
-            keyName="llm-model"
             defaultOption="Select Model"
-            isForModelDropdown={true}
-            selectedModel={selectedModel}
+            selectedVal={selectedModel}
           />
+
           <Dropdown
             onChange={(item) => setTargetLanguage(item)}
             label="Subtitle Language"
-            options={SOURCE_LANGUAGES}
+            options={formatLanguagesForDropdownOptions(selectedModel)}
             keyName="target-language"
             defaultOption="Select Language"
-            selectedModel={selectedModel}
+            selectedVal={targetLanguage}
           />
           <div className="hidden">
             <p className="font-medium text-wrap">Prompt:</p>
@@ -243,14 +251,17 @@ export default function UploadFile({
           </div>
         </div>
       ) : (
-        <Dropdown
-          onChange={(item) => setTargetLanguage(item)}
-          label="Subtitle Language"
-          options={SOURCE_LANGUAGES}
-          keyName="target-language"
-          defaultOption="Select Language"
-          selectedModel={selectedModel}
-        />
+        <>
+          below
+          <Dropdown
+            onChange={(item) => setTargetLanguage(item)}
+            label="Subtitle Language"
+            options={formatLanguagesForDropdownOptions(selectedModel)}
+            keyName="target-language"
+            defaultOption="Select Language"
+            selectedVal={targetLanguage}
+          />
+        </>
       )}
       <button
         ref={uploadButtonRef}
@@ -266,4 +277,6 @@ export default function UploadFile({
       </button>
     </div>
   );
-}
+};
+
+export default dynamic(() => Promise.resolve(UploadFile), { ssr: false });
diff --git a/ui/src/constants.js b/ui/src/constants.js
@@ -1,4 +1,4 @@
-export const SOURCE_LANGUAGES = [
+export const LANGUAGES_PER_MODEL = [
   {
     model: "seamlessM4t",
     languages: [
@@ -57,14 +57,6 @@ export const AVAILABLE_MODELS = [
 ];
 
 export const TEAM = [
-  {
-    name: "Aldrin Jenson",
-    img: "/aldrin.jpeg",
-    description: `Aldrin Jensen is a highly skilled and adaptable software engineer with over 5 years of experience. He excels in developing, deploying, and maintaining diverse applications across various industries. Notably, he developed an impactful Issue and Risk Management system used in the Kerala construction industry, alongside contributing to a wide range of projects in startups, showcasing his versatility and expertise in various technologies.`,
-    github: "https://github.com/aldrinjenson",
-    linkedin: "https://www.linkedin.com/in/aldrinjenson/",
-    twitter: "https://twitter.com/aldrinjenson",
-  },
   {
     name: "Kurain Benoy",
     img: "/kurain.jpg",
@@ -73,6 +65,14 @@ export const TEAM = [
     linkedin: "https://www.linkedin.com/in/kurianbenoy/",
     twitter: "https://twitter.com/kurianbenoy2",
   },
+  {
+    name: "Aldrin Jenson",
+    img: "/aldrin.jpeg",
+    description: `Aldrin Jensen is a highly skilled and adaptable software engineer with over 5 years of experience. He excels in developing, deploying, and maintaining diverse applications across various industries. Notably, he developed an impactful Issue and Risk Management system used in the Kerala construction industry, alongside contributing to a wide range of projects in startups, showcasing his versatility and expertise in various technologies.`,
+    github: "https://github.com/aldrinjenson",
+    linkedin: "https://www.linkedin.com/in/aldrinjenson/",
+    twitter: "https://twitter.com/aldrinjenson",
+  },
 
   {
     name: "Nabeel Boda",
@@ -88,14 +88,16 @@ export const MENTORS = [
   {
     name: "Bharat Shetty Barkur",
     img: "/path/to/bharat-image.jpg", // Placeholder image path
-    description: "Experienced Engineer with a demonstrated history of working across various domains in different roles. Skilled in Python, Java, NLP, Cloud and Data platforms and software, Data Structures and Algorithms, and Linux. Strong engineering professional with a Master's degree from the University of Florida and a Bachelors of Engineering focused in Computer Science and Engineering from Sri Jayachamarajendra College of Engineering. ",
+    description:
+      "Experienced Engineer with a demonstrated history of working across various domains in different roles. Skilled in Python, Java, NLP, Cloud and Data platforms and software, Data Structures and Algorithms, and Linux. Strong engineering professional with a Master's degree from the University of Florida and a Bachelors of Engineering focused in Computer Science and Engineering from Sri Jayachamarajendra College of Engineering. ",
     linkedin: "https://in.linkedin.com/in/bharat-shetty-barkur-8111511", // Placeholder LinkedIn link
     twitter: "https://twitter.com/bharat", // Placeholder Twitter link
   },
   {
     name: "Simrat Hanspal",
     img: "/path/to/simrat-image.jpg", // Placeholder image path
-    description: "Data scientist with a curious engineering mind. Working with Large Language models.",
+    description:
+      "Data scientist with a curious engineering mind. Working with Large Language models.",
     linkedin: "https://in.linkedin.com/in/simrat-hanspal-37683054", // Placeholder LinkedIn link
     twitter: "https://twitter.com/simrat", // Placeholder Twitter link
   },
@@ -109,7 +111,8 @@ export const MENTORS = [
   {
     name: "Sumod K Mohan",
     img: "/path/to/sumod-image.jpg", // Placeholder image path
-    description: "Founder/C.E.O, AutoInfer. Experienced CTO & Grew a Business Unit from ground up",
+    description:
+      "Founder/C.E.O, AutoInfer. Experienced CTO & Grew a Business Unit from ground up",
     github: "https://github.com/sumod", // Placeholder GitHub link
     linkedin: "https://in.linkedin.com/in/sumodm", // Placeholder LinkedIn link
     twitter: "https://twitter.com/sumod", // Placeholder Twitter link
@@ -809,4 +812,4 @@ export const translation = [
   },
 ];
 
-export const TARGET_LANGUAGES = SOURCE_LANGUAGES;
+export const TARGET_LANGUAGES = LANGUAGES_PER_MODEL;
diff --git a/ui/src/dropdownUtils.js b/ui/src/dropdownUtils.js
@@ -0,0 +1,9 @@
+import { LANGUAGES_PER_MODEL } from "./constants";
+
+export const formatLanguagesForDropdownOptions = (modelName) => {
+  const avilableLanguages = LANGUAGES_PER_MODEL.find(
+    (item) => item.model === modelName
+  )?.languages;
+
+  return avilableLanguages;
+};
diff --git a/ui/src/pages/livetranscribe.js b/ui/src/pages/livetranscribe.js
@@ -7,6 +7,7 @@ const LiveTranscribe = () => {
   const mediaRecorderRef = useRef(null);
   const streamRef = useRef(null);
   const [enableTranscription, setEnableTranscription] = useState(false);
+  const transcriptionContainerRef = useRef();
 
   const toggleRecording = () => {
     if (!streamRef.current || !mediaRecorderRef.current) {
@@ -62,14 +63,18 @@ const LiveTranscribe = () => {
   }, [enableTranscription]);
 
   const handleDataAvailable = (event) => {
+    // prompt field can contain only 244 chars at max
+    const currentTranscription =
+      transcriptionContainerRef.current.innerText?.slice(-200);
     const audioBlob = event.data;
-    console.log(event.data);
+
     const formData = new FormData();
     formData.append("file", audioBlob, "audio.wav");
     formData.append("model", "whisper-1");
     // formData.append("language", "hi");
-    formData.append("response_format", "verbose_json");
-    formData.append("prompt", transcription);
+    // formData.append("response_format", "verbose_json");
+    formData.append("response_format", "text");
+    formData.append("prompt", currentTranscription);
 
     console.log("making transcribe request");
     axios
@@ -80,9 +85,9 @@ const LiveTranscribe = () => {
         },
       })
       .then((response) => {
-        console.log(response.data.text);
         setTranscription(
-          (transcription) => `${transcription} ${response.data.text}`
+          // (transcription) => `${transcription} ${response.data.text}`
+          (transcription) => `${transcription} ${response.data}`
         );
       })
       .catch((error) => {
@@ -97,7 +102,7 @@ const LiveTranscribe = () => {
   return (
     <div className="prose mx-auto">
       <h1>Transcription</h1>
-      <div className="h-80">
+      <div className="h-80" ref={transcriptionContainerRef}>
         {/* <textarea rows={10} cols={20} className="w-10"> */}
         {transcription}
         {/* </textarea> */}

diff --git a/ui/src/utils.js b/ui/src/utils.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { SOURCE_LANGUAGES } from "./constants";
+import { LANGUAGES_PER_MODEL } from "./constants";
 
 export function formatFileSize(size) {
   if (!size) return null;
@@ -190,7 +190,9 @@ export function getYouTubeVideoId(url) {
   }
 }
 export function getFullLanguageName(model, languageCode) {
-  const modelLanguages = SOURCE_LANGUAGES.find((item) => item.model === model);
+  const modelLanguages = LANGUAGES_PER_MODEL.find(
+    (item) => item.model === model
+  );
   if (modelLanguages) {
     const language = modelLanguages.languages.find(
       (item) => item.id === languageCode