Spent a hour fixing the login & registing system & also finding errors

in the custom groq api system (also a typo wasted way too much time)

README.ZH_TW.md

@@ -18,7 +18,7 @@ Reverse engineering 文檔: [about](/about/)
 ## 在部署之前，請先知道:
 此程式碼絕對不是為在 Vercel 或 Netlify 上啟動而設計的，它現在在主網站程式碼中具有crawling，而且整個「快取功能」都基於Ram，所以請不要使用這些平台，對於 Zeabur 來說，您的成本一定會比較貴一點。網址：https://news.yuanhau.com 託管在我自己的infra上，你也應該這麼做。可以在Yahoo拍賣、蝦皮取得伺服器來執行這個程式。
 
-## Note for deing
+## Note for developing
 The desktop enviroment is super unstable when even using a beefy computer, even so, the desktop will lag when opening the newsView, like it's just hates being in a dev env. Prod app works tho, so you can demo it using `bun run build && bun run preview` for demoing. Please don't file a issue request for this matter. If you have the fix, please contribute using Github PRs.
 
 ## 為什麼?

README.md

@@ -15,6 +15,9 @@ Deploy: [via docker compose](/deploy.md)
 ## Demo:
 You can try out the app RIGHT NOW via this link: https://yhw.tw/news?goto=desktop
 
+## Using Translations:
+A few pages now contains translations, like the aboutNewsOrg & newsView pages. This project currently is using Google Translate. However, muiti translate platform support is coming soon™ (If you login with your account). The translations are not accrate at all, like something that should be `I just want to write about sports` becomes `I just want to write`, that bro, what is even that?
+
 ## Before deploying, please know this:
 This code is absolutly NOT designed to be spinned up at Vercel or Netlify, it has the scraping system now inside of the main website code, oh also the entire "caching feature" is based in memory, so please don't use those platforms, for Zeabur your cost might be expensive. idk, I haven't tried hit yet. The web url: https://news.yuanhau.com is hosted on my own infra, you should too. Please get a server off of yahoo 拍賣, 蝦皮 or eBay to do so.
 

components/app/windows/aboutNewsOrg.vue

@@ -6,6 +6,12 @@ import { ScrambleTextPlugin } from "gsap/dist/ScrambleTextPlugin";
 gsap.registerPlugin(ScrambleTextPlugin);
 const loading = ref(true);
 const { t, locale } = useI18n();
+import translate from "translate";
+
+interface translateInterfaceText {
+  translateText: string;
+}
+const translateItem: Record<string, translateInterfaceText> = {};
 
 const emit = defineEmits([
   "windowopener",
@@ -19,6 +25,7 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  applyForTranslation: Boolean,
 });
 
 const staticProps = props;
