Link the checks into the code & made a basic news summary system

components/app/windows/news.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import CheckKidUnfriendlyContent from "~/components/checks/checkKidUnfriendlyContent";
 const pullTabsData = async () => {
   const req = await fetch("/api/cached/tabs");
   const data = await req.json();
@@ -46,6 +47,22 @@ onMounted(async () => {
     tabs.value.find((tab) => tab.default === true)?.url || "domestic";
   await updateContent(primary.value, false);
 });
+const checkResults = ref(new Map());
+const checks = async (title: string) => {
+  const result = await CheckKidUnfriendlyContent(title);
+  checkResults.value.set(title, result);
+  return result;
+};
+const getCheckResult = (title: string) => {
+  return checkResults.value.get(title);
+};
+watch(contentArray, async (newContent) => {
+  for (const item of newContent) {
+    if (item.title) {
+      await checks(item.title);
+    }
+  }
+}, { immediate: true });
 </script>
 <template>
   <div class="justify-center align-center text-center">
@@ -76,7 +93,7 @@ onMounted(async () => {
         >
           <button @click="openNews(item.url.hash)">
             <div class="p-2 bg-gray-200 rounded m-1 p-1">
-              <h1 class="text-2xl text-bold">{{ item.title }}</h1>
+              <h1 class="text-2xl text-bold" :class="getCheckResult(item.title) ? 'text-red-600' : ''">{{ item.title }}</h1>
               <p class="m-0 text-gray-600">
                 {{ item.publisher }} --
                 {{
@@ -90,7 +107,7 @@ onMounted(async () => {
                   })
                 }}
               </p>
-              <p>{{ item.shortDescription }}</p>
+              <p :class="getCheckResult(item.title) ? 'hidden' : ''">{{ item.shortDescription }}</p>
             </div>
           </button>
         </div>

components/app/windows/newsView.vue

@@ -1,9 +1,33 @@
 <script setup lang="ts">
+const slug = "kEJjxKw"
 // FOR THIS MODULE DO NOT USE THE ?APPNAME URL TYPE, IT WILL FALL AT ALL TIMES, I HAVE NO CLUE WHY IS BEHAVIOR HAPPENING RN?
-const { data, error, pending } = await useFetch("/api/news/get/lt/kEJjxKw"); //demo URL
+const { data, error, pending } = useFetch(`/api/news/get/lt/${slug.trim()}`); //demo URL
 console.log(data.value);
 console.log(error.value);
 const activateAiSummary = ref(false);
+const isGenerating = ref(false);
+const summaryText = ref("");
+const { locale } = useI18n();
+const aiSummary = async () => {
+  activateAiSummary.value = true;
+  isGenerating.value = true;
+  try {
+    const req = await fetch(`/api/ai/summarize/${slug}?lang=${locale}`);
+    const reader = req.body?.getReader();
+    const decoder = new TextDecoder();
+    while (reader) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      
+      const chunk = decoder.decode(value);
+      summaryText.value += chunk;
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isGenerating.value = false;
+  }
+}
 </script>
 <template>
   <div class="justify-center align-center text-center flex flex-col">
@@ -14,8 +38,8 @@ const activateAiSummary = ref(false);
     <div class="test-center" v-for="item in data.paragraph">{{ item }}</div>
     <div class="flex flex-col">
       <span>AI Summary: </span>
-      <button v-if="!activateAiSummary">Activate AI summary</button>
-      <div v-else>{{}}</div>
+      <button v-if="!activateAiSummary" @click="aiSummary" class="bg-sky-600">Activate AI summary</button>
+      <div v-else>{{summaryText}}</div>
     </div>
   </div>
 </template>

components/checks/checkKidUnfriendlyContent.ts

@@ -6,11 +6,9 @@ async function checkUnsafeContent(title: string) {
   try {
     const req = await fetch("/api/contentcheck/kidunfriendlycontent");
     const res = await req.json();
-    console.log(res);
     const ac = new AhoCorasick(res.words);
     const kidfriendly = ac.hasKeywordInText(title);
-    console.log(kidfriendly);
-    return kidfriendly;
+     return kidfriendly;
   } catch (e) {
     console.log(e);
   }

nuxt.config.ts

@@ -23,7 +23,7 @@ export default defineNuxtConfig({
     "/api/home/lt": { swr: 3600 },
   },
 
-  css: ["~/styles/main.css"],
+  css: ["~/styles/main.css", "@fontsource-variable/noto-sans-tc"],
 
   modules: ["@nuxtjs/robots", "@nuxtjs/seo", "@nuxtjs/i18n", "@nuxtjs/tailwindcss", "shadcn-nuxt", "motion-v/nuxt", "@sentry/nuxt/module"],
 
@@ -37,7 +37,6 @@ export default defineNuxtConfig({
   },
 
   site: {
-    url: "https://news.yuanhau.com/",
     title: "新聞盲點平台",
     description: "",
   },

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

@@ -7,6 +7,8 @@ export default defineEventHandler(async (event) => {
   const host = getRequestHost(event);
   const protocol = getRequestProtocol(event);
   const slug = getRouterParam(event, "slug");
+  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();
@@ -18,7 +20,7 @@ export default defineEventHandler(async (event) => {
       },
       {
         role: "system",
-        content: `You are a news summarizer. You will be given a news article and you will summarize it into a short paragraph.`,
+        content: `You are a news summarizer. You will be given a news article and you will summarize it into a short paragraph. The user's current locale is ${locale || "zh-tw"} please use the correct language as the response.`,
       },
     ],
     model: "gemma2-9b-it",

styles/main.css

@@ -46,12 +46,3 @@
     --chart-5: 340 75% 55%;
   }
 }
-
-@font-face {
-  font-family: "Noto Sans TC Variable";
-  font-style: normal;
-  font-display: auto;
-  font-weight: 100 900;
-  src: url(@fontsource-variable/noto-sans-tc/files/noto-sans-tc-chinese-traditional-wght-normal.woff2)
-    format("woff2-variations");
-}