Upload 57 files

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+npm-debug.log
+.env
+.git
+.gitignore
+Dockerfile
+render.yaml
+tts_fastapi

.env.example

@@ -0,0 +1,2 @@
+# Backend API URL
+VITE_API_URL=http://localhost:5000

.gitignore

@@ -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?

Dockerfile

@@ -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;"]

README.md

@@ -1,10 +1,16 @@
----
-title: ML LT
-emoji: 🌖
-colorFrom: pink
-colorTo: purple
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 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.

config/app.config.js

@@ -0,0 +1,5 @@
+export default {
+  PORT: process.env.PORT || 5000,
+  NODE_ENV: process.env.NODE_ENV || 'development',
+  CORS_ORIGIN: process.env.CORS_ORIGIN || '*'
+};

config/brave.config.js

@@ -0,0 +1,4 @@
+export default {
+  API_KEY: process.env.BRAVE_API_KEY,
+  BASE_URL: 'https://api.search.brave.com/res/v1/web/search'
+};

config/gemini.config.js

@@ -0,0 +1,4 @@
+export default {
+  API_KEY: process.env.GEMINI_API_KEY,
+  MODEL: 'gemini-2.5-flash'
+};

config/puppeteer.config.js

@@ -0,0 +1,6 @@
+export default {
+  HEADLESS: 'new',
+  ARGS: ['--no-sandbox', '--disable-setuid-sandbox'],
+  TIMEOUT: 60000,
+  WAIT_UNTIL: 'domcontentloaded'
+};

config/supabase.config.js

@@ -0,0 +1,5 @@
+export default {
+  URL: process.env.SUPABASE_URL || '',
+  KEY: process.env.SUPABASE_KEY || '',
+  TTS_BUCKET: process.env.SUPABASE_TTS_BUCKET || 'tts_audio'
+};

config/tts.config.js

@@ -0,0 +1,4 @@
+export default {
+  SERVICE_URL: process.env.TTS_SERVICE_URL || 'http://127.0.0.1:8001',
+  TIMEOUT_MS: Number(process.env.TTS_SERVICE_TIMEOUT_MS || 600000)
+};

controllers/gemini.controller.js

@@ -0,0 +1,42 @@
+import geminiService from '../services/gemini.service.js';
+
+class GeminiController {
+  async generate(req, res) {
+    try {
+      const { prompt } = req.body;
+      
+      if (!prompt) {
+        return res.status(400).json({ error: 'Prompt is required' });
+      }
+
+      const data = await geminiService.generateContent(prompt);
+      res.json(data);
+    } catch (error) {
+      console.error('Gemini Error:', error.message);
+      res.status(500).json({ 
+        error: 'Failed to generate content',
+        details: error.message 
+      });
+    }
+  }
+
+  async summarize(req, res) {
+    try {
+      const { content, title } = req.body;
+      
+      if (!content) {
+        return res.status(400).json({ error: 'Content is required' });
+      }
+
+      const data = await geminiService.summarizeNews(content, title);
+      res.json(data);
+    } catch (error) {
+      console.error('Gemini Summarize Error:', error.message);
+      res.status(500).json({ 
+        error: 'Failed to summarize content',
+        details: error.message 
+      });
+    }
+  }
+}
+export default new GeminiController();

controllers/scrape.controller.js

@@ -0,0 +1,24 @@
+import scrapeService from '../services/scrape.service.js';
+
+class ScrapeController {
+  async scrape(req, res) {
+    try {
+      const { url } = req.body;
+      
+      if (!url) {
+        return res.status(400).json({ error: 'URL is required' });
+      }
+
+      const data = await scrapeService.scrapeUrl(url);
+      res.json(data);
+    } catch (error) {
+      console.error('Scrape Error:', error.message);
+      res.status(500).json({ 
+        error: 'Failed to scrape URL',
+        details: error.message 
+      });
+    }
+  }
+}
+
+export default new ScrapeController();

controllers/search.controller.js

