Spaces:

wokogaming
/

ML-LT

Paused

App Files Files Community

wokogaming commited on May 5

Commit

27c4dd4

verified ·

1 Parent(s): fb016c6

Upload 31 files

Browse files

Files changed (31) hide show

frontend/.env.example +2 -0
frontend/.gitignore +24 -0
frontend/Dockerfile +13 -0
frontend/README.md +16 -0
frontend/dist/assets/index-BrA7KMgp.css +1 -0
frontend/dist/assets/index-Crl0tegD.js +0 -0
frontend/dist/index.html +38 -0
frontend/dist/vite.svg +1 -0
frontend/eslint.config.js +29 -0
frontend/index.html +37 -0
frontend/new ui/home.html +297 -0
frontend/new ui/new.html +296 -0
frontend/package-lock.json +0 -0
frontend/package.json +29 -0
frontend/public/vite.svg +1 -0
frontend/src/App.css +66 -0
frontend/src/App.jsx +1288 -0
frontend/src/AppHome.jsx +73 -0
frontend/src/assets/react.svg +1 -0
frontend/src/components/FilterBar.jsx +57 -0
frontend/src/components/Hero.jsx +10 -0
frontend/src/components/HomeNewsGrid.jsx +233 -0
frontend/src/components/HomePage.jsx +195 -0
frontend/src/components/Navbar.jsx +17 -0
frontend/src/components/NewsArticle.jsx +167 -0
frontend/src/components/SearchBox.jsx +38 -0
frontend/src/components/SummaryBox.jsx +132 -0
frontend/src/index.css +41 -0
frontend/src/main.jsx +10 -0
frontend/src/services/api.service.js +93 -0
frontend/vite.config.js +7 -0

frontend/.env.example ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ # Backend API URL
2	+ VITE_API_URL=http://localhost:5000

frontend/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/Dockerfile ADDED Viewed

	@@ -0,0 +1,13 @@

+# Build Stage
+FROM node:20-slim AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+# Production Stage
+FROM nginx:stable-alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/README.md ADDED Viewed

	@@ -0,0 +1,16 @@

+# React + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## React Compiler
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/dist/assets/index-BrA7KMgp.css ADDED Viewed

	@@ -0,0 +1 @@

+ :root{--background: #f6f7fb;--on-background: #0b0b0b;--surface: #ffffff;--outline: rgba(15, 23, 42, .16);font-family:Inter,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;width:100%;min-height:100vh;background:radial-gradient(circle at 92% 4%,#0000000d 0,#0000 36%),radial-gradient(circle at 4% 96%,#0f172a12 0,#0f172a00 34%),var(--background);color:var(--on-background)}#root{width:100%;min-height:100vh}h1,h2,h3,h4{font-family:Manrope,sans-serif}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 450,"GRAD" 0,"opsz" 24}@keyframes summary-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes summary-shimmer{0%{background-position:-220px 0}to{background-position:calc(220px + 100%) 0}}.summary-panel{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.summary-spin{animation:summary-spin 1.2s linear infinite}.summary-shimmer{background:linear-gradient(90deg,#e5e7eb,#f8fafc,#e5e7eb 80px);background-size:220px 100%;animation:summary-shimmer 1.3s linear infinite}@keyframes fade-in-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}main section,main header{animation:fade-in-up .45s ease-out both}main section:nth-of-type(2){animation-delay:80ms}main section:nth-of-type(3){animation-delay:.16s}@media(max-width:1023px){main section,main header{animation-duration:.35s}}

frontend/dist/assets/index-Crl0tegD.js ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/dist/index.html ADDED Viewed

	@@ -0,0 +1,38 @@

+<!doctype html>
+<html lang="vi">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NewsAI - Digital Curator</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+    <script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "background": "#f6f7fb",
+                        "on-background": "#0b0b0b",
+                        "surface": "#ffffff",
+                        "outline": "rgba(15, 23, 42, 0.16)",
+                    },
+                    fontFamily: {
+                        "headline": ["Manrope", "sans-serif"],
+                        "body": ["Inter", "sans-serif"],
+                        "label": ["Inter", "sans-serif"],
+                    },
+                    borderRadius: { "DEFAULT": "0.25rem", "sm": "0.125rem", "md": "0.375rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem" },
+                },
+            },
+        }
+    </script>
+    <script type="module" crossorigin src="/assets/index-Crl0tegD.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BrA7KMgp.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

frontend/dist/vite.svg ADDED Viewed

frontend/eslint.config.js ADDED Viewed

	@@ -0,0 +1,29 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html ADDED Viewed

	@@ -0,0 +1,37 @@

+<!doctype html>
+<html lang="vi">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NewsAI - Digital Curator</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+    <script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "background": "#f6f7fb",
+                        "on-background": "#0b0b0b",
+                        "surface": "#ffffff",
+                        "outline": "rgba(15, 23, 42, 0.16)",
+                    },
+                    fontFamily: {
+                        "headline": ["Manrope", "sans-serif"],
+                        "body": ["Inter", "sans-serif"],
+                        "label": ["Inter", "sans-serif"],
+                    },
+                    borderRadius: { "DEFAULT": "0.25rem", "sm": "0.125rem", "md": "0.375rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem" },
+                },
+            },
+        }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/new ui/home.html ADDED Viewed

	@@ -0,0 +1,297 @@

+<!DOCTYPE html>
+<html class="light" lang="vi"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;500;600;700;800&amp;family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+            vertical-align: middle;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f7f9fb;
+        }
+        h1, h2, h3, .headline-lg {
+            font-family: 'Manrope', sans-serif;
+        }
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+    </style>
+<script id="tailwind-config">
+        tailwind.config = {
+          darkMode: "class",
+          theme: {
+            extend: {
+              "colors": {
+                      "surface": "#f7f9fb",
+                      "on-error-container": "#93000a",
+                      "error": "#ba1a1a",
+                      "outline-variant": "#c6c6cd",
+                      "inverse-primary": "#b4c5ff",
+                      "surface-container-lowest": "#ffffff",
+                      "on-secondary-fixed": "#0d1c2e",
+                      "surface-dim": "#d8dadc",
+                      "on-tertiary": "#ffffff",
+                      "on-surface": "#191c1e",
+                      "secondary-fixed": "#d5e3fc",
+                      "surface-variant": "#e0e3e5",
+                      "on-secondary": "#ffffff",
+                      "on-primary-container": "#497cff",
+                      "primary-fixed": "#dbe1ff",
+                      "on-tertiary-container": "#7c839b",
+                      "on-surface-variant": "#45474c",
+                      "primary-fixed-dim": "#b4c5ff",
+                      "tertiary": "#000000",
+                      "surface-container": "#eceef0",
+                      "inverse-on-surface": "#eff1f3",
+                      "secondary-fixed-dim": "#b9c7df",
+                      "background": "#f7f9fb",
+                      "surface-tint": "#0053db",
+                      "primary": "#000000",
+                      "surface-container-highest": "#e0e3e5",
+                      "primary-container": "#00174b",
+                      "secondary-container": "#d5e3fc",
+                      "on-primary-fixed": "#00174b",
+                      "error-container": "#ffdad6",
+                      "tertiary-container": "#131b2e",
+                      "secondary": "#515f74",
+                      "on-secondary-container": "#57657a",
+                      "on-tertiary-fixed": "#131b2e",
+                      "tertiary-fixed-dim": "#bec6e0",
+                      "surface-container-high": "#e6e8ea",
+                      "on-primary-fixed-variant": "#003ea8",
+                      "on-error": "#ffffff",
+                      "on-background": "#191c1e",
+                      "surface-bright": "#f7f9fb",
+                      "on-primary": "#ffffff",
+                      "surface-container-low": "#f2f4f6",
+                      "outline": "#76777d",
+                      "on-tertiary-fixed-variant": "#3f465c",
+                      "inverse-surface": "#2d3133",
+                      "on-secondary-fixed-variant": "#3a485b",
+                      "tertiary-fixed": "#dae2fd"
+              },
+              "borderRadius": {
+                      "DEFAULT": "0.125rem",
+                      "lg": "0.25rem",
+                      "xl": "0.5rem",
+                      "full": "0.75rem"
+              },
+              "fontFamily": {
+                      "headline": ["Manrope"],
+                      "body": ["Inter"],
+                      "label": ["Inter"]
+              }
+            },
+          }
+        }
+      </script>
+</head>
+<body class="bg-surface text-on-surface selection:bg-primary selection:text-white">
+<!-- TopNavBar Cluster -->
+<header class="flex justify-between items-center px-8 py-4 w-full max-w-full sticky top-0 z-50 bg-[#f7f9fb] dark:bg-[#0a0a0a] tonal-shift-bg border-none">
+<div class="flex items-center gap-8">
+<span class="text-2xl font-black tracking-tight text-black dark:text-white">NewsAI</span>
+<nav class="hidden md:flex items-center gap-6">
+<a class="text-black dark:text-white font-bold border-b-2 border-black dark:border-white pb-1 transition-colors" href="#">Discover</a>
+<a class="text-slate-500 dark:text-slate-400 font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">Briefings</a>
+<a class="text-slate-500 dark:text-slate-400 font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">Channels</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-3 mr-4">
+<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">notifications</button>
+<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">settings</button>
+</div>
+<button class="bg-primary text-on-primary px-5 py-2 rounded-lg font-bold tracking-tight scale-95 active:duration-100 transition-all hover:opacity-90">Summarize All</button>
+<div class="w-10 h-10 rounded-full overflow-hidden bg-surface-container">
+<img alt="User profile" class="w-full h-full object-cover" data-alt="close-up portrait of a professional man with a neutral expression against a clean studio background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDoQmHS1Tv7ZwRrKKn4NKLeQASbjyXWGh6C_W6cPSwKX8kd8oLAZ5isTajGhYQ4FFuk_NsYeS3ZX4IZwym99L0x0hpeqTNmLFIajgNzF8TjFDvlh3X_icICFgbWY3vcUNS8bz5d0nyzldcODOK_MZzpEqTtYKDEK1TSaYiyO6MKfiMFKea4uLMnGLw6JkYeTx6mWZ0Oo5IMOXaNw35H4JXJFoo8oPeIgh3_3XSNIRkTqyetarLQZ-ICYjFkUq04v60gmv9eTmAbwR8"/>
+</div>
+</div>
+</header>
+<div class="flex min-h-screen">
+<!-- SideNavBar Cluster -->
+<aside class="flex flex-col h-screen fixed left-0 top-0 pt-20 pb-8 px-4 z-40 bg-white/70 dark:bg-black/70 backdrop-blur-xl h-full w-72 border-r-0 shadow-[0px_12px_32px_rgba(25,28,30,0.06)] tonal-layering bg-slate-100 dark:bg-slate-900">
+<div class="px-4 mb-8">
+<div class="flex items-center gap-3 mb-2">
+<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
+<span class="material-symbols-outlined text-white text-sm" style="font-variation-settings: 'FILL' 1;">history</span>
+</div>
+<div>
+<h3 class="text-lg font-bold text-black dark:text-white leading-tight">Recent History</h3>
+<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">AI Synopses</p>
+</div>
+</div>
+</div>
+<div class="flex-1 overflow-y-auto no-scrollbar space-y-1 px-2">
+<button class="w-full flex items-center gap-3 px-3 py-3 bg-slate-200/50 dark:bg-slate-800/50 text-black dark:text-white rounded-xl font-semibold translate-x-1 duration-200 group">
+<span class="material-symbols-outlined text-blue-600 dark:text-blue-500">history</span>
+<span class="font-inter text-sm tracking-normal">Global Markets Recap</span>
+</button>
+<button class="w-full flex items-center gap-3 px-3 py-3 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all group">
+<span class="material-symbols-outlined">bookmark</span>
+<span class="font-inter text-sm tracking-normal">Quantum Computing</span>
+</button>
+<button class="w-full flex items-center gap-3 px-3 py-3 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all group">
+<span class="material-symbols-outlined">source</span>
+<span class="font-inter text-sm tracking-normal">Tech Policy 2024</span>
+</button>
+<button class="w-full flex items-center gap-3 px-3 py-3 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all group">
+<span class="material-symbols-outlined">edit_note</span>
+<span class="font-inter text-sm tracking-normal">Drafts: AI Safety</span>
+</button>
+<button class="w-full flex items-center gap-3 px-3 py-3 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all group">
+<span class="material-symbols-outlined">inventory_2</span>
+<span class="font-inter text-sm tracking-normal">Archived Briefs</span>
+</button>
+</div>
+<div class="mt-auto px-2 space-y-4">
+<button class="w-full py-4 bg-primary text-white rounded-xl font-bold text-sm tracking-tight flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
+<span class="material-symbols-outlined text-sm">add</span>
+                    New Research
+                </button>
+<div class="pt-4 border-t border-slate-200 dark:border-slate-800">
+<button class="w-full flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all">
+<span class="material-symbols-outlined">help</span>
+<span class="font-inter text-sm tracking-normal">Support</span>
+</button>
+<button class="w-full flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all">
+<span class="material-symbols-outlined">person</span>
+<span class="font-inter text-sm tracking-normal">Account</span>
+</button>
+</div>
+</div>
+</aside>
+<!-- Main Content Area -->
+<main class="flex-1 ml-72 p-8 lg:p-12">
+<!-- Header Section -->
+<section class="max-w-5xl mx-auto mb-16 text-center">
+<h1 class="text-5xl lg:text-6xl font-black tracking-tighter text-primary mb-12 leading-tight">
+                    Chào buổi sáng,<br/>Khám phá tin tức AI hôm nay
+                </h1>
+<div class="relative max-w-2xl mx-auto mb-8">
+<div class="absolute inset-y-0 left-6 flex items-center pointer-events-none">
+<span class="material-symbols-outlined text-slate-400">search</span>
+</div>
+<input class="w-full h-16 pl-14 pr-6 bg-surface-container-lowest border-none rounded-full text-lg font-medium shadow-[0px_12px_32px_rgba(25,28,30,0.06)] focus:ring-2 focus:ring-primary/20 placeholder:text-slate-400" placeholder="Tìm kiếm tin tức hoặc chủ đề AI..." type="text"/>
+</div>
+<!-- Action Bar -->
+<div class="flex items-center justify-center gap-4">
+<button class="px-6 py-2.5 rounded-full border border-slate-200 text-secondary font-semibold text-sm hover:bg-slate-50 transition-colors flex items-center gap-2">
+<span class="material-symbols-outlined text-lg">check_circle</span>
+                        Chọn tất cả
+                    </button>
+<button class="px-8 py-2.5 rounded-full bg-primary text-white font-bold text-sm hover:scale-[1.02] active:scale-95 transition-all flex items-center gap-2">
+<span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">bolt</span>
+                        Tóm tắt ngay
+                    </button>
+</div>
+</section>
+<!-- News Grid (Bento/Editorial) -->
+<div class="grid grid-cols-1 md:grid-cols-12 gap-6 max-w-7xl mx-auto">
+<!-- Large Featured Card -->
+<div class="md:col-span-8 group relative bg-surface-container-lowest rounded-xl overflow-hidden shadow-none hover:shadow-xl transition-all duration-500 border border-transparent hover:border-slate-100">
+<div class="aspect-[16/9] w-full relative">
+<img class="w-full h-full object-cover" data-alt="abstract high-tech visualization of artificial intelligence neural networks with glowing blue lines and digital nodes in a dark void" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBiXLdXBZzpQxCDx6bt4QA3FCup9Awh4yCjnglOZ-pnjDufcAlW_sKxzQ9YhVT_LyaR3Rczg338mPAfq12i58G5YX0ed2EletyKCtWee8DzRm6XzrPTLhvGzmArJE3w4EUk8a8UiUfdsuEE_aMGkXGtaNkxmaVIYhDIl4ldjDj2bOHidzpKRY01HnsXos3HlY_2LtiAIgP5xVRzDPGvhsNBDVx74TfG4CKFXEpkDhUgKcW9XxoUK3brZpEifwaFWhNLtVS_bhhTXeM"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
+<div class="absolute top-6 left-6 flex items-center gap-2">
+<input class="w-5 h-5 rounded border-white/30 bg-white/10 text-primary focus:ring-0" type="checkbox"/>
+<span class="bg-primary text-white text-[10px] font-black uppercase tracking-widest px-3 py-1 rounded-sm">Featured</span>
+</div>
+<div class="absolute bottom-6 left-6 right-6">
+<h2 class="text-3xl font-black text-white tracking-tight mb-3 leading-tight">OpenAI giới thiệu mô hình GPT-5: Bước nhảy vọt về khả năng suy luận đa phương thức</h2>
+<div class="flex items-center justify-between">
+<p class="text-white/70 text-sm font-medium">Bởi NewsAI Research • 5 phút đọc</p>
+<button class="w-10 h-10 rounded-full bg-white text-primary flex items-center justify-center hover:bg-primary hover:text-white transition-all shadow-lg">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
+</button>
+</div>
+</div>
+</div>
+</div>
+<!-- Side Card 1 -->
+<div class="md:col-span-4 bg-surface-container-lowest rounded-xl p-6 border border-transparent hover:border-slate-200 transition-all">
+<div class="flex items-center justify-between mb-4">
+<span class="text-[10px] font-bold text-blue-600 uppercase tracking-widest">Đầu tư</span>
+<input class="w-5 h-5 rounded border-slate-300 text-primary focus:ring-0" type="checkbox"/>
+</div>
+<div class="aspect-video w-full rounded-lg overflow-hidden mb-4">
+<img class="w-full h-full object-cover" data-alt="futuristic architectural concept of a server farm with neon accents and sleek metallic surfaces in soft focus" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAUifZ5fH3G6cA8bf48nJLr2BZ_VX9clQP_FEjEOHo7c5_Zl62lcEpbOMpO9rRPnjkG8qXwcYUmfCN6swI0cIUJuCIH7jlqaHSUhVIAFtlraHSp1IkMAVy1Ma-TzteBoY8KbfvJGvWNkyTd9rNZyIUk4NWDUvsBFbY9HhPl2UN4eBPqQUb95hb5OY0pxtuhKBMBMVJKoH8h4Hw7FhT9eJ-yz4LlXo5V8EEa7lo_2XkH3OHaZYci9pQbyOiUKgPwDxuiKi6EgsKO83M"/>
+</div>
+<h3 class="text-xl font-bold text-primary tracking-tight mb-4 leading-snug">Vốn đầu tư mạo hiểm đổ vào chip AI đạt mức kỷ lục 12 tỷ USD trong Q1</h3>
+<div class="flex items-center justify-between mt-auto">
+<span class="text-xs text-slate-500 font-medium">1 giờ trước</span>
+<button class="p-2 text-slate-400 hover:text-primary transition-colors">
+<span class="material-symbols-outlined">auto_awesome</span>
+</button>
+</div>
+</div>
+<!-- Small Editorial Cards -->
+<div class="md:col-span-4 bg-surface-container-lowest rounded-xl overflow-hidden border border-transparent hover:border-slate-200 transition-all flex flex-col">
+<div class="h-48 w-full relative">
+<img class="w-full h-full object-cover" data-alt="close-up of complex circuit board with green glowing lights and metallic paths representing cybersecurity" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYSRSQb1tj4CIH6VXB2TICaTpfkwxl2qxex1_cC0oEOH-VMC8KKcF9thC2UWE0bz1iy6mZrNEI8oXVQ_jUNhir-LlC6sZYgX87w23K3TAqKwrhjmK2u_KLIWm-V1vPRx6AYCWTnsocTB1QGBgths9qUi__kOf0ruq1TwY28hcp94LIYh9RmXPvLVv2A6FHYtXUA1dzSNdFLooG683kJXAqildkUy2mYl1GgAR60jTHguwyAtAl4awnglu2HPCCDCtgQI-kFo8qGaQ"/>
+<div class="absolute top-4 left-4">
+<input class="w-5 h-5 rounded border-white/50 bg-white/20 text-primary focus:ring-0" type="checkbox"/>
+</div>
+</div>
+<div class="p-6 flex-1 flex flex-col">
+<span class="text-[10px] font-bold text-red-600 uppercase tracking-widest mb-2">Bảo mật</span>
+<h3 class="text-lg font-bold text-primary tracking-tight mb-4 leading-tight">Phát hiện lỗ hổng zero-day mới trong các LLM mã nguồn mở</h3>
+<div class="flex items-center justify-between mt-auto">
+<span class="text-xs text-slate-500">45 phút trước</span>
+<button class="p-2 text-slate-400 hover:text-primary transition-colors">
+<span class="material-symbols-outlined">auto_awesome</span>
+</button>
+</div>
+</div>
+</div>
+<div class="md:col-span-4 bg-surface-container-lowest rounded-xl overflow-hidden border border-transparent hover:border-slate-200 transition-all flex flex-col">
+<div class="h-48 w-full relative">
+<img class="w-full h-full object-cover" data-alt="minimalist white robot hand reaching out against a clean studio background with soft directional lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAYGStWQ--EprWMucpeo8YkscYgjMY-Sm6D5TJsunCAdaQXNt2-js-BV7C8Db27TYhxxjc382h1Xull_8vsioZ332VWLlMup7RNi4haPxiOfpCuCategOtkpRpN4a3A0wpPTyW3bPrGs-JSDExpn95YelPsUmfS_OdkvVfjeZr2ibBQvZ2ONCPLUIgdaWKC5vmJlV08jaCGEu9m07ZkVc9PfDb6rPMXzr-N6xZvKCy_UNdfXmBBfpOUvoFQecil6gh_QxueMOZKzu8"/>
+<div class="absolute top-4 left-4">
+<input class="w-5 h-5 rounded border-white/50 bg-white/20 text-primary focus:ring-0" type="checkbox"/>
+</div>
+</div>
+<div class="p-6 flex-1 flex flex-col">
+<span class="text-[10px] font-bold text-green-600 uppercase tracking-widest mb-2">Y tế</span>
+<h3 class="text-lg font-bold text-primary tracking-tight mb-4 leading-tight">AI hỗ trợ bác sĩ chẩn đoán ung thư giai đoạn sớm với độ chính xác 99%</h3>
+<div class="flex items-center justify-between mt-auto">
+<span class="text-xs text-slate-500">3 giờ trước</span>
+<button class="p-2 text-slate-400 hover:text-primary transition-colors">
+<span class="material-symbols-outlined">auto_awesome</span>
+</button>
+</div>
+</div>
+</div>
+<div class="md:col-span-4 bg-surface-container-lowest rounded-xl overflow-hidden border border-transparent hover:border-slate-200 transition-all flex flex-col">
+<div class="h-48 w-full relative">
+<img class="w-full h-full object-cover" data-alt="dynamic close-up of a human eye with digital data overlays and binary code reflections" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC1CDzpXU19AtQqte6N9lEv_fzgISdyiMKSAFRm5ygYrvwOFg1buhfW5Kb-DdNT1xrDYOe4tQCcCoBPr0NtEF3hnn1BI-z_tcMkrdepwX6cbE13oLew9fr2TLez8GmSEGvpniJz-1dNIEjuULiedLwbnBW23TBth8FCsOt_V2ntEfeWf8x_UfdZidzmqUxyEGCYmNN_PBqCu1oEwwc8L6B_iyqb5TGmVglmuf83Eyfmo193D-cgltRqD_D3BFImm0O2gYTmxRLYfDM"/>
+<div class="absolute top-4 left-4">
+<input class="w-5 h-5 rounded border-white/50 bg-white/20 text-primary focus:ring-0" type="checkbox"/>
+</div>
+</div>
+<div class="p-6 flex-1 flex flex-col">
+<span class="text-[10px] font-bold text-purple-600 uppercase tracking-widest mb-2">Đạo đức</span>
+<h3 class="text-lg font-bold text-primary tracking-tight mb-4 leading-tight">EU thông qua bộ luật AI toàn diện nhất thế giới nhằm bảo vệ quyền riêng tư</h3>
+<div class="flex items-center justify-between mt-auto">
+<span class="text-xs text-slate-500">6 giờ trước</span>
+<button class="p-2 text-slate-400 hover:text-primary transition-colors">
+<span class="material-symbols-outlined">auto_awesome</span>
+</button>
+</div>
+</div>
+</div>
+</div>
+</main>
+</div>
+</body></html>