@@ -59,8 +66,62 @@ watch(
 const openNews = (url: string, titleName: string) => {
   emit("openArticles", url, titleName);
 };
+
+const startTranslating = async (text: string) => {
+  try {
+    console.log(text);
+    translateItem[text] = {
+      translateText: await translate(text, { from: "zh", to: "en" }),
+    };
+    console.log(translateItem[text]);
+  } catch (error) {
+    console.error("Translation failed:", error);
+    traslateFailed.value = true;
+    translateItem[text] = { translateText: text }; // fallback to original text
+  }
+};
+
+// Translating logic
+const translateText = ref(false);
+const translatedBefore = ref(false);
+const traslateFailed = ref(false);
+const displayTranslatedText = ref(false);
+const loadingTranslations = ref(false);
+watch(
+  () => props.applyForTranslation,
+  (value) => {
+    if (value === true) {
+      translateText.value = true;
+      if (!fetchNewsOrgInfo.value) {
+        return;
+      }
+      if (translatedBefore.value === true) {
+        displayTranslatedText.value = true;
+        return;
+      }
+      loadingTranslations.value = true;
+      startTranslating(fetchNewsOrgInfo.value?.title);
+      startTranslating(fetchNewsOrgInfo.value?.description);
+      for (const articles of fetchNewsOrgInfo.value?.articles) {
+        startTranslating(articles.title.replaceAll("獨家專欄》", ""));
+        startTranslating(articles.date);
+      }
+      // NOT retranslating AGAIN when disabling the feat
+      translatedBefore.value = true;
+      setTimeout(() => {
+        displayTranslatedText.value = true;
+        loadingTranslations.value = false;
+      }, 3000);
+    } else {
+      translateText.value = false;
+      displayTranslatedText.value = false;
+    }
+  },
+); // Translate when requested?
 </script>
 <template>
+  <div v-if="loadingTranslations">Loading...</div>
+
   <div>
     <div class="text-center align-center justify-center">
       <div
@@ -76,7 +137,11 @@ const openNews = (url: string, titleName: string) => {
             class="text-4xl font-bold m-2 text-center"
             ref="orgNameAnimation"
           >
-            {{ fetchNewsOrgInfo?.title }}
+            {{
+              displayTranslatedText
+                ? translateItem[fetchNewsOrgInfo?.title].translateText
+                : fetchNewsOrgInfo?.title
+            }}
           </h1>
 
           <div v-if="pending" class="flex flex-col gap-2 m-1 mt-5">
@@ -85,7 +150,11 @@ const openNews = (url: string, titleName: string) => {
             <div class="h-4 bg-gray-200 animate-pulse rounded w-4/6"></div>
           </div>
           <span v-else class="text-ms m-1 mt-5 text-left text-wrap">
-            {{ fetchNewsOrgInfo?.description }}
+            {{
+              displayTranslatedText
+                ? translateItem[fetchNewsOrgInfo?.description].translateText
+                : fetchNewsOrgInfo?.description
+            }}
           </span>
         </div>
       </div>
@@ -109,9 +178,16 @@ const openNews = (url: string, titleName: string) => {
             <div>
               <div class="flex flex-col">
                 <span class="title text-bold texxt-sm">{{
-                  item.title.replaceAll("獨家專欄》", "")
+                  displayTranslatedText
+                    ? translateItem[item.title.replaceAll("獨家專欄》", "")]
+                        .translateText
+                    : item.title.replaceAll("獨家專欄》", "")
+                }}</span>
+                <span class="date text-xs">{{
+                  displayTranslatedText
+                    ? translateItem[item.date].translateText
+                    : item.date
                 }}</span>
-                <span class="date text-xs">{{ item.date }}</span>
               </div>
             </div>
           </button>

components/app/windows/news.vue

@@ -216,6 +216,12 @@ const openPublisher = (slug: string, title: string) => {
 };
 const isLoading = computed(() => contentArray.value.length === 0);
 const testmessage = await translate("嗨", { from: "zh", to: "en" });
+const shouldHideItem = (item) => {
+  return (
+    item.contentType !== "GENERAL" ||
+    item.publisher?.toLowerCase().includes("line")
+  );
+};
 </script>
 <template>
   <div class="justify-center align-center text-center">
@@ -257,7 +263,7 @@ const testmessage = await translate("嗨", { from: "zh", to: "en" });
     <div>
       <!-- Loading State -->
       <template v-if="isLoading">
-        <div v-for="n in 5" :key="n" class="p-2 bg-gray-200 rounded m-1">
+        <div v-for="n in 7" :key="n" class="p-2 bg-gray-200 rounded m-1">
           <!-- Title Skeleton -->
           <div
             class="h-8 bg-gray-300 animate-pulse rounded-lg w-3/4 mx-auto mb-2"
@@ -303,9 +309,9 @@ const testmessage = await translate("嗨", { from: "zh", to: "en" });
         <div
           v-for="item in contentArray"
           :key="item.id"
-          :class="item.contentType !== 'GENERAL' && 'hidden'"
+          :class="shouldHideItem(item) && 'hidden'"
         >
-          <div class="p-2 bg-gray-200 rounded m-1 p-1">
+          <div class="p-2 bg-gray-200 rounded m-1">
             <h1
               class="text-2xl text-bold"
               :class="getCheckResult(item.title) ? 'text-red-600' : ''"

components/app/windows/newsView.vue

@@ -29,6 +29,9 @@ const likeart = ref([]);
 // Translating logic
 const translateText = ref(false);
 const translatedBefore = ref(false);
+const traslateFailed = ref(false);
+const displayTranslatedText = ref(false);
+const loadingTranslations = ref(false);
 watch(
   () => props.applyForTranslation,
   (value) => {
@@ -37,32 +40,49 @@ watch(
       if (!data.value) {
         return;
       }
+      if (translatedBefore.value === true) {
+        displayTranslatedText.value = true;
+        return;
+      }
+      loadingTranslations.value = true;
       startTranslating(data.value.title);
       startTranslating(data.value.origin);
       startTranslating(data.value.author);
-      data.value.paragraph.forEach((i, element) => {
-        console.log(element);
-        //startTranslating(data.value.)
-      });
-      // NOT retranslating AGAIN
+      for (const paragraph of data.value.paragraph) {
+        startTranslating(paragraph);
+      }
+      // NOT retranslating AGAIN when disabling the feat
       translatedBefore.value = true;
+      setTimeout(() => {
+        displayTranslatedText.value = true;
+        loadingTranslations.value = false;
+      }, 3000);
     } else {
       translateText.value = false;
+      displayTranslatedText.value = false;
     }
   },
 ); // Translate when requested?
 
 const startTranslating = async (text: string) => {
+  try {
+    console.log(text);
     translateItem[text] = {
       translateText: await translate(text, { from: "zh", to: "en" }),
     };
+    console.log(translateItem[text]);
+  } catch (error) {
+    console.error("Translation failed:", error);
+    traslateFailed.value = true;
+    translateItem[text] = { translateText: text }; // fallback to original text
+  }
 };
 
 const aiSummary = async () => {
   activateAiSummary.value = true;
   isGenerating.value = true;
   try {
-    const req = await fetch(`/api/ai/summarize/${slug}?lang=${locale}`);
+    const req = await fetch(`/api/ai/summarize/${slug}?lang=${String(locale)}`);
     const reader = req.body?.getReader();
     const decoder = new TextDecoder();
     while (reader) {
@@ -80,28 +100,52 @@ const aiSummary = async () => {
 };
 </script>
 <template>
+  <div
+    class="flex flex-col bg-gray-200/50 text-black w-full h-full absolute inset-0 justify-center align-middle text-center z-[20] backdrop-blur-sm"
+    v-if="traslateFailed"
+  >
+    <div class="m-2 flex flex-col">
+      <span
+        >Translate Failed. <br />
+        Oops, your translation failed.</span
+      >
+      <button></button>
+    </div>
+  </div>
+  <!--TODO: Get a better animation later.-->
+  <div v-if="loadingTranslations">Loading...</div>
   <div
     class="justify-center align-center text-center flex flex-col md:flex-row flex-wrap"
   >
     <div class="flex flex-col">
       <div class="group">
         <h2 class="text-3xl text-bold">
-          {{ translateText ? translateItem[data.title] : data.title }}
+          {{
+            displayTranslatedText
+              ? translateItem[data.title].translateText
+              : data.title
+          }}
         </h2>
         <span
           class="text-lg text-bold flex flex-row justify-center text-center align-center"
           ><NewspaperIcon class="w-7 h-7 p-1" />{{
-            translateText ? translateItem[data.origin] : data.origin
+            displayTranslatedText
+              ? translateItem[data.origin].translateText
+              : data.origin
           }}
           • <UserIcon class="w-7 h-7 p-1" />{{
-            translateText ? translateItem[data.author] : data.author
+            displayTranslatedText
+              ? translateItem[data.author].translateText
+              : data.author
           }}</span
         >
       </div>
       <div class="p-4 w-full h-fit pt-0 mt-0">
         <img v-if="data.images[0]" :src="data.images[0]" class="rounded" />
       </div>
-      <div class="text-center" v-for="item in data.paragraph">{{ item }}</div>
+      <div class="text-center" v-for="item in data.paragraph">
+        {{ displayTranslatedText ? translateItem[item]?.translateText : item }}
+      </div>
     </div>
     <div class="flex flex-col w-full justify-center align-center text-center">
       <div

createDatabase.ts

@@ -32,9 +32,29 @@ CREATE TABLE IF NOT EXISTS chat_history (
   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
 )`;
 
-const createSources = await sql``;
+const createUserOtherData = await sql`
+  create table if not exists user_other_data (
+  user_id text primary key,
+  username text not null unique,
+  groq_api_key text,
+  starred_news JSON not null,
+  translate_provider text,
+  translate_enabled boolean not null,
+  remove_translate_popup boolean not null
+  )`;
+
+const createSources = await sql`
+  create table if not exists lt_news_org (
+  news_id text primary key,
+  name text not null,
+  description text
+  )
+  `;
 
 console.log("Creation Complete");
+console.log(
+  "If the script still does not quit after 2 seconds after the 'Creation Complete' message, please stop it by using Ctrl + C or on mac Control + C",
+);
 
 await sql.end();
 process.exit(0);

pages/desktop.vue

@@ -24,6 +24,7 @@ interface associAppWindowInterface {
   height: string;
   black: boolean;
   translatable: boolean;
+  translateState: boolean;
 }
 
 interface minAppWindowInterface {
@@ -512,9 +513,12 @@ const openNewsSourcePage = async (slug: string, title: string) => {
     passedValues.value = null;
   }, 1000);
 };
-const toggleTranslate = (id: string) => {
-  console.log("windowId", id);
-  applyForTranslation.value = true;
+const toggleTranslate = (windowId: string) => {
+  const windowIndex = activeWindows.value.findIndex((w) => w.id === windowId);
+  if (windowIndex !== -1) {
+    activeWindows.value[windowIndex].translateState =
+      !activeWindows.value[windowIndex].translateState;
+  }
 };
 
 const translateAvailable = () => {};
@@ -691,7 +695,7 @@ onMounted(async () => {
             :values="passedValues"
             :windows="activeWindows"
             @closeWindow="closeWindow"
-            :applyForTranslation="applyForTranslation"
+            :applyForTranslation="window.translateState"
             :windowTranslateState="window.translatable"
             :notLoggedInState="notLoggedInState"
           />

server/api/ai/loadCustomGroqApi.ts

@@ -1,30 +0,0 @@
-import sql from "~/server/components/postgres";
-export default defineEventHandler(async (event) => {
-  if (event.method !== "POST") {
-    return {
-      error: "ERR_METHOD_NOT_ALLOWED",
-    };
-  }
-  const body = readBody(event);
-  if (!body.apiKey) {
-    return {
-      error: "ERR_API_KEY_REQUIRED",
-    };
-  }
-  const readUserToken = getCookie(event, "token");
-  if (!readUserToken) {
-    return {
-      error: "ERR_NOT_USER_LOGIN",
-    };
-  }
-  const verifyUserToken = await sql`
-    SELECT * FROM usertokens
-    where token=${readUserToken}
-    `;
-  if (verifyUserToken.length === 0) {
-    return {
-      error: "ERR_NOT_USER_LOGIN",
-      requested_action: "LOGOUT_USER",
-    };
-  }
-});

server/api/ai/summarize/[slug].ts

@@ -1,19 +1,33 @@
 import { Groq } from "groq-sdk";
 import sql from "~/server/components/postgres";
+import { checkIfUserHasCustomGroqKey } from "~/server/components/customgroqsystem";
 
-const groq = new Groq();
+const groq = new Groq({
+  apiKey: process.env.GROQ_API_KEY,
+});
 
 export default defineEventHandler(async (event) => {
   const host = getRequestHost(event);
   const protocol = getRequestProtocol(event);
   const slug = getRouterParam(event, "slug");
+  const userToken = getCookie(event, "token") || "";
+  console.log("Token: ", userToken);
+  const doesTheUserHasACustomGroqApiAndWhatIsIt =
+    await checkIfUserHasCustomGroqKey(userToken);
+  let groqClient = groq;
+  if (doesTheUserHasACustomGroqApiAndWhatIsIt.status === true) {
+    groqClient = new Groq({
+      apiKey: doesTheUserHasACustomGroqApiAndWhatIsIt.customApi,
+    });
+  }
+
   const query = getQuery(event);
   const locale = query.locale;
   const buildURL = protocol + "://" + host + "/api/news/get/lt/" + slug;
   const data = await fetch(buildURL);
   const fetchNewsArticle = await data.json();
   console.log(locale);
-  const chatCompletion = await groq.chat.completions.create({
+  const chatCompletion = await groqClient.chat.completions.create({
     messages: [
       {
         role: "user",

server/api/create_database.ts

@@ -10,7 +10,7 @@ export default defineEventHandler(async (event) => {
         passwordhash text not null,
         email text
     );
-`;
+  `;
 
   const usersList = await sql`
     create table if not exists usertokens (
@@ -21,21 +21,41 @@ export default defineEventHandler(async (event) => {
         avatarurl text,
         firstname text
     )
-`;
+  `;
 
   const createUserAiChatHistory = await sql`
-CREATE TABLE IF NOT EXISTS chat_history (
+  CREATE TABLE IF NOT EXISTS chat_history (
     id SERIAL PRIMARY KEY,
     uuid VARCHAR(255) NOT NULL,
     role VARCHAR(50) NOT NULL,
     content TEXT NOT NULL,
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-)`;
-  const createSources = await sql``;
+  )`;
+
+  const createUserOtherData = await sql`
+    create table if not exists user_other_data (
+    user_id text primary key ,
+    user text not null unique,
+    groq_api_key text,
+    starred_news JSON not null,
+    translate_provider text,
+    translate_enabled boolean not null,
+    remove_translate_popup boolean not null
+    )`;
+
+  const createSources = await sql`
+    create table if not exists lt_news_org (
+    news_id text primary key,
+    name text not null,
+    description text
+    )
+    `;
+
   return {
     createUsers: createUsers,
     usersList: usersList,
     createUserAiChatHistory: createUserAiChatHistory,
     createSources: createSources,
+    createUserOtherData: createUserOtherData,
   };
 });

server/api/user/delete.ts

@@ -0,0 +1 @@
+export default defineEventHandler(async (event) => {});

server/api/user/login.ts

@@ -34,9 +34,10 @@ export default defineEventHandler(async (event) => {
     console.log(fetchUserInfo[0]);
     if (fetchUserInfo.length === 0) {
       const hashedPassword = await argon2.hash(salt + password);
+      const userUUID = uuidv4();
       const createNewUser = await sql`
         insert into users (uuid, username, passwordhash, avatarurl)
-        values (${uuidv4()}, ${username}, ${hashedPassword}, ${defaultAvatarUrl})
+        values (${userUUID}, ${username}, ${hashedPassword}, ${defaultAvatarUrl})
         `;
       console.log(createNewUser);
       if (fetchUserInfo.length !== 0) {
@@ -44,10 +45,19 @@ export default defineEventHandler(async (event) => {
           error: "CANNOT_CREATE_NEW_USER",
         };
       }
+      const createOtherFields = await sql`
+        insert into user_other_data(user_id, username, translate_enabled, translate_provider, remove_translate_popup, starred_news)
+        values (${userUUID}, ${username}, false, 'google', false, '{}'::JSON)
+        `;
       const newToken = uuidv4();
+      await sql`
+          INSERT INTO usertokens (username, token)
+          VALUES (${username}, ${newToken})
+      `;
+
+      setCookie(event, "token", newToken);
       return {
-        user: fetchUserInfo,
-        token: newToken,
+        user: fetchUserInfoAgain,
       };
     } else {
       const isValid = await argon2.verify(
@@ -59,19 +69,20 @@ export default defineEventHandler(async (event) => {
           error: "PASSWORD_NO_MATCH",
         };
       }
-    }
       const newToken = uuidv4();
       const fetchUserInfoAgain = await sql`
         select * from users
         where username = ${username}`;
       await sql`
-        INSERT INTO usertokens (user, token)
-        VALUES ('${fetchUserInfo[0].username}', '${newToken}')
+          INSERT INTO usertokens (username, token)
+          VALUES (${fetchUserInfoAgain[0].username}, ${newToken})
       `;
+
       setCookie(event, "token", newToken);
       return {
         user: fetchUserInfoAgain,
       };
+    }
   } catch (e) {
     console.log(e);
     return {

server/api/user/sendUserInfo.post.ts

@@ -0,0 +1,23 @@
+import sql from "~/server/components/postgres";
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event);
+  const { request_change } = body;
+  const userToken = getCookie(event, "token");
+  if (!userToken) {
+    return {
+      error: "ERR_NOT_ALLOWED",
+    };
+  }
+  const checkUserToken = await sql`
+    select * from usertokens
+    where token=${userToken}
+    `;
+  if (checkUserToken.length === 0) {
+    return {
+      error: "ERR_NOT_ALLOWED",
+    };
+  }
+  if (request_change === "groq_api_key") {
+    const updateListing = await sql``;
+  }
+});

server/components/customgroqsystem.ts

@@ -0,0 +1,33 @@
+import sql from "./postgres";
+
+export async function checkIfUserHasCustomGroqKey(token?: string) {
+  if (!token) {
+    return {
+      status: false,
+      customApi: "",
+    };
+  }
+  const checkRealToken = await sql`
+    select * from usertokens
+    where token = ${token}
+  `;
+  if (checkRealToken.length === 0) {
+    return {
+      status: false,
+      customApi: "",
+    };
+  }
+  const fetchUserToken = await sql`
+    select groq_api_key from user_other_data
+    where username=${checkRealToken[0].username}`;
+  if (fetchUserToken.length === 0) {
+    return {
+      status: false,
+      customApi: "",
+    };
+  }
+  return {
+    status: true,
+    customApi: fetchUserToken[0].groq_api_key,
+  };
+}