@@ -0,0 +1,261 @@
+import braveService from '../services/brave.service.js';
+import scrapeService from '../services/scrape.service.js';
+import geminiService from '../services/gemini.service.js';
+import pLimit from 'p-limit';
+
+// Max 5 URLs, max 3 concurrent scrapes (axios is fast; Puppeteer fallback is slow)
+const MAX_SCRAPE_URLS = 5;
+const scrapeLimit = pLimit(3);
+
+// Wrap a promise with a hard timeout
+const withTimeout = (promise, ms, label) =>
+  Promise.race([
+    promise,
+    new Promise((_, reject) =>
+      setTimeout(() => reject(new Error(`Timeout after ${ms}ms: ${label}`)), ms)
+    ),
+  ]);
+
+class SearchController {
+  async search(req, res) {
+    try {
+      const { query, language, freshness } = req.body;
+      
+      if (!query) {
+        return res.status(400).json({ error: 'Query is required' });
+      }
+
+      const options = {};
+      if (language) options.language = language;
+      if (freshness) options.freshness = freshness;
+
+      const data = await braveService.search(query, options);
+      res.json(data);
+    } catch (error) {
+      console.error('Search Error:', error.message);
+      res.status(500).json({ 
+        error: 'Failed to perform search',
+        details: error.response?.data || error.message 
+      });
+    }
+  }
+
+  async searchAndSummarize(req, res) {
+    try {
+      const { query, language, freshness } = req.body;
+      
+      if (!query) {
+        return res.status(400).json({ error: 'Query is required' });
+      }
+
+      const options = {};
+      if (language) options.language = language;
+      if (freshness) options.freshness = freshness;
+
+      // 1. Search bằng Brave
+      console.log('[BRAVE API] Starting search request...');
+      let searchData;
+      try {
+        searchData = await braveService.search(query, options);
+        console.log('[BRAVE API] Search successful, found results');
+      } catch (err) {
+        console.error('[BRAVE API] ERROR:', err.message);
+        console.error('[BRAVE API] Status:', err.response?.status);
+        console.error('[BRAVE API] Details:', err.response?.data);
+        
+        if (err.response?.status === 429) {
+          return res.status(429).json({ 
+            error: 'Rate limit exceeded',
+            api: 'Brave Search API',
+            details: 'Vuot qua gioi han API Brave Search. Vui long thu lai sau it phut.' 
+          });
+        }
+        throw err;
+      }
+      
+      // 2. Lấy URLs từ kết quả (ưu tiên news, fallback về web)
+      let urls = [];
+      if (searchData.news?.results && searchData.news.results.length > 0) {
+        urls = searchData.news.results.slice(0, MAX_SCRAPE_URLS).map(r => r.url);
+      } else if (searchData.web?.results && searchData.web.results.length > 0) {
+        urls = searchData.web.results
+          .filter(r => r.type === 'search_result')
+          .slice(0, MAX_SCRAPE_URLS)
+          .map(r => r.url);
+      }
+
+      if (urls.length === 0) {
+        return res.status(404).json({ error: 'Khong tim thay ket qua nao' });
+      }
+
+      // 3. Scrape tất cả URLs bằng Puppeteer
+      console.log(`[PUPPETEER] Scraping ${urls.length} articles...`);
+      const scrapePromises = urls.map(async (url, index) => {
+        try {
+          const scraped = await scrapeService.scrapeUrl(url);
+          console.log(`[PUPPETEER] Successfully scraped: ${url}`);
+          return {
+            title: scraped.title || `Bai ${index + 1}`,
+            source: new URL(url).hostname,
+            content: scraped.text || '',
+            url: url
+          };
+        } catch (err) {
+          console.error(`[PUPPETEER] Failed to scrape ${url}:`, err.message);
+          return null;
+        }
+      });
+
+      const articles = (await Promise.all(scrapePromises)).filter(a => a !== null);
+      console.log(`[PUPPETEER] Successfully scraped ${articles.length}/${urls.length} articles`);
+
+      if (articles.length === 0) {
+        return res.status(500).json({ error: 'Khong the scrape duoc bai bao nao' });
+      }
+
+      // 4. Gửi tất cả vào Gemini để tóm tắt
+      console.log(`[GEMINI API] Starting summarization of ${articles.length} articles...`);
+      let summary;
+      try {
+        summary = await geminiService.summarizeMultipleNews(articles, query);
+        console.log('[GEMINI API] Summarization successful');
+      } catch (err) {
+        console.error('[GEMINI API] ERROR:', err.message);
+        console.error('[GEMINI API] Status:', err.response?.status);
+        console.error('[GEMINI API] Details:', err.response?.data);
+        
+        if (err.message.includes('PROHIBITED_CONTENT')) {
+          return res.status(400).json({ 
+            error: 'Prohibited content',
+            api: 'Google Gemini API',
+            details: 'Nội dung không phù hợp. Gemini AI đã chặn nội dung này vì vi phạm tiêu chuẩn an toàn.'
+          });
+        }
+        
+        if (err.response?.status === 429 || err.message.includes('429')) {
+          return res.status(429).json({ 
+            error: 'Rate limit exceeded',
+            api: 'Google Gemini API',
+            details: 'Vuot qua gioi han API Gemini. Vui long thu lai sau it phut.' 
+          });
+        }
+        throw err;
+      }
+
+      console.log('[SUCCESS] Request completed successfully');
+      res.json({
+        summary: summary.summary,
+        totalArticles: summary.totalArticles,
+        articles: articles.map(a => ({
+          title: a.title,
+          source: a.source,
+          url: a.url
+        }))
+      });
+    } catch (error) {
+      console.error('[ERROR] Search and Summarize Error:', error.message);
+      console.error('[ERROR] Stack:', error.stack);
+      
+      res.status(500).json({ 
+        error: 'Failed to search and summarize',
+        details: error.response?.data?.error || error.message 
+      });
+    }
+  }
+
+  async scrapeAndSummarize(req, res) {
+    const tTotal = Date.now();
+    try {
+      const { urls: rawUrls, query } = req.body;
+      
+      if (!rawUrls || !Array.isArray(rawUrls) || rawUrls.length === 0) {
+        return res.status(400).json({ error: 'URLs array is required' });
+      }
+
+      // Cap to MAX_SCRAPE_URLS to avoid long waits
+      const urls = rawUrls.slice(0, MAX_SCRAPE_URLS);
+      console.log(`\n${'='.repeat(60)}`);
+      console.log(`[REQUEST] scrapeAndSummarize — ${urls.length} URLs, query="${query?.substring(0,40)}"`);
+      urls.forEach((u, i) => console.log(`  [${i+1}] ${u.substring(0, 80)}`));
+
+      // 1. Scrape URLs (axios fast path, Puppeteer fallback) with 30s total timeout
+      const tScrapeStart = Date.now();
+      console.log(`[SCRAPE] ⏳ Starting scrape of ${urls.length} URLs (concurrency: 3)...`);
+      const scrapeWork = Promise.all(
+        urls.map((url, index) =>
+          scrapeLimit(async () => {
+            const t = Date.now();
+            try {
+              const scraped = await scrapeService.scrapeUrl(url);
+              console.log(`[SCRAPE] ✅ [${index+1}/${urls.length}] ${Date.now()-t}ms — ${url.substring(0, 60)}`);
+              return {
+                title: scraped.title || `Bài ${index + 1}`,
+                source: new URL(url).hostname,
+                content: scraped.text || '',
+                url,
+              };
+            } catch (err) {
+              console.error(`[SCRAPE] ❌ [${index+1}/${urls.length}] ${Date.now()-t}ms — ${url.substring(0, 60)}: ${err.message}`);
+              return null;
+            }
+          })
+        )
+      );
+
+      const rawArticles = await withTimeout(scrapeWork, 30000, 'scrapeAndSummarize');
+      const articles = rawArticles.filter((a) => a !== null);
+      console.log(`[SCRAPE] 🏁 Done: ${articles.length}/${urls.length} OK in ${Date.now()-tScrapeStart}ms (total elapsed: ${Date.now()-tTotal}ms)`);
+
+      if (articles.length === 0) {
+        return res.status(500).json({ error: 'Khong the scrape duoc bai bao nao' });
+      }
+
+      // 2. Send to Gemini
+      const tGeminiStart = Date.now();
+      console.log(`[GEMINI] ⏳ Summarizing ${articles.length} articles...`);
+      let summary;
+      try {
+        summary = await geminiService.summarizeMultipleNews(articles, query || '');
+        console.log(`[GEMINI] ✅ Done in ${Date.now()-tGeminiStart}ms (total elapsed: ${Date.now()-tTotal}ms)`);
+      } catch (err) {
+        console.error('[GEMINI API] ERROR:', err.message);
+        console.error('[GEMINI API] Status:', err.response?.status);
+        console.error('[GEMINI API] Details:', err.response?.data);
+        
+        if (err.message.includes('PROHIBITED_CONTENT')) {
+          return res.status(400).json({ 
+            error: 'Prohibited content',
+            api: 'Google Gemini API',
+            details: 'Nội dung không phù hợp. Gemini AI đã chặn nội dung này vì vi phạm tiêu chuẩn an toàn.'
+          });
+        }
+        
+        if (err.response?.status === 429 || err.message.includes('429')) {
+          return res.status(429).json({ 
+            error: 'Rate limit exceeded',
+            api: 'Google Gemini API',
+            details: 'Vuot qua gioi han API Gemini. Vui long thu lai sau it phut.' 
+          });
+        }
+        throw err;
+      }
+
+      console.log(`[SUCCESS] 🏁 scrapeAndSummarize done in ${Date.now()-tTotal}ms total`);
+      console.log('='.repeat(60));
+      res.json({
+        summary: summary.summary,
+        totalArticles: summary.totalArticles
+      });
+    } catch (error) {
+      console.error('[ERROR] Scrape and Summarize Error:', error.message);
+      console.error('[ERROR] Stack:', error.stack);
+      
+      res.status(500).json({ 
+        error: 'Failed to scrape and summarize',
+        details: error.message 
+      });
+    }
+  }
+}
+
+export default new SearchController();

