Add model selection

app/routes/api.translation.stream.tsx

@@ -8,9 +8,19 @@ export async function loader({ request }: LoaderFunctionArgs) {
   let url = new URL(request.url);
   let text = url.searchParams.get("text") as string;
   let target = url.searchParams.get("target") as string;
+  let model = url.searchParams.get("model") as string;
   let user = await auth.isAuthenticated(request);
   const API_URL = process.env?.API_URL;
-  let api_url = API_URL + "/api/v1/translation/stream";
+  let api_url = API_URL;
+  if(model==='Matlad'){
+    api_url = API_URL + "/api/v1/translation/mt/stream";
+  }
+
+  if(model==='Melong'){
+    api_url = API_URL + "/api/v1/translation/stream";
+  }
+
+
   let token=user ? user?.id_token : null;
   let body = JSON.stringify({
     input: text,

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Select, Tooltip } from "flowbite-react";
+
+
+export const models= [{
+    name:"Matlad",
+},{
+    name:"Melong"
+}]
+
+function SelectModel({setModel,model}) {
+
+    let optionClass =
+    "language-options bg-white dark:bg-[--card-bg] text-black dark:text-white  ";
+
+    function handleChange(e, type) {
+        const lang = e.target.value;
+        setModel(lang);
+      }
+  return (
+    <Select
+    onChange={(e) => handleChange(e, "source")}
+    value={model }
+    className="selectHeader  w-[160px]"
+    style={{ cursor: "pointer" }}
+  >
+    {models.map((lang) => (
+      <option key={lang.name} value={lang.name} className={optionClass}>
+        {lang.name}
+      </option>
+    ))}
+  </Select>
+  )
+}
+
+export default SelectModel

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

@@ -15,6 +15,7 @@ type useTranslateType = {
   data: string;
   setData: (data: string) => void;
   editfetcher: any;
+  model:string;
 };
 
 function handleEventStream(
@@ -24,13 +25,13 @@ function handleEventStream(
   onData: (data: string) => void,
   isToasted: boolean,
   setIsToasted: (value: boolean) => void,
-
+  model:string
 ): Promise<void> {
   return new Promise((resolve, reject) => {
     const eventSource = new EventSource(
       `/api/translation/stream?text=${encodeURIComponent(
         text
-      )}&target=${encodeURIComponent(direction)}`
+      )}&target=${encodeURIComponent(direction)}&model=${model}`
     );
 
     eventSource.onmessage = (event) => {
@@ -108,6 +109,7 @@ const useTranslate = ({
   setData,
   savefetcher,
   editfetcher,
+  model
 }: useTranslateType) => {
   const [responseTime, setResponseTime] = useState(0);
   const [done, setDone] = useState(false);
@@ -139,7 +141,8 @@ const useTranslate = ({
           target_lang,
           setData,
           isToasted,
-          setIsToasted
+          setIsToasted,
+          model
         );
       } catch (error) {
         setError(error.message);

app/routes/model.mt/route.tsx

@@ -35,6 +35,7 @@ import { CharacterSizeComponent } from "~/component/CharacterSize";
 import useEffectAfterFirstRender from "~/component/hooks/useEffectAfterFirstRender";
 import { v4 as uuidv4 } from "uuid";
 import { getHeaders } from "~/component/utils/getHeaders.server";
+import SelectModel from "./components/SelectModel";
 
 export const meta: MetaFunction<typeof loader> = ({ matches }) => {
   const parentMeta = matches.flatMap((match) => match.meta ?? []);
@@ -89,9 +90,8 @@ export default function Index() {
   const target_lang = params.get("target") || "bo";
   const source_lang = params.get("source") || "en";
   const [sourceText, setSourceText] = useState("");
-
+  const [model, setModel] = useState("Matlad");
   const { limitMessage, CHAR_LIMIT } = useLoaderData();
-
   const [edit, setEdit] = useState(false);
   const [editText, setEditText] = useState("");
   const [inferenceId, setInferenceId] = useState(null);
@@ -138,6 +138,7 @@ export default function Index() {
     data: output,
     setData: setOutput,
     editfetcher,
+    model
   });
 
   useEffectAfterFirstRender(() => {
@@ -171,6 +172,9 @@ export default function Index() {
           type="info"
         />
       )}
+      <div className='flex justify-end mb-3 items-center'>
+       Model: <SelectModel  setModel={setModel} model={model}/>
+      </div>
       <div className="rounded-[10px] mb-[100px] overflow-hidden border dark:border-[--card-border] border-dark_text-secondary">
         <LanguageInput
           setSourceText={setSourceText}