fixed mt language toggle

app/routes/model.mt/components/DownloadDocument.tsx

@@ -9,13 +9,7 @@ import {
 } from "../../../component/utils/download";
 import { toast } from "react-toastify";
 
-function DownloadDocument({
-  source,
-  lang,
-}: {
-  source: string;
-  lang: "en" | "bo";
-}) {
+function DownloadDocument({ source, lang }: { source: string; lang: string }) {
   let fetcher = useFetcher();
   const [retry, setRetry] = useState(0);
 

app/routes/model.mt/components/LanguageInput.tsx

@@ -0,0 +1,26 @@
+import { useSearchParams } from "@remix-run/react";
+import React from "react";
+
+function LanguageInput() {
+  const [param, setParam] = useSearchParams();
+  let target_lang = param.get("target") || "bo";
+  let source_lang = param.get("source") || "en";
+  return (
+    <div className="flex flex-col md:flex-row gap-2 mt-2 ">
+      <span className="mt-2">Translate into </span>
+      <input
+        value={target_lang}
+        onChange={(e) =>
+          setParam((p) => {
+            p.set("direction", e.target.value);
+            return p;
+          })
+        }
+        placeholder="eg. fr"
+        className=" bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      />
+    </div>
+  );
+}
+
+export default LanguageInput;

app/routes/model.mt/components/LanguageSwitcher.tsx

@@ -2,29 +2,27 @@ import React, { useState } from "react";
 import { motion } from "framer-motion";
 import { FaArrowRightArrowLeft } from "react-icons/fa6";
 import { resetFetcher } from "~/component/utils/resetFetcher";
+import { useSearchParams } from "@remix-run/react";
 
 const langLabels = {
   bo: "བོད་སྐད།",
   en: "English",
 };
 
-function LanguageSwitcher({
-  sourceLang,
-  targetLang,
-  setSourceLang,
-  setTargetLang,
-  setSourceText,
-  likefetcher,
-}) {
+function LanguageSwitcher({ likefetcher, setSourceText }) {
   const [isRotated, setIsRotated] = useState(false);
-
+  const [params, setParams] = useSearchParams();
+  const sourceLang = params.get("source") || "en";
+  const targetLang = params.get("target") || "bo";
   const handleLangSwitch = () => {
     resetFetcher(likefetcher);
-    const temp = sourceLang;
-    setSourceLang(targetLang);
-    setTargetLang(temp);
     setSourceText("");
     setIsRotated(!isRotated);
+    setParams((p) => {
+      p.set("source", targetLang);
+      p.set("target", sourceLang);
+      return p;
+    });
   };
 
   return (

app/routes/model.mt/lib/useTranslate.ts

@@ -11,7 +11,6 @@ const useTranslate = ({ url, token, target, text }) => {
     const fetchData = async () => {
       if (text === "" || !text) return null;
       setIsLoading(true);
-      setData("");
       setDone(false);
       setError(null);
       try {
@@ -38,7 +37,7 @@ const useTranslate = ({ url, token, target, text }) => {
 
     fetchData();
     return () => controller.abort();
-  }, [url, token, target, text]); // Include all dependencies
+  }, [url, token, text]); // Include all dependencies
 
   return { data, isLoading, error, done };
 };

app/routes/model.mt/route.tsx

@@ -10,6 +10,7 @@ import {
   useNavigate,
   useRouteError,
   useRouteLoaderData,
+  useSearchParams,
 } from "@remix-run/react";
 import { Button, Card } from "flowbite-react";
 import { useState, useRef, useEffect } from "react";
@@ -41,6 +42,7 @@ import LanguageSwitcher from "./components/LanguageSwitcher";
 import useTranslate from "./lib/useTranslate";
 import { getUser } from "~/modal/user.server";
 import { resetFetcher } from "~/component/utils/resetFetcher";
+import LanguageInput from "./components/LanguageInput";
 
 export const meta: MetaFunction<typeof loader> = ({ matches }) => {
   const parentMeta = matches.flatMap((match) => match.meta ?? []);
@@ -92,20 +94,20 @@ export const action: ActionFunction = async ({ request }) => {
 };
 
 export default function Index() {
-  const [sourceLang, setSourceLang] = useLocalStorage("inputLang", "en");
-  const [targetLang, setTargetLang] = useLocalStorage("outputLang", "bo");
+  const [params, setParams] = useSearchParams();
+  const target_lang = params.get("target") || "bo";
+  const source_lang = params.get("source") || "en";
   const [sourceText, setSourceText] = useState("");
   const [selectedTool, setSelectedTool] = useLocalStorage(
     "mt_selected_input",
     "text"
   );
+
   const { url, modelToken } = useLoaderData();
+  const { show_mt_language_toggle } = useRouteLoaderData("root");
   const [edit, setEdit] = useState(false);
   const [editText, setEditText] = useState("");
-  const [direction, setDirection] = useState(targetLang);
-  let { show_mt_language_toggle } = useRouteLoaderData("root");
-  const debouncedSearchTerm = useDebounce(sourceText, 1000);
-  const debouncedDirection = useDebounce(direction, 2000);
+  const debounceSourceText = useDebounce(sourceText, 1000);
   const likefetcher = useFetcher();
   const editfetcher = useFetcher();
   const savefetcher = useFetcher();
@@ -126,18 +128,18 @@ export default function Index() {
   let { data, isLoading, error, done } = useTranslate({
     url,
     token: modelToken,
-    target: debouncedDirection,
-    text: debouncedSearchTerm,
+    target: target_lang,
+    text: debounceSourceText,
   });
   useEffect(() => {
     if (done === true && data) {
       savefetcher.submit(
         {
-          source: debouncedSearchTerm,
+          source: debounceSourceText,
           translation: data,
           responseTime: 5,
-          inputLang: sourceLang,
-          outputLang: targetLang,
+          inputLang: source_lang,
+          outputLang: target_lang,
         },
         {
           method: "POST",
@@ -175,23 +177,11 @@ export default function Index() {
       {error && <ErrorMessage error={error} />}
       {show_mt_language_toggle ? (
         <LanguageSwitcher
-          sourceLang={sourceLang}
-          targetLang={targetLang}
-          likefetcher={likefetcher}
-          setSourceLang={setSourceLang}
           setSourceText={setSourceText}
-          setTargetLang={setTargetLang}
+          likefetcher={likefetcher}
         />
       ) : (
-        <div className="flex flex-col md:flex-row gap-2 mt-2 ">
-          <span className="mt-2">Translate into </span>
-          <input
-            value={direction}
-            onChange={(e) => setDirection(e.target.value)}
-            placeholder="eg. fr"
-            className=" bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          />
-        </div>
+        <LanguageInput />
       )}
 
       <div className="mt-3 flex flex-col md:flex-row gap-5">
@@ -201,7 +191,7 @@ export default function Index() {
               selectedTool={selectedTool}
               sourceText={sourceText}
               setSourceText={setSourceText}
-              sourceLang={sourceLang}
+              sourceLang={source_lang}
             />
           </div>
           <Button
@@ -224,7 +214,7 @@ export default function Index() {
             <div
               ref={targetRef}
               className={`h-full text-lg ${
-                targetLang === "bo"
+                target_lang === "bo"
                   ? "tracking-wide leading-loose"
                   : "font-poppins"
               }`}
@@ -242,7 +232,7 @@ export default function Index() {
                 />
               )}
               {selectedTool === "document" && sourceText !== "" && (
-                <DownloadDocument source={sourceText} lang={sourceLang} />
+                <DownloadDocument source={sourceText} lang={source_lang} />
               )}
             </div>
           </div>

package.json

@@ -32,6 +32,7 @@
     "isbot": "^3.6.8",
     "mammoth": "^1.6.0",
     "morgan": "^1.10.0",
+    "node-schedule": "^2.1.1",
     "openai": "^4.12.4",
     "prisma": "^5.4.2",
     "react": "^18.2.0",