controllers/tts.controller.js

@@ -0,0 +1,142 @@
+import ttsService from '../services/tts.service.js';
+import ttsJobService from '../services/ttsJob.service.js';
+import audioTranscodeService from '../services/audioTranscode.service.js';
+
+class TtsController {
+  handleServiceError(error, res, defaultMessage) {
+    console.error('[TTS Bridge] Error:', error.message);
+
+    if (error.response) {
+      return res.status(error.response.status).json({
+        error: defaultMessage,
+        details: error.response.data
+      });
+    }
+
+    return res.status(500).json({
+      error: defaultMessage,
+      details: error.message
+    });
+  }
+
+  async health(req, res) {
+    try {
+      const data = await ttsService.health();
+      return res.json(data);
+    } catch (error) {
+      return this.handleServiceError(error, res, 'Failed to reach TTS service');
+    }
+  }
+
+  async synthesize(req, res) {
+    try {
+      const { text, language, speaker_audio } = req.body;
+
+      if (!text) {
+        return res.status(400).json({ error: 'Text is required' });
+      }
+
+      const data = await ttsService.synthesize({
+        text,
+        language,
+        speaker_audio
+      });
+
+      if (!data?.audio_base64) {
+        return res.status(502).json({ error: 'TTS service returned empty audio payload' });
+      }
+
+      const wavBuffer = Buffer.from(data.audio_base64, 'base64');
+      const mp3Buffer = await audioTranscodeService.convertWavToMp3(wavBuffer);
+
+      const responsePayload = {
+        ...data,
+        audio_base64: mp3Buffer.toString('base64'),
+        format: 'mp3',
+        mime_type: 'audio/mpeg',
+        size_bytes: mp3Buffer.length
+      };
+
+      return res.json(responsePayload);
+    } catch (error) {
+      return this.handleServiceError(error, res, 'Failed to synthesize speech');
+    }
+  }
+
+  async createTask(req, res) {
+    try {
+      const { text, language, speaker_audio } = req.body;
+
+      if (!text) {
+        return res.status(400).json({ error: 'Text is required' });
+      }
+
+      const data = await ttsService.createTask({
+        text,
+        language,
+        speaker_audio
+      });
+
+      return res.status(202).json(data);
+    } catch (error) {
+      return this.handleServiceError(error, res, 'Failed to dispatch TTS task');
+    }
+  }
+
+  async getTask(req, res) {
+    try {
+      const { taskId } = req.params;
+
+      if (!taskId) {
+        return res.status(400).json({ error: 'taskId is required' });
+      }
+
+      const data = await ttsService.getTask(taskId);
+      return res.json(data);
+    } catch (error) {
+      return this.handleServiceError(error, res, 'Failed to fetch TTS task status');
+    }
+  }
+
+  async createStorageJob(req, res) {
+    try {
+      const { text, language, speaker_audio } = req.body;
+
+      if (!text) {
+        return res.status(400).json({ error: 'Text is required' });
+      }
+
+      const data = ttsJobService.createJob({
+        text,
+        language,
+        speaker_audio
+      });
+
+      return res.status(202).json(data);
+    } catch (error) {
+      return this.handleServiceError(error, res, 'Failed to create TTS storage job');
+    }
+  }
+
+  async getStorageJob(req, res) {
+    try {
+      const { key } = req.params;
+
+      if (!key) {
+        return res.status(400).json({ error: 'key is required' });
+      }
+
+      const data = ttsJobService.getJob(key);
+
+      if (!data) {
+        return res.status(404).json({ error: 'TTS job not found' });
+      }
+
+      return res.json(data);
+    } catch (error) {
+      return this.handleServiceError(error, res, 'Failed to fetch TTS storage job');
+    }
+  }
+}
+
+export default new TtsController();

eslint.config.js

@@ -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_]' }],
+    },
+  },
+])

index.html

@@ -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>

package.json

@@ -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"
+  }
+}

routes/gemini.routes.js

@@ -0,0 +1,9 @@
+import express from 'express';
+import geminiController from '../controllers/gemini.controller.js';
+
+const router = express.Router();
+
+router.post('/gemini', geminiController.generate.bind(geminiController));
+router.post('/gemini/summarize', geminiController.summarize.bind(geminiController));
+
+export default router;

routes/index.js

