Merge branch 'staging' of https://github.com/OpenPecha/monlam_ai_tools …

…into test-UT-setup
OpenPecha · Aug 20, 2024 · bdf2691 · bdf2691
2 parents 4df239e + 37dcf61
commit bdf2691
Show file tree

Hide file tree

Showing 24 changed files with 179 additions and 379 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -3,9 +3,7 @@ name: Build
 on:
   push:
     branches:
-      - test-UT-setup
       - main
-      -staging
 
 
 jobs:

diff --git a/app/component/ThemeSwitcher.tsx b/app/component/ThemeSwitcher.tsx
@@ -1,41 +1,51 @@
 import { ICON_SIZE } from "~/helper/const";
 import uselitteraTranlation from "./hooks/useLitteraTranslation";
-import useLocalStorage from "./hooks/useLocaleStorage";
+import { Theme, useTheme } from "remix-themes";
 import { MdOutlineLightMode, MdDarkMode } from "react-icons/md";
+import { useEffect } from "react";
+
 function ThemeSwitcher() {
-  let [isDarkMode, setIsDarkMode] = useLocalStorage("Darktheme", false);
+  const [theme, setTheme, { definedBy }] = useTheme();
   const { translation, isTibetan } = uselitteraTranlation();
 
   function handleClick() {
-    if (
-      !isDarkMode ||
-      (!("Darktheme" in localStorage) &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches)
-    ) {
-      document.documentElement.classList.add("dark");
+    if (theme === "dark") {
+      setTheme(Theme.LIGHT);
     } else {
-      document.documentElement.classList.remove("dark");
+      setTheme(Theme.DARK);
     }
-    setIsDarkMode(!isDarkMode);
   }
+  let isDarkMode = theme === Theme.DARK;
   return (
     <div
       onClick={handleClick}
       className="flex flex-1 gap-2 items-center text-[14px] text-light_text-secondary dark:text-dark_text-secondary  cursor-pointer"
     >
       {isDarkMode ? (
         <>
-          <MdOutlineLightMode size={ICON_SIZE} />
-          <span style={{ position: "relative", top: isTibetan ? "3px" : "0" }}>
-            {translation.lightmode}
-          </span>
+          {typeof document !== undefined ? (
+            <>
+              <MdOutlineLightMode size={ICON_SIZE} />
+              <span
+                style={{ position: "relative", top: isTibetan ? "3px" : "0" }}
+              >
+                {translation.lightmode}
+              </span>
+            </>
+          ) : null}
         </>
       ) : (
         <>
-          <MdDarkMode size={ICON_SIZE} />
-          <span style={{ position: "relative", top: isTibetan ? "3px" : "0" }}>
-            {translation.darkmode}
-          </span>
+          {typeof document !== undefined ? (
+            <>
+              <MdDarkMode size={ICON_SIZE} />
+              <span
+                style={{ position: "relative", top: isTibetan ? "3px" : "0" }}
+              >
+                {translation.darkmode}
+              </span>
+            </>
+          ) : null}
         </>
       )}
     </div>

diff --git a/app/component/TranslationSwitcher.tsx b/app/component/TranslationSwitcher.tsx
@@ -20,7 +20,7 @@ function TranslationSwitcher() {
       className="cursor-pointer text-[14px] mr-2 text-light_text-secondary dark:text-dark_text-secondary"
     >
       {isTibetan ? (
-        <span className=" flex gap-2 font-monlam rounded-full ">
+        <span className=" font-poppins flex gap-2 rounded-full ">
           <IoMdGlobe size={20} />
           <div>English</div>
         </span>

diff --git a/app/component/layout/Header.tsx b/app/component/layout/Header.tsx
@@ -11,6 +11,7 @@ import { FaQuoteRight } from "react-icons/fa";
 import { ICON_SIZE } from "~/helper/const";
 import { FaArrowRightFromBracket } from "react-icons/fa6";
 import { TbApi } from "react-icons/tb";
+
 function Header() {
   const [showMenu, setShowMenu] = useState(false);
   const { isEnglish, translation } = uselitteraTranlation();
@@ -57,8 +58,9 @@ function Header() {
         </div>
         {/* mobile view */}
         <div
-          className="hidden h-full fixed bg-neutral-100 top-0 left-0 right-0 w-full dark:bg-[--card-bg] shadow-lg z-40"
-          style={{ display: showMenu ? "block" : "" }}
+          className={`${
+            showMenu ? "block" : "hidden"
+          } h-full fixed bg-neutral-100 top-0 left-0 right-0 w-full dark:bg-[--card-bg] shadow-lg z-40`}
         >
           <NavLink
             className="flex items-center gap-2 p-4"

diff --git a/app/component/utils/replace.ts b/app/component/utils/replace.ts
@@ -1363,7 +1363,6 @@ export function en_bo_tibetan_replaces(text: string) {
 
   result = result.replaceAll(/🔽🔽/g, "\n\r");
   result = result.replaceAll(/🔽/g, "\n\r");
-
 
   //——
 

diff --git a/app/modal/inference.server.ts b/app/modal/inference.server.ts
@@ -44,22 +44,6 @@ export async function updateEdit(inferenceId: string, edited: string) {
   });
 }
 
-export async function getTodayInferenceByUserIdCountModel(
-  userId: number,
-  model: models
-) {
-  return await db.inference.count({
-    where: {
-      userId,
-      model,
-      createdAt: {
-        gte: new Date(new Date().setHours(0, 0, 0, 0)),
-        lt: new Date(new Date().setHours(23, 59, 59, 999)),
-      },
-    },
-  });
-}
-
 export async function addFileInference({
   input,
   userId,

diff --git a/app/root.tsx b/app/root.tsx
@@ -34,25 +34,32 @@ import LocationComponent from "./component/LocationDetect";
 import {
   isJobEnabled,
   enable_replacement_mt,
-  show_about_lama,
   file_upload_enable,
 } from "./services/features.server";
 
 import { saveIpAddress } from "~/modal/log.server";
 import getIpAddressByRequest from "~/component/utils/getIpAddress";
 import { ErrorPage } from "./component/ErrorPages";
-import { sessionStorage } from "~/services/session.server";
+import {
+  sessionStorage,
+  themeSessionResolver,
+} from "~/services/session.server";
 import { AppInstaller } from "~/component/AppInstaller.client";
 import { ClientOnly } from "remix-utils/client-only";
 import { update_pwa } from "~/modal/user.server";
 import { userPrefs } from "~/services/cookies.server";
+import {
+  ThemeProvider,
+  useTheme,
+  PreventFlashOnWrongTheme,
+} from "remix-themes";
 
 export const loader: LoaderFunction = async ({ request, context }) => {
   let userdata = await getUserSession(request);
   const feedBucketAccess = process.env.FEEDBUCKET_ACCESS;
   const feedbucketToken = process.env.FEEDBUCKET_TOKEN;
   let user = userdata ? await getUser(userdata?._json?.email) : null;
-
+  const { getTheme } = await themeSessionResolver(request);
   const cookieHeader = request.headers.get("Cookie");
   const cookie = (await userPrefs.parse(cookieHeader)) || {};
   cookie.token = await generateCSRFToken(request, user);
@@ -62,11 +69,11 @@ export const loader: LoaderFunction = async ({ request, context }) => {
       user,
       isJobEnabled: isJobEnabled ?? false,
       enable_replacement_mt: enable_replacement_mt ?? false,
-      show_about_lama: show_about_lama ?? false,
       file_upload_enable: file_upload_enable ?? false,
       feedBucketAccess,
       feedbucketToken,
       AccessKey: process.env?.API_ACCESS_KEY,
+      theme: getTheme(),
     },
     {
       status: 200,
@@ -126,7 +133,7 @@ export const meta: MetaFunction = () => {
     {
       name: "keywords",
       content:
-        "Monlam, AI , tibetan , dictionary ,translation ,orc , tts, stt ,login,སྨོན་ལམ་, རིག་ནུས།",
+        "Monlam, AI , tibetan , dictionary ,translation ,orc , tts, stt ,login,སྨོན་ལམ་, རིག་ནུས། , tibetan to english, english to tibetan, tibetan dictionary, tibetan translation, tibetan ocr, tibetan tts, tibetan stt, tibetan login",
     },
     {
       name: "apple-mobile-web-app-status-bar",
@@ -135,9 +142,10 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-function Document({ children }: { children: React.ReactNode }) {
+function Document({ children, theme }: { children: React.ReactNode }) {
+  const data = useLoaderData();
   return (
-    <html lang="en">
+    <html lang="en" className={theme}>
       <head>
         <meta charSet="utf-8" />
         <meta
@@ -154,32 +162,24 @@ function Document({ children }: { children: React.ReactNode }) {
         />
         <meta name="apple-mobile-web-app-title" content="Monlam Chat" />
         <Meta />
+        <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
         <Links />
       </head>
       <body className="flex h-[100dvh]  mx-auto inset-0 overflow-y-auto overflow-x-hidden dark:bg-slate-700 dark:text-gray-200">
         {children}
-        {/* {show_feed_bucket && show && <script dangerouslySetInnerHTML={{ __html: feedbucketScript }}></scrip>} */}
       </body>
     </html>
   );
 }
 
-export default function App() {
+function App() {
   let { user } = useLoaderData();
-  let [isDarkMode, setIsDarkMode] = useLocalStorage("Darktheme", false);
-
-  useEffect(() => {
-    if (isDarkMode) {
-      document.documentElement.classList.add("dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
-  }, []);
+  const [theme] = useTheme();
 
   return (
-    <Document>
+    <Document theme={theme ?? ""}>
       <LitteraProvider locales={["en_US", "bo_TI"]}>
-        <div className="flex flex-col flex-1">
+        <div className="flex flex-col flex-1 text-light_text-default dark:text-dark_text-secondary">
           <Header />
           <ClientOnly fallback={<div />}>{() => <AppInstaller />}</ClientOnly>
           {user && <LocationComponent />}
@@ -201,6 +201,15 @@ export default function App() {
   );
 }
 
+export default function AppWithProviders() {
+  const data = useLoaderData();
+  return (
+    <ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
+      <App />
+    </ThemeProvider>
+  );
+}
+
 export function ErrorBoundary() {
   const error = useRouteError();
   // catch boundary errors

diff --git a/app/routes/about/components/Lama.tsx b/app/routes/about/components/Lama.tsx
@@ -6,20 +6,39 @@ import { lamas } from "~/routes/about/data/lama";
 import { useRouteLoaderData } from "@remix-run/react";
 
 function Lamas() {
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => {
+      setLoaded(true);
+    };
+    img.src = "/assets/lamas/dalai_lama.png";
+  }, []);
   const { translation } = uselitteraTranlation();
-  const { show_about_lama } = useRouteLoaderData("root");
-  if (!show_about_lama) return null;
   return (
     <div className="container mx-auto">
       <h2 className="lg:text-3xl text-xl font-bold my-10 lg:my-20 flex justify-center">
         {translation.lamas}
       </h2>
       <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-6">
+        <div
+          className={`${loaded ? "hidden" : ""} md:col-span-2 md:row-span-1`}
+        >
+          <Blurhash
+            hash={"LMO_+Yb:%%x9~Ts~NZtRX0aeauM{"}
+            width={196}
+            height={66}
+            resolutionX={32}
+            resolutionY={32}
+            punch={1}
+          />
+        </div>
         <div className="md:col-span-2 md:row-span-1">
           <img
             src="/assets/lamas/dalai_lama.png"
             loading="lazy"
             alt="dalai_lama"
+            style={{ opacity: !loaded ? 0 : 1, height: !loaded ? 0 : "" }}
             className="object-contain flex rounded-lg"
           />
         </div>
@@ -48,8 +67,9 @@ function EachLama({ lama }) {
     <div className="flex rounded-lg border border-gray-200  bg-white shadow-md dark:border-gray-700 dark:bg-gray-800 flex-col relative w-full md:max-w-xs  max-h-[250px] p-2">
       <div className="flex flex-col justify-start items-center gap-3 ">
         <div
-          style={{ display: loaded ? "none" : "" }}
-          className="overflow-hidden rounded-full h-fit w-24 object-cover shadow-md p-1 hover:scale-105 transition-all duration-500"
+          className={`${
+            loaded ? "hidden" : ""
+          } overflow-hidden rounded-full h-fit w-24 object-cover shadow-md p-1 hover:scale-105 transition-all duration-500`}
         >
           <Blurhash
             hash={lama.blurhash}

diff --git a/app/routes/action.set-theme.ts b/app/routes/action.set-theme.ts
@@ -0,0 +1,4 @@
+import { createThemeAction } from "remix-themes";
+import { themeSessionResolver } from "~/services/session.server";
+
+export const action = createThemeAction(themeSessionResolver);
diff --git a/app/routes/api.translation.stream.tsx b/app/routes/api.translation.stream.tsx
@@ -2,6 +2,7 @@ import { LoaderFunctionArgs } from "@remix-run/node";
 import { verify_token } from "~/services/session.server";
 import { userPrefs } from "../services/cookies.server";
 import { eng_languagesOptions } from "~/helper/const";
+import { useDharmaMitraAPI } from "../services/features.server";
 
 export async function loader({ request }: LoaderFunctionArgs) {
   let url = new URL(request.url);
@@ -18,20 +19,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
   const controller = new AbortController();
   const fileUploadUrl = process.env?.FILE_SUBMIT_URL;
-  // const formData = new FormData();
-  // let api_url = fileUploadUrl + "/mt/playground/stream";
-  // const AccessKey = process.env?.API_ACCESS_KEY;
-  // formData.append("input", text);
-  // formData.append("direction", target);
-  // return fetch(api_url, {
-  //   method: "POST",
-  //   body: formData,
-  //   headers: {
-  //     "x-api-key": AccessKey!, // Replace with your actual access key
-  //   },
-  //   signal: controller.signal,
-  // });
 
+  // if (useDharmaMitraAPI) {
   let api_url = "https://dharmamitra.org/api/translation-exp/";
   let DharmaKey = process.env?.DHARMA_API_KEY;
   let target_lang =
@@ -53,4 +42,19 @@ export async function loader({ request }: LoaderFunctionArgs) {
     },
     signal: controller.signal,
   });
+  // } else {
+  //   const formData = new FormData();
+  //   let api_url = fileUploadUrl + "/mt/playground/stream";
+  //   const AccessKey = process.env?.API_ACCESS_KEY;
+  //   formData.append("input", text);
+  //   formData.append("direction", target);
+  //   return fetch(api_url, {
+  //     method: "POST",
+  //     body: formData,
+  //     headers: {
+  //       "x-api-key": AccessKey!, // Replace with your actual access key
+  //     },
+  //     signal: controller.signal,
+  //   });
+  // }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,9 +3,7 @@ name: Build @@
     on:
       push:
         branches:
-          - test-UT-setup
           - main
-          -staging
     jobs:
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1363,7 +1363,6 @@ export function en_bo_tibetan_replaces(text: string) {

		result = result.replaceAll(/🔽🔽/g, "\n\r");
		result = result.replaceAll(/🔽/g, "\n\r");


		//——

Expand Down