frontend/new ui/new.html ADDED Viewed

	@@ -0,0 +1,296 @@

+<!DOCTYPE html>
+<html class="light" lang="vi"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&amp;family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "on-background": "#000000",
+                    "inverse-surface": "#1a1c1e",
+                    "on-tertiary-fixed-variant": "#2d3243",
+                    "inverse-on-surface": "#ffffff",
+                    "on-secondary-container": "#1e293b",
+                    "error-container": "#ffdad6",
+                    "on-primary": "#ffffff",
+                    "background": "#ffffff",
+                    "surface-variant": "#f1f5f9",
+                    "surface-container-low": "#ffffff",
+                    "surface-container-lowest": "#ffffff",
+                    "error": "#ba1a1a",
+                    "surface-bright": "#ffffff",
+                    "surface-container-highest": "#e2e8f0",
+                    "on-surface": "#000000",
+                    "on-surface-variant": "#334155",
+                    "primary-container": "#000000",
+                    "on-error-container": "#93000a",
+                    "surface-tint": "#000000",
+                    "on-tertiary-fixed": "#0f172a",
+                    "outline-variant": "#e2e8f0",
+                    "on-primary-container": "#000000",
+                    "primary-fixed": "#f1f5f9",
+                    "on-primary-fixed-variant": "#000000",
+                    "secondary-fixed-dim": "#94a3b8",
+                    "on-secondary-fixed": "#0f172a",
+                    "tertiary-fixed-dim": "#94a3b8",
+                    "surface": "#ffffff",
+                    "secondary-fixed": "#f1f5f9",
+                    "surface-container-high": "#f8fafc",
+                    "surface-container": "#f1f5f9",
+                    "tertiary-fixed": "#f1f5f9",
+                    "on-tertiary-container": "#334155",
+                    "on-secondary": "#ffffff",
+                    "surface-dim": "#f1f5f9",
+                    "secondary-container": "#f1f5f9",
+                    "secondary": "#475569",
+                    "tertiary": "#000000",
+                    "on-error": "#ffffff",
+                    "on-tertiary": "#ffffff",
+                    "outline": "#000000",
+                    "on-secondary-fixed-variant": "#1e293b",
+                    "tertiary-container": "#000000",
+                    "primary": "#000000",
+                    "primary-fixed-dim": "#cbd5e1",
+                    "on-primary-fixed": "#000000",
+                    "inverse-primary": "#ffffff"
+            },
+            "borderRadius": {
+                    "DEFAULT": "0rem",
+                    "lg": "0.25rem",
+                    "xl": "0.5rem",
+                    "full": "9999px"
+            },
+            "fontFamily": {
+                    "headline": ["Manrope"],
+                    "body": ["Inter"],
+                    "label": ["Inter"]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        body { font-family: 'Inter', sans-serif; }
+        h1, h2, h3 { font-family: 'Manrope', sans-serif; }
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .sidebar-border { border-right: 1.5px solid #000000; }
+        .search-shadow { shadow: 0 4px 20px -2px rgba(0,0,0,0.1); }
+    </style>
+</head>
+<body class="bg-white text-black flex min-h-screen">
+<!-- SideNavBar: Modified to only show History -->
+<aside class="fixed left-0 top-0 h-full flex flex-col p-8 bg-white w-72 border-r border-black/10 z-50">
+<div class="flex items-center gap-3 mb-12">
+<div class="w-10 h-10 bg-black flex items-center justify-center">
+<span class="material-symbols-outlined text-white text-2xl" style="font-variation-settings: 'FILL' 1;">neurology</span>
+</div>
+<div>
+<h1 class="text-xl font-extrabold tracking-tighter text-black uppercase leading-none">NewsAI</h1>
+<p class="text-[10px] text-slate-500 font-bold tracking-[0.2em] uppercase mt-1">Digital Curator</p>
+</div>
+</div>
+<div class="flex flex-col flex-1">
+<div class="mb-6">
+<h3 class="text-[12px] font-black text-black uppercase tracking-[0.15em] mb-6 flex items-center gap-2">
+<span class="material-symbols-outlined text-lg">history</span>
+                Lịch sử tìm kiếm
+            </h3>
+<div class="flex flex-col gap-1">
+<div class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-50 group cursor-pointer transition-all">
+<span class="material-symbols-outlined text-lg opacity-40 group-hover:opacity-100 group-hover:text-black">history</span>
+<span class="text-sm font-medium text-slate-600 group-hover:text-black truncate">Trí tuệ nhân tạo 2024...</span>
+</div>
+<div class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-50 group cursor-pointer transition-all">
+<span class="material-symbols-outlined text-lg opacity-40 group-hover:opacity-100 group-hover:text-black">history</span>
+<span class="text-sm font-medium text-slate-600 group-hover:text-black truncate">Công nghệ bán dẫn...</span>
+</div>
+<div class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-50 group cursor-pointer transition-all">
+<span class="material-symbols-outlined text-lg opacity-40 group-hover:opacity-100 group-hover:text-black">history</span>
+<span class="text-sm font-medium text-slate-600 group-hover:text-black truncate">Xe điện và AI...</span>
+</div>
+<div class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-50 group cursor-pointer transition-all">
+<span class="material-symbols-outlined text-lg opacity-40 group-hover:opacity-100 group-hover:text-black">history</span>
+<span class="text-sm font-medium text-slate-600 group-hover:text-black truncate">Thị trường chip toàn cầu</span>
+</div>
+<div class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-50 group cursor-pointer transition-all">
+<span class="material-symbols-outlined text-lg opacity-40 group-hover:opacity-100 group-hover:text-black">history</span>
+<span class="text-sm font-medium text-slate-600 group-hover:text-black truncate">Mô hình ngôn ngữ lớn...</span>
+</div>
+</div>
+</div>
+</div>
+<div class="mt-auto border-t border-slate-100 pt-6">
+<a class="flex items-center gap-3 px-4 py-3 text-slate-500 hover:text-black hover:bg-slate-50 rounded-lg transition-all" href="#">
+<span class="material-symbols-outlined">settings</span>
+<span class="text-sm font-bold">Cài đặt</span>
+</a>
+</div>
+</aside>
+<!-- Main Content -->
+<main class="flex-1 ml-72 p-12 max-w-7xl">
+<!-- Header / Search -->
+<header class="mb-16">
+<div class="max-w-3xl mx-auto">
+<div class="relative group">
+<div class="absolute inset-y-0 left-6 flex items-center pointer-events-none">
+<span class="material-symbols-outlined text-black font-bold">search</span>
+</div>
+<input class="w-full pl-16 pr-32 py-5 bg-white rounded-full border-2 border-black focus:ring-0 focus:border-black text-lg font-medium placeholder:text-slate-300 transition-all shadow-[8px_8px_0px_0px_rgba(0,0,0,0.05)]" placeholder="Khám phá tin tức AI thế giới..." type="text"/>
+<div class="absolute inset-y-0 right-3 flex items-center">
+<button class="bg-black text-white px-8 py-3 rounded-full font-bold text-sm hover:bg-slate-800 transition-colors uppercase tracking-wider">Tìm kiếm</button>
+</div>
+</div>
+<!-- Filters & Voice Selection -->
+<div class="flex items-center justify-center gap-4 mt-8">
+<!-- Refined Voice Selection UI -->
+<div class="relative group/voice">
+<button class="flex items-center gap-3 px-5 py-2.5 bg-white border border-black/10 hover:border-black rounded-full text-xs font-bold text-black uppercase tracking-widest transition-all">
+<span class="material-symbols-outlined text-sm">record_voice_over</span>
+<span>Giọng đọc: Nam (Bắc)</span>
+<span class="material-symbols-outlined text-sm">expand_more</span>
+</button>
+<!-- Tooltip-style accessible dropdown indicator (visual only) -->
+<div class="hidden group-hover/voice:block absolute top-full mt-2 left-0 w-48 bg-white border border-black p-2 z-20 shadow-xl">
+<div class="text-[10px] font-black text-slate-400 p-2 border-b border-slate-100 mb-1">CHỌN GIỌNG NÓI</div>
+<div class="p-2 hover:bg-slate-50 text-xs font-bold cursor-pointer">Nam (Miền Bắc)</div>
+<div class="p-2 hover:bg-slate-50 text-xs font-bold cursor-pointer">Nữ (Miền Bắc)</div>
+<div class="p-2 hover:bg-slate-50 text-xs font-bold cursor-pointer">Nam (Miền Nam)</div>
+<div class="p-2 hover:bg-slate-50 text-xs font-bold cursor-pointer">Nữ (Miền Nam)</div>
+</div>
+</div>
+<button class="flex items-center gap-2 px-5 py-2.5 bg-white border border-black/10 hover:border-black rounded-full text-xs font-bold text-black uppercase tracking-widest transition-all">
+<span>Thời gian</span>
+<span class="material-symbols-outlined text-sm">expand_more</span>
+</button>
+<button class="flex items-center gap-2 px-5 py-2.5 bg-white border border-black/10 hover:border-black rounded-full text-xs font-bold text-black uppercase tracking-widest transition-all">
+<span>Nguồn tin</span>
+<span class="material-symbols-outlined text-sm">expand_more</span>
+</button>
+<div class="h-4 w-px bg-black/10 mx-2"></div>
+<button class="p-2.5 text-black hover:bg-black hover:text-white rounded-full transition-all">
+<span class="material-symbols-outlined text-lg">tune</span>
+</button>
+</div>
+</div>
+</header>
+<!-- AI Summary Card -->
+<section class="mb-20">
+<div class="relative p-10 border-2 border-black bg-white overflow-hidden shadow-[12px_12px_0px_0px_rgba(0,0,0,0.03)]">
+<div class="relative z-10 flex flex-col md:flex-row gap-12 items-start">
+<div class="flex-1">
+<div class="flex items-center gap-3 mb-6">
+<span class="w-8 h-[2px] bg-black"></span>
+<h2 class="text-xs font-black text-black tracking-[0.3em] uppercase">Bản tin tổng hợp thông minh</h2>
+</div>
+<h3 class="text-4xl font-black tracking-tighter mb-6 text-black leading-[1.1]">Xu hướng Trí tuệ Nhân tạo nổi bật trong tuần qua</h3>
+<p class="text-slate-600 leading-relaxed mb-10 text-lg max-w-2xl font-medium">
+                        Trong tuần này, thế giới AI chứng kiến sự bùng nổ của các mô hình đa phương thức mới. Nổi bật là việc tích hợp sâu rộng AI vào các hệ điều hành, giúp tối ưu hóa hiệu suất làm việc. Các chuyên gia dự báo một làn sóng ứng dụng AI trong y tế và giáo dục sẽ sớm định hình lại thị trường lao động toàn cầu.
+                    </p>
+<div class="flex items-center gap-6">
+<button class="flex items-center gap-3 px-8 py-4 bg-black text-white font-black text-xs uppercase tracking-widest hover:bg-slate-800 transition-all">
+<span class="material-symbols-outlined text-lg">play_arrow</span>
+<span>Nghe bản tin</span>
+</button>
+<button class="flex items-center gap-3 px-8 py-4 bg-white border-2 border-black text-black font-black text-xs uppercase tracking-widest hover:bg-slate-50 transition-all">
+<span class="material-symbols-outlined text-lg">content_copy</span>
+<span>Sao chép tóm tắt</span>
+</button>
+</div>
+</div>
+<div class="hidden lg:block w-64 h-64 border-2 border-black p-2 bg-white">
+<img alt="AI Synthesis" class="w-full h-full object-cover" data-alt="Abstract visualization of flowing blue digital data particles and neural networks in a sleek modern style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAPtG9V8FkdCJxYYB-g3a27zd2Q7qGIX7PG1WlAwbscyhXpUznOkB_GA2ordqiEKnf5OdZwRePEGbsLPDJ36SXAv4C5ZakI3x2jfn3dzD13Jxpm4Cmbv5WcVmwIyOyxLLsAr2lpERlnbG0DclD_21vnn7IUnoiPEV1uIU46cNeDmznaAg6tCyDFw8W-6Pu7q0pHXVVUvUm7OgwyNZHdeET3j8FA0hsdhev4S6KOSQpQdDFPYPjcVoQCUDUFxReeJhXelUKNgFFqVEc"/>
+</div>
+</div>
+</div>
+</section>
+<!-- News Feed -->
+<section>
+<div class="flex items-center justify-between mb-10 border-b border-black pb-4">
+<h2 class="text-2xl font-black tracking-tight uppercase">Kết quả tìm kiếm</h2>
+<div class="flex items-center gap-2 text-[10px] font-black text-black tracking-[0.2em] uppercase">
+<span>Sắp xếp: Mới nhất</span>
+<span class="material-symbols-outlined text-sm">swap_vert</span>
+</div>
+</div>
+<div class="space-y-12">
+<!-- News Card 1 -->
+<article class="group flex gap-10">
+<div class="w-60 h-40 flex-shrink-0 border border-black overflow-hidden bg-slate-100">
+<img alt="Technology News" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105" data-alt="High-tech server room with glowing blue led lights on hardware equipment, futuristic data center aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB9HFilry0fIyC3DscauYjLBcnhk2gl5Odd_uLVbvtY90cpTN2aXlsOKS7yEkjCUtrpNzRXiVbjbyVXvJGS4ahkxe037N8aEsr6wK4wKW5LXD2bZ0_K-T4tvCwwESnm9l-A3JdhJxnTxQZD8kTAFS9yfel-cyYFaA7EvGIq8mwtIvWU5tUPjXpne00x5VlwmLld5NL6tiLACi-ShbTTQlpeyJweUfxOG1QBLq4KFHPmYcq3e118hnCfC0YncPcPtL3McTRLlVlolxk"/>
+</div>
+<div class="flex-1 flex flex-col">
+<div class="flex items-center gap-3 mb-4">
+<span class="text-[10px] font-black px-2 py-0.5 border border-black bg-black text-white tracking-widest uppercase">Tin tức</span>
+<span class="text-xs font-bold text-black">VnExpress</span>
+<span class="w-1 h-1 bg-black rounded-full"></span>
+<span class="text-xs font-bold text-slate-400">2 giờ trước</span>
+</div>
+<h3 class="text-2xl font-black tracking-tight mb-3 group-hover:underline underline-offset-4 decoration-2">OpenAI giới thiệu mô hình ngôn ngữ mới với khả năng suy luận vượt bậc</h3>
+<p class="text-slate-500 text-sm line-clamp-2 leading-relaxed font-medium mb-6">
+                        Mô hình mới tập trung vào việc giải quyết các bài toán logic phức tạp và khả năng lập trình, hứa hẹn sẽ làm thay đổi cách thức các kỹ sư tương tác với trí tuệ nhân tạo.
+                    </p>
+<div class="mt-auto flex items-center justify-between">
+<div class="flex items-center gap-8">
+<button class="text-[11px] font-black uppercase tracking-widest text-black hover:opacity-60 flex items-center gap-2">
+<span class="material-symbols-outlined text-lg">article</span>
+                                Đọc bài gốc
+                            </button>
+<button class="text-[11px] font-black uppercase tracking-widest text-slate-400 hover:text-black flex items-center gap-2 transition-colors">
+<span class="material-symbols-outlined text-lg">volume_up</span>
+                                Nghe tóm tắt
+                            </button>
+</div>
+<button class="p-2 text-black hover:bg-slate-50 rounded-full">
+<span class="material-symbols-outlined">share</span>
+</button>
+</div>
+</div>
+</article>
+<!-- News Card 2 -->
+<article class="group flex gap-10">
+<div class="w-60 h-40 flex-shrink-0 border border-black overflow-hidden bg-slate-100">
+<img alt="AI Hardware" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105" data-alt="Futuristic humanoid robot hand interacting with a digital interface glowing in a dark room" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAjjSXaNjdLwChMYhTZkgB7BuzocVKjtPv7XYW6p89zn_HfvHY7tkkSf6tKNjgKAYfqavBPy77KhvgPVSEqHzRmj4Gz-fKlP8GPA9UnA7sASg8TNZ_LeS3l-lWxK_QHncQCJMV96tQ_U9igGUQ_8ErxBrXKp5pFmZ_Vckw996viWOvYgidpJrxTsQgRKfhgqe-u-EciSu4d7MTfMK8F_pZATC9xMNCjRgrMS53u8EiDTKLTI0Kyayo9fRjotulO0V2zzFadmeZWw50"/>
+</div>
+<div class="flex-1 flex flex-col">
+<div class="flex items-center gap-3 mb-4">
+<span class="text-[10px] font-black px-2 py-0.5 border border-black bg-black text-white tracking-widest uppercase">Công nghệ</span>
+<span class="text-xs font-bold text-black">TechCrunch</span>
+<span class="w-1 h-1 bg-black rounded-full"></span>
+<span class="text-xs font-bold text-slate-400">5 giờ trước</span>
+</div>
+<h3 class="text-2xl font-black tracking-tight mb-3 group-hover:underline underline-offset-4 decoration-2">Cuộc đua chip AI: NVIDIA tiếp tục thống trị thị trường toàn cầu</h3>
+<p class="text-slate-500 text-sm line-clamp-2 leading-relaxed font-medium mb-6">
+                        Báo cáo tài chính mới nhất cho thấy doanh thu từ mảng trung tâm dữ liệu của NVIDIA tăng trưởng kỷ lục nhờ nhu cầu đào tạo mô hình AI tăng vọt.
+                    </p>
+<div class="mt-auto flex items-center justify-between">
+<div class="flex items-center gap-8">
+<button class="text-[11px] font-black uppercase tracking-widest text-black hover:opacity-60 flex items-center gap-2">
+<span class="material-symbols-outlined text-lg">article</span>
+                                Đọc bài gốc
+                            </button>
+<button class="text-[11px] font-black uppercase tracking-widest text-slate-400 hover:text-black flex items-center gap-2 transition-colors">
+<span class="material-symbols-outlined text-lg">volume_up</span>
+                                Nghe tóm tắt
+                            </button>
+</div>
+<button class="p-2 text-black hover:bg-slate-50 rounded-full">
+<span class="material-symbols-outlined">share</span>
+</button>
+</div>
+</div>
+</article>
+</div>
+<div class="mt-20 text-center">
+<button class="px-12 py-5 border-2 border-black bg-white text-black font-black text-xs uppercase tracking-[0.2em] hover:bg-black hover:text-white transition-all">Tải thêm tin mới</button>
+</div>
+</section>
+</main>
+</body></html>

frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json ADDED Viewed

	@@ -0,0 +1,29 @@

+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.5",
+    "quill": "^2.0.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.3.1"
+  }
+}