@@ -0,0 +1,20 @@
+import express from 'express';
+import searchRoutes from './search.routes.js';
+import scrapeRoutes from './scrape.routes.js';
+import geminiRoutes from './gemini.routes.js';
+import ttsRoutes from './tts.routes.js';
+
+const router = express.Router();
+
+// Health check
+router.get('/health', (req, res) => {
+  res.json({ status: 'ok', message: 'Server is running' });
+});
+
+// Mount routes
+router.use('/', searchRoutes);
+router.use('/', scrapeRoutes);
+router.use('/', geminiRoutes);
+router.use('/', ttsRoutes);
+
+export default router;

routes/scrape.routes.js

@@ -0,0 +1,8 @@
+import express from 'express';
+import scrapeController from '../controllers/scrape.controller.js';
+
+const router = express.Router();
+
+router.post('/scrape', scrapeController.scrape.bind(scrapeController));
+
+export default router;

routes/search.routes.js

@@ -0,0 +1,10 @@
+import express from 'express';
+import searchController from '../controllers/search.controller.js';
+
+const router = express.Router();
+
+router.post('/search', searchController.search.bind(searchController));
+router.post('/search-summarize', searchController.searchAndSummarize.bind(searchController));
+router.post('/scrape-summarize', searchController.scrapeAndSummarize.bind(searchController));
+
+export default router;

routes/tts.routes.js

@@ -0,0 +1,13 @@
+import express from 'express';
+import ttsController from '../controllers/tts.controller.js';
+
+const router = express.Router();
+
+router.get('/tts/health', ttsController.health.bind(ttsController));
+router.post('/tts/synthesize', ttsController.synthesize.bind(ttsController));
+router.post('/tts/tasks', ttsController.createTask.bind(ttsController));
+router.get('/tts/tasks/:taskId', ttsController.getTask.bind(ttsController));
+router.post('/tts/jobs', ttsController.createStorageJob.bind(ttsController));
+router.get('/tts/jobs/:key', ttsController.getStorageJob.bind(ttsController));
+
+export default router;

server.js

@@ -0,0 +1,22 @@
+import 'dotenv/config';
+import express from 'express';
+import cors from 'cors';
+import appConfig from './config/app.config.js';
+import routes from './routes/index.js';
+
+const app = express();
+
+// Middleware
+app.use(cors({
+  origin: appConfig.CORS_ORIGIN
+}));
+app.use(express.json());
+
+// Mount API routes
+app.use('/api', routes);
+
+// Start server
+app.listen(appConfig.PORT, () => {
+  console.log(`Server is running on port ${appConfig.PORT}`);
+  console.log(`Environment: ${appConfig.NODE_ENV}`);
+});

services/audioTranscode.service.js

@@ -0,0 +1,71 @@
+import { spawn } from 'child_process';
+import ffmpegStaticPath from 'ffmpeg-static';
+
+const DEFAULT_MP3_BITRATE = process.env.TTS_MP3_BITRATE || '64k';
+
+class AudioTranscodeService {
+  constructor() {
+    this.ffmpegCommand = ffmpegStaticPath || process.env.FFMPEG_PATH || 'ffmpeg';
+  }
+
+  async convertWavToMp3(wavBuffer) {
+    if (!wavBuffer || wavBuffer.length === 0) {
+      throw new Error('WAV buffer is empty');
+    }
+
+    return new Promise((resolve, reject) => {
+      const ffmpeg = spawn(this.ffmpegCommand, [
+        '-hide_banner',
+        '-loglevel',
+        'error',
+        '-f',
+        'wav',
+        '-i',
+        'pipe:0',
+        '-vn',
+        '-codec:a',
+        'libmp3lame',
+        '-b:a',
+        DEFAULT_MP3_BITRATE,
+        '-f',
+        'mp3',
+        'pipe:1'
+      ]);
+
+      const outputChunks = [];
+      const errorChunks = [];
+
+      ffmpeg.stdout.on('data', (chunk) => outputChunks.push(chunk));
+      ffmpeg.stderr.on('data', (chunk) => errorChunks.push(chunk));
+
+      ffmpeg.on('error', (error) => {
+        reject(
+          new Error(
+            `Cannot run ffmpeg command "${this.ffmpegCommand}": ${error.message}`
+          )
+        );
+      });
+
+      ffmpeg.on('close', (code) => {
+        if (code !== 0) {
+          const stderr = Buffer.concat(errorChunks).toString('utf8').trim();
+          reject(new Error(stderr || `ffmpeg exited with code ${code}`));
+          return;
+        }
+
+        const mp3Buffer = Buffer.concat(outputChunks);
+        if (!mp3Buffer.length) {
+          reject(new Error('ffmpeg produced an empty MP3 output'));
+          return;
+        }
+
+        resolve(mp3Buffer);
+      });
+
+      ffmpeg.stdin.write(wavBuffer);
+      ffmpeg.stdin.end();
+    });
+  }
+}
+
+export default new AudioTranscodeService();

services/brave.service.js

@@ -0,0 +1,50 @@
+import axios from 'axios';
+import braveConfig from '../config/brave.config.js';
+
+class BraveService {
+  async search(query, options = {}) {
+    if (!braveConfig.API_KEY) {
+      throw new Error('Brave API key not configured');
+    }
+
+    const params = {
+      q: query,
+      search_lang: 'vi',
+      count: 10
+    };
+
+    // Add freshness filter if provided
+    if (options.freshness) {
+      params.freshness = options.freshness;
+    }
+
+    console.log('[BRAVE API] Request params:', JSON.stringify(params, null, 2));
+
+    const response = await axios.get(braveConfig.BASE_URL, {
+      params,
+      headers: {
+        'Accept': 'application/json',
+        'X-Subscription-Token': braveConfig.API_KEY
+      }
+    }).catch(err => {
+      if (err.response?.status === 429) {
+        throw new Error('Brave API rate limit exceeded. Please try again later.');
+      }
+      throw err;
+    });
+
+    console.log('[BRAVE API] Response keys:', Object.keys(response.data));
+    console.log('[BRAVE API] Has news results:', !!response.data.news?.results);
+    console.log('[BRAVE API] Has web results:', !!response.data.web?.results);
+    if (response.data.news?.results) {
+      console.log('[BRAVE API] News results count:', response.data.news.results.length);
+    }
+    if (response.data.web?.results) {
+      console.log('[BRAVE API] Web results count:', response.data.web.results.length);
+    }
+
+    return response.data;
+  }
+}
+
+export default new BraveService();

