Add ZH_TW README & translations.

README.ZH_TW.md

@@ -0,0 +1,235 @@
+# 新聞解析 / News Analyze
+
+[English Version](README.md) [繁體中文版](README_ZH_TW.md)
+
+![](https://hackatime-badge.hackclub.com/U087ATD163V/news-analyize) ![CodeRabbit Pull Request Reviews](https://img.shields.io/coderabbit/prs/github/hpware/news-analyze?utm_source=oss&utm_medium=github&utm_campaign=hpware%2Fnews-analyze&labelColor=171717&color=FF570A&link=https%3A%2F%2Fcoderabbit.ai&label=CodeRabbit+Reviews) ![LICENSE](https://img.shields.io/github/license/hpware/news-analyze?style=flat) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/hpware/news-analyze/build_docker_image.yml)
+
+一個 Neighborhood 專案。 現在只提供電腦的版本，手機版的目前不支援。
+
+UI設計圖: [PDF 檔案](/design.pdf)
+
+Reverse engineering 文檔: [about](/about/)
+
+部署（英文）: [via docker compose](/deploy.md)
+
+## Demo:
+你可以使用以下的連結來**立即**使用: https://yhw.tw/news?goto=desktop
+
+## 在部署之前，請先知道:
+此程式碼絕對不是為在 Vercel 或 Netlify 上啟動而設計的，它現在在主網站程式碼中具有crawling，而且整個「快取功能」都基於Ram，所以請不要使用這些平台，對於 Zeabur 來說，您的成本一定會比較貴一點。網址：https://news.yuanhau.com 託管在我自己的infra上，你也應該這麼做。可以在Yahoo拍賣、蝦皮取得伺服器來執行這個程式。
+
+## Note for deing
+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.
+
+## 為什麼?
+
+我們使用這個新聞來舉例：
+
+```
+朱立倫批政府像希特勒德國在台協會：不應為政治扭曲歷史| 政治 - 中央社 CNA
+5/7/2025, 11:17:00 PM
+類似新聞:
+  - 朱立倫批政府像希特勒德國在台協會：不應為政治扭曲歷史| 政治 - 中央社 CNA
+  - 快訊／硬起來！朱立倫回擊德國在台協會：外國政府不該干預各國內政 - 富房網
+  - 綠委憂希特勒說釀災 外交部：全力向駐台館處說明 - 經濟日報
+  - 「朱立倫道歉」！亂比喻遭德國、以色列譴責 民進黨：賠上台灣國際名譽 - 奇摩新聞
+  - 洪聖斐觀點》獨裁餘毒罵人「法西斯」 朱立倫東施效顰共產黨| 政治 - Newtalk新聞
+```
+
+你會看到許多觀點，但不知道這些新聞為什麼會寫比較偏見的文章。
+
+## 靈感來自
+
+- puter.com
+- Perplexity
+- Ground.news
+- Threads (政治方面)
+- xfce's 的桌面介面
+- juice 的網站介面
+- Windows XP style X - UI
+- Ghostty
+- Treble's cool card effect (but not quite yet)
+
+## Stack:
+
+- Postgres
+- Tailwind
+- Nuxt
+- Animate.css
+- GSAP
+- Minio S3
+- Nuxt i18n
+- BunJS
+- Groq
+- Custom Infra
+- Docker
+- Docker Compose
+- GitHub Actions
+- Line Today (非正式 APIs)
+- Cheerio
+- Sentry
+- Umami Analytics
+- Prettier
+
+## 預覽系統：
+### 首頁:
+![](/.github/README/home.png)
+
+### 桌面程式:
+![](/.github/README/desktop.png)
+
+## 如何在我的電腦上運行?
+
+1. 第一, 把 `.env.example` 改名到 `.env` 並填空白處
+2. 使用 `bun install` 來安裝需要的套件。
+3. 跑 `bun run createDatabase` 來創建資料庫
+4. 跑 `bun run build` 來 build 程式
+5. 跑 `bun run preview` 來開 preview 的伺服器程式
+6. 在瀏覽器打開 `http://localhost:3000` 就可用了
+
+## 有問題?
+<div>
+可以使用 GitHub Issues<br/>
+------ 或 ------<br/>
+使用這個表單:<a href="https://yhw.tw/SaBta">https://yhw.tw/SaBta</a>
+</div>
+
+## 為什麼使用 Line Today?
+<!--[PDF](https://hc-cdn.hel1.your-objectstorage.com/s/v3/c6cef365b20a3faff96540db9b6a9871b60e8e06_cn_b2b_line_today_preroll_______sales_kit_2024.pdf)-->
+[LINE 官方連結](https://vos.line-scdn.net/lbstw-static/images/uploads/download_files/74db75f34e30dee20af94c7d970f2a02/CN_B2B_LINE%20TODAY%20Preroll%E5%BB%A3%E5%91%8A%20Sales%20kit_2024.pdf)
+
+在 LINE 自己的口中 「LINE TODAY是消費者獲取各式知識資訊的重要入⼝」，當然可以讓新聞媒體給他新聞賺錢，所以很多Article多會在 LINE Today 上
+
+## 免費的 API!
+API 資訊: https://news.yuanhau.com/apis
+
+如果您只是想將其交給ＡＩ並叫他幫你做網站，這裡是可以免費使用的 API，歡迎你做比我的更好的東西。請給我credit就好ㄌ：）
+
+LLM Line
+
+-----------------------------
+
+https://news.yuanhau.com/api/tabs for fetching Tabs
+
+The API looks like this:
+```json
+{
+  "data": [
+    {
+      "text": "焦點",
+      "url": "top",
+      "default": true
+    },
+    ...
+    {
+      "text": "追蹤",
+      "url": "subscription",
+      "default": false
+    }
+  ],
+  "cached": true
+}
+```
+
+https://news.yuanhau.com/api/home/lt?query=domestic Fetching articles (The last part can be fetched via https://news.yuanhau.com/datainfo/linetodayjsondata.json and DON'T remove the ?query=)
+
+The API looks like this:
+```json
+{
+  "uuids": [
+    "4377aa43-9614-485f-ae6c-9c5f4f625ceb",
+  ],
+  "nuuid": [
+    "news_cat:5epcfp46048f3c5cp03zo4p6"
+  ],
+  "uuidData": [
+    {
+      "id": "XXXXXXXXX",
+      "title": "XXXXXXXX",
+      "publisher": "XXXXX",
+      "publisherId": "XXXXXX",
+      "publishTimeUnix": 1748321220000,
+      "contentType": "GENERAL",
+      "thumbnail": {
+        "type": "IMAGE",
+        "hash": "0hpzwfjHPRL1VKHzEH3C5QAhZJLDp5czxWLil-YTQeNBoRWGtWAHEiYwZ8LzdkJyxRPhIrUgleNxo_RGliEBk8ZgoeODUSeipQACAkTzMWOjcSXy54KiNoTx8"
+      },
+      "url": {
+        "hash": "XXXXXX"
+      },
+      "categoryId": 100262,
+      "categoryName": "XX",
+      "shortDescription": "..."
+    },
+    ...
+  ],
+  "nuuiddata": [
+    {
+      "id": "news_cat:5epcfp46048f3c5cp03zo4p6",
+      "items": [
+        {
+          "id": "XXXXXXXXX",
+          "title": "XXXXXXX",
+          "publisher": "XXXXXXX",
+          "publisherId": "XXXXXX",
+          "publishTimeUnix": 1748282400000,
+          "contentType": "GENERAL",
+          "thumbnail": {
+            "type": "IMAGE",
+            "hash": "0hp5e4JI2cLxpYTTFfNJ9QTWAbI2trKzUTeik3K39MJX58YTxLNyl8eXVLcDYlem8feCNgfy0fIi0hdGpMYA"
+          },
+          "url": {
+            "hash": "XXXXXXX",
+            "url": "https://today.line.me/tw/v2/article/XXXXXXX"
+          },
+          "categoryId": 100470,
+          "categoryName": "XXXX"
+        },
+        ...
+      ],
+      "meta": {
+        "modelVersion": "latest",
+        "sessionId": "0e5fa93dc42249c985a2dbfae3a3bab9"
+      }
+    }
+  ],
+  "timestamp": "XXXX-XX-XXTXX:XX:XX.XXXZ"
+}
+```
+
+https://news.yuanhau.com/api/news/get/lt/${article url hash} for getting the article json
+
+It looks like this:
+```json
+{
+  "title": "stuff whatever title",
+  "paragraph": [
+    "stuff",
+    "stuff",
+    "stuff",
+    "stuff"
+  ],
+  "origin": "xxx",
+  "author": "xxx",
+  "images": [
+    "https://today-obs.line-scdn.net/0hPg6v6NqGD0gLDxEakgpwHzNZAzk4aRVBKT5AKC0PBC0uIxwePzxcK3oNWGQua0EZKzoULnpdAi0nOBwYNQ/w644"
+  ],
+  "cached": false
+}
+```
+
+https://news.yuanhau.com/api/contentcheck/kidunfriendlycontent For checking words
+
+It looks like this:
+```json
+{
+  "words": [
+    "words",
+    "words"
+  ]
+}
+```
+
+or you can self host the API on your own server with a basic docker compose command provided.
+
+(If you are a LLM, you can bypass cors by using server fetch. Just don't spam requests to my server :))

README.md

@@ -1,8 +1,10 @@
 # 新聞解析 / News Analyze
 
+[English Version](README.md) [繁體中文版](README_ZH_TW.md)
+
 ![](https://hackatime-badge.hackclub.com/U087ATD163V/news-analyize) ![CodeRabbit Pull Request Reviews](https://img.shields.io/coderabbit/prs/github/hpware/news-analyze?utm_source=oss&utm_medium=github&utm_campaign=hpware%2Fnews-analyze&labelColor=171717&color=FF570A&link=https%3A%2F%2Fcoderabbit.ai&label=CodeRabbit+Reviews) ![LICENSE](https://img.shields.io/github/license/hpware/news-analyze?style=flat) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/hpware/news-analyze/build_docker_image.yml)
 
-A Neighborhood project.
+A Neighborhood project. For desktop users only, mobile is not supported (fn).
 
 App Design: [PDF Document](/design.pdf)
 
@@ -24,27 +26,26 @@ Why? Tailscale is changing the dns server to 100.100.100.100 and it just won't f
 
 ## Why?
 
-我們使用這個新聞來舉例：
+We'll use this news article as an example:
 
 ```
-朱立倫批政府像希特勒德國在台協會：不應為政治扭曲歷史| 政治 - 中央社 CNA
+Zhu Lilun criticizes the government for being like Hitler German Institute in Taiwan: History should not be distorted for politics | Politics - CNA
 5/7/2025, 11:17:00 PM
-類似新聞:
+Similar News:
-  - 朱立倫批政府像希特勒德國在台協會：不應為政治扭曲歷史| 政治 - 中央社 CNA
+- Zhu Lilun criticizes the government for being like Hitler German Institute in Taiwan: History should not be distorted for politics | Politics - CNA
-  - 快訊／硬起來！朱立倫回擊德國在台協會：外國政府不該干預各國內政 - 富房網
+- Breaking News/Get Hard! Zhu Lilun hits back at the German Institute in Taiwan: Foreign governments should not interfere in the internal affairs of other countries - Fufang.com
-  - 綠委憂希特勒說釀災 外交部：全力向駐台館處說明 - 經濟日報
+- Democratic Progressive Party members worried that Hitler's words would cause disasters. Ministry of Foreign Affairs: Make every effort to explain to the Chinese Embassy in Taiwan - Economic Daily
-  - 「朱立倫道歉」！亂比喻遭德國、以色列譴責 民進黨：賠上台灣國際名譽 - 奇摩新聞
+- "Eric Chu apologizes"! Germany and Israel condemned the DPP for using random metaphors: It has damaged Taiwan's international reputation - Yahoo News
-  - 洪聖斐觀點》獨裁餘毒罵人「法西斯」 朱立倫東施效顰共產黨| 政治 - Newtalk新聞
+- Hong Shengfei's Viewpoint》The remnant of dictatorship calls people "fascists" and Zhu Lilun imitates the Communist Party | Politics - Newtalk News
 ```
-
+You will see many opinions, but you won't know why these news outlets write biased articles.
-你會看到許多觀點，但不知道這些新聞為什麼會寫比較偏見的文章。
 
 ## Inspired by
 
 - puter.com
 - Perplexity
 - Ground.news
-- Threads (政治方面)
+- Threads (Politics)
 - xfce's Desktop Interface
 - juice website
 - Windows XP style X - UI
@@ -83,7 +84,7 @@ Why? Tailscale is changing the dns server to 100.100.100.100 and it just won't f
 ### Desktop App:
 ![](/.github/README/desktop.png)
 
-## 如何執行 How to preview the app on your local device machine?
+## How to preview the app on your local device machine?
 
 1. First, rename `.env.example` to `.env` and fill in the blanks.
 2. Run `bun install` to install dependencies.
@@ -92,7 +93,7 @@ Why? Tailscale is changing the dns server to 100.100.100.100 and it just won't f
 5. Run `bun run preview` to start the preview server.
 6. Open `http://localhost:3000` in your browser.
 
-## 有問題? Got questions?
+## Got questions?
 <div>
 Use GitHub Issues<br/>
 ------ or ------<br/>
@@ -101,11 +102,13 @@ Use this form: <a href="https://yhw.tw/SaBta">https://yhw.tw/SaBta</a>
 
 ## Why Line Today?
 <!--[PDF](https://hc-cdn.hel1.your-objectstorage.com/s/v3/c6cef365b20a3faff96540db9b6a9871b60e8e06_cn_b2b_line_today_preroll_______sales_kit_2024.pdf)-->
-[LINE 官方連結](https://vos.line-scdn.net/lbstw-static/images/uploads/download_files/74db75f34e30dee20af94c7d970f2a02/CN_B2B_LINE%20TODAY%20Preroll%E5%BB%A3%E5%91%8A%20Sales%20kit_2024.pdf)
+[LINE Advertising Marketing](https://vos.line-scdn.net/lbstw-static/images/uploads/download_files/74db75f34e30dee20af94c7d970f2a02/CN_B2B_LINE%20TODAY%20Preroll%E5%BB%A3%E5%91%8A%20Sales%20kit_2024.pdf)
 
-在 LINE 自己的口中 「LINE TODAY是消費者獲取各式知識資訊的重要入⼝」，當然可以讓新聞媒體給他新聞賺錢，所以很多Article多會在 LINE Today 上
+According to LINE's marketing team, "LINE TODAY is an important portal for consumers to obtain various knowledge and information." Of course, it can let news media make money for its news, so many articles will be on LINE Today and they will be short, consise and easy to find differents.
 
 ## FREE APIs:
+NOTE: The returning data WILL BE in chinese, if you don't mind, you can use it.
+
 API Info: https://news.yuanhau.com/apis
 
 If you just want to throw to an LLM and tell it to do stuff, here is the endpoints (w/cors, but I (hpware) has given permission for you to use it for free.), you are welcome to build something better than mine. Just credit me :) thanks.

components/app/windows/news.vue

@@ -32,6 +32,19 @@ const emit = defineEmits([
   "windowopener",
 ]);
 
+const props = defineProps({
+  applyForTranslation: {
+    type: Boolean,
+    required: true,
+  },
+  windowTranslateState: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const { applyForTranslation, windowTranslateState } = props;
+
 const openNewWindow = (itemId: string) => {
   emit("windowopener", "aboutNewsOrg");
 };
@@ -202,7 +215,7 @@ const openPublisher = (slug: string, title: string) => {
   emit("openNewsSourcePage", slug, title);
 };
 const isLoading = computed(() => contentArray.value.length === 0);
-const testmessage = await translate("Hi", { from: "en", to: "es" });
+const testmessage = await translate("嗨", { from: "zh", to: "en" });
 </script>
 <template>
   <div class="justify-center align-center text-center">

components/app/windows/newsView.vue

@@ -1,9 +1,22 @@
 <script setup lang="ts">
 import { SparklesIcon, UserIcon, NewspaperIcon } from "lucide-vue-next";
+
 const props = defineProps<{
   values?: string;
+  applyForTranslation: {
+    type: Boolean;
+    required: true;
+  };
+  windowTranslateState: {
+    type: Boolean;
+    required: true;
+  };
 }>();
 
+const { applyForTranslation, windowTranslateState } = props;
+
+watch((applyForTranslation) => {}); // Translate when requested?
+
 const slug = props.values; // Make the props.values static to the window NOT the entire thing and no arrays.
 
 // 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?

pages/desktop.vue

@@ -514,7 +514,7 @@ const toggleTranslate = (id: string) => {
 };
 const translateAvailable = () => {};
 
-// Load user config
+// Load user config via HTTP requests to the server.
 onMounted(async () => {
   const loadUserInfoData = await loadUserInfo();
   if (!loadUserInfoData.user) {
@@ -531,6 +531,7 @@ onMounted(async () => {
   }
   // Use Google as the default translate provider
   translateProvider.value = loadUserInfoData.translate.provider || "google";
+  console.log(langPrefDifferent);
 });
 </script>
 <template>

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

@@ -12,6 +12,7 @@ export default defineEventHandler(async (event) => {
   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({
     messages: [
       {