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

kurianbenoy · Mar 31, 2024 · d070c2b · d070c2b
2 parents 5865f24 + 2f994eb
commit d070c2b
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 13 deletions.
diff --git a/.github/Generate_subtitles.drawio b/.github/Generate_subtitles.drawio
@@ -0,0 +1,67 @@
+<mxfile host="app.diagrams.net" modified="2024-03-28T17:04:57.819Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36" etag="zNdjl_nyW7b-0mqJgIay" version="24.2.1" type="device">
+  <diagram name="Page-1" id="ntjXSwge7X24OV97caED">
+    <mxGraphModel dx="1050" dy="522" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="ds76u153c_ARmMT5jyyh-1" value="Actor" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;" vertex="1" parent="1">
+          <mxGeometry x="120" y="290" width="30" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-2" value="Frontend - Next.js (Hosted using Vercel)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+          <mxGeometry x="200" y="280" width="140" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-3" value="Backend - FastAPI (Hosted using modal.com)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+          <mxGeometry x="400" y="280" width="140" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-7" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="140" y="319.5" as="sourcePoint" />
+            <mxPoint x="200" y="319.5" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-8" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="340" y="319.5" as="sourcePoint" />
+            <mxPoint x="400" y="319.5" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-9" value="SeamlessM4T" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+          <mxGeometry x="600" y="120" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-10" value="Faster-whisper" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+          <mxGeometry x="600" y="240" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-11" value="WhisperX" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+          <mxGeometry x="600" y="360" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-12" value="Vegam-Whisper" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+          <mxGeometry x="600" y="480" width="120" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-13" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;exitX=0.803;exitY=0.025;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1" source="ds76u153c_ARmMT5jyyh-3">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="520" y="270" as="sourcePoint" />
+            <mxPoint x="610" y="180" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-14" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="ds76u153c_ARmMT5jyyh-3" target="ds76u153c_ARmMT5jyyh-12">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="490" y="440" as="sourcePoint" />
+            <mxPoint x="588" y="338" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-18" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="ds76u153c_ARmMT5jyyh-3" target="ds76u153c_ARmMT5jyyh-11">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="540" y="320" as="sourcePoint" />
+            <mxPoint x="480" y="460" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="ds76u153c_ARmMT5jyyh-19" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.25;exitDx=0;exitDy=0;" edge="1" parent="1" source="ds76u153c_ARmMT5jyyh-3" target="ds76u153c_ARmMT5jyyh-10">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="540" y="319" as="sourcePoint" />
+            <mxPoint x="600" y="319" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/.github/Generate_subtitles.drawio.png b/.github/Generate_subtitles.drawio.png
diff --git a/README.md b/README.md
@@ -45,6 +45,14 @@ Due to advent of new technologies like Meta's seamless M4T model and Whisper fin
 **Don't use Indic Subtitler for any unlawful purposes.**
 ---
 
+## Project Architecture
+
+### Generate Subtitles Section
+
+![Generate_subtitles drawio](https://github.com/kurianbenoy/Indic-Subtitler/assets/24592806/4ec2d93b-99bf-4cc1-821d-ac9ea9e3c99d)
+
+
+
 ## Technology stack
 
 ### 1. ML Model

diff --git a/ui/src/components/Header.jsx b/ui/src/components/Header.jsx
@@ -1,37 +1,42 @@
 import { useRouter } from "next/router";
 import SecondaryBtn from "./SecondaryBtn";
-import { useEffect, useState } from "react";
-import { transitionToCollection } from "@components/utils";
 import PrimaryBtn from "./PrimaryBtn";
+import { transitionToCollection } from "@components/utils";
 
 function Buttons({ isHome }) {
   const router = useRouter();
+
   if (isHome) {
     return (
       <div className="flex flex-wrap gap-4">
         <PrimaryBtn accent={true} fn={() => router.push("/about")}>
           Team
         </PrimaryBtn>
         <PrimaryBtn accent={true} fn={() => router.push("/livetranscribe")}>
-          Live Transcription
+          Transcribe Now
         </PrimaryBtn>
         <SecondaryBtn fn={() => transitionToCollection(router)}>
-          Generate Subtitles
+          Get Subtitles
         </SecondaryBtn>
       </div>
     );
   }
+
   if (router.pathname !== "/contact") {
     return (
       <div className="max-w-fit">
         <PrimaryBtn fn={() => router.push("/contact")}>Contact Us</PrimaryBtn>
       </div>
     );
   }
+
+  return null;
 }
+
 export default function Header() {
   const router = useRouter();
   const isHome = router.pathname === "/";
+
   function scrollToTop() {
     if (isHome) {
       window.scrollTo({
@@ -46,15 +51,17 @@ export default function Header() {
   return (
     <header
       className={`
-    ${isHome && "top-0"}
-    flex md:flex-row flex-col space-y-4 flex-wrap md:space-y-0 justify-between pt-5 md:items-center sticky  py-5 z-20 bg-white lg:px-20 px-2 md:gap-2 `}
+        ${isHome ? "top-0" : ""}
+        flex flex-col md:flex-row space-y-4 md:space-y-0 flex-wrap justify-between
+        pt-5 md:items-center sticky py-5 z-20 bg-white px-2 lg:px-20 md:gap-2
+      `}
     >
       <div
         onClick={scrollToTop}
         className="flex items-center cursor-pointer gap-3"
       >
         <img src="/logo.png" width={70} alt="Logo of Indic Subtitler" />
-        <h1 className="text-3xl font-semibold font-sans text-primary-900 ">
+        <h1 className="text-3xl font-semibold font-sans text-primary-900">
           Indic Subtitler
         </h1>
       </div>

diff --git a/ui/src/components/generate/UploadFile.jsx b/ui/src/components/generate/UploadFile.jsx
@@ -192,10 +192,12 @@ const UploadFile = ({
   }
 
   function toggleAdvanceMode() {
-    if (turnOnAdvanceOptions) {
-      setSelectedModel("seamlessM4t");
-    }
-    setTurnOnAdvanceOptions(!turnOnAdvanceOptions);
+    setTurnOnAdvanceOptions((prevState) => {
+      if (prevState) {
+        setSelectedModel("seamlessM4t");
+      }
+      return !prevState;
+    });
   }
 
   const handleModelChange = (item) => {

diff --git a/ui/src/components/home/Information.jsx b/ui/src/components/home/Information.jsx
@@ -33,7 +33,7 @@ export default function Information() {
   ];
 
   return (
-    <main className="md:mt-36 space-y-36 mt-16  md:px-20 px-4">
+    <main className="md:mt-36 space-y-36 mt-16  md:px-20 px-4 mb-16">
       <section className="space-y-20">
         <h2 className="text-center text-3xl md:text-5xl font-medium underline decoration-8 underline-offset-[14px] decoration-primary-900">
           How it works
@@ -55,7 +55,7 @@ export default function Information() {
           })}
         </div>
       </section>
-      <section>
+      <section className="">
         <h1 className="text-center text-3xl md:text-5xl font-medium ">
           Cutting edge technology that supports 10+ languages
         </h1>