services/gemini.service.js

@@ -0,0 +1,135 @@
+import { GoogleGenerativeAI } from '@google/generative-ai';
+import geminiConfig from '../config/gemini.config.js';
+
+class GeminiService {
+  constructor() {
+    if (!geminiConfig.API_KEY) {
+      console.warn('Gemini API key not configured');
+    } else {
+      this.genAI = new GoogleGenerativeAI(geminiConfig.API_KEY);
+    }
+  }
+
+  async generateContent(prompt) {
+    if (!geminiConfig.API_KEY) {
+      throw new Error('Gemini API key not configured');
+    }
+
+    const model = this.genAI.getGenerativeModel({ model: geminiConfig.MODEL });
+    const result = await model.generateContent(prompt);
+    const response = await result.response;
+    const text = response.text();
+
+    return { text };
+  }
+
+  async summarizeNews(content, title = '') {
+    if (!geminiConfig.API_KEY) {
+      throw new Error('Gemini API key not configured');
+    }
+
+    const customInstruction = `
+    Nhiệm vụ: Dưới đây là bài tin tức. Hãy biên tập lại TOÀN BỘ các tin này thành một bản tin tổng hợp ngắn gọn, không được thiếu bất kì bài nào.
+
+Yêu cầu biên tập:
+0. Chỉ lấy nội dung dài nhất của một bài viết để tóm tắt, tránh bị lạc đề do quảng cáo trong bài.
+1. Văn phong: Chính luận, trang trọng, gãy gọn, dứt khoát (đặc trưng của bản tin Thời sự).
+2. Cấu trúc:
+   - Nhóm các tin liên quan lại với nhau (nếu có).
+   - Mỗi tin được tóm lược thành 2-3 câu, rõ ràng, dễ hiểu.
+3. Độ dài: Mỗi tin khoảng 50-80 từ.
+4. Tuyệt đối khách quan, không lồng ghép cảm xúc cá nhân.
+5. Loại bỏ các bài trùng nội dung nếu có.
+6. Chỉ trả về nội dung bài nói, bắt đầu bằng cách nói bản tổng hợp này có gì, các đoạn sau
+đọc phải có câu chuyển (ví dụ: "Tiếp theo là tin về...", "Chuyển sang tin tiếp theo...", "Tin cuối cùng...") và topic sentence.
+7. Không chú thích gì cả, phản hồi trông như lời nói của biên tập viên
+8. Không dùng formal markdown, chỉ phản hồi thuần văn bản.
+
+    Dữ liệu đầu vào:
+    - Tiêu đề gốc: ${title}
+    - Nội dung gốc:
+    ${content}
+
+Hãy bắt đầu bản tin:
+`;
+
+    const model = this.genAI.getGenerativeModel({ model: geminiConfig.MODEL });
+    const result = await model.generateContent(customInstruction);
+    const response = await result.response;
+    const text = response.text();
+
+    return { summary: text };
+  }
+
+  async summarizeMultipleNews(articles, query = '') {
+    if (!geminiConfig.API_KEY) {
+      throw new Error('Gemini API key not configured');
+    }
+
+    // Format tất cả các bài báo thành 1 prompt
+    let formattedContent = `Đóng vai: Biên tập viên Ban Thời sự - Đài Truyền hình Việt Nam (VTV).
+Từ khóa tìm kiếm: "${query}"
+Nhiệm vụ: Dưới đây là ${articles.length} bài tin tức. Hãy biên tập lại TOÀN BỘ các tin này thành một bản tin tổng hợp ngắn gọn.
+
+Yêu cầu biên tập:
+0. **QUAN TRỌNG**: Kiểm tra độ liên quan:
+   - Nếu nội dung các bài báo KHÔNG liên quan đến từ khóa tìm kiếm "${query}", hãy DỪNG LẠI và chỉ trả về: "Không tìm được bài viết liên quan đến từ khóa này." nếu query là "tin tức việt nam + ngày" thì sumary bình thường.
+   - Chỉ tiếp tục tóm tắt các bài báo CÓ LIÊN QUAN đến từ khóa.
+   - Chỉ lấy nội dung dài nhất của một bài viết để tóm tắt, tránh bị lạc đề do quảng cáo trong bài.
+1. Văn phong: Chính luận, trang trọng, gãy gọn, dứt khoát (đặc trưng của bản tin Thời sự).
+2. Cấu trúc:
+   - Nhóm các tin liên quan lại với nhau (nếu có).
+   - Mỗi tin được tóm lược thành 2-3 câu, rõ ràng, dễ hiểu.
+3. Độ dài: Mỗi tin khoảng 50-80 từ.
+4. Tuyệt đối khách quan, không lồng ghép cảm xúc cá nhân.
+5. Loại bỏ các bài trùng nội dung nếu có.
+6. Chỉ trả về nội dung bài nói, bắt đầu bằng cách nói bản tổng hợp này có gì, các đoạn sau
+đọc phải có câu chuyển (ví dụ: "Tiếp theo là tin về...", "Chuyển sang tin tiếp theo...", "Tin cuối cùng...") và topic sentence.
+7. Không chú thích gì cả, phản hồi trông như lời nói của biên tập viên
+8. Không dùng formal markdown, chỉ phản hồi thuần văn bản.
+---
+DỮ LIỆU ĐẦU VÀO:
+
+`;
+
+    articles.forEach((article, index) => {
+      formattedContent += `\n[BÀI ${index + 1}]\n`;
+      formattedContent += `Tiêu đề: ${article.title}\n`;
+      formattedContent += `Nguồn: ${article.source}\n`;
+      formattedContent += `Nội dung:\n${article.content}\n`;
+      formattedContent += `\n---\n`;
+    });
+
+    formattedContent += `\n\nHãy bắt đầu bản tin tổng hợp:`;
+
+    const model = this.genAI.getGenerativeModel({ model: geminiConfig.MODEL });
+    const result = await model.generateContent(formattedContent);
+    const response = await result.response;
+    
+    // Check if response was blocked due to safety filters
+    if (!response.candidates || response.candidates.length === 0) {
+      throw new Error('PROHIBITED_CONTENT: Nội dung bị chặn bởi bộ lọc an toàn của Gemini AI');
+    }
+    
+    const candidate = response.candidates[0];
+    if (candidate.finishReason === 'SAFETY') {
+      const safetyRatings = candidate.safetyRatings || [];
+      console.log('[GEMINI API] Content blocked by safety filters:', safetyRatings);
+      throw new Error('PROHIBITED_CONTENT: Nội dung vi phạm tiêu chuẩn an toàn');
+    }
+    
+    let text;
+    try {
+      text = response.text();
+    } catch (textError) {
+      if (textError.message.includes('PROHIBITED_CONTENT') || textError.message.includes('blocked')) {
+        throw new Error('PROHIBITED_CONTENT: Nội dung không phù hợp được phát hiện');
+      }
+      throw textError;
+    }
+
+    return { summary: text, totalArticles: articles.length };
+  }
+}
+
+export default new GeminiService();