frontend/public/vite.svg ADDED Viewed

frontend/src/App.css ADDED Viewed

	@@ -0,0 +1,66 @@

+.material-symbols-outlined {
+	font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24;
+}
+@keyframes summary-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+@keyframes summary-shimmer {
+	0% {
+		background-position: -220px 0;
+	}
+	100% {
+		background-position: calc(220px + 100%) 0;
+	}
+}
+.summary-panel {
+	backdrop-filter: blur(2px);
+}
+.summary-spin {
+	animation: summary-spin 1.2s linear infinite;
+}
+.summary-shimmer {
+	background: linear-gradient(90deg, #e5e7eb 0px, #f8fafc 40px, #e5e7eb 80px);
+	background-size: 220px 100%;
+	animation: summary-shimmer 1.3s linear infinite;
+}
+@keyframes fade-in-up {
+	from {
+		opacity: 0;
+		transform: translateY(12px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+main section,
+main header {
+	animation: fade-in-up 0.45s ease-out both;
+}
+main section:nth-of-type(2) {
+	animation-delay: 80ms;
+}
+main section:nth-of-type(3) {
+	animation-delay: 160ms;
+}
+@media (max-width: 1023px) {
+	main section,
+	main header {
+		animation-duration: 0.35s;
+	}
+}

frontend/src/App.jsx ADDED Viewed

	@@ -0,0 +1,1288 @@

+import { useEffect, useRef, useState } from 'react'
+import SearchBox from './components/SearchBox'
+import FilterBar from './components/FilterBar'
+import NewsArticle from './components/NewsArticle'
+import SummaryBox from './components/SummaryBox'
+import HomeNewsGrid from './components/HomeNewsGrid'
+import apiService from './services/api.service'
+import './App.css'
+const HISTORY_KEY = 'newsai-search-history'
+const DAILY_SNAPSHOT_KEY = 'newsai-daily-snapshot'
+const MAX_HISTORY_ITEMS = 6
+const SUMMARY_TTS_STORAGE_KEY = 'newsai-summary-tts-jobs'
+const ARTICLE_TTS_STORAGE_KEY = 'newsai-article-tts-jobs'
+const ACTIVE_TTS_STATUSES = new Set(['queued', 'processing'])
+const createIdleTtsState = () => ({
+  key: '',
+  status: 'idle',
+  audioUrl: '',
+  error: '',
+  createdAt: '',
+  updatedAt: '',
+})
+const normalizeTtsState = (value) => {
+  if (!value || typeof value !== 'object') return createIdleTtsState()
+  return {
+    key: typeof value.key === 'string' ? value.key : '',
+    status: typeof value.status === 'string' ? value.status : 'idle',
+    audioUrl: typeof value.audioUrl === 'string' ? value.audioUrl : '',
+    error: typeof value.error === 'string' ? value.error : '',
+    createdAt: typeof value.createdAt === 'string' ? value.createdAt : '',
+    updatedAt: typeof value.updatedAt === 'string' ? value.updatedAt : '',
+  }
+}
+const normalizeTtsStateMap = (value) => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return {}
+  return Object.entries(value).reduce((accumulator, [key, state]) => {
+    if (!key || typeof key !== 'string') return accumulator
+    accumulator[key] = normalizeTtsState(state)
+    return accumulator
+  }, {})
+}
+const loadTtsStateMapFromStorage = (storageKey) => {
+  if (typeof window === 'undefined') return {}
+  try {
+    const raw = window.localStorage.getItem(storageKey)
+    if (!raw) return {}
+    const parsed = JSON.parse(raw)
+    return normalizeTtsStateMap(parsed)
+  } catch {
+    return {}
+  }
+}
+const saveTtsStateMapToStorage = (storageKey, value) => {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(value))
+  } catch {
+    // Ignore storage quota and browser privacy mode errors.
+  }
+}
+const getSummarySignature = (text = '', voice = '') => (text.trim() + voice).toLowerCase().replace(/\s+/g, ' ').slice(0, 280)
+const getArticleTtsSlot = (articleUrl, index) => {
+  if (typeof articleUrl === 'string' && articleUrl.trim() && articleUrl !== '#') {
+    return articleUrl
+  }
+  return `local-article-${index}`
+}
+const toTtsStateFromJob = (job, fallback = createIdleTtsState()) => {
+  return {
+    key: typeof job?.key === 'string' ? job.key : fallback.key,
+    status: typeof job?.status === 'string' ? job.status : fallback.status,
+    audioUrl: typeof job?.audioUrl === 'string' ? job.audioUrl : fallback.audioUrl,
+    error: typeof job?.error === 'string' ? job.error : '',
+    createdAt: typeof job?.createdAt === 'string' ? job.createdAt : fallback.createdAt,
+    updatedAt: typeof job?.updatedAt === 'string' ? job.updatedAt : fallback.updatedAt,
+  }
+}
+const isSameTtsState = (left, right) => {
+  if (!left && !right) return true
+  if (!left || !right) return false
+  return (
+    left.key === right.key &&
+    left.status === right.status &&
+    left.audioUrl === right.audioUrl &&
+    left.error === right.error &&
+    left.createdAt === right.createdAt &&
+    left.updatedAt === right.updatedAt
+  )
+}
+const getTtsErrorMessage = (error, fallbackMessage) => {
+  return error?.response?.data?.error || error?.response?.data?.details || error?.message || fallbackMessage
+}
+const getLocalDayKey = (date = new Date()) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+const formatDateForQuery = (date = new Date()) => {
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+};
+const getDailyAutoQuery = (date = new Date()) => `tin tức việt nam ${formatDateForQuery(date)}`;
+const createHistoryId = () => {
+  if (globalThis.crypto?.randomUUID) {
+    return globalThis.crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+};
+const normalizeHistoryEntry = (entry, index) => {
+  if (typeof entry === 'string') {
+    const query = entry.trim();
+    if (!query) return null;
+    return {
+      id: `legacy-${index}-${query.toLowerCase().replace(/\s+/g, '-')}`,
+      query,
+      createdAt: new Date(0).toISOString(),
+      dayKey: '',
+      autoDaily: false,
+      filters: {
+        voice: 'Bắc',
+        time: 'pd',
+        source: 'all',
+      },
+      articles: [],
+      summary: '',
+      summaryReady: false,
+      totalArticles: 0,
+    };
+  }
+  if (!entry || typeof entry !== 'object') return null;
+  const query = typeof entry.query === 'string' ? entry.query.trim() : '';
+  if (!query) return null;
+  return {
+    id: typeof entry.id === 'string' && entry.id ? entry.id : createHistoryId(),
+    query,
+    createdAt: typeof entry.createdAt === 'string' ? entry.createdAt : new Date().toISOString(),
+    dayKey: typeof entry.dayKey === 'string' ? entry.dayKey : '',
+    autoDaily: Boolean(entry.autoDaily),
+    filters: {
+      voice: entry.filters?.voice || 'Bắc',
+      time: entry.filters?.time || 'pd',
+      source: entry.filters?.source || 'all',
+    },
+    articles: Array.isArray(entry.articles) ? entry.articles : [],
+    summary: typeof entry.summary === 'string' ? entry.summary : '',
+    summaryReady:
+      typeof entry.summaryReady === 'boolean'
+        ? entry.summaryReady
+        : Boolean(typeof entry.summary === 'string' && entry.summary.trim().length > 0),
+    totalArticles: Number.isFinite(entry.totalArticles) ? entry.totalArticles : 0,
+  };
+};
+const loadHistoryFromStorage = () => {
+  if (typeof window === 'undefined') return [];
+  try {
+    const rawHistory = window.localStorage.getItem(HISTORY_KEY);
+    if (!rawHistory) return [];
+    const parsedHistory = JSON.parse(rawHistory);
+    if (!Array.isArray(parsedHistory)) return [];
+    return parsedHistory
+      .map((entry, index) => normalizeHistoryEntry(entry, index))
+      .filter((entry) => entry && !entry.autoDaily)
+      .slice(0, MAX_HISTORY_ITEMS);
+  } catch {
+    return [];
+  }
+};
+const loadDailySnapshotFromStorage = () => {
+  if (typeof window === 'undefined') return null;
+  try {
+    const rawSnapshot = window.localStorage.getItem(DAILY_SNAPSHOT_KEY);
+    if (!rawSnapshot) return null;
+    const parsedSnapshot = JSON.parse(rawSnapshot);
+    const normalizedSnapshot = normalizeHistoryEntry(parsedSnapshot, 0);
+    if (!normalizedSnapshot) return null;
+    return {
+      ...normalizedSnapshot,
+      autoDaily: true,
+    };
+  } catch {
+    return null;
+  }
+};
+const saveDailySnapshotToStorage = (entry) => {
+  if (typeof window === 'undefined') return;
+  try {
+    if (!entry) {
+      window.localStorage.removeItem(DAILY_SNAPSHOT_KEY);
+      return;
+    }
+    window.localStorage.setItem(DAILY_SNAPSHOT_KEY, JSON.stringify(entry));
+  } catch {
+    // Ignore storage quota and browser privacy mode errors.
+  }
+};
+function App() {
+  const [loading, setLoading] = useState(false);
+  const [summaryLoading, setSummaryLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [articles, setArticles] = useState([]);
+  const [summary, setSummary] = useState(null);
+  const [totalArticles, setTotalArticles] = useState(0);
+  // Individual article summaries
+  const [articleSummaries, setArticleSummaries] = useState({});
+  const [articleSummaryLoading, setArticleSummaryLoading] = useState({});
+  // Filter states
+  const [voice, setVoice] = useState('Bắc');
+  const [time, setTime] = useState('pd');
+  const [source, setSource] = useState('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchHistory, setSearchHistory] = useState([]);
+  const [historyReady, setHistoryReady] = useState(false);
+  const [summaryTtsJobs, setSummaryTtsJobs] = useState(() => loadTtsStateMapFromStorage(SUMMARY_TTS_STORAGE_KEY));
+  const [articleTtsJobs, setArticleTtsJobs] = useState(() => loadTtsStateMapFromStorage(ARTICLE_TTS_STORAGE_KEY));
+  const [isMobileSummaryOpen, setIsMobileSummaryOpen] = useState(false);
+  const [useDailyHomeLayout, setUseDailyHomeLayout] = useState(true);
+  const hasBootstrappedRef = useRef(false);
+  const handleSearchRef = useRef(() => {});
+  const closeMobileSummaryPanel = () => {
+    setIsMobileSummaryOpen(false);
+  };
+  const toggleMobileSummaryPanel = () => {
+    setIsMobileSummaryOpen((previous) => !previous);
+  };
+  useEffect(() => {
+    if (!historyReady || typeof window === 'undefined') return;
+    try {
+      const manualHistory = searchHistory.filter((entry) => !entry.autoDaily);
+      window.localStorage.setItem(HISTORY_KEY, JSON.stringify(manualHistory));
+    } catch {
+      // Ignore storage quota and browser privacy mode errors.
+    }
+  }, [searchHistory, historyReady]);
+  useEffect(() => {
+    saveTtsStateMapToStorage(SUMMARY_TTS_STORAGE_KEY, summaryTtsJobs);
+  }, [summaryTtsJobs]);
+  useEffect(() => {
+    saveTtsStateMapToStorage(ARTICLE_TTS_STORAGE_KEY, articleTtsJobs);
+  }, [articleTtsJobs]);
+  useEffect(() => {
+    const pendingSummaryJobs = Object.entries(summaryTtsJobs).filter(
+      ([, state]) => state.key && ACTIVE_TTS_STATUSES.has(state.status)
+    );
+    const pendingArticleJobs = Object.entries(articleTtsJobs).filter(
+      ([, state]) => state.key && ACTIVE_TTS_STATUSES.has(state.status)
+    );
+    if (pendingSummaryJobs.length === 0 && pendingArticleJobs.length === 0) {
+      return;
+    }
+    let canceled = false;
+    let pollTimer = null;
+    const fetchJobState = async (state) => {
+      try {
+        const job = await apiService.getTtsJob(state.key);
+        return toTtsStateFromJob(job, state);
+      } catch (error) {
+        if (error?.response?.status === 404) {
+          return {
+            ...state,
+            status: 'failed',
+            error: 'Không tìm thấy tiến trình TTS trên server.',
+          };
+        }
+        return state;
+      }
+    };
+    const pollPendingJobs = async () => {
+      const [summaryUpdates, articleUpdates] = await Promise.all([
+        Promise.all(
+          pendingSummaryJobs.map(async ([slot, state]) => {
+            const nextState = await fetchJobState(state);
+            return [slot, nextState];
+          })
+        ),
+        Promise.all(
+          pendingArticleJobs.map(async ([slot, state]) => {
+            const nextState = await fetchJobState(state);
+            return [slot, nextState];
+          })
+        ),
+      ]);
+      if (canceled) return;
+      if (summaryUpdates.length > 0) {
+        setSummaryTtsJobs((previous) => {
+          let changed = false;
+          const next = { ...previous };
+          summaryUpdates.forEach(([slot, nextState]) => {
+            const currentState = previous[slot];
+            if (!currentState || isSameTtsState(currentState, nextState)) return;
+            next[slot] = normalizeTtsState(nextState);
+            changed = true;
+          });
+          return changed ? next : previous;
+        });
+      }
+      if (articleUpdates.length > 0) {
+        setArticleTtsJobs((previous) => {
+          let changed = false;
+          const next = { ...previous };
+          articleUpdates.forEach(([slot, nextState]) => {
+            const currentState = previous[slot];
+            if (!currentState || isSameTtsState(currentState, nextState)) return;
+            next[slot] = normalizeTtsState(nextState);
+            changed = true;
+          });
+          return changed ? next : previous;
+        });
+      }
+      pollTimer = window.setTimeout(pollPendingJobs, 2200);
+    };
+    pollPendingJobs();
+    return () => {
+      canceled = true;
+      if (pollTimer) {
+        window.clearTimeout(pollTimer);
+      }
+    };
+  }, [summaryTtsJobs, articleTtsJobs]);
+  const mapBraveResultToArticle = (result) => {
+    // Helper function to strip HTML tags
+    const stripHtml = (html) => {
+      if (!html) return '';
+      const tmp = document.createElement('DIV');
+      tmp.innerHTML = html;
+      return tmp.textContent || tmp.innerText || '';
+    };
+    // Determine category color based on content or default
+    // Map từ Brave subtype sang UI style
+    const SUBTYPE_MAPPING = {
+      // Tin tức / Bài viết chung
+      article: { name: 'Tin tức', tone: 'news' },
+      news: { name: 'Thời sự', tone: 'news' },
+      // Mua sắm / Sản phẩm
+      product: { name: 'Mua sắm', tone: 'commerce' },
+      // Ẩm thực / Công thức
+      recipe: { name: 'Ẩm thực', tone: 'culture' },
+      // Hỏi đáp / Diễn đàn
+      qa: { name: 'Hỏi đáp', tone: 'discussion' },
+      discussion: { name: 'Thảo luận', tone: 'discussion' },
+      // Đánh giá / Review
+      review: { name: 'Review', tone: 'review' },
+      // Video (Cái này thường nằm ở type 'video_result' nhưng map luôn cho chắc)
+      video_result: { name: 'Video', tone: 'video' },
+      // Phim ảnh
+      movie: { name: 'Phim ảnh', tone: 'culture' },
+      // Mặc định (generic)
+      generic: { name: 'Kết quả', tone: 'generic' },
+    };
+    const getCategoryStyle = (subtype) => {
+      const key = subtype?.toLowerCase() || 'generic';
+      return SUBTYPE_MAPPING[key] || SUBTYPE_MAPPING.generic;
+    };
+    const style = getCategoryStyle(result.subtype);
+    return {
+      category: style.name,
+      categoryTone: style.tone,
+      source: result.profile?.name || result.meta_url?.hostname || 'Unknown',
+      timeAgo: result.age || "",
+      title: stripHtml(result.title) || 'Không có tiêu đề',
+      description: stripHtml(result.description) || '',
+      imageUrl: result.thumbnail?.src || result.thumbnail?.original || 'https://placehold.co/400x300?text=No+Image',
+      imageAlt: stripHtml(result.title) || 'News image',
+      articleUrl: result.url || '#'
+    };
+  };
+  const applyHistorySnapshot = (entry) => {
+    setError('');
+    setLoading(false);
+    setSummaryLoading(false);
+    setArticleSummaries({});
+    setArticleSummaryLoading({});
+    setArticles(Array.isArray(entry.articles) ? entry.articles : []);
+    setSummary(entry.summary || null);
+    setTotalArticles(entry.totalArticles || entry.articles?.length || 0);
+  };
+  const upsertHistoryEntry = ({ query, articles: nextArticles, summary: nextSummary, totalCount, autoDaily = false }) => {
+    const normalizedQuery = query.trim();
+    if (!normalizedQuery || !Array.isArray(nextArticles) || nextArticles.length === 0) return;
+    const entry = {
+      id: createHistoryId(),
+      query: normalizedQuery,
+      createdAt: new Date().toISOString(),
+      dayKey: getLocalDayKey(),
+      autoDaily,
+      filters: {
+        voice,
+        time,
+        source,
+      },
+      articles: nextArticles,
+      summary: nextSummary || '',
+      summaryReady: Boolean(nextSummary && nextSummary.trim().length > 0),
+      totalArticles: totalCount || nextArticles.length,
+    };
+    if (autoDaily) {
+      saveDailySnapshotToStorage(entry);
+      return;
+    }
+    setSearchHistory((previous) => {
+      return [entry, ...previous].slice(0, MAX_HISTORY_ITEMS);
+    });
+  };
+  const handleHistorySelect = (entry) => {
+    if (!entry) return;
+    const selectedEntry = searchHistory.find((item) => item.id === entry.id) || entry;
+    const hasSnapshot = (selectedEntry.articles?.length || 0) > 0 || Boolean(selectedEntry.summary);
+    const shouldUseHomeLayout = Boolean(selectedEntry.autoDaily && selectedEntry.dayKey === getLocalDayKey());
+    setUseDailyHomeLayout(shouldUseHomeLayout);
+    setSearchQuery(selectedEntry.query || '');
+    setVoice(selectedEntry.filters?.voice || 'Bắc');
+    setTime(selectedEntry.filters?.time || 'pd');
+    setSource(selectedEntry.filters?.source || 'all');
+    closeMobileSummaryPanel();
+    if (hasSnapshot) {
+      applyHistorySnapshot(selectedEntry);
+      setSearchHistory((previous) => {
+        const filtered = previous.filter((item) => item.id !== selectedEntry.id);
+        return [selectedEntry, ...filtered].slice(0, MAX_HISTORY_ITEMS);
+      });
+      return;
+    }
+    handleSearch(selectedEntry.query, { autoDaily: false });
+  };
+  const handleArticleSummarize = async (articleUrl, index) => {
+    const currentSummary = articleSummaries[index];
+    // If summary exists, toggle visibility
+    if (currentSummary?.content) {
+      setArticleSummaries(prev => ({
+        ...prev,
+        [index]: {
+          ...prev[index],
+          visible: !prev[index].visible
+        }
+      }));
+      return;
+    }
+    // If no summary yet, fetch it
+    setArticleSummaryLoading(prev => ({ ...prev, [index]: true }));
+    const articleTtsSlot = getArticleTtsSlot(articleUrl, index);
+    try {
+      const data = await apiService.scrape(articleUrl);
+      const summaryData = await apiService.summarizeNews(data.text, data.title);
+      setArticleSummaries(prev => ({
+        ...prev,
+        [index]: {
+          content: summaryData.summary,
+          visible: true
+        }
+      }));
+      setArticleTtsJobs((previous) => {
+        if (!previous[articleTtsSlot]) return previous;
+        const next = { ...previous };
+        delete next[articleTtsSlot];
+        return next;
+      });
+    } catch (err) {
+      console.error('Article summarize error:', err);
+      setArticleSummaries(prev => ({
+        ...prev,
+        [index]: {
+          content: 'Không thể tóm tắt bài viết này: ' + (err.response?.data?.error || err.message),
+          visible: true
+        }
+      }));
+    } finally {
+      setArticleSummaryLoading(prev => ({ ...prev, [index]: false }));
+    }
+  };
+  const handleGenerateSummaryTts = async () => {
+    const summaryText = typeof summary === 'string' ? summary.trim() : '';
+    if (!summaryText) return;
+    const signature = getSummarySignature(summaryText, voice);
+    if (!signature) return;
+    const currentState = summaryTtsJobs[signature] || createIdleTtsState();
+    if (ACTIVE_TTS_STATUSES.has(currentState.status)) return;
+    const VOICE_MAP = {
+      'Bắc': 'nam_bac.wav',
+      'Nam': 'nu_nam.wav',
+      'Trung': 'nam_trung.wav'
+    };
+    setSummaryTtsJobs((previous) => ({
+      ...previous,
+      [signature]: {
+        ...normalizeTtsState(previous[signature]),
+        status: 'queued',
+        audioUrl: '',
+        error: '',
+      },
+    }));
+    try {
+      const speakerAudio = VOICE_MAP[voice] || 'nam_bac.wav';
+      const createdJob = await apiService.createTtsJob(summaryText, {
+        language: 'vi',
+        speakerAudio
+      });
+      if (!createdJob?.key) {
+        throw new Error('Không nhận được key TTS từ server.');
+      }
+      setSummaryTtsJobs((previous) => ({
+        ...previous,
+        [signature]: {
+          ...normalizeTtsState(previous[signature]),
+          key: createdJob.key,
+          status: createdJob.status || 'queued',
+          createdAt: createdJob.createdAt || previous[signature]?.createdAt || '',
+          error: '',
+        },
+      }));
+    } catch (err) {
+      setSummaryTtsJobs((previous) => ({
+        ...previous,
+        [signature]: {
+          ...normalizeTtsState(previous[signature]),
+          status: 'failed',
+          error: getTtsErrorMessage(err, 'Không thể tạo audio cho bản tóm tắt.'),
+        },
+      }));
+    }
+  };
+  const handleGenerateArticleTts = async (articleUrl, index) => {
+    const summaryText = articleSummaries[index]?.content?.trim();
+    const slot = getArticleTtsSlot(articleUrl, index);
+    if (!summaryText || summaryText.startsWith('Không thể tóm tắt')) {
+      setArticleTtsJobs((previous) => ({
+        ...previous,
+        [slot]: {
+          ...normalizeTtsState(previous[slot]),
+          status: 'failed',
+          error: 'Hãy tạo bản tóm tắt hợp lệ trước khi chuyển thành giọng nói.',
+          audioUrl: '',
+        },
+      }));
+      return;
+    }
+    const currentState = articleTtsJobs[slot] || createIdleTtsState();
+    if (ACTIVE_TTS_STATUSES.has(currentState.status)) return;
+    const VOICE_MAP = {
+      'Bắc': 'nam_bac.wav',
+      'Nam': 'nu_nam.wav',
+      'Trung': 'nam_trung.wav'
+    };
+    try {
+      const speakerAudio = VOICE_MAP[voice] || 'nam_bac.wav';
+      const createdJob = await apiService.createTtsJob(summaryText, {
+        language: 'vi',
+        speakerAudio
+      });
+      if (!createdJob?.key) {
+        throw new Error('Không nhận được key TTS từ server.');
+      }
+      setArticleTtsJobs((previous) => ({
+        ...previous,
+        [slot]: {
+          ...normalizeTtsState(previous[slot]),
+          key: createdJob.key,
+          status: createdJob.status || 'queued',
+          createdAt: createdJob.createdAt || previous[slot]?.createdAt || '',
+          error: '',
+        },
+      }));
+    } catch (err) {
+      setArticleTtsJobs((previous) => ({
+        ...previous,
+        [slot]: {
+          ...normalizeTtsState(previous[slot]),
+          status: 'failed',
+          error: getTtsErrorMessage(err, 'Không thể tạo audio cho bài viết này.'),
+        },
+      }));
+    }
+  };
+  const handleDailyCardSummarize = async (articleUrl) => {
+    if (!articleUrl || articleUrl === '#') return;
+    setError('');
+    setSummaryLoading(true);
+    try {
+      const data = await apiService.scrape(articleUrl);
+      const summaryData = await apiService.summarizeNews(data.text, data.title);
+      setSummary(summaryData.summary || '');
+      setTotalArticles(1);
+      setIsMobileSummaryOpen(true);
+    } catch (err) {
+      setError('Không thể tóm tắt bài viết này: ' + (err.response?.data?.error || err.message));
+    } finally {
+      setSummaryLoading(false);
+    }
+  };
+  const handleSearch = async (rawQuery = searchQuery, options = {}) => {
+    const { autoDaily = false } = options;
+    const query = rawQuery.trim();
+    if (!query) return;
+    closeMobileSummaryPanel();
+    setUseDailyHomeLayout(Boolean(autoDaily));
+    setSearchQuery(query);
+    setLoading(true);
+    setSummaryLoading(false);
+    setError('');
+    setSummary(null);
+    setTotalArticles(0);
+    setArticles([]);
+    setArticleSummaries({});
+    setArticleSummaryLoading({});
+    const isUrl = /^https?:\/\//i.test(query);
+    let nextArticles = [];
+    let nextSummary = '';
+    let nextTotalArticles = 0;
+    try {
+      if (isUrl) {
+        // Scrape the URL and summarize
+        const data = await apiService.scrape(query);
+        console.log('Scraped data:', data);
+        // Create article from scraped content
+        const article = {
+          category: "Tin tức",
+          categoryTone: 'news',
+          source: new URL(query).hostname,
+          timeAgo: "Vừa xong",
+          title: data.title || 'Không có tiêu đề',
+          description: data.text?.substring(0, 200) + '...' || '',
+          imageUrl: 'https://placehold.co/400x300?text=No+Image',
+          imageAlt: data.title || 'Scraped content',
+          articleUrl: query
+        };
+        nextArticles = [article];
+        setArticles(nextArticles);
+        setLoading(false);
+        setSummaryLoading(true);
+        // Tóm tắt bài báo đơn lẻ
+        try {
+          const summaryData = await apiService.summarizeNews(data.text, data.title);
+          nextSummary = summaryData.summary || '';
+          nextTotalArticles = 1;
+          setSummary(nextSummary || null);
+          setTotalArticles(1);
+        } catch (err) {
+          console.error('Summarize error:', err);
+          setError('Không thể tóm tắt bài viết này.');
+        } finally {
+          setSummaryLoading(false);
+        }
+      } else {
+        // Search first to show articles immediately
+        const searchOptions = {
+          freshness: time,
+          language: source === 'all' ? 'vi' : source
+        };
+        console.log('Searching...');
+        const searchData = await apiService.search(query, searchOptions);
+        console.log('Search results:', searchData);
+        // Check for family_friendly at the top level
+        if (searchData.web?.family_friendly === false || searchData.news?.family_friendly === false) {
+          setError('Kết quả tìm kiếm chứa nội dung không phù hợp. Vui lòng thử từ khóa khác.');
+          setArticles([]);
+          setLoading(false);
+          return;
+        }
+        // Map Brave results to articles and show immediately
+        let urls = [];
+        let hasUnsafeContent = false;
+        if (searchData.news?.results && searchData.news.results.length > 0) {
+          // Check for unsafe content
+          const unsafeResults = searchData.news.results.filter(r => r.family_friendly === false);
+          if (unsafeResults.length > 0) {
+            hasUnsafeContent = true;
+          }
+          const mappedArticles = searchData.news.results
+            .filter(result => {
+              // Loại bỏ nội dung không phù hợp
+              if (result.family_friendly === false) {
+                return false;
+              }
+              // Loại bỏ video và image results
+              const isVideoType = result.type === 'video_result' || result.subtype === 'video';
+              const hasVideo = result.video !== undefined;
+              const isImage = result.type === 'image_result';
+              const isVideoUrl = result.url?.includes('youtube.com') ||
+                                  result.url?.includes('tiktok.com') ||
+                                  result.url?.includes('youtu.be');
+              return !isVideoType && !hasVideo && !isImage && !isVideoUrl;
+            })
+            .slice(0, 10)
+            .map((result) => mapBraveResultToArticle(result));
+          // Check if all results were filtered out
+          if (mappedArticles.length === 0) {
+            if (hasUnsafeContent) {
+              setError('Kết quả tìm kiếm chứa nội dung không phù hợp. Vui lòng thử từ khóa khác.');
+            } else {
+              setError('Không tìm thấy kết quả nào');
+            }
+            setArticles([]);
+            setLoading(false);
+            return;
+          }
+          nextArticles = mappedArticles;
+          setArticles(nextArticles);
+          urls = searchData.news.results
+            .filter(result => {
+              if (result.family_friendly === false) {
+                return false;
+              }
+              const isVideoType = result.type === 'video_result' || result.subtype === 'video';
+              const hasVideo = result.video !== undefined;
+              const isImage = result.type === 'image_result';
+              const isVideoUrl = result.url?.includes('youtube.com') ||
+                                  result.url?.includes('tiktok.com') ||
+                                  result.url?.includes('youtu.be');
+              return !isVideoType && !hasVideo && !isImage && !isVideoUrl;
+            })
+            .slice(0, 10)
+            .map(r => r.url);
+        } else if (searchData.web?.results && searchData.web.results.length > 0) {
+          // Check for unsafe content
+          const unsafeResults = searchData.web.results.filter(r => r.family_friendly === false);
+          if (unsafeResults.length > 0) {
+            hasUnsafeContent = true;
+          }
+          const mappedArticles = searchData.web.results
+            .filter(result => {
+              // Loại bỏ nội dung không phù hợp
+              if (result.family_friendly === false) {
+                return false;
+              }
+              // Chỉ lấy search_result thông thường, bỏ video/image
+              const isSearchResult = result.type === 'search_result';
+              const isVideoType = result.subtype === 'video';
+              const hasVideo = result.video !== undefined;
+              const isImage = result.type === 'image_result';
+              const isVideoUrl = result.url?.includes('youtube.com') ||
+                                  result.url?.includes('tiktok.com') ||
+                                  result.url?.includes('youtu.be');
+              return isSearchResult && !isVideoType && !hasVideo && !isImage && !isVideoUrl;
+            })
+            .slice(0, 10)
+            .map((result) => mapBraveResultToArticle(result));
+          // Check if all results were filtered out
+          if (mappedArticles.length === 0) {
+            if (hasUnsafeContent) {
+              setError('Kết quả tìm kiếm chứa nội dung không phù hợp. Vui lòng thử từ khóa khác.');
+            } else {
+              setError('Không tìm thấy kết quả nào');
+            }
+            setArticles([]);
+            setLoading(false);
+            return;
+          }
+          nextArticles = mappedArticles;
+          setArticles(nextArticles);
+          urls = searchData.web.results
+            .filter(result => {
+              if (result.family_friendly === false) {
+                return false;
+              }
+              const isSearchResult = result.type === 'search_result';
+              const isVideoType = result.subtype === 'video';
+              const hasVideo = result.video !== undefined;
+              const isImage = result.type === 'image_result';
+              const isVideoUrl = result.url?.includes('youtube.com') ||
+                                  result.url?.includes('tiktok.com') ||
+                                  result.url?.includes('youtu.be');
+              return isSearchResult && !isVideoType && !hasVideo && !isImage && !isVideoUrl;
+            })
+            .slice(0, 10)
+            .map(r => r.url);
+        } else {
+          setError('Không tìm thấy kết quả nào');
+          setArticles([]);
+          setLoading(false);
+          return;
+        }
+        // Now summarize in background
+        setLoading(false); // End search loading
+        setSummaryLoading(true); // Start summary loading
+        try {
+          console.log('Summarizing articles...');
+          const data = await apiService.scrapeAndSummarize(urls, query);
+          console.log('Summary results:', data);
+          if (data.summary) {
+            nextSummary = data.summary;
+            nextTotalArticles = data.totalArticles || nextArticles.length;
+            setSummary(nextSummary);
+            setTotalArticles(nextTotalArticles);
+          }
+        } catch (err) {
+          console.error('Summarize error:', err);
+          setError('Không thể tóm tắt: ' + (err.response?.data?.error || err.message));
+        } finally {
+          setSummaryLoading(false);
+        }
+      }
+      if (nextArticles.length > 0) {
+        upsertHistoryEntry({
+          query,
+          articles: nextArticles,
+          summary: nextSummary,
+          totalCount: nextTotalArticles || nextArticles.length,
+          autoDaily,
+        });
+      }
+    } catch (err) {
+      setError(err.response?.data?.error || 'Đã xảy ra lỗi khi xử lý yêu cầu');
+      console.error('Error:', err);
+      setLoading(false);
+      setSummaryLoading(false);
+    } finally {
+      // Ensure loading is stopped
+      if (isUrl) {
+        setLoading(false);
+      }
+    }
+  };
+  const handleDailyResummary = async () => {
+    if (loading || summaryLoading) return;
+    const urls = articles
+      .map((article) => article.articleUrl)
+      .filter((url) => typeof url === 'string' && /^https?:\/\//i.test(url));
+    if (urls.length === 0) {
+      setError('Không có bài viết hợp lệ để tóm tắt lại.');
+      return;
+    }
+    const dailyQuery = getDailyAutoQuery();
+    setError('');
+    setSummaryLoading(true);
+    try {
+      const data = await apiService.scrapeAndSummarize(urls, dailyQuery);
+      const nextSummary = data.summary || '';
+      if (!nextSummary.trim()) {
+        setError('Không nhận được bản tóm tắt mới. Vui lòng thử lại.');
+        return;
+      }
+      const nextTotalArticles = data.totalArticles || urls.length;
+      setSummary(nextSummary);
+      setTotalArticles(nextTotalArticles);
+      upsertHistoryEntry({
+        query: dailyQuery,
+        articles,
+        summary: nextSummary,
+        totalCount: nextTotalArticles,
+        autoDaily: true,
+      });
+    } catch (err) {
+      setError('Không thể tóm tắt lại: ' + (err.response?.data?.error || err.message));
+    } finally {
+      setSummaryLoading(false);
+    }
+  };
+  handleSearchRef.current = handleSearch;
+  const summarySignature = getSummarySignature(summary || '');
+  const summaryTtsState = summarySignature
+    ? normalizeTtsState(summaryTtsJobs[summarySignature])
+    : createIdleTtsState();
+  // Bootstrap cache on first render:
+  // 1) Load manual search history for sidebar
+  // 2) Load today's daily snapshot from dedicated storage
+  // 3) Otherwise trigger daily auto-search once
+  useEffect(() => {
+    if (hasBootstrappedRef.current) return;
+    hasBootstrappedRef.current = true;
+    const persistedHistory = loadHistoryFromStorage();
+    const persistedDailySnapshot = loadDailySnapshotFromStorage();
+    setSearchHistory(persistedHistory);
+    setHistoryReady(true);
+    const todayKey = getLocalDayKey();
+    const dailyAutoQuery = getDailyAutoQuery();
+    const todayAutoEntry =
+      persistedDailySnapshot &&
+      persistedDailySnapshot.dayKey === todayKey &&
+      persistedDailySnapshot.articles.length > 0 &&
+      persistedDailySnapshot.summaryReady
+        ? persistedDailySnapshot
+        : null;
+    if (todayAutoEntry) {
+      setSearchQuery(dailyAutoQuery);
+      setUseDailyHomeLayout(true);
+      setVoice(todayAutoEntry.filters?.voice || 'Bắc');
+      setTime(todayAutoEntry.filters?.time || 'pd');
+      setSource(todayAutoEntry.filters?.source || 'all');
+      applyHistorySnapshot(todayAutoEntry);
+      return;
+    }
+    setSearchQuery(dailyAutoQuery);
+    handleSearchRef.current(dailyAutoQuery, { autoDaily: true });
+  }, []);
+  return (
+    <div className="min-h-screen bg-background text-on-background font-body selection:bg-black selection:text-white">
+      <aside className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-40 lg:flex lg:w-72 lg:flex-col lg:border-r lg:border-black/10 lg:bg-white lg:px-8 lg:py-8">
+        <div className="mb-10 flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center bg-black text-white">
+            <span className="material-symbols-outlined text-2xl">neurology</span>
+          </div>
+          <div>
+            <h1 className="text-xl font-black uppercase tracking-tight">NewsAI</h1>
+            <p className="mt-1 text-[10px] font-extrabold uppercase tracking-[0.2em] text-slate-500">
+              Digital Curator
+            </p>
+          </div>
+        </div>
+        <div className="flex-1">
+          <h2 className="mb-5 flex items-center gap-2 text-[11px] font-black uppercase tracking-[0.15em] text-black">
+            <span className="material-symbols-outlined text-lg">history</span>
+            Lịch sử tìm kiếm
+          </h2>
+          {searchHistory.length > 0 ? (
+            <div className="flex flex-col gap-1">
+              {searchHistory.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => handleHistorySelect(item)}
+                  className="group flex items-center gap-3 rounded-lg px-4 py-3 text-left transition-all hover:bg-slate-50"
+                >
+                  <span className="material-symbols-outlined text-lg opacity-40 transition-all group-hover:text-black group-hover:opacity-100">
+                    history
+                  </span>
+                  <span className="truncate text-sm font-medium text-slate-600 group-hover:text-black">
+                    {item.query}
+                  </span>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <p className="rounded-lg border border-dashed border-slate-200 p-4 text-sm text-slate-400">
+              Chưa có lượt tìm kiếm nào.
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          className="mt-auto flex items-center gap-3 rounded-lg px-4 py-3 text-slate-500 transition-all hover:bg-slate-50 hover:text-black"
+        >
+          <span className="material-symbols-outlined">settings</span>
+          <span className="text-sm font-bold">Cài đặt</span>
+        </button>
+      </aside>
+      <main className="relative w-full lg:pl-72">
+        <div className="w-full px-2 pb-12 pt-4 md:px-4 lg:px-6 lg:pt-6">
+        <section className="mb-8 rounded-xl border border-black/10 bg-white p-5 lg:hidden">
+          <div className="mb-4 flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center bg-black text-white">
+              <span className="material-symbols-outlined text-2xl">neurology</span>
+            </div>
+            <div>
+              <h1 className="text-xl font-black uppercase tracking-tight">NewsAI</h1>
+              <p className="text-[10px] font-extrabold uppercase tracking-[0.2em] text-slate-500">Digital Curator</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2 overflow-x-auto pb-1">
+            {searchHistory.length > 0 ? searchHistory.map((item) => (
+              <button
+                key={`mobile-${item.id}`}
+                type="button"
+                onClick={() => handleHistorySelect(item)}
+                className="whitespace-nowrap rounded-full border border-black/20 px-3 py-1.5 text-xs font-bold text-slate-600 transition-all hover:border-black hover:text-black"
+              >
+                {item.query}
+              </button>
+            )) : (
+              <p className="text-xs font-medium text-slate-400">Lịch sử tìm kiếm sẽ xuất hiện tại đây.</p>
+            )}
+          </div>
+        </section>
+        <header className="mb-8">
+          <div className="w-full">
+            <SearchBox
+              value={searchQuery}
+              onChange={setSearchQuery}
+              onSearch={handleSearch}
+              loading={loading}
+            />
+            <div className="mt-7">
+              <FilterBar
+                voice={voice}
+                onVoiceChange={setVoice}
+                time={time}
+                onTimeChange={setTime}
+                source={source}
+                onSourceChange={setSource}
+              />
+            </div>
+            {error && (
+              <div className="mt-6 border border-red-300 bg-red-50 px-4 py-3 text-sm font-medium text-red-700">
+                {error}
+              </div>
+            )}
+          </div>
+        </header>
+        <div className="grid items-start gap-6 xl:grid-cols-2">
+          <section>
+            <div className="mb-10 flex items-center justify-between border-b border-black pb-4">
+              <h2 className="text-2xl font-black uppercase tracking-tight">
+                {useDailyHomeLayout ? 'Bản tin đầu ngày' : 'Kết quả tìm kiếm'}
+              </h2>
+              {!useDailyHomeLayout && (
+                <div className="flex items-center gap-1 text-[10px] font-black uppercase tracking-[0.2em] text-black/70">
+                  <span>Sắp xếp: Mới nhất</span>
+                  <span className="material-symbols-outlined text-sm">swap_vert</span>
+                </div>
+              )}
+            </div>
+            {useDailyHomeLayout ? (
+              <HomeNewsGrid
+                articles={articles}
+                loading={loading}
+                onSummarizeArticle={handleDailyCardSummarize}
+              />
+            ) : (
+              <>
+                {loading && (
+                  <div className="flex min-h-56 flex-col items-center justify-center rounded-xl border border-black/10 bg-white text-center">
+                    <span className="material-symbols-outlined animate-spin text-4xl text-black/40">progress_activity</span>
+                    <p className="mt-3 text-sm font-semibold text-slate-500">Đang phân tích và tìm bài viết...</p>
+                  </div>
+                )}
+                {!loading && articles.length === 0 && (
+                  <div className="flex min-h-56 flex-col items-center justify-center rounded-xl border border-dashed border-black/20 bg-white text-center">
+                    <span className="material-symbols-outlined text-6xl text-black/20">search</span>
+                    <p className="mt-4 text-lg font-medium text-slate-500">
+                      Nhập từ khóa hoặc đường dẫn bài báo để bắt đầu.
+                    </p>
+                  </div>
+                )}
+                {!loading && articles.length > 0 && (
+                  <div className="space-y-12">
+                    {articles.map((article, index) => (
+                      <NewsArticle
+                        key={`${article.articleUrl}-${index}`}
+                        {...article}
+                        onSummarize={() => handleArticleSummarize(article.articleUrl, index)}
+                        onGenerateTts={() => handleGenerateArticleTts(article.articleUrl, index)}
+                        summary={articleSummaries[index]?.content}
+                        summaryVisible={articleSummaries[index]?.visible}
+                        summaryLoading={articleSummaryLoading[index]}
+                        ttsStatus={articleTtsJobs[getArticleTtsSlot(article.articleUrl, index)]?.status || 'idle'}
+                        ttsAudioUrl={articleTtsJobs[getArticleTtsSlot(article.articleUrl, index)]?.audioUrl || ''}
+                        ttsError={articleTtsJobs[getArticleTtsSlot(article.articleUrl, index)]?.error || ''}
+                      />
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+          </section>
+          <aside className="hidden md:block xl:sticky xl:top-8">
+            <SummaryBox
+              summary={summary}
+              totalArticles={totalArticles}
+              loading={summaryLoading}
+              onGenerateTts={handleGenerateSummaryTts}
+              ttsStatus={summaryTtsState.status}
+              ttsAudioUrl={summaryTtsState.audioUrl}
+              ttsError={summaryTtsState.error}
+              onResummarize={useDailyHomeLayout ? handleDailyResummary : undefined}
+              resummarizeDisabled={loading || summaryLoading || articles.length === 0}
+            />
+          </aside>
+        </div>
+        <div className="fixed bottom-5 right-5 z-40 md:hidden">
+          <button
+            type="button"
+            onClick={toggleMobileSummaryPanel}
+            aria-expanded={isMobileSummaryOpen}
+            className="flex items-center gap-2 rounded-full border border-black bg-black px-5 py-3 text-xs font-black uppercase tracking-[0.14em] text-white shadow-lg transition-all hover:bg-slate-800"
+          >
+            <span className={`material-symbols-outlined text-base ${summaryLoading ? 'animate-spin' : ''}`}>
+              {summaryLoading ? 'progress_activity' : isMobileSummaryOpen ? 'close' : 'summarize'}
+            </span>
+            {summaryLoading ? 'Đang tóm tắt' : isMobileSummaryOpen ? 'Đóng tóm tắt' : 'Mở tóm tắt'}
+          </button>
+        </div>
+        <div
+          className={`fixed inset-0 z-50 md:hidden ${isMobileSummaryOpen ? 'pointer-events-auto' : 'pointer-events-none'}`}
+          aria-hidden={!isMobileSummaryOpen}
+          onClick={closeMobileSummaryPanel}
+        >
+          <div
+            className={`absolute inset-0 bg-black/45 transition-opacity duration-300 ${isMobileSummaryOpen ? 'opacity-100' : 'opacity-0'}`}
+          />
+          <section
+            onClick={(event) => event.stopPropagation()}
+            className={`absolute bottom-0 left-0 right-0 max-h-[88vh] overflow-y-auto rounded-t-2xl border-t-2 border-black bg-white p-4 transition-transform duration-300 ${isMobileSummaryOpen ? 'translate-y-0' : 'translate-y-full'}`}
+          >
+            <div className="mb-3 flex items-center justify-between">
+              <h3 className="text-sm font-black uppercase tracking-[0.15em] text-black">Tóm tắt thông minh</h3>
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  closeMobileSummaryPanel();
+                }}
+                className="rounded-full border border-black/20 p-2 text-black transition-all hover:bg-slate-100"
+                aria-label="Đóng"
+              >
+                <span className="material-symbols-outlined">close</span>
+              </button>
+            </div>
+            <SummaryBox
+              summary={summary}
+              totalArticles={totalArticles}
+              loading={summaryLoading}
+              onGenerateTts={handleGenerateSummaryTts}
+              ttsStatus={summaryTtsState.status}
+              ttsAudioUrl={summaryTtsState.audioUrl}
+              ttsError={summaryTtsState.error}
+              onResummarize={useDailyHomeLayout ? handleDailyResummary : undefined}
+              resummarizeDisabled={loading || summaryLoading || articles.length === 0}
+            />
+          </section>
+        </div>
+        <footer className="mt-16 border-t border-black/10 pt-8 text-center">
+          <p className="text-xs leading-relaxed text-slate-500">
+            AI có thể mắc lỗi. Hãy kiểm tra lại thông tin quan trọng.
+            <br />
+            Được xây dựng bởi <span className="font-bold text-black/70">HCMUS - Machine Learning - 23KHDL1 - Nhóm 4</span>
+          </p>
+        </footer>
+        </div>
+      </main>
+    </div>
+  )
+}
+export default App

frontend/src/AppHome.jsx ADDED Viewed

	@@ -0,0 +1,73 @@

+import Navbar from './components/Navbar'
+import Hero from './components/Hero'
+import SearchBox from './components/SearchBox'
+import FilterBar from './components/FilterBar'
+import NewsArticle from './components/NewsArticle'
+import './App.css'
+function App() {
+  const articles = [
+    {
+      category: "Kinh tế",
+      categoryColor: "bg-blue-50 text-blue-600",
+      source: "VnExpress",
+      timeAgo: "2 giờ trước",
+      title: "Giá vàng SJC tiếp tục lập đỉnh mới, vượt mốc 80 triệu đồng/lượng",
+      description: "Sáng nay, giá vàng SJC trong nước tiếp tục đà tăng mạnh, chính thức vượt qua mốc lịch sử 80 triệu đồng mỗi lượng. Các chuyên gia nhận định biến động này chịu ảnh hưởng lớn từ thị trường thế giới và nhu cầu tích trữ cuối năm tăng cao...",
+      imageUrl: "https://lh3.googleusercontent.com/aida-public/AB6AXuAHQK_DJaRIYVpQqBaMCtZCwm0qJ2lIIAYE7BHijZwWo4YQGbUJWcmRrWwpzrLr7N0_w7b96S-dTcCT9QT2_hYX9e6Fn4iHCg5x4X6EhEzG8nDmPrcFEjsJFEz7lE55sy8KOyI4kMCpXEsuJoHUEhsMRrP1ZMFs5FjXnnA27RpA4EHJm4QOHmr75rlB6KkmQY1v1mxpQNj4-Zo4x8b4EuuXBIfhfYNN_L4HYMmtzSC-hnAdQCdGd5CjLC-r9Y4opNfJoYY1k9OkS1w",
+      imageAlt: "Vàng SJC",
+      voiceType: "Bắc",
+      articleUrl: "#"
+    },
+    {
+      category: "Công nghệ",
+      categoryColor: "bg-green-50 text-green-600",
+      source: "Tuổi Trẻ",
+      timeAgo: "5 giờ trước",
+      title: "Việt Nam đặt mục tiêu phổ cập 5G vào năm 2025",
+      description: "Bộ Thông tin và Truyền thông vừa công bố lộ trình phổ cập mạng 5G trên toàn quốc. Theo đó, đến năm 2025, 100% dân số sẽ được tiếp cận với hạ tầng mạng di động thế hệ mới, mở đường cho phát triển kinh tế số...",
+      imageUrl: "https://lh3.googleusercontent.com/aida-public/AB6AXuBrkQ2BBQBgsy-3HhjUw7R26kS3eKrNLBlhGWTid8HXuxX6X06qAwWsYThgHxKJxW-17cEo-28TZ0NUA3x2QQtl2PfWBmvgU8-CbbUj9R3bvyjNQPtEyH2GoCqqK73Py_sts5k24HWN5iO_OIwfdnIsa1sLHSsaqYGIrlzkuLOMyP2lfRQQnE7K4pFre3NTHZm0ZvJrwB_rzWi9AQDkT4CUPwOcCFSyLprwHNsHcQNiKI6ZbSVmXP7eljfX9JJubMcw93LZJjVMixg",
+      imageAlt: "Công nghệ 5G",
+      voiceType: "Nam",
+      articleUrl: "#"
+    },
+    {
+      category: "Giao thông",
+      categoryColor: "bg-orange-50 text-orange-600",
+      source: "Dân Trí",
+      timeAgo: "8 giờ trước",
+      title: "Hoàn thành cao tốc Bắc - Nam đoạn Diễn Châu - Bãi Vọt",
+      description: "Dự án thành phần cao tốc Bắc - Nam phía Đông giai đoạn 1 đoạn Diễn Châu - Bãi Vọt đã chính thức thông xe kỹ thuật. Công trình giúp rút ngắn thời gian di chuyển từ Hà Nội về Nghệ An xuống còn hơn 3 giờ...",
+      imageUrl: "https://lh3.googleusercontent.com/aida-public/AB6AXuBvOWzv5Wt7dypGPCUuBQcNXQN3dD8RbYO5n_BONKalLmqWjB2uTRDhCM9BN1LhATZLw0a--nzP5bveNszmigBUh0qVhE-eJbcIsBIC9kV3cMnRp3XyDVRgUDESXrI8HaZPDNkKVWfuxBhgzxdFkDf5E_V4XUK30oiYNRaUDa4Z80G58HWM_5SrO22qJvgzHDQkFfysg2HM8ETD-R5Z0hxcMdWHV8mvAWbBTle_FP-zK6BzbZc7_gU5BS057_N-C22BADd9g4OOBA8",
+      imageAlt: "Cao tốc",
+      voiceType: "Trung",
+      articleUrl: "#"
+    }
+  ];
+  return (
+    <div className="bg-background-light text-slate-800 font-display h-screen flex flex-col overflow-y-auto selection:bg-gray-200">
+      <Navbar />
+      <main className="flex-1 flex flex-col items-center w-full max-w-5xl mx-auto px-4 py-12 md:py-20">
+        <Hero />
+        <div className="w-full max-w-3xl space-y-4">
+          <SearchBox />
+          <FilterBar />
+        </div>
+        <div className="w-full max-w-3xl mt-16 space-y-6">
+          <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4 pl-1">Kết quả tóm tắt mới nhất</h2>
+          {articles.map((article, index) => (
+            <NewsArticle key={index} {...article} />
+          ))}
+        </div>
+        <div className="mt-20 text-center px-4 w-full">
+          <p className="text-xs text-slate-400">
+            AI có thể mắc lỗi. Hãy kiểm tra lại thông tin quan trọng. Được xây dựng bởi <span className="font-semibold text-slate-500">NewsAI Team</span>
+          </p>
+        </div>
+      </main>
+    </div>
+  )
+}
+export default App

frontend/src/assets/react.svg ADDED Viewed

frontend/src/components/FilterBar.jsx ADDED Viewed

	@@ -0,0 +1,57 @@

+function FilterBar({ voice, onVoiceChange, time, onTimeChange, source, onSourceChange }) {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-3 md:gap-4">
+            <label className="relative flex items-center gap-2 rounded-full border border-black/20 bg-white px-4 py-2.5 text-xs font-black uppercase tracking-[0.1em] text-black transition-all hover:border-black">
+                <span className="material-symbols-outlined text-base">record_voice_over</span>
+                <span>Giọng đọc</span>
+                <select
+                    value={voice}
+                    onChange={(event) => onVoiceChange(event.target.value)}
+                    className="cursor-pointer border-0 bg-transparent py-0 pl-0 pr-6 text-[11px] font-black uppercase tracking-[0.12em] text-slate-600 focus:ring-0"
+                >
+                    <option value="Bắc">Nam (Bắc)</option>
+                    <option value="Nam">Nữ (Nam)</option>
+                    <option value="Trung">Nam (Trung)</option>
+                </select>
+            </label>
+            <label className="relative flex items-center gap-2 rounded-full border border-black/20 bg-white px-4 py-2.5 text-xs font-black uppercase tracking-[0.1em] text-black transition-all hover:border-black">
+                <span className="material-symbols-outlined text-base">schedule</span>
+                <span>Thời gian</span>
+                <select
+                    value={time}
+                    onChange={(event) => onTimeChange(event.target.value)}
+                    className="cursor-pointer border-0 bg-transparent py-0 pl-0 pr-6 text-[11px] font-black uppercase tracking-[0.12em] text-slate-600 focus:ring-0"
+                >
+                    <option value="pd">24h qua</option>
+                    <option value="pw">7 ngày</option>
+                    <option value="pm">Tháng này</option>
+                    <option value="py">Năm nay</option>
+                </select>
+            </label>
+            <label className="relative flex items-center gap-2 rounded-full border border-black/20 bg-white px-4 py-2.5 text-xs font-black uppercase tracking-[0.1em] text-black transition-all hover:border-black">
+                <span className="material-symbols-outlined text-base">public</span>
+                <span>Nguồn tin</span>
+                <select
+                    value={source}
+                    onChange={(event) => onSourceChange(event.target.value)}
+                    className="cursor-pointer border-0 bg-transparent py-0 pl-0 pr-6 text-[11px] font-black uppercase tracking-[0.12em] text-slate-600 focus:ring-0"
+                >
+                    <option value="all">Tất cả</option>
+                    <option value="vi">Trong nước</option>
+                    <option value="en">Quốc tế</option>
+                </select>
+            </label>
+            <button
+                type="button"
+                className="rounded-full border border-black/20 p-2.5 text-black transition-all hover:border-black hover:bg-black hover:text-white"
+            >
+                <span className="material-symbols-outlined text-lg">tune</span>
+            </button>
+        </div>
+    );
+}
+export default FilterBar;

frontend/src/components/Hero.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+function Hero() {
+    return (
+        <div className="text-center mb-12 space-y-3 max-w-2xl">
+            <h1 className="text-3xl md:text-5xl font-bold text-slate-900 tracking-tight">Tóm tắt tin tức thông minh</h1>
+            <p className="text-slate-500 text-lg">Cập nhật nhanh chóng, nghe tin tức mọi lúc với giọng đọc đa vùng miền.</p>
+        </div>
+    );
+}
+export default Hero;

frontend/src/components/HomeNewsGrid.jsx ADDED Viewed

	@@ -0,0 +1,233 @@

+import { useState } from 'react';
+const TONE_BADGE_CLASS = {
+  news: 'bg-black text-white',
+  commerce: 'bg-emerald-100 text-emerald-700',
+  culture: 'bg-indigo-100 text-indigo-700',
+  discussion: 'bg-violet-100 text-violet-700',
+  review: 'bg-pink-100 text-pink-700',
+  video: 'bg-red-100 text-red-700',
+  generic: 'bg-slate-100 text-slate-700',
+};
+function HomeNewsGrid({ articles, loading, onSummarizeArticle }) {
+  const [copiedUrl, setCopiedUrl] = useState('');
+  const featuredArticle = articles?.[0] || null;
+  const sideArticles = articles?.slice(1, 5) || [];
+  const handleCopyLink = async (articleUrl) => {
+    if (!articleUrl || articleUrl === '#') return;
+    try {
+      await navigator.clipboard.writeText(articleUrl);
+      setCopiedUrl(articleUrl);
+      window.setTimeout(() => setCopiedUrl(''), 1800);
+    } catch {
+      setCopiedUrl('');
+    }
+  };
+  if (loading) {
+    return (
+      <div className="grid grid-cols-1 gap-5 lg:grid-cols-12">
+        <div className="h-[330px] animate-pulse rounded-xl bg-slate-200 lg:col-span-8" />
+        <div className="h-[330px] animate-pulse rounded-xl bg-slate-200 lg:col-span-4" />
+        <div className="h-64 animate-pulse rounded-xl bg-slate-200 lg:col-span-4" />
+        <div className="h-64 animate-pulse rounded-xl bg-slate-200 lg:col-span-4" />
+        <div className="h-64 animate-pulse rounded-xl bg-slate-200 lg:col-span-4" />
+      </div>
+    );
+  }
+  if (!featuredArticle) {
+    return (
+      <div className="flex min-h-64 flex-col items-center justify-center rounded-xl border border-dashed border-black/20 bg-white text-center">
+        <span className="material-symbols-outlined text-6xl text-black/20">search</span>
+        <p className="mt-4 text-lg font-medium text-slate-500">
+          Chưa có dữ liệu tin tức đầu ngày.
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div className="grid grid-cols-1 gap-5 lg:grid-cols-12">
+      <article className="group relative overflow-hidden rounded-xl border border-transparent bg-white shadow-[0px_12px_32px_rgba(25,28,30,0.06)] transition-all hover:border-slate-100 hover:shadow-xl lg:col-span-8">
+        <div className="relative aspect-[16/9] w-full">
+          <img className="h-full w-full object-cover" src={featuredArticle.imageUrl} alt={featuredArticle.imageAlt} />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+          <div className="absolute left-5 right-5 top-5 flex items-center justify-between">
+            <span className="rounded-sm bg-black px-3 py-1 text-[10px] font-black uppercase tracking-[0.16em] text-white">
+              Featured
+            </span>
+            <span className="rounded-sm bg-white/90 px-3 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-black">
+              {featuredArticle.source}
+            </span>
+          </div>
+          <div className="absolute bottom-5 left-5 right-5">
+            <h2 className="mb-2 text-2xl font-black leading-tight tracking-tight text-white md:text-3xl">
+              {featuredArticle.title}
+            </h2>
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-sm font-medium text-white/80">
+                {featuredArticle.timeAgo || 'Hôm nay'} • {featuredArticle.category}
+              </p>
+              <div className="flex items-center gap-2">
+                <a
+                  href={featuredArticle.articleUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="Đọc bài gốc"
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/90 text-black transition-all hover:bg-white"
+                >
+                  <span className="material-symbols-outlined text-base leading-none">article</span>
+                </a>
+                <button
+                  type="button"
+                  title="Tóm tắt bài"
+                  onClick={() => onSummarizeArticle?.(featuredArticle.articleUrl)}
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/20 text-white transition-all hover:bg-white/30"
+                >
+                  <span className="material-symbols-outlined text-base leading-none">auto_awesome</span>
+                </button>
+                <button
+                  type="button"
+                  title="Sao chép link"
+                  onClick={() => handleCopyLink(featuredArticle.articleUrl)}
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/20 text-white transition-all hover:bg-white/30"
+                >
+                  <span className="material-symbols-outlined text-base leading-none">
+                    {copiedUrl === featuredArticle.articleUrl ? 'check' : 'share'}
+                  </span>
+                </button>
+              </div>
+            </div>
+            {copiedUrl === featuredArticle.articleUrl && (
+              <p className="mt-2 text-xs font-bold text-emerald-300">Đã copy link bài viết</p>
+            )}
+          </div>
+        </div>
+      </article>
+      <article className="rounded-xl bg-white p-5 shadow-[0px_12px_32px_rgba(25,28,30,0.06)] lg:col-span-4">
+        {sideArticles[0] ? (
+          <>
+            <div className="mb-4 flex items-center justify-between">
+              <span
+                className={`rounded-sm px-3 py-1 text-[10px] font-black uppercase tracking-[0.14em] ${
+                  TONE_BADGE_CLASS[sideArticles[0].categoryTone] || TONE_BADGE_CLASS.generic
+                }`}
+              >
+                {sideArticles[0].category}
+              </span>
+              <span className="text-xs font-semibold text-slate-500">{sideArticles[0].timeAgo || 'Hôm nay'}</span>
+            </div>
+            <div className="mb-4 aspect-video w-full overflow-hidden rounded-lg">
+              <img className="h-full w-full object-cover" src={sideArticles[0].imageUrl} alt={sideArticles[0].imageAlt} />
+            </div>
+            <h3 className="text-lg font-bold leading-snug tracking-tight text-black">{sideArticles[0].title}</h3>
+            <div className="mt-5 flex items-center justify-between gap-3">
+              <span className="text-xs font-semibold text-slate-500">{sideArticles[0].timeAgo || 'Hôm nay'}</span>
+              <div className="flex items-center gap-2">
+                <a
+                  href={sideArticles[0].articleUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="Đọc bài gốc"
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-slate-500 transition-all hover:bg-slate-100 hover:text-black"
+                >
+                  <span className="material-symbols-outlined text-base leading-none">article</span>
+                </a>
+                <button
+                  type="button"
+                  title="Tóm tắt bài"
+                  onClick={() => onSummarizeArticle?.(sideArticles[0].articleUrl)}
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-slate-500 transition-all hover:bg-slate-100 hover:text-black"
+                >
+                  <span className="material-symbols-outlined text-base leading-none">auto_awesome</span>
+                </button>
+                <button
+                  type="button"
+                  title="Sao chép link"
+                  onClick={() => handleCopyLink(sideArticles[0].articleUrl)}
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-slate-500 transition-all hover:bg-slate-100 hover:text-black"
+                >
+                  <span className="material-symbols-outlined text-base leading-none">
+                    {copiedUrl === sideArticles[0].articleUrl ? 'check' : 'share'}
+                  </span>
+                </button>
+              </div>
+            </div>
+            {copiedUrl === sideArticles[0].articleUrl && (
+              <p className="mt-2 text-[11px] font-bold text-emerald-600">Đã copy link bài viết</p>
+            )}
+          </>
+        ) : (
+          <div className="flex h-full min-h-64 flex-col items-center justify-center rounded-lg border border-dashed border-slate-200 text-center">
+            <span className="material-symbols-outlined text-4xl text-slate-300">newspaper</span>
+            <p className="mt-3 text-sm font-medium text-slate-500">Đang chuẩn bị tin tức đầu ngày...</p>
+          </div>
+        )}
+      </article>
+      {sideArticles.slice(1).map((article) => (
+        <article
+          key={article.articleUrl}
+          className="flex flex-col overflow-hidden rounded-xl border border-transparent bg-white transition-all hover:border-slate-200 lg:col-span-4"
+        >
+          <div className="h-48 w-full overflow-hidden">
+            <img className="h-full w-full object-cover" src={article.imageUrl} alt={article.imageAlt} />
+          </div>
+          <div className="flex flex-1 flex-col p-5">
+            <span
+              className={`mb-2 inline-flex w-fit rounded-sm px-2 py-1 text-[10px] font-black uppercase tracking-[0.14em] ${
+                TONE_BADGE_CLASS[article.categoryTone] || TONE_BADGE_CLASS.generic
+              }`}
+            >
+              {article.category}
+            </span>
+            <h3 className="mb-4 text-lg font-bold leading-tight tracking-tight text-black">{article.title}</h3>
+            <div className="mt-auto flex items-center justify-between gap-3">
+              <span className="text-xs font-medium text-slate-500">{article.timeAgo || 'Hôm nay'}</span>
+              <div className="flex items-center gap-2">
+                <a
+                  href={article.articleUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="Đọc bài gốc"
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-slate-500 transition-all hover:bg-slate-100 hover:text-black"
+                >
+                  <span className="material-symbols-outlined text-base leading-none">article</span>
+                </a>
+                <button
+                  type="button"
+                  title="Tóm tắt bài"
+                  onClick={() => onSummarizeArticle?.(article.articleUrl)}
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-slate-500 transition-all hover:bg-slate-100 hover:text-black"
+                >
+                  <span className="material-symbols-outlined text-base leading-none">auto_awesome</span>
+                </button>
+                <button
+                  type="button"
+                  title="Sao chép link"
+                  onClick={() => handleCopyLink(article.articleUrl)}
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-slate-500 transition-all hover:bg-slate-100 hover:text-black"
+                >
+                  <span className="material-symbols-outlined text-base leading-none">
+                    {copiedUrl === article.articleUrl ? 'check' : 'share'}
+                  </span>
+                </button>
+              </div>
+            </div>
+            {copiedUrl === article.articleUrl && (
+              <p className="mt-2 text-[11px] font-bold text-emerald-600">Đã copy link bài viết</p>
+            )}
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+}
+export default HomeNewsGrid;

frontend/src/components/HomePage.jsx ADDED Viewed

	@@ -0,0 +1,195 @@

+import { useMemo, useState } from 'react';
+const TONE_BADGE_CLASS = {
+  news: 'bg-black text-white',
+  commerce: 'bg-emerald-100 text-emerald-700',
+  culture: 'bg-indigo-100 text-indigo-700',
+  discussion: 'bg-violet-100 text-violet-700',
+  review: 'bg-pink-100 text-pink-700',
+  video: 'bg-red-100 text-red-700',
+  generic: 'bg-slate-100 text-slate-700',
+};
+function HomePage({ articles, loading, onSearch, onOpenWorkspace }) {
+  const [query, setQuery] = useState('');
+  const featuredArticle = articles?.[0] || null;
+  const sideArticles = useMemo(() => articles.slice(1, 5), [articles]);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (!query.trim() || !onSearch) return;
+    onSearch(query.trim());
+  };
+  return (
+    <div className="min-h-screen bg-[#f7f9fb] text-slate-900 selection:bg-black selection:text-white">
+      <header className="sticky top-0 z-40 border-b border-black/5 bg-[#f7f9fb]/95 px-5 py-4 backdrop-blur md:px-8 lg:px-12">
+        <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4">
+          <div className="flex items-center gap-8">
+            <span className="text-2xl font-black tracking-tight text-black">NewsAI</span>
+            <nav className="hidden items-center gap-6 md:flex">
+              <button type="button" className="border-b-2 border-black pb-1 text-sm font-bold text-black">
+                Discover
+              </button>
+              <button type="button" className="text-sm font-medium text-slate-500 transition-colors hover:text-black">
+                Briefings
+              </button>
+              <button type="button" className="text-sm font-medium text-slate-500 transition-colors hover:text-black">
+                Channels
+              </button>
+            </nav>
+          </div>
+          <button
+            type="button"
+            onClick={onOpenWorkspace}
+            className="rounded-lg bg-black px-5 py-2 text-sm font-bold text-white transition-all hover:bg-slate-800"
+          >
+            Vào trang tìm kiếm
+          </button>
+        </div>
+      </header>
+      <main className="px-4 pb-16 pt-10 md:px-8 lg:px-12">
+        <section className="mx-auto mb-14 w-full max-w-5xl text-center">
+          <h1 className="mb-10 text-4xl font-black tracking-tight text-black md:text-5xl lg:text-6xl">
+            Chào buổi sáng,
+            <br />
+            Khám phá tin tức AI hôm nay
+          </h1>
+          <form onSubmit={handleSubmit} className="relative mx-auto mb-8 w-full max-w-2xl">
+            <span className="material-symbols-outlined pointer-events-none absolute left-5 top-1/2 -translate-y-1/2 text-slate-400">
+              search
+            </span>
+            <input
+              type="text"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Tìm kiếm tin tức hoặc chủ đề AI..."
+              className="h-16 w-full rounded-full border border-black/10 bg-white pl-14 pr-5 text-base font-medium text-black shadow-[0px_12px_32px_rgba(25,28,30,0.06)] outline-none transition-all focus:border-black/30"
+            />
+          </form>
+          <div className="flex flex-wrap items-center justify-center gap-4">
+            <button
+              type="button"
+              onClick={onOpenWorkspace}
+              className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-6 py-2.5 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50"
+            >
+              <span className="material-symbols-outlined text-lg">check_circle</span>
+              Xem trang chi tiết
+            </button>
+            <button
+              type="button"
+              onClick={() => onSearch?.('tin tức AI hôm nay')}
+              className="flex items-center gap-2 rounded-full bg-black px-8 py-2.5 text-sm font-bold text-white transition-all hover:scale-[1.02]"
+            >
+              <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>
+                bolt
+              </span>
+              Tóm tắt ngay
+            </button>
+          </div>
+        </section>
+        <section className="mx-auto max-w-7xl">
+          {loading && (
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-12">
+              <div className="md:col-span-8 h-[320px] animate-pulse rounded-xl bg-slate-200" />
+              <div className="md:col-span-4 h-[320px] animate-pulse rounded-xl bg-slate-200" />
+              <div className="md:col-span-4 h-64 animate-pulse rounded-xl bg-slate-200" />
+              <div className="md:col-span-4 h-64 animate-pulse rounded-xl bg-slate-200" />
+              <div className="md:col-span-4 h-64 animate-pulse rounded-xl bg-slate-200" />
+            </div>
+          )}
+          {!loading && featuredArticle && (
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-12">
+              <article className="group relative overflow-hidden rounded-xl border border-transparent bg-white shadow-[0px_12px_32px_rgba(25,28,30,0.06)] transition-all hover:border-slate-100 hover:shadow-xl md:col-span-8">
+                <div className="relative aspect-[16/9] w-full">
+                  <img className="h-full w-full object-cover" src={featuredArticle.imageUrl} alt={featuredArticle.imageAlt} />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+                  <div className="absolute left-6 right-6 top-6 flex items-center justify-between">
+                    <span className="rounded-sm bg-black px-3 py-1 text-[10px] font-black uppercase tracking-[0.18em] text-white">
+                      Featured
+                    </span>
+                    <span className="rounded-sm bg-white/90 px-3 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-black">
+                      {featuredArticle.source}
+                    </span>
+                  </div>
+                  <div className="absolute bottom-6 left-6 right-6">
+                    <h2 className="mb-3 text-2xl font-black leading-tight tracking-tight text-white md:text-3xl">
+                      {featuredArticle.title}
+                    </h2>
+                    <p className="text-sm font-medium text-white/80">{featuredArticle.timeAgo || 'Hôm nay'} • {featuredArticle.category}</p>
+                  </div>
+                </div>
+              </article>
+              <article className="rounded-xl bg-white p-6 shadow-[0px_12px_32px_rgba(25,28,30,0.06)] md:col-span-4">
+                {sideArticles[0] ? (
+                  <>
+                    <div className="mb-4 flex items-center justify-between">
+                      <span
+                        className={`rounded-sm px-3 py-1 text-[10px] font-black uppercase tracking-[0.14em] ${
+                          TONE_BADGE_CLASS[sideArticles[0].categoryTone] || TONE_BADGE_CLASS.generic
+                        }`}
+                      >
+                        {sideArticles[0].category}
+                      </span>
+                      <span className="text-xs font-semibold text-slate-500">{sideArticles[0].timeAgo || 'Hôm nay'}</span>
+                    </div>
+                    <div className="mb-4 aspect-video w-full overflow-hidden rounded-lg">
+                      <img className="h-full w-full object-cover" src={sideArticles[0].imageUrl} alt={sideArticles[0].imageAlt} />
+                    </div>
+                    <h3 className="text-xl font-bold leading-snug tracking-tight text-black">{sideArticles[0].title}</h3>
+                  </>
+                ) : (
+                  <div className="flex h-full min-h-64 flex-col items-center justify-center rounded-lg border border-dashed border-slate-200 text-center">
+                    <span className="material-symbols-outlined text-4xl text-slate-300">newspaper</span>
+                    <p className="mt-3 text-sm font-medium text-slate-500">Đang chuẩn bị tin tức đầu ngày...</p>
+                  </div>
+                )}
+              </article>
+              {sideArticles.slice(1).map((article) => (
+                <article
+                  key={article.articleUrl}
+                  className="flex flex-col overflow-hidden rounded-xl border border-transparent bg-white transition-all hover:border-slate-200 md:col-span-4"
+                >
+                  <div className="h-48 w-full overflow-hidden">
+                    <img className="h-full w-full object-cover" src={article.imageUrl} alt={article.imageAlt} />
+                  </div>
+                  <div className="flex flex-1 flex-col p-6">
+                    <span
+                      className={`mb-2 inline-flex w-fit rounded-sm px-2 py-1 text-[10px] font-black uppercase tracking-[0.14em] ${
+                        TONE_BADGE_CLASS[article.categoryTone] || TONE_BADGE_CLASS.generic
+                      }`}
+                    >
+                      {article.category}
+                    </span>
+                    <h3 className="mb-4 text-lg font-bold leading-tight tracking-tight text-black">{article.title}</h3>
+                    <span className="mt-auto text-xs font-medium text-slate-500">{article.timeAgo || 'Hôm nay'}</span>
+                  </div>
+                </article>
+              ))}
+            </div>
+          )}
+          {!loading && !featuredArticle && (
+            <div className="flex min-h-64 flex-col items-center justify-center rounded-xl border border-dashed border-black/20 bg-white text-center">
+              <span className="material-symbols-outlined text-6xl text-black/20">search</span>
+              <p className="mt-4 text-lg font-medium text-slate-500">
+                Chưa có dữ liệu tin tức đầu ngày. Hãy thử tìm kiếm ngay.
+              </p>
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}
+export default HomePage;

frontend/src/components/Navbar.jsx ADDED Viewed

	@@ -0,0 +1,17 @@

+function Navbar() {
+    return (
+        <nav className="w-full py-4 px-6 flex items-center justify-between border-b border-gray-100 bg-white sticky top-0 z-50">
+            <div className="flex items-center gap-2">
+                <span className="material-symbols-outlined text-2xl text-slate-900">auto_stories</span>
+                <span className="text-lg font-semibold tracking-tight text-slate-900">NewsAI</span>
+            </div>
+            <div className="hidden md:flex items-center gap-6 text-sm font-medium text-slate-500">
+                <a className="hover:text-slate-900 transition-colors" href="#">Giới thiệu</a>
+                <a className="hover:text-slate-900 transition-colors" href="#">Tính năng</a>
+                <a className="hover:text-slate-900 transition-colors" href="#">Bảng giá</a>
+            </div>
+        </nav>
+    );
+}
+export default Navbar;

frontend/src/components/NewsArticle.jsx ADDED Viewed

	@@ -0,0 +1,167 @@

+import { useState } from 'react';
+const TONE_CLASSNAMES = {
+    news: 'bg-black text-white border-black',
+    commerce: 'bg-emerald-50 text-emerald-700 border-emerald-200',
+    culture: 'bg-indigo-50 text-indigo-700 border-indigo-200',
+    discussion: 'bg-violet-50 text-violet-700 border-violet-200',
+    review: 'bg-pink-50 text-pink-700 border-pink-200',
+    video: 'bg-red-50 text-red-700 border-red-200',
+    generic: 'bg-slate-50 text-slate-700 border-slate-200',
+};
+function NewsArticle({
+    category,
+    categoryTone,
+    source,
+    timeAgo,
+    title,
+    description,
+    imageUrl,
+    imageAlt,
+    articleUrl,
+    onSummarize,
+    onGenerateTts,
+    summary,
+    summaryVisible,
+    summaryLoading,
+    ttsStatus = 'idle',
+    ttsAudioUrl = '',
+    ttsError = '',
+}) {
+    const [copied, setCopied] = useState(false);
+    const hasSummary = !!summary;
+    const showSummary = hasSummary && summaryVisible;
+    const isGeneratingAudio = ttsStatus === 'queued' || ttsStatus === 'processing';
+    const categoryClasses = TONE_CLASSNAMES[categoryTone] || TONE_CLASSNAMES.generic;
+    const handleShare = async () => {
+        if (!articleUrl || articleUrl === '#') return;
+        try {
+            await navigator.clipboard.writeText(articleUrl);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1800);
+        } catch {
+            setCopied(false);
+        }
+    };
+    return (
+        <article className="group flex flex-col gap-6">
+            <div className="flex flex-col gap-6 md:flex-row md:gap-10">
+                <div className="h-44 w-full shrink-0 overflow-hidden border border-black bg-slate-100 md:w-60">
+                    <img
+                        alt={imageAlt}
+                        className="h-full w-full object-cover transition-all duration-700 group-hover:scale-105"
+                        src={imageUrl}
+                    />
+                </div>
+                <div className="flex flex-1 flex-col">
+                    <div className="mb-4 flex flex-wrap items-center gap-3">
+                        <span className={`border px-2 py-0.5 text-[10px] font-black uppercase tracking-[0.12em] ${categoryClasses}`}>
+                            {category}
+                        </span>
+                        <span className="text-xs font-bold text-black">{source}</span>
+                        <span className="h-1 w-1 rounded-full bg-black" />
+                        <span className="text-xs font-bold text-slate-400">{timeAgo || 'Vừa xong'}</span>
+                    </div>
+                    <h3 className="text-2xl font-black leading-tight tracking-tight text-black transition-all group-hover:underline group-hover:decoration-2 group-hover:underline-offset-4">
+                        {title}
+                    </h3>
+                    <p className="mt-3 line-clamp-2 text-sm font-medium leading-relaxed text-slate-500">
+                        {description}
+                    </p>
+                    <div className="mt-6 flex flex-wrap items-center justify-between gap-4">
+                        <div className="flex flex-wrap items-center gap-6">
+                            <a
+                                className="flex items-center gap-2 text-[11px] font-black uppercase tracking-[0.13em] text-black transition-all hover:opacity-60"
+                                href={articleUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <span className="material-symbols-outlined text-lg">article</span>
+                                Đọc bài gốc
+                            </a>
+                            <button
+                                type="button"
+                                onClick={onSummarize}
+                                disabled={summaryLoading}
+                                className="flex items-center gap-2 text-[11px] font-black uppercase tracking-[0.13em] text-slate-400 transition-all hover:text-black disabled:cursor-not-allowed disabled:opacity-70"
+                            >
+                                <span className={`material-symbols-outlined text-lg ${summaryLoading ? 'animate-spin' : ''}`}>
+                                    {summaryLoading ? 'progress_activity' : showSummary ? 'expand_less' : 'summarize'}
+                                </span>
+                                {summaryLoading ? 'Đang tóm tắt...' : showSummary ? 'Thu gọn tóm tắt' : hasSummary ? 'Xem lại tóm tắt' : 'Tóm tắt bài viết'}
+                            </button>
+                            <button
+                                type="button"
+                                onClick={onGenerateTts}
+                                disabled={!hasSummary || summaryLoading || isGeneratingAudio}
+                                className="flex items-center gap-2 text-[11px] font-black uppercase tracking-[0.13em] text-slate-400 transition-all hover:text-black disabled:cursor-not-allowed disabled:opacity-70"
+                            >
+                                <span className={`material-symbols-outlined text-lg ${isGeneratingAudio ? 'animate-spin' : ''}`}>
+                                    {isGeneratingAudio ? 'progress_activity' : 'play_arrow'}
+                                </span>
+                                {isGeneratingAudio ? 'Đang tạo audio...' : ttsAudioUrl ? 'Tạo lại audio' : 'Nghe audio'}
+                            </button>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            {copied && (
+                                <span className="text-[10px] font-black uppercase tracking-[0.12em] text-emerald-600">
+                                    Đã copy
+                                </span>
+                            )}
+                            <button
+                                type="button"
+                                onClick={handleShare}
+                                className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-black transition-all hover:bg-slate-100"
+                                title="Sao chép link bài viết"
+                            >
+                                <span className="material-symbols-outlined text-base leading-none">{copied ? 'check' : 'share'}</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {(summaryLoading || showSummary) && (
+                <div className="border-l-2 border-black bg-slate-50 px-5 py-4">
+                    {summaryLoading ? (
+                        <div className="flex items-center gap-3 text-sm font-medium text-slate-600">
+                            <span className="material-symbols-outlined animate-spin text-lg">progress_activity</span>
+                            Đang tóm tắt bài viết...
+                        </div>
+                    ) : (
+                        <div>
+                            <div className="mb-2 flex items-center gap-2">
+                                <span className="material-symbols-outlined text-base text-black">summarize</span>
+                                <h4 className="text-xs font-black uppercase tracking-[0.14em] text-black">Tóm tắt nhanh</h4>
+                            </div>
+                            <p className="whitespace-pre-wrap text-sm leading-relaxed text-slate-700">{summary}</p>
+                            {ttsError ? (
+                                <p className="mt-3 text-xs font-semibold text-red-600">{ttsError}</p>
+                            ) : null}
+                            {ttsAudioUrl ? (
+                                <div className="mt-4">
+                                    <audio controls className="w-full" src={ttsAudioUrl} preload="none" />
+                                </div>
+                            ) : null}
+                        </div>
+                    )}
+                </div>
+            )}
+        </article>
+    );
+}
+export default NewsArticle;

frontend/src/components/SearchBox.jsx ADDED Viewed

	@@ -0,0 +1,38 @@

+function SearchBox({ value, onChange, onSearch, loading }) {
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (!value?.trim() || !onSearch) return;
+        onSearch(value.trim());
+    };
+    return (
+        <form onSubmit={handleSubmit} className="mx-auto w-full max-w-[860px]">
+            <div className="group relative">
+                <div className="pointer-events-none absolute inset-0 rounded-full border-2 border-black/10 transition-all group-focus-within:border-black/40" />
+                <div className="relative flex items-center gap-4 rounded-full border-2 border-black bg-white px-6 py-4 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.05)] transition-all group-hover:shadow-[10px_10px_0px_0px_rgba(0,0,0,0.08)] md:px-9 md:py-5">
+                    <span className="material-symbols-outlined shrink-0 text-black">search</span>
+                    <input
+                        type="text"
+                        value={value}
+                        onChange={(event) => onChange?.(event.target.value)}
+                        disabled={loading}
+                        placeholder="Nhập từ khóa hoặc dán URL của tin tức..."
+                        className="w-full border-0 bg-transparent text-base font-medium text-black placeholder:text-slate-400 focus:ring-0 md:text-lg"
+                    />
+                    <button
+                        type="submit"
+                        disabled={loading || !value?.trim()}
+                        className="flex shrink-0 items-center gap-2 rounded-full bg-black px-5 py-2.5 text-xs font-black uppercase tracking-[0.15em] text-white transition-all hover:bg-slate-800 disabled:cursor-not-allowed disabled:bg-slate-400 md:px-8"
+                    >
+                        <span className="material-symbols-outlined text-base">
+                            {loading ? 'progress_activity' : 'arrow_forward'}
+                        </span>
+                        <span className="hidden sm:inline">Tìm kiếm</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+}
+export default SearchBox;

frontend/src/components/SummaryBox.jsx ADDED Viewed

	@@ -0,0 +1,132 @@

+import { useState } from 'react';
+function SummaryBox({
+  summary,
+  totalArticles,
+  loading,
+  onResummarize,
+  resummarizeDisabled = false,
+  onGenerateTts,
+  ttsStatus = 'idle',
+  ttsAudioUrl = '',
+  ttsError = '',
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    if (!summary) return;
+    try {
+      await navigator.clipboard.writeText(summary);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setCopied(false);
+    }
+  };
+  const renderedSummary = summary
+    ?.split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+  const hasSummary = renderedSummary?.length > 0;
+  const isGeneratingAudio = ttsStatus === 'queued' || ttsStatus === 'processing';
+  return (
+    <div className="summary-panel overflow-hidden border-2 border-black bg-white p-6 shadow-[10px_10px_0px_0px_rgba(0,0,0,0.04)] md:p-7">
+      <div className="mb-6 flex items-center gap-3">
+        <span className="h-[2px] w-8 bg-black" />
+        <h2 className="text-xs font-black uppercase tracking-[0.22em] text-black">Bản tóm tắt AI</h2>
+        {loading ? (
+          <span className="ml-auto rounded-full border border-black/20 bg-white px-3 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-black animate-pulse">
+            Đang tóm tắt...
+          </span>
+        ) : totalArticles ? (
+          <span className="ml-auto rounded-full border border-black/20 bg-white px-3 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-black">
+            {totalArticles} bài
+          </span>
+        ) : null}
+      </div>
+      {onResummarize ? (
+        <div className="mb-6 flex justify-end">
+          <button
+            type="button"
+            onClick={onResummarize}
+            disabled={resummarizeDisabled}
+            className="flex items-center gap-2 rounded-full border border-black bg-white px-4 py-2 text-[10px] font-black uppercase tracking-[0.14em] text-black transition-all hover:bg-black hover:text-white disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            <span className={`material-symbols-outlined text-sm ${loading ? 'animate-spin' : ''}`}>
+              {loading ? 'progress_activity' : 'autorenew'}
+            </span>
+            Re-summary hôm nay
+          </button>
+        </div>
+      ) : null}
+      {loading ? (
+        <div className="space-y-4 rounded-lg border border-black/10 bg-slate-50 p-5">
+          <div className="flex items-center gap-3 text-slate-600">
+            <span className="material-symbols-outlined summary-spin text-2xl">progress_activity</span>
+            <p className="text-sm font-semibold">Đang tạo bản tóm tắt thông minh...</p>
+          </div>
+          <div className="summary-shimmer h-3 rounded" />
+          <div className="summary-shimmer h-3 w-[88%] rounded" />
+          <div className="summary-shimmer h-3 w-[76%] rounded" />
+          <div className="summary-shimmer h-3 w-[82%] rounded" />
+        </div>
+      ) : !hasSummary ? (
+        <div className="rounded-lg border border-dashed border-black/20 bg-slate-50 p-5 text-center">
+          <span className="material-symbols-outlined text-4xl text-black/25">auto_awesome</span>
+          <p className="mt-3 text-sm font-medium text-slate-500">
+            Chọn hoặc tìm kiếm tin tức để tạo bản tóm tắt.
+          </p>
+        </div>
+      ) : (
+        <div>
+          <div className="max-h-[48vh] space-y-3 overflow-y-auto pr-1 text-[15px] font-medium leading-relaxed text-slate-600 md:text-base">
+            {renderedSummary?.map((line, index) => (
+              <p key={`${index}-${line}`} className={/^\d+\./.test(line) ? 'font-semibold text-black' : ''}>
+                {line}
+              </p>
+            ))}
+          </div>
+          <div className="mt-8 flex flex-wrap items-center gap-4">
+            <button
+              type="button"
+              onClick={onGenerateTts}
+              disabled={!hasSummary || isGeneratingAudio}
+              className="flex items-center gap-3 bg-black px-8 py-4 text-xs font-black uppercase tracking-[0.15em] text-white transition-all hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              <span className={`material-symbols-outlined text-lg ${isGeneratingAudio ? 'animate-spin' : ''}`}>
+                {isGeneratingAudio ? 'progress_activity' : 'play_arrow'}
+              </span>
+              {isGeneratingAudio ? 'Đang tạo audio...' : ttsAudioUrl ? 'Tạo lại bản audio' : 'Nghe bản tin'}
+            </button>
+            <button
+              type="button"
+              onClick={handleCopy}
+              className="flex items-center gap-3 border-2 border-black bg-white px-8 py-4 text-xs font-black uppercase tracking-[0.15em] text-black transition-all hover:bg-slate-50"
+            >
+              <span className="material-symbols-outlined text-lg">content_copy</span>
+              {copied ? 'Đã sao chép' : 'Sao chép tóm tắt'}
+            </button>
+          </div>
+          {ttsError ? (
+            <p className="mt-4 text-xs font-semibold text-red-600">{ttsError}</p>
+          ) : null}
+          {ttsAudioUrl ? (
+            <div className="mt-4">
+              <audio controls className="w-full" src={ttsAudioUrl} preload="none" />
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
+export default SummaryBox;

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1,41 @@

+:root {
+  --background: #f6f7fb;
+  --on-background: #0b0b0b;
+  --surface: #ffffff;
+  --outline: rgba(15, 23, 42, 0.16);
+  font-family: 'Inter', sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  width: 100%;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at 92% 4%, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0) 36%),
+    radial-gradient(circle at 4% 96%, rgba(15, 23, 42, 0.07) 0, rgba(15, 23, 42, 0) 34%),
+    var(--background);
+  color: var(--on-background);
+}
+#root {
+  width: 100%;
+  min-height: 100vh;
+}
+h1,
+h2,
+h3,
+h4 {
+  font-family: 'Manrope', sans-serif;
+}

frontend/src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/services/api.service.js ADDED Viewed

	@@ -0,0 +1,93 @@

+import axios from 'axios';
+const rawApiUrl = import.meta.env.VITE_API_URL || 'http://localhost:5000';
+const API_URL = (() => {
+  const trimmedUrl = rawApiUrl.replace(/\/+$/, '');
+  try {
+    const parsedUrl = new URL(trimmedUrl);
+    // If only an origin is provided, default to the backend API namespace.
+    if (!parsedUrl.pathname || parsedUrl.pathname === '/') {
+      parsedUrl.pathname = '/api';
+      return parsedUrl.toString().replace(/\/+$/, '');
+    }
+    return trimmedUrl;
+  } catch {
+    // Support relative API URLs while keeping explicit path configuration intact.
+    if (!trimmedUrl || trimmedUrl === '.') return '/api';
+    return trimmedUrl.startsWith('/') ? trimmedUrl : `/${trimmedUrl}`;
+  }
+})();
+class ApiService {
+  constructor() {
+    this.client = axios.create({
+      baseURL: API_URL,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  }
+  async search(query, options = {}) {
+    const response = await this.client.post('/search', {
+      query,
+      language: options.language,
+      freshness: options.freshness
+    });
+    return response.data;
+  }
+  async searchAndSummarize(query, options = {}) {
+    const response = await this.client.post('/search-summarize', {
+      query,
+      language: options.language,
+      freshness: options.freshness
+    });
+    return response.data;
+  }
+  async scrapeAndSummarize(urls, query = '') {
+    const response = await this.client.post('/scrape-summarize', { urls, query });
+    return response.data;
+  }
+  async scrape(url) {
+    const response = await this.client.post('/scrape', { url });
+    return response.data;
+  }
+  async generateWithGemini(prompt) {
+    const response = await this.client.post('/gemini', { prompt });
+    return response.data;
+  }
+  async summarizeNews(content, title) {
+    const response = await this.client.post('/gemini/summarize', { content, title });
+    return response.data;
+  }
+  async healthCheck() {
+    const response = await this.client.get('/health');
+    return response.data;
+  }
+  async createTtsJob(text, options = {}) {
+    const response = await this.client.post('/tts/jobs', {
+      text,
+      language: options.language || 'vi',
+      speaker_audio: options.speakerAudio
+    });
+    return response.data;
+  }
+  async getTtsJob(key) {
+    const response = await this.client.get(`/tts/jobs/${encodeURIComponent(key)}`);
+    return response.data;
+  }
+}
+export default new ApiService();

frontend/vite.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})