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>