services/scrape.service.js

@@ -0,0 +1,256 @@
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+import puppeteer from 'puppeteer';
+import puppeteerConfig from '../config/puppeteer.config.js';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+
+// ─── Shared browser-like headers ──────────────────────────────────────────────
+const BROWSER_HEADERS = {
+  'User-Agent':
+    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36',
+  'Accept':
+    'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8',
+  'Accept-Language': 'vi-VN,vi;q=0.9,en-US;q=0.8,en;q=0.7',
+  'Accept-Encoding': 'gzip, deflate, br',
+  'Cache-Control': 'no-cache',
+  'Pragma': 'no-cache',
+  'Sec-Fetch-Dest': 'document',
+  'Sec-Fetch-Mode': 'navigate',
+  'Sec-Fetch-Site': 'none',
+  'Upgrade-Insecure-Requests': '1',
+};
+
+// ─── Content selectors (ordered by priority) ──────────────────────────────────
+const ARTICLE_SELECTORS = [
+  'article',
+  '[class*="article-body"]',
+  '[class*="article-content"]',
+  '[class*="post-content"]',
+  '[class*="entry-content"]',
+  '[itemprop="articleBody"]',
+  '.content-detail',   // VnExpress
+  '.fck_detail',       // VnExpress
+  '#main-detail-body', // Tuổi Trẻ
+  '.detail-content',   // Thanh Niên
+  '.singular-content', // Dân Trí
+  'main',
+  '#content',
+  '.content',
+];
+
+// ─── Fast scrape via axios + cheerio ──────────────────────────────────────────
+async function scrapeWithAxios(url) {
+  const t0 = Date.now();
+  const shortUrl = url.substring(0, 60);
+  console.log(`[AXIOS] ⏳ Fetching: ${shortUrl}`);
+
+  const response = await axios.get(url, {
+    headers: { ...BROWSER_HEADERS, Referer: new URL(url).origin },
+    timeout: 8000,        // 8s hard limit
+    maxRedirects: 5,
+    responseType: 'arraybuffer', // handle encoding correctly
+  });
+  console.log(`[AXIOS] ✅ Got HTTP ${response.status} in ${Date.now() - t0}ms — ${shortUrl}`);
+
+  // Detect charset from Content-Type header
+  const contentType = response.headers['content-type'] || '';
+  const charsetMatch = contentType.match(/charset=([^\s;]+)/i);
+  const charset = charsetMatch ? charsetMatch[1].toLowerCase() : 'utf-8';
+
+  let html;
+  try {
+    html = new TextDecoder(charset).decode(response.data);
+  } catch {
+    html = new TextDecoder('utf-8').decode(response.data);
+  }
+
+  const t1 = Date.now();
+  const $ = cheerio.load(html);
+
+  // Remove noise elements
+  $('script, style, noscript, nav, header, footer, aside, [class*="ads"], [class*="banner"], [id*="ads"], [class*="related"], [class*="comment"]').remove();
+
+  const title = $('title').text().trim() || $('h1').first().text().trim() || '';
+
+  // Try selectors in order
+  let text = '';
+  let foundSelector = 'none';
+  for (const sel of ARTICLE_SELECTORS) {
+    const el = $(sel).first();
+    const content = el.text().replace(/\s+/g, ' ').trim();
+    if (content.length > 300) {
+      text = content;
+      foundSelector = sel;
+      break;
+    }
+  }
+
+  // Fallback: body text
+  if (!text) {
+    text = $('body').text().replace(/\s+/g, ' ').trim();
+    foundSelector = 'body';
+  }
+
+  console.log(`[AXIOS] 📄 selector="${foundSelector}" chars=${text.length} parse=${Date.now()-t1}ms total=${Date.now()-t0}ms — ${shortUrl}`);
+
+  return {
+    title,
+    url,
+    text: text.substring(0, 3000),
+    selector: foundSelector,
+    textLength: text.length,
+  };
+}
+
+// ─── Slow scrape via Puppeteer (fallback) ─────────────────────────────────────
+async function scrapeWithPuppeteer(url) {
+  let browser = null;
+  let tempDir = null;
+  const t0 = Date.now();
+  const shortUrl = url.substring(0, 60);
+
+  try {
+    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'puppeteer-'));
+    console.log(`[PUPPETEER] 🚀 Launching browser for: ${shortUrl}`);
+
+    browser = await puppeteer.launch({
+      headless: puppeteerConfig.HEADLESS,
+      userDataDir: tempDir,
+      args: [
+        ...puppeteerConfig.ARGS,
+        '--disable-blink-features=AutomationControlled',
+        '--disable-dev-shm-usage',
+        '--no-first-run',
+        '--no-default-browser-check',
+      ],
+    });
+
+    const page = await browser.newPage();
+    await page.setUserAgent(BROWSER_HEADERS['User-Agent']);
+    await page.setViewport({ width: 1920, height: 1080 });
+    await page.setExtraHTTPHeaders({
+      'Accept-Language': BROWSER_HEADERS['Accept-Language'],
+      Accept: BROWSER_HEADERS['Accept'],
+    });
+
+    // Block heavy assets
+    await page.setRequestInterception(true);
+    page.on('request', (req) => {
+      const t = req.resourceType();
+      if (['image', 'stylesheet', 'font', 'media'].includes(t)) {
+        req.abort();
+      } else {
+        req.continue();
+      }
+    });
+
+    await page.evaluateOnNewDocument(() => {
+      Object.defineProperty(navigator, 'webdriver', { get: () => false });
+      window.chrome = { runtime: {} };
+    });
+
+    const tNav = Date.now();
+    console.log(`[PUPPETEER] ⏳ Navigating (browser launch took ${tNav - t0}ms)...`);
+    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 25000 });
+    console.log(`[PUPPETEER] ✅ DOM loaded in ${Date.now() - tNav}ms — ${shortUrl}`);
+    await new Promise((r) => setTimeout(r, 800));
+
+    const data = await page.evaluate((selectors) => {
+      const removeEls = document.querySelectorAll(
+        'script,style,noscript,nav,header,footer,aside'
+      );
+      removeEls.forEach((el) => el.remove());
+
+      const title =
+        document.title ||
+        document.querySelector('h1')?.innerText ||
+        '';
+      let text = '';
+      let foundSelector = 'none';
+
+      for (const sel of selectors) {
+        const el = document.querySelector(sel);
+        if (el && (el.innerText || '').length > 300) {
+          text = el.innerText;
+          foundSelector = sel;
+          break;
+        }
+      }
+
+      if (!text) {
+        text = document.body?.innerText || '';
+        foundSelector = 'body';
+      }
+
+      return {
+        title: title.trim(),
+        url: window.location.href,
+        text: text.replace(/\s+/g, ' ').trim().substring(0, 3000),
+        selector: foundSelector,
+        textLength: text.length,
+      };
+    }, ARTICLE_SELECTORS);
+
+    console.log(`[PUPPETEER] 📄 selector="${data.selector}" chars=${data.textLength} total=${Date.now()-t0}ms — ${shortUrl}`);
+    return data;
+  } finally {
+    if (browser) {
+      await browser.close();
+      await new Promise((r) => setTimeout(r, 500));
+    }
+    if (tempDir) {
+      try {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+      } catch {
+        // ignore cleanup errors
+      }
+    }
+  }
+}
+
+const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+class ScrapeService {
+  /**
+   * Production: axios+cheerio only (Puppeteer uses 150-300MB RAM per instance
+   * which OOM-kills the process on Render's 512MB free tier).
+   * Development: axios first, Puppeteer fallback if content is thin/blocked.
+   */
+  async scrapeUrl(url) {
+    try {
+      const data = await scrapeWithAxios(url);
+
+      if (data.textLength >= 300) {
+        return data;
+      }
+
+      // axios returned thin content
+      if (IS_PRODUCTION) {
+        console.warn(`[SCRAPE] axios thin content (${data.textLength} chars) — returning as-is (Puppeteer disabled in production)`);
+        return data; // return what we have; don't risk OOM
+      }
+
+      console.warn(`[SCRAPE] axios thin content (${data.textLength} chars) — falling back to Puppeteer`);
+    } catch (err) {
+      const status = err.response?.status;
+      const msg = `${status || err.message}`;
+
+      if (IS_PRODUCTION) {
+        console.warn(`[SCRAPE] axios failed (${msg}) — skipping Puppeteer in production, returning empty`);
+        // Return empty stub so the slot is skipped downstream
+        throw err;
+      }
+
+      console.warn(`[SCRAPE] axios failed (${msg}) — falling back to Puppeteer`);
+    }
+
+    // Development fallback only
+    return scrapeWithPuppeteer(url);
+  }
+}
+
+export default new ScrapeService();
+

services/tts.service.js

@@ -0,0 +1,33 @@
+import axios from 'axios';
+import ttsConfig from '../config/tts.config.js';
+
+class TtsService {
+  constructor() {
+    this.client = axios.create({
+      baseURL: ttsConfig.SERVICE_URL,
+      timeout: ttsConfig.TIMEOUT_MS
+    });
+  }
+
+  async health() {
+    const response = await this.client.get('/health');
+    return response.data;
+  }
+
+  async synthesize(payload) {
+    const response = await this.client.post('/v1/tts', payload);
+    return response.data;
+  }
+
+  async createTask(payload) {
+    const response = await this.client.post('/v1/tasks/tts', payload);
+    return response.data;
+  }
+
+  async getTask(taskId) {
+    const response = await this.client.get(`/v1/tasks/${encodeURIComponent(taskId)}`);
+    return response.data;
+  }
+}
+
+export default new TtsService();

services/ttsJob.service.js

@@ -0,0 +1,143 @@
+import { randomUUID } from 'crypto';
+import { createClient } from '@supabase/supabase-js';
+import supabaseConfig from '../config/supabase.config.js';
+import audioTranscodeService from './audioTranscode.service.js';
+import ttsService from './tts.service.js';
+
+const MAX_JOBS = 300;
+
+class TtsJobService {
+  constructor() {
+    this.jobs = new Map();
+    this.supabase = null;
+
+    if (supabaseConfig.URL && supabaseConfig.KEY) {
+      this.supabase = createClient(supabaseConfig.URL, supabaseConfig.KEY);
+    }
+  }
+
+  createJob(payload) {
+    const key = randomUUID();
+    const now = new Date().toISOString();
+
+    const job = {
+      key,
+      status: 'queued',
+      createdAt: now,
+      updatedAt: now,
+      error: null,
+      audioUrl: null
+    };
+
+    this.jobs.set(key, job);
+    this.trimJobs();
+
+    this.processJob(key, payload).catch((error) => {
+      this.updateJob(key, {
+        status: 'failed',
+        error: error.message || 'Unknown error'
+      });
+    });
+
+    return {
+      key,
+      status: 'queued',
+      createdAt: now
+    };
+  }
+
+  getJob(key) {
+    return this.jobs.get(key) || null;
+  }
+
+  updateJob(key, patch) {
+    const existing = this.jobs.get(key);
+    if (!existing) return;
+
+    this.jobs.set(key, {
+      ...existing,
+      ...patch,
+      updatedAt: new Date().toISOString()
+    });
+  }
+
+  trimJobs() {
+    if (this.jobs.size <= MAX_JOBS) return;
+
+    const removableCount = this.jobs.size - MAX_JOBS;
+    const keys = [...this.jobs.keys()].slice(0, removableCount);
+    keys.forEach((key) => this.jobs.delete(key));
+  }
+
+  async uploadAudio({ key, fileBuffer, format }) {
+    if (!this.supabase) {
+      throw new Error('Supabase is not configured. Please set SUPABASE_URL and SUPABASE_KEY');
+    }
+
+    const objectPath = `${key}.${format}`;
+    const contentType = format === 'mp3' ? 'audio/mpeg' : 'audio/wav';
+
+    const { error: uploadError } = await this.supabase.storage
+      .from(supabaseConfig.TTS_BUCKET)
+      .upload(objectPath, fileBuffer, {
+        contentType,
+        upsert: true,
+        cacheControl: '31536000'
+      });
+
+    if (uploadError) {
+      throw new Error(`Supabase upload failed: ${uploadError.message}`);
+    }
+
+    const publicResult = this.supabase.storage
+      .from(supabaseConfig.TTS_BUCKET)
+      .getPublicUrl(objectPath);
+
+    let audioUrl = publicResult?.data?.publicUrl || null;
+
+    if (!audioUrl) {
+      const signedResult = await this.supabase.storage
+        .from(supabaseConfig.TTS_BUCKET)
+        .createSignedUrl(objectPath, 60 * 60 * 24 * 7);
+
+      if (signedResult.error) {
+        throw new Error(`Supabase signed URL failed: ${signedResult.error.message}`);
+      }
+
+      audioUrl = signedResult.data.signedUrl;
+    }
+
+    return { audioUrl };
+  }
+
+  async processJob(key, payload) {
+    this.updateJob(key, {
+      status: 'processing',
+      error: null
+    });
+
+    const synthData = await ttsService.synthesize(payload);
+
+    if (!synthData?.audio_base64) {
+      throw new Error('FastAPI did not return audio data');
+    }
+
+    const wavBuffer = Buffer.from(synthData.audio_base64, 'base64');
+    const uploadBuffer = await audioTranscodeService.convertWavToMp3(wavBuffer);
+    const format = 'mp3';
+
+    const uploadResult = await this.uploadAudio({
+      key,
+      fileBuffer: uploadBuffer,
+      format
+    });
+
+    this.updateJob(key, {
+      status: 'completed',
+      error: null,
+      audioUrl: uploadResult.audioUrl
+    });
+  }
+}
+
+export default new TtsJobService();

src/App.css

@@ -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;
+	}
+}

src/App.jsx

@@ -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

src/AppHome.jsx

@@ -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

src/components/FilterBar.jsx

@@ -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;

src/components/Hero.jsx

@@ -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;

src/components/HomeNewsGrid.jsx

@@ -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;

src/components/HomePage.jsx

@@ -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;

src/components/Navbar.jsx

@@ -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;

src/components/NewsArticle.jsx

@@ -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;

src/components/SearchBox.jsx

@@ -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;

src/components/SummaryBox.jsx

@@ -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;

src/index.css

@@ -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;
+}

src/main.jsx

@@ -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>,
+)

src/services/api.service.js

@@ -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();

tts_fastapi/Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements from root and subdirs as needed
+COPY requirements.txt ./
+COPY backend/tts_fastapi/requirements.txt ./backend/tts_fastapi/
+COPY models/XTTSv2-Finetuning-for-New-Languages/requirements.txt ./models/XTTSv2-Finetuning-for-New-Languages/
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+WORKDIR /app/backend/tts_fastapi
+EXPOSE 8000
+
+CMD ["python3", "-m", "uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]

tts_fastapi/README.md

@@ -0,0 +1,42 @@
+# vnTTS FastAPI (GPU)
+
+This folder provides a FastAPI service that loads `anhnh2002/vnTTS` and exposes:
+
+- `POST /v1/tts` for synchronous TTS inference.
+- `POST /v1/tasks/tts` and `GET /v1/tasks/{task_id}` for async task dispatch.
+- `GET /health` for runtime health checks.
+
+## 1) Prepare environment (Windows + GPU)
+
+Use Python 3.11 and run from repository root:
+
+```powershell
+py -3.11 -m venv .venv311
+.\.venv311\Scripts\python.exe -m pip install --upgrade pip setuptools wheel
+.\.venv311\Scripts\python.exe -m pip install torch torchaudio --index-url https://download.pytorch.org/whl/cu121
+.\.venv311\Scripts\python.exe -m pip install -r .\models\XTTSv2-Finetuning-for-New-Languages\requirements.txt
+.\.venv311\Scripts\python.exe -m pip install -r .\backend\tts_fastapi\requirements.txt
+```
+
+## 2) Download model weights
+
+```powershell
+.\.venv311\Scripts\python.exe -c "from huggingface_hub import snapshot_download; snapshot_download(repo_id='anhnh2002/vnTTS', repo_type='model', local_dir='models/vntts-runtime-model')"
+```
+
+## 3) Run FastAPI service
+
+```powershell
+$env:PYTHONPATH="e:/Users/Admin/Documents/GitHub/Project-LT-ML-23KHDL1-HCMUS/models/XTTSv2-Finetuning-for-New-Languages"
+$env:VNTTS_MODEL_DIR="e:/Users/Admin/Documents/GitHub/Project-LT-ML-23KHDL1-HCMUS/models/vntts-runtime-model"
+$env:VNTTS_DEVICE="cuda:0"
+.\.venv311\Scripts\python.exe -m uvicorn backend.tts_fastapi.app:app --host 127.0.0.1 --port 8001
+```
+
+## 4) Smoke test
+
+```powershell
+Invoke-RestMethod -Method Post -Uri http://127.0.0.1:8001/v1/tts -ContentType "application/json" -Body '{"text":"Xin chao ban, day la ban thu am tu vnTTS.","language":"vi"}'
+```
+
+The API returns a JSON payload containing `audio_base64` and `sample_rate`.