Initial commit: PUM'S TOOLKIT - AI-powered tools collection

.gitignore

@@ -0,0 +1,6 @@
+__pycache__/
+*.pyc
+uploads/*.wav
+uploads/*.txt
+uploads/*.json
+.vscode/

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+RUN mkdir -p uploads
+
+EXPOSE 7860
+
+CMD ["python", "-c", "from app import app; app.run(host='0.0.0.0', port=7860)"]

README.md

@@ -0,0 +1,19 @@
+---
+title: PUM'S TOOLKIT
+emoji: 🛠️
+colorFrom: blue
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# PUM'S TOOLKIT 🛠️
+
+A collection of AI-powered tools built with Flask and Gemini AI.
+
+## Features
+- 🌐 **Translator** - Multi-language translation
+- 📄 **Smart PDF** - AI-powered PDF processing
+- 🎨 **Image Studio** - Image editing & background removal
+- 🔊 **TTS** - Text-to-Speech conversion

app.py

@@ -0,0 +1,649 @@
+import os
+import io
+import json
+import numpy as np
+import cv2
+from datetime import date
+from flask import Flask, render_template, request, jsonify, send_file, redirect, url_for
+from deep_translator import GoogleTranslator
+from google import genai
+from google.genai import types
+from docx import Document
+from PyPDF2 import PdfReader
+from reportlab.pdfgen import canvas
+from reportlab.lib.pagesizes import letter
+from werkzeug.utils import secure_filename
+from rembg import remove as rembg_remove
+
+app = Flask(__name__)
+app.config['UPLOAD_FOLDER'] = 'uploads'
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB
+
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+GEMINI_API_KEY = "AQ.Ab8RN6JxMSl1LlebmW8kq6jjam99Z0qKf2wkwu8WjFKVEp6kGQ"
+USAGE_FILE = os.path.join(app.config['UPLOAD_FOLDER'], 'gemini_usage.json')
+
+GEMINI_MODELS = [
+    {"id": "gemini-2.5-flash",      "name": "Gemini 2.5 Flash",      "rpd": 500},
+    {"id": "gemini-2.5-flash-lite", "name": "Gemini 2.5 Flash Lite", "rpd": 1000},
+    {"id": "gemini-2.0-flash",      "name": "Gemini 2.0 Flash",      "rpd": 200},
+    {"id": "gemini-2.0-flash-lite", "name": "Gemini 2.0 Flash Lite", "rpd": 1000},
+    {"id": "gemini-1.5-flash",      "name": "Gemini 1.5 Flash",      "rpd": 1500},
+    {"id": "gemini-1.5-flash-8b",   "name": "Gemini 1.5 Flash 8B",   "rpd": 1500},
+    {"id": "gemini-1.5-pro",        "name": "Gemini 1.5 Pro",        "rpd": 50},
+]
+DEFAULT_MODEL = "gemini-2.5-flash"
+
+# ── Usage tracking ────────────────────────────────────────────
+def load_usage():
+    if not os.path.exists(USAGE_FILE):
+        return {}
+    with open(USAGE_FILE, 'r') as f:
+        data = json.load(f)
+    if data.get('date') != str(date.today()):
+        return {}
+    return data.get('usage', {})
+
+def save_usage(usage_dict):
+    with open(USAGE_FILE, 'w') as f:
+        json.dump({'date': str(date.today()), 'usage': usage_dict}, f)
+
+def increment_usage(model_id):
+    usage = load_usage()
+    usage[model_id] = usage.get(model_id, 0) + 1
+    save_usage(usage)
+
+try:
+    client = genai.Client(api_key=GEMINI_API_KEY.strip())
+except Exception as e:
+    print(f"Lỗi cấu hình Gemini: {e}")
+
+# ── Translation helpers ───────────────────────────────────────
+def translate_text(text, target_lang, engine, style=None, gemini_model=None):
+    if not text.strip():
+        return ""
+    if engine == 'google':
+        return GoogleTranslator(source='auto', target=target_lang).translate(text)
+    elif engine == 'gemini':
+        model_id = gemini_model if gemini_model else DEFAULT_MODEL
+        style_prompt = f" in a {style} style" if style and style != 'default' else ""
+        prompt = (f"Translate the following text to the language with code '{target_lang}'{style_prompt}. "
+                  f"Maintain the original meaning and formatting. "
+                  f"Detect the source language automatically. "
+                  f"Return only the translated text:\n\n{text}")
+        response = client.models.generate_content(model=model_id, contents=prompt)
+        increment_usage(model_id)
+        return response.text.strip()
+    return text
+
+def process_file(filepath, filename, target_lang, engine, style, gemini_model=None):
+    ext = filename.rsplit('.', 1)[1].lower()
+    output_filename = f"translated_{filename}"
+    output_path = os.path.join(app.config['UPLOAD_FOLDER'], output_filename)
+
+    if ext == 'txt':
+        with open(filepath, 'r', encoding='utf-8') as f:
+            text = f.read()
+        translated_text = translate_text(text, target_lang, engine, style, gemini_model)
+        with open(output_path, 'w', encoding='utf-8') as f:
+            f.write(translated_text)
+
+    elif ext == 'docx':
+        doc = Document(filepath)
+        new_doc = Document()
+        for para in doc.paragraphs:
+            if para.text.strip():
+                new_doc.add_paragraph(translate_text(para.text, target_lang, engine, style, gemini_model))
+            else:
+                new_doc.add_paragraph("")
+        new_doc.save(output_path)
+
+    elif ext == 'pdf':
+        reader = PdfReader(filepath)
+        text = "".join((page.extract_text() or '') + "\n" for page in reader.pages)
+        translated_text = translate_text(text, target_lang, engine, style, gemini_model)
+        c = canvas.Canvas(output_path, pagesize=letter)
+        width, height = letter
+        text_obj = c.beginText(40, height - 40)
+        for line in translated_text.split('\n'):
+            if text_obj.getY() < 40:
+                c.drawText(text_obj)
+                c.showPage()
+                text_obj = c.beginText(40, height - 40)
+            text_obj.textLine(line)
+        c.drawText(text_obj)
+        c.save()
+
+    return output_filename
+
+def _err_msg(err):
+    if '429' in err or 'quota' in err.lower():
+        return 'Gemini API đã h���t quota. Vui lòng thử lại sau hoặc chuyển sang Google Translate.'
+    if 'API_KEY' in err or 'api key' in err.lower():
+        return 'API key không hợp lệ. Vui lòng kiểm tra cấu hình.'
+    return err
+
+# ── Routes: General ──────────────────────────────────────────
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/download/<filename>')
+def download(filename):
+    return send_file(os.path.join(app.config['UPLOAD_FOLDER'], filename), as_attachment=True)
+
+# ── Routes: API ───────────────────────────────────────────────
+@app.route('/api/gemini-models')
+def gemini_models():
+    usage = load_usage()
+    result = []
+    for m in GEMINI_MODELS:
+        used = usage.get(m['id'], 0)
+        result.append({**m, 'used': used, 'remaining': max(0, m['rpd'] - used)})
+    return jsonify(result)
+
+@app.route('/api/gemini-quota')
+def gemini_quota():
+    return jsonify(load_usage())
+
+@app.route('/api/languages')
+def languages():
+    langs = [
+        {"code": "auto", "name": "Tự động phát hiện", "source_only": True},
+        {"code": "af", "name": "Afrikaans"},
+        {"code": "sq", "name": "Albanian"},
+        {"code": "am", "name": "Amharic"},
+        {"code": "ar", "name": "Arabic (العربية)"},
+        {"code": "hy", "name": "Armenian"},
+        {"code": "az", "name": "Azerbaijani"},
+        {"code": "eu", "name": "Basque"},
+        {"code": "be", "name": "Belarusian"},
+        {"code": "bn", "name": "Bengali (বাংলা)"},
+        {"code": "bs", "name": "Bosnian"},
+        {"code": "bg", "name": "Bulgarian"},
+        {"code": "ca", "name": "Catalan"},
+        {"code": "ceb", "name": "Cebuano"},
+        {"code": "zh-CN", "name": "Chinese Simplified (中文简体)"},
+        {"code": "zh-TW", "name": "Chinese Traditional (中文繁體)"},
+        {"code": "co", "name": "Corsican"},
+        {"code": "hr", "name": "Croatian"},
+        {"code": "cs", "name": "Czech"},
+        {"code": "da", "name": "Danish"},
+        {"code": "nl", "name": "Dutch"},
+        {"code": "en", "name": "English"},
+        {"code": "eo", "name": "Esperanto"},
+        {"code": "et", "name": "Estonian"},
+        {"code": "fi", "name": "Finnish"},
+        {"code": "fr", "name": "French"},
+        {"code": "fy", "name": "Frisian"},
+        {"code": "gl", "name": "Galician"},
+        {"code": "ka", "name": "Georgian"},
+        {"code": "de", "name": "German"},
+        {"code": "el", "name": "Greek"},
+        {"code": "gu", "name": "Gujarati"},
+        {"code": "ht", "name": "Haitian Creole"},
+        {"code": "ha", "name": "Hausa"},
+        {"code": "haw", "name": "Hawaiian"},
+        {"code": "he", "name": "Hebrew"},
+        {"code": "hi", "name": "Hindi (हिन्दी)"},
+        {"code": "hmn", "name": "Hmong"},
+        {"code": "hu", "name": "Hungarian"},
+        {"code": "is", "name": "Icelandic"},
+        {"code": "ig", "name": "Igbo"},
+        {"code": "id", "name": "Indonesian"},
+        {"code": "ga", "name": "Irish"},
+        {"code": "it", "name": "Italian"},
+        {"code": "ja", "name": "Japanese (日本語)"},
+        {"code": "jv", "name": "Javanese"},
+        {"code": "kn", "name": "Kannada"},
+        {"code": "kk", "name": "Kazakh"},
+        {"code": "km", "name": "Khmer"},
+        {"code": "rw", "name": "Kinyarwanda"},
+        {"code": "ko", "name": "Korean (한국어)"},
+        {"code": "ku", "name": "Kurdish"},
+        {"code": "ky", "name": "Kyrgyz"},
+        {"code": "lo", "name": "Lao"},
+        {"code": "la", "name": "Latin"},
+        {"code": "lv", "name": "Latvian"},
+        {"code": "lt", "name": "Lithuanian"},
+        {"code": "lb", "name": "Luxembourgish"},
+        {"code": "mk", "name": "Macedonian"},
+        {"code": "mg", "name": "Malagasy"},
+        {"code": "ms", "name": "Malay"},
+        {"code": "ml", "name": "Malayalam"},
+        {"code": "mt", "name": "Maltese"},
+        {"code": "mi", "name": "Maori"},
+        {"code": "mr", "name": "Marathi"},
+        {"code": "mn", "name": "Mongolian"},
+        {"code": "my", "name": "Myanmar (Burmese)"},
+        {"code": "ne", "name": "Nepali"},
+        {"code": "no", "name": "Norwegian"},
+        {"code": "ny", "name": "Nyanja (Chichewa)"},
+        {"code": "or", "name": "Odia (Oriya)"},
+        {"code": "ps", "name": "Pashto"},
+        {"code": "fa", "name": "Persian (فارسی)"},
+        {"code": "pl", "name": "Polish"},
+        {"code": "pt", "name": "Portuguese"},
+        {"code": "pa", "name": "Punjabi"},
+        {"code": "ro", "name": "Romanian"},
+        {"code": "ru", "name": "Russian (Русский)"},
+        {"code": "sm", "name": "Samoan"},
+        {"code": "gd", "name": "Scots Gaelic"},
+        {"code": "sr", "name": "Serbian"},
+        {"code": "st", "name": "Sesotho"},
+        {"code": "sn", "name": "Shona"},
+        {"code": "sd", "name": "Sindhi"},
+        {"code": "si", "name": "Sinhala"},
+        {"code": "sk", "name": "Slovak"},
+        {"code": "sl", "name": "Slovenian"},
+        {"code": "so", "name": "Somali"},
+        {"code": "es", "name": "Spanish"},
+        {"code": "su", "name": "Sundanese"},
+        {"code": "sw", "name": "Swahili"},
+        {"code": "sv", "name": "Swedish"},
+        {"code": "tl", "name": "Tagalog (Filipino)"},
+        {"code": "tg", "name": "Tajik"},
+        {"code": "ta", "name": "Tamil"},
+        {"code": "tt", "name": "Tatar"},
+        {"code": "te", "name": "Telugu"},
+        {"code": "th", "name": "Thai (ไทย)"},
+        {"code": "tr", "name": "Turkish"},
+        {"code": "tk", "name": "Turkmen"},
+        {"code": "uk", "name": "Ukrainian"},
+        {"code": "ur", "name": "Urdu"},
+        {"code": "ug", "name": "Uyghur"},
+        {"code": "uz", "name": "Uzbek"},
+        {"code": "vi", "name": "Vietnamese (Tiếng Việt)"},
+        {"code": "cy", "name": "Welsh"},
+        {"code": "xh", "name": "Xhosa"},
+        {"code": "yi", "name": "Yiddish"},
+        {"code": "yo", "name": "Yoruba"},
+        {"code": "zu", "name": "Zulu"},
+    ]
+    return jsonify(langs)
+
+# ── Routes: Translator ────────────────────────────────────────
+@app.route('/translator')
+def translator_tool():
+    return redirect(url_for('translator_text'))
+
+@app.route('/translator/text')
+def translator_text():
+    return render_template('tools/translator/index.html', active_tab='text')
+
+@app.route('/translator/file')
+def translator_file():
+    return render_template('tools/translator/index.html', active_tab='file')
+
+@app.route('/translator/image')
+def translator_image():
+    return render_template('tools/translator/image.html')
+
+
+def translate():
+    if 'file' in request.files and request.files['file'].filename != '':
+        file = request.files['file']
+        target_lang = request.form.get('target_lang', 'vi')
+        engine = request.form.get('engine', 'google')
+        style = request.form.get('style', 'default')
+        gemini_model = request.form.get('gemini_model', DEFAULT_MODEL)
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        try:
+            output_file = process_file(filepath, filename, target_lang, engine, style, gemini_model)
+            return jsonify({'download_url': f'/download/{output_file}'})
+        except Exception as e:
+            return jsonify({'error': _err_msg(str(e))}), 500
+
+    data = request.json
+    if not data or not data.get('text'):
+        return jsonify({'error': 'No text provided'}), 400
+    try:
+        translated = translate_text(
+            data['text'], data.get('target_lang', 'vi'),
+            data.get('engine', 'google'), data.get('style', 'default'),
+            data.get('gemini_model', DEFAULT_MODEL)
+        )
+        return jsonify({'translated_text': translated})
+    except Exception as e:
+        return jsonify({'error': _err_msg(str(e))}), 500
+
+@app.route('/preview-file', methods=['POST'])
+def preview_file():
+    if 'file' not in request.files or request.files['file'].filename == '':
+        return jsonify({'error': 'Không có file'}), 400
+    file = request.files['file']
+    filename = secure_filename(file.filename)
+    ext = filename.rsplit('.', 1)[-1].lower()
+    preview_chars = 1000
+    try:
+        if ext == 'txt':
+            text = file.read().decode('utf-8', errors='ignore')
+        elif ext == 'docx':
+            doc = Document(file)
+            text = '\n'.join(p.text for p in doc.paragraphs if p.text.strip())
+        elif ext == 'pdf':
+            reader = PdfReader(file)
+            text = ''
+            for page in reader.pages:
+                text += (page.extract_text() or '') + '\n'
+                if len(text) >= preview_chars:
+                    break
+        else:
+            return jsonify({'error': 'Định dạng không hỗ trợ'}), 400
+        preview = text[:preview_chars]
+        return jsonify({'preview': preview, 'truncated': len(text) > preview_chars, 'total_chars': len(text)})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# ── Routes: Image Studio ──────────────────────────────────────
+@app.route('/image-studio')
+def image_studio():
+    return redirect(url_for('image_studio_remove_bg'))
+
+@app.route('/image-studio/remove-bg')
+def image_studio_remove_bg():
+    return render_template('tools/image_studio/index.html', active_tool='remove-bg')
+
+@app.route('/image-studio/upscale')
+def image_studio_upscale():
+    return render_template('tools/image_studio/index.html', active_tool='upscale')
+
+@app.route('/image/remove-bg', methods=['POST'])
+def image_remove_bg():
+    if 'image' not in request.files or request.files['image'].filename == '':
+        return jsonify({'error': 'Không có ảnh'}), 400
+    file = request.files['image']
+    filename = secure_filename(file.filename)
+    ext = filename.rsplit('.', 1)[-1].lower()
+    if ext not in ['jpg', 'jpeg', 'png', 'webp']:
+        return jsonify({'error': 'Định dạng không hỗ trợ. Dùng JPG, PNG hoặc WEBP.'}), 400
+    try:
+        img_bytes = file.read()
+        output_bytes = rembg_remove(img_bytes)
+        out_filename = f"nobg_{os.path.splitext(filename)[0]}.png"
+        out_path = os.path.join(app.config['UPLOAD_FOLDER'], out_filename)
+        with open(out_path, 'wb') as f:
+            f.write(output_bytes)
+        return jsonify({'result_url': f'/download/{out_filename}', 'filename': out_filename})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/image/upscale', methods=['POST'])
+def image_upscale():
+    if 'image' not in request.files or request.files['image'].filename == '':
+        return jsonify({'error': 'Không có ảnh'}), 400
+    file = request.files['image']
+    scale = int(request.form.get('scale', 2))
+    if scale not in [2, 3, 4]:
+        scale = 2
+    filename = secure_filename(file.filename)
+    ext = filename.rsplit('.', 1)[-1].lower()
+    if ext not in ['jpg', 'jpeg', 'png', 'webp']:
+        return jsonify({'error': 'Định dạng không hỗ trợ. Dùng JPG, PNG hoặc WEBP.'}), 400
+    try:
+        img_bytes = np.frombuffer(file.read(), np.uint8)
+        img = cv2.imdecode(img_bytes, cv2.IMREAD_UNCHANGED)
+        h, w = img.shape[:2]
+        new_w, new_h = w * scale, h * scale
+        upscaled = cv2.resize(img, (new_w, new_h), interpolation=cv2.INTER_LANCZOS4)
+        out_filename = f"upscaled_{scale}x_{filename}"
+        out_path = os.path.join(app.config['UPLOAD_FOLDER'], out_filename)
+        cv2.imwrite(out_path, upscaled)
+        return jsonify({
+            'result_url': f'/download/{out_filename}',
+            'filename': out_filename,
+            'original_size': f"{w}x{h}",
+            'new_size': f"{new_w}x{new_h}"
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/translate-image', methods=['POST'])
+def translate_image():
+    if 'image' not in request.files or request.files['image'].filename == '':
+        return jsonify({'error': 'Không có ảnh'}), 400
+    file = request.files['image']
+    filename = secure_filename(file.filename)
+    ext = filename.rsplit('.', 1)[-1].lower()
+    if ext not in ['jpg', 'jpeg', 'png', 'webp', 'gif']:
+        return jsonify({'error': 'Định dạng không hỗ trợ. Dùng JPG, PNG, WEBP hoặc GIF.'}), 400
+
+    target_lang = request.form.get('target_lang', 'vi')
+    model_id = request.form.get('gemini_model', DEFAULT_MODEL)
+    mode = request.form.get('mode', 'translate')  # translate | ocr_only
+
+    try:
+        import base64
+        img_bytes = file.read()
+        img_b64 = base64.b64encode(img_bytes).decode('utf-8')
+        mime_map = {'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'png': 'image/png',
+                    'webp': 'image/webp', 'gif': 'image/gif'}
+        mime_type = mime_map.get(ext, 'image/jpeg')
+
+        from google.genai import types as genai_types
+
+        if mode == 'ocr_only':
+            prompt = "Hãy đọc và trích xuất toàn bộ văn bản trong ảnh này. Chỉ trả về văn bản, không giải thích thêm."
+        else:
+            prompt = (f"Hãy thực hiện 2 bước:\n"
+                      f"1. Đọc toàn bộ văn bản trong ảnh\n"
+                      f"2. Dịch văn bản đó sang ngôn ngữ có mã '{target_lang}'\n\n"
+                      f"Trả về theo định dạng:\n"
+                      f"**Văn bản gốc:**\n[nội dung đọc được]\n\n"
+                      f"**Bản dịch:**\n[bản dịch]")
+
+        response = client.models.generate_content(
+            model=model_id,
+            contents=[
+                genai_types.Part.from_bytes(data=img_bytes, mime_type=mime_type),
+                prompt
+            ]
+        )
+        increment_usage(model_id)
+        return jsonify({'result': response.text.strip()})
+    except Exception as e:
+        return jsonify({'error': _err_msg(str(e))}), 500
+
+@app.route('/tts')
+def tts_index():
+    return redirect(url_for('tts_vieneu'))
+
+@app.route('/tts/vieneu')
+def tts_vieneu():
+    return render_template('tools/tts/vieneu.html')
+
+@app.route('/tts/gtts')
+def tts_gtts():
+    return render_template('tools/tts/gtts.html')
+
+@app.route('/tts/edge')
+def tts_edge():
+    return render_template('tools/tts/edge.html')
+
+
+def tts_voices():
+    try:
+        from vieneu import Vieneu
+        tts = Vieneu()
+        voices = tts.list_preset_voices()
+        return jsonify([{'label': label, 'id': vid} for label, vid in voices])
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/edge-voices')
+def edge_voices():
+    import asyncio, edge_tts
+    try:
+        voices = asyncio.run(edge_tts.list_voices())
+        result = []
+        for v in voices:
+            result.append({
+                'name': v['ShortName'],
+                'display': v.get('FriendlyName', v['ShortName']),
+                'locale': v['Locale'],
+                'gender': v['Gender'],
+                'lang': v['Locale'].split('-')[0]
+            })
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/tts/edge/generate', methods=['POST'])
+def tts_edge_generate():
+    import asyncio, edge_tts
+    text = request.form.get('text', '').strip()
+    voice = request.form.get('voice', 'en-US-JennyNeural')
+    rate = request.form.get('rate', '+0%')
+    pitch = request.form.get('pitch', '+0Hz')
+
+    if not text:
+        return jsonify({'error': 'Vui lòng nhập văn bản'}), 400
+    if len(text) > 10000:
+        return jsonify({'error': 'Văn bản quá dài (tối đa 10.000 ký tự)'}), 400
+
+    out_filename = f"tts_edge_{os.urandom(4).hex()}.mp3"
+    out_path = os.path.join(app.config['UPLOAD_FOLDER'], out_filename)
+
+    async def _generate():
+        communicate = edge_tts.Communicate(text, voice, rate=rate, pitch=pitch)
+        await communicate.save(out_path)
+
+    try:
+        asyncio.run(_generate())
+        return jsonify({'audio_url': f'/download/{out_filename}', 'filename': out_filename})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/gtts-langs')
+def gtts_langs():
+    return jsonify([
+        {"code": "vi", "name": "Tiếng Việt"},
+        {"code": "en", "name": "English"},
+        {"code": "en-us", "name": "English (US)"},
+        {"code": "en-gb", "name": "English (UK)"},
+        {"code": "en-au", "name": "English (AU)"},
+        {"code": "ja", "name": "日本語 (Nhật)"},
+        {"code": "ko", "name": "한국어 (Hàn)"},
+        {"code": "zh-CN", "name": "中文简体 (Trung giản)"},
+        {"code": "zh-TW", "name": "中文繁體 (Trung phồn)"},
+        {"code": "fr", "name": "Français (Pháp)"},
+        {"code": "de", "name": "Deutsch (Đức)"},
+        {"code": "es", "name": "Español (Tây Ban Nha)"},
+        {"code": "it", "name": "Italiano (Ý)"},
+        {"code": "pt", "name": "Português (Bồ Đào Nha)"},
+        {"code": "ru", "name": "Русский (Nga)"},
+        {"code": "ar", "name": "العربية (Ả Rập)"},
+        {"code": "hi", "name": "हिन्दी (Hindi)"},
+        {"code": "th", "name": "ภาษาไทย (Thái)"},
+        {"code": "id", "name": "Bahasa Indonesia"},
+        {"code": "ms", "name": "Bahasa Melayu (Mã Lai)"},
+        {"code": "nl", "name": "Nederlands (Hà Lan)"},
+        {"code": "pl", "name": "Polski (Ba Lan)"},
+        {"code": "sv", "name": "Svenska (Thụy Điển)"},
+        {"code": "tr", "name": "Türkçe (Thổ Nhĩ Kỳ)"},
+        {"code": "uk", "name": "Українська (Ukraine)"},
+    ])
+
+@app.route('/tts/generate', methods=['POST'])
+def tts_generate():
+    text = request.form.get('text', '').strip()
+    voice_id = request.form.get('voice', 'Ngọc Lan')
+    ref_audio = request.files.get('ref_audio')
+    engine = request.form.get('engine', 'vieneu')  # vieneu | gtts
+    gtts_lang = request.form.get('gtts_lang', 'vi')
+    gtts_slow = request.form.get('gtts_slow', 'false') == 'true'
+
+    if not text:
+        return jsonify({'error': 'Vui lòng nhập văn bản'}), 400
+
+    out_filename = f"tts_{os.urandom(4).hex()}.mp3"
+    out_path = os.path.join(app.config['UPLOAD_FOLDER'], out_filename)
+
+    try:
+        if engine == 'gtts':
+            if len(text) > 5000:
+                return jsonify({'error': 'Văn bản quá dài (tối đa 5000 ký tự với gTTS)'}), 400
+            from gtts import gTTS
+            tts_obj = gTTS(text=text, lang=gtts_lang, slow=gtts_slow)
+            tts_obj.save(out_path)
+            return jsonify({'audio_url': f'/download/{out_filename}', 'filename': out_filename})
+
+        # VieNeu engine
+        if len(text) > 3000:
+            return jsonify({'error': 'Văn bản quá dài (tối đa 3000 ký tự với VieNeu)'}), 400
+        from vieneu import Vieneu
+        tts_obj = Vieneu()
+        out_filename = f"tts_{os.urandom(4).hex()}.wav"
+        out_path = os.path.join(app.config['UPLOAD_FOLDER'], out_filename)
+
+        if ref_audio and ref_audio.filename:
+            ref_filename = secure_filename(ref_audio.filename)
+            ref_path = os.path.join(app.config['UPLOAD_FOLDER'], f"ref_{ref_filename}")
+            ref_audio.save(ref_path)
+            audio = tts_obj.infer(text=text, ref_audio=ref_path)
+        else:
+            audio = tts_obj.infer(text=text, voice=voice_id)
+
+        tts_obj.save(audio, out_path)
+        return jsonify({'audio_url': f'/download/{out_filename}', 'filename': out_filename})
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+def extract_pdf_text(file):
+    reader = PdfReader(file)
+    return "".join((page.extract_text() or '') + "\n" for page in reader.pages).strip()
+
+@app.route('/pdf')
+def pdf_index():
+    return redirect(url_for('pdf_summarize'))
+
+@app.route('/pdf/summarize')
+def pdf_summarize():
+    return render_template('tools/smart_pdf/index.html', active_tool='summarize')
+
+@app.route('/pdf/extract')
+def pdf_extract():
+    return render_template('tools/smart_pdf/index.html', active_tool='extract')
+
+@app.route('/pdf/process', methods=['POST'])
+def pdf_process():
+    if 'file' not in request.files or request.files['file'].filename == '':
+        return jsonify({'error': 'Không có file PDF'}), 400
+    file = request.files['file']
+    filename = secure_filename(file.filename)
+    if not filename.lower().endswith('.pdf'):
+        return jsonify({'error': 'Chỉ hỗ trợ file PDF'}), 400
+    tool = request.form.get('tool', 'summarize')
+    model_id = request.form.get('gemini_model', DEFAULT_MODEL)
+    lang = request.form.get('lang', 'vi')
+    extract_type = request.form.get('extract_type', 'table')
+    try:
+        text = extract_pdf_text(file)
+        if not text:
+            return jsonify({'error': 'Không đọc được nội dung PDF. File có thể bị scan (ảnh).'}), 400
+        if tool == 'summarize':
+            prompt = (f"Hãy tóm tắt tài liệu PDF sau bằng ngôn ngữ có mã '{lang}'. "
+                      f"Tóm tắt cần:\n1. Ý chính tổng quan (2-3 câu)\n2. Các điểm quan trọng (bullet points)\n"
+                      f"3. Kết luận/khuyến nghị (nếu có)\n\nNội dung tài liệu:\n{text[:15000]}")
+        else:
+            type_map = {
+                'table': 'bảng dữ liệu (tables) dưới dạng Markdown',
+                'key_value': 'các cặp thông tin quan trọng (key-value) như tên, ngày, số liệu',
+                'entity': 'các thực thể: tên người, tổ chức, địa điểm, ngày tháng, số tiền',
+                'custom': request.form.get('custom_prompt', 'thông tin quan trọng')
+            }
+            extract_desc = type_map.get(extract_type, type_map['key_value'])
+            prompt = (f"Từ tài liệu PDF sau, hãy trích xuất {extract_desc}. "
+                      f"Trả lời bằng ngôn ngữ có mã '{lang}'. Định dạng output rõ ràng, dễ đọc.\n\n"
+                      f"Nội dung tài liệu:\n{text[:15000]}")
+        response = client.models.generate_content(model=model_id, contents=prompt)
+        increment_usage(model_id)
+        return jsonify({'result': response.text.strip(), 'total_chars': len(text), 'truncated': len(text) > 15000})
+    except Exception as e:
+        return jsonify({'error': _err_msg(str(e))}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)

requirements.txt

@@ -0,0 +1,10 @@
+flask
+deep-translator
+google-genai
+python-docx
+PyPDF2
+reportlab
+opencv-python-headless
+numpy
+rembg
+werkzeug

static/theme.css

@@ -0,0 +1,341 @@
+/* ==============================================
+   PUMS TOOLKIT — DESIGN TOKENS
+   Sửa các giá trị ở đây để thay đổi toàn bộ giao diện
+   ============================================== */
+
+:root {
+    /* --- Màu chính --- */
+    --color-primary:        #4361ee;
+    --color-primary-dark:   #3730a3;
+    --color-primary-light:  #f0f3ff;
+    --color-primary-hover:  #eef2ff;
+
+    /* --- Màu nền --- */
+    --color-bg-page:        #f5f7fa;
+    --color-bg-sidebar:     #ffffff;
+    --color-bg-card:        #ffffff;
+    --color-bg-input:       #f8fafc;
+
+    /* --- Màu chữ --- */
+    --color-text-heading:   #1e293b;
+    --color-text-body:      #334155;
+    --color-text-muted:     #64748b;
+    --color-text-disabled:  #cbd5e1;
+
+    /* --- Màu border --- */
+    --color-border:         #e8ecf0;
+    --color-border-light:   #f0f2f5;
+    --color-border-input:   #e2e8f0;
+
+    /* --- Màu trạng thái nav active --- */
+    --color-nav-active-bg:  #f0f3ff;
+    --color-nav-active-txt: #4361ee;
+
+    /* --- Màu label section "sắp có" --- */
+    --color-label-muted:    #94a3b8;
+
+    /* --- Typography --- */
+    --font-family:          'Inter', sans-serif;
+    --font-size-base:       0.875rem;
+    --font-size-sm:         0.75rem;
+    --font-size-xs:         0.68rem;
+    --font-weight-normal:   400;
+    --font-weight-semi:     600;
+    --font-weight-bold:     800;
+
+    /* --- Spacing --- */
+    --spacing-xs:           0.25rem;
+    --spacing-sm:           0.5rem;
+    --spacing-md:           1rem;
+    --spacing-lg:           1.5rem;
+    --spacing-xl:           2rem;
+
+    /* --- Border radius --- */
+    --radius-sm:            6px;
+    --radius-md:            10px;
+    --radius-lg:            16px;
+    --radius-xl:            20px;
+
+    /* --- Shadow --- */
+    --shadow-card:          0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
+    --shadow-btn:           0 4px 12px rgba(67, 97, 238, 0.25);
+
+    /* --- Kích thước sidebar --- */
+    --sidebar-width:        260px;
+}
+
+/* ==============================================
+   BASE STYLES
+   ============================================== */
+
+body {
+    background-color: var(--color-bg-page);
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    color: var(--color-text-body);
+    display: flex;
+    min-height: 100vh;
+}
+
+/* ==============================================
+   SIDEBAR
+   ============================================== */
+
+.sidebar {
+    width: var(--sidebar-width);
+    background: var(--color-bg-sidebar);
+    border-right: 1px solid var(--color-border);
+    padding: var(--spacing-lg) calc(var(--spacing-lg) * 0.8);
+    flex-shrink: 0;
+}
+
+/* --- Brand / Logo --- */
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: var(--spacing-xl);
+    padding-bottom: var(--spacing-lg);
+    border-bottom: 1px solid var(--color-border-light);
+}
+
+.brand img {
+    width: 36px;
+    height: 36px;
+    object-fit: contain;
+    mix-blend-mode: multiply;
+}
+
+.brand-name {
+    font-weight: var(--font-weight-bold);
+    font-size: 0.95rem;
+    color: var(--color-text-heading);
+    letter-spacing: 0.04em;
+}
+
+/* --- Navigation --- */
+.nav-link {
+    padding: 0.65rem 0.9rem;
+    border-radius: var(--radius-md);
+    color: var(--color-text-muted);
+    font-weight: var(--font-weight-semi);
+    font-size: var(--font-size-base);
+    margin-bottom: 0.2rem;
+    transition: background 0.15s, color 0.15s;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.nav-link:hover {
+    background: var(--color-bg-input);
+    color: var(--color-text-heading);
+}
+
+.nav-link.active {
+    background: var(--color-nav-active-bg);
+    color: var(--color-nav-active-txt);
+}
+
+.nav-link i {
+    width: 16px;
+    font-size: 0.85rem;
+}
+
+/* --- Sub nav (children of a nav item) --- */
+.nav-sub {
+    padding-left: 1.5rem;
+    border-left: 2px solid var(--color-border-light);
+    margin-left: 1.2rem;
+    margin-bottom: 0.2rem;
+}
+
+.nav-link-sub {
+    font-size: 0.82rem;
+    padding: 0.45rem 0.75rem;
+    color: var(--color-text-muted);
+}
+
+.nav-link-sub.active {
+    background: var(--color-nav-active-bg);
+    color: var(--color-nav-active-txt);
+    font-weight: var(--font-weight-semi);
+}
+
+/* --- Collapsible nav item --- */
+.nav-link-collapsible {
+    justify-content: space-between;
+}
+
+.nav-chevron {
+    font-size: 0.7rem;
+    transition: transform 0.2s ease;
+    color: var(--color-text-disabled);
+}
+
+.nav-chevron.collapsed {
+    transform: rotate(-90deg);
+}
+
+.nav-section-label {
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    color: var(--color-label-muted);
+    font-weight: var(--font-weight-semi);
+    letter-spacing: 0.08em;
+    padding: var(--spacing-md) 0.9rem 0.4rem;
+}
+
+.nav-link.disabled {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ==============================================
+   MAIN CONTENT
+   ============================================== */
+
+.main-content {
+    flex-grow: 1;
+    padding: var(--spacing-xl);
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* ==============================================
+   CARD
+   ============================================== */
+
+.card-custom {
+    border: none;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-card);
+    background: var(--color-bg-card);
+}
+
+/* ==============================================
+   BUTTONS
+   ============================================== */
+
+.btn-primary-custom {
+    background: var(--color-primary);
+    border: none;
+    color: #ffffff;
+    padding: 14px 40px;
+    border-radius: var(--radius-md);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-base);
+    width: 100%;
+    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
+    cursor: pointer;
+}
+
+.btn-primary-custom:hover {
+    background: var(--color-primary-dark);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-btn);
+}
+
+/* ==============================================
+   FORM ELEMENTS
+   ============================================== */
+
+.form-control,
+.form-select {
+    border-color: var(--color-border-input);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-base);
+    background-color: var(--color-bg-card);
+    color: var(--color-text-body);
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.form-control:focus,
+.form-select:focus {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
+    outline: none;
+}
+
+.form-label {
+    font-weight: var(--font-weight-semi);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    margin-bottom: var(--spacing-xs);
+}
+
+/* ==============================================
+   FILE UPLOAD
+   ============================================== */
+
+.file-upload-wrapper {
+    border: 2px dashed var(--color-border-input);
+    border-radius: var(--radius-lg);
+    padding: 40px;
+    text-align: center;
+    background: var(--color-bg-input);
+    cursor: pointer;
+    transition: border-color 0.2s, background 0.2s;
+}
+
+.file-upload-wrapper:hover {
+    border-color: var(--color-primary);
+    background: var(--color-primary-hover);
+}
+
+/* ==============================================
+   NAV PILLS (tabs)
+   ============================================== */
+
+.nav-pills .nav-link {
+    border-radius: var(--radius-md);
+    padding: 10px 20px;
+    font-weight: var(--font-weight-semi);
+    color: var(--color-text-muted);
+    border: 1px solid transparent;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.nav-pills .nav-link:hover:not(.active) {
+    background: var(--color-primary-light);
+    color: var(--color-primary);
+    border-color: var(--color-primary-light);
+}
+
+.nav-pills .nav-link.active {
+    background-color: var(--color-primary);
+    color: #ffffff;
+    border-color: var(--color-primary);
+    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.25);
+}
+
+/* ==============================================
+   SPINNER / LOADER
+   ============================================== */
+
+.loader-overlay {
+    display: none;
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: rgba(255, 255, 255, 0.85);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.spinner-pro {
+    width: 48px;
+    height: 48px;
+    border: 4px solid var(--color-border);
+    border-top: 4px solid var(--color-primary);
+    border-radius: 50%;
+    animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin {
+    0%   { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

templates/index.html

@@ -0,0 +1,74 @@
+{% extends "layout.html" %}
+
+{% block title %}Dashboard - Pum's Toolkit{% endblock %}
+
+{% block content %}
+<div class="mb-5">
+    <h2 class="fw-bold">Chào mừng quay trở lại! 👋</h2>
+    <p class="text-muted">Chọn một công cụ bên dưới để bắt đầu làm việc.</p>
+</div>
+
+<div class="row g-4">
+
+    <!-- AI Translator -->
+    <div class="col-md-4">
+        <a href="/translator" class="text-decoration-none">
+            <div class="card card-custom p-4 h-100 border-start border-4 border-primary">
+                <div class="d-flex align-items-center mb-3">
+                    <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-primary me-3">
+                        <i class="fas fa-language fa-2x"></i>
+                    </div>
+                    <h5 class="mb-0 fw-bold text-dark">AI Translator Pro</h5>
+                </div>
+                <p class="text-muted small mb-0">Dịch văn bản và tài liệu đa định dạng với Google & Gemini AI mạnh mẽ.</p>
+            </div>
+        </a>
+    </div>
+
+    <!-- Text to Speech -->
+    <div class="col-md-4">
+        <a href="/tts" class="text-decoration-none">
+            <div class="card card-custom p-4 h-100 border-start border-4" style="border-color: #8b5cf6 !important">
+                <div class="d-flex align-items-center mb-3">
+                    <div class="p-3 rounded-3 me-3" style="background: #8b5cf620; color: #8b5cf6">
+                        <i class="fas fa-microphone-alt fa-2x"></i>
+                    </div>
+                    <h5 class="mb-0 fw-bold text-dark">Text to Speech</h5>
+                </div>
+                <p class="text-muted small mb-0">Chuyển văn bản thành giọng nói tự nhiên — VieNeu, Google TTS, Edge TTS (400+ giọng).</p>
+            </div>
+        </a>
+    </div>
+
+    <!-- Smart PDF -->
+    <div class="col-md-4">
+        <a href="/pdf/summarize" class="text-decoration-none">
+            <div class="card card-custom p-4 h-100 border-start border-4 border-danger">
+                <div class="d-flex align-items-center mb-3">
+                    <div class="bg-danger bg-opacity-10 p-3 rounded-3 text-danger me-3">
+                        <i class="fas fa-file-pdf fa-2x"></i>
+                    </div>
+                    <h5 class="mb-0 fw-bold text-dark">Smart PDF</h5>
+                </div>
+                <p class="text-muted small mb-0">Tóm tắt & trích xuất dữ liệu từ PDF bằng Gemini AI.</p>
+            </div>
+        </a>
+    </div>
+
+    <!-- Image Studio -->
+    <div class="col-md-4">
+        <a href="/image-studio" class="text-decoration-none">
+            <div class="card card-custom p-4 h-100 border-start border-4 border-success">
+                <div class="d-flex align-items-center mb-3">
+                    <div class="bg-success bg-opacity-10 p-3 rounded-3 text-success me-3">
+                        <i class="fas fa-image fa-2x"></i>
+                    </div>
+                    <h5 class="mb-0 fw-bold text-dark">Image Studio</h5>
+                </div>
+                <p class="text-muted small mb-0">Xóa nền ảnh tự động & nâng cấp độ phân giải bằng AI.</p>
+            </div>
+        </a>
+    </div>
+
+</div>
+{% endblock %}

templates/layout.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Pum's Toolkit{% endblock %}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
+    {% block styles %}{% endblock %}
+</head>
+<body>
+
+<div class="sidebar">
+    <div class="brand">
+        <img src="{{ url_for('static', filename='logo.png') }}" alt="Pum's Toolkit Logo">
+        <span class="brand-name">PUM'S TOOLKIT</span>
+    </div>
+    <nav class="nav flex-column">
+        <a class="nav-link {% if request.path == '/' %}active{% endif %}" href="/">
+            <i class="fas fa-th-large"></i> Dashboard
+        </a>
+        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/translator') %}active{% endif %}"
+           href="/translator/text"
+           data-bs-toggle="collapse"
+           data-bs-target="#translator-sub"
+           aria-expanded="{{ 'true' if request.path.startswith('/translator') else 'false' }}"
+           onclick="return handleNavCollapse(event, this)">
+            <span><i class="fas fa-language"></i> AI Translator</span>
+            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/translator') %}collapsed{% endif %}"></i>
+        </a>
+        <div class="collapse nav-sub {% if request.path.startswith('/translator') %}show{% endif %}" id="translator-sub">
+            <a class="nav-link nav-link-sub {% if request.path == '/translator/text' %}active{% endif %}" href="/translator/text">
+                <i class="fas fa-font"></i> Văn bản
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/translator/file' %}active{% endif %}" href="/translator/file">
+                <i class="fas fa-file-alt"></i> Tài liệu
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/translator/image' %}active{% endif %}" href="/translator/image">
+                <i class="fas fa-image"></i> Dịch ảnh
+            </a>
+        </div>
+        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/image-studio') %}active{% endif %}"
+           href="/image-studio/remove-bg"
+           data-bs-toggle="collapse"
+           data-bs-target="#image-sub"
+           aria-expanded="{{ 'true' if request.path.startswith('/image-studio') else 'false' }}"
+           onclick="return handleNavCollapse(event, this)">
+            <span><i class="fas fa-image"></i> Image Studio</span>
+            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/image-studio') %}collapsed{% endif %}"></i>
+        </a>
+        <div class="collapse nav-sub {% if request.path.startswith('/image-studio') %}show{% endif %}" id="image-sub">
+            <a class="nav-link nav-link-sub {% if request.path == '/image-studio/remove-bg' %}active{% endif %}" href="/image-studio/remove-bg">
+                <i class="fas fa-cut"></i> Xóa nền
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/image-studio/upscale' %}active{% endif %}" href="/image-studio/upscale">
+                <i class="fas fa-expand-arrows-alt"></i> Nâng cấp ảnh
+            </a>
+        </div>
+        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/tts') %}active{% endif %}"
+           href="/tts/vieneu"
+           data-bs-toggle="collapse"
+           data-bs-target="#tts-sub"
+           aria-expanded="{{ 'true' if request.path.startswith('/tts') else 'false' }}"
+           onclick="return handleNavCollapse(event, this)">
+            <span><i class="fas fa-microphone-alt"></i> Text to Speech</span>
+            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/tts') %}collapsed{% endif %}"></i>
+        </a>
+        <div class="collapse nav-sub {% if request.path.startswith('/tts') %}show{% endif %}" id="tts-sub">
+            <a class="nav-link nav-link-sub {% if request.path == '/tts/vieneu' %}active{% endif %}" href="/tts/vieneu">
+                <i class="fas fa-dragon"></i> VieNeu-TTS
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/tts/gtts' %}active{% endif %}" href="/tts/gtts">
+                <i class="fab fa-google"></i> Google TTS
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/tts/edge' %}active{% endif %}" href="/tts/edge">
+                <i class="fab fa-microsoft"></i> Edge TTS
+            </a>
+        </div>
+        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/pdf') %}active{% endif %}"
+           href="/pdf/summarize"
+           data-bs-toggle="collapse"
+           data-bs-target="#pdf-sub"
+           aria-expanded="{{ 'true' if request.path.startswith('/pdf') else 'false' }}"
+           onclick="return handleNavCollapse(event, this)">
+            <span><i class="fas fa-file-pdf"></i> Smart PDF</span>
+            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/pdf') %}collapsed{% endif %}"></i>
+        </a>
+        <div class="collapse nav-sub {% if request.path.startswith('/pdf') %}show{% endif %}" id="pdf-sub">
+            <a class="nav-link nav-link-sub {% if request.path == '/pdf/summarize' %}active{% endif %}" href="/pdf/summarize">
+                <i class="fas fa-align-left"></i> Tóm tắt
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/pdf/extract' %}active{% endif %}" href="/pdf/extract">
+                <i class="fas fa-table"></i> Trích xuất dữ liệu
+            </a>
+        </div>
+    </nav>
+</div>
+
+<div class="main-content w-100">
+    {% block content %}{% endblock %}
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+    // Nav collapse: click khi đã mở → chỉ toggle, không navigate
+    // Click khi đang đóng → navigate đến link VÀ mở collapse
+    function handleNavCollapse(e, el) {
+        const target = document.querySelector(el.getAttribute('data-bs-target'));
+        if (target && target.classList.contains('show')) {
+            // Đang mở → chỉ toggle đóng, không navigate
+            e.preventDefault();
+        }
+        // Nếu đang đóng → để link navigate bình thường (server sẽ render với show)
+        return true;
+    }
+
+    // ── Paste ảnh (Ctrl+V) cho tất cả drop zone ──────────────
+    document.addEventListener('paste', (e) => {
+        const items = e.clipboardData?.items;
+        if (!items) return;
+
+        for (const item of items) {
+            if (!item.type.startsWith('image/')) continue;
+
+            const file = item.getAsFile();
+            if (!file) continue;
+
+            // Tìm drop zone đầu tiên trên trang (hoặc drop zone đang được hover)
+            const dropZone = document.querySelector('.drop-zone, .file-upload-wrapper');
+            if (!dropZone) return;
+
+            // Tìm input[type=file] trong drop zone
+            const fileInput = dropZone.querySelector('input[type="file"]');
+            if (!fileInput) return;
+
+            // Inject file vào input
+            const dt = new DataTransfer();
+            dt.items.add(file);
+            fileInput.files = dt.files;
+
+            // Trigger change event để các handler tự xử lý
+            fileInput.dispatchEvent(new Event('change', { bubbles: true }));
+
+            // Hiệu ứng flash để user biết đã paste
+            dropZone.style.transition = 'background 0.15s';
+            dropZone.style.background = 'var(--color-primary-hover)';
+            dropZone.style.borderColor = 'var(--color-primary)';
+            setTimeout(() => {
+                dropZone.style.background = '';
+                dropZone.style.borderColor = '';
+            }, 600);
+
+            e.preventDefault();
+            break;
+        }
+    });
+
+    document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(el => {
+        const targetId = el.getAttribute('data-bs-target');
+        const target = document.querySelector(targetId);
+        if (!target) return;
+        target.addEventListener('show.bs.collapse', () => {
+            el.querySelector('.nav-chevron')?.classList.remove('collapsed');
+        });
+        target.addEventListener('hide.bs.collapse', () => {
+            el.querySelector('.nav-chevron')?.classList.add('collapsed');
+        });
+    });
+</script>
+{% block scripts %}{% endblock %}
+</body>
+</html>

templates/tools/image_studio/index.html

@@ -0,0 +1,292 @@
+{% extends "layout.html" %}
+
+{% block title %}Image Studio - Pum's Toolkit{% endblock %}
+
+{% block styles %}
+<style>
+    .drop-zone {
+        border: 2px dashed var(--color-border-input);
+        border-radius: var(--radius-lg);
+        padding: 2.5rem;
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 0.2s, background 0.2s;
+        background: var(--color-bg-input);
+        position: relative;
+    }
+    .drop-zone:hover, .drop-zone.drag-over {
+        border-color: var(--color-primary);
+        background: var(--color-primary-hover);
+    }
+    .drop-zone input[type="file"] {
+        position: absolute; inset: 0; opacity: 0; cursor: pointer;
+    }
+    .preview-box {
+        border-radius: var(--radius-lg);
+        overflow: hidden;
+        background: repeating-conic-gradient(#e0e0e0 0% 25%, #fff 0% 50%) 0 0 / 20px 20px;
+        display: flex; align-items: center; justify-content: center;
+        min-height: 220px;
+        position: relative;
+    }
+    .preview-box img {
+        max-width: 100%; max-height: 320px;
+        object-fit: contain; display: block;
+    }
+    .preview-box .placeholder {
+        color: #adb5bd; font-size: 0.85rem; padding: 2rem;
+        text-align: center;
+    }
+    .tool-tab-btn {
+        border: 1.5px solid var(--color-border);
+        border-radius: var(--radius-md);
+        padding: 0.8rem 1.5rem;
+        font-weight: var(--font-weight-semi);
+        font-size: 0.9rem;
+        color: var(--color-text-muted);
+        background: #fff;
+        cursor: pointer;
+        transition: all 0.15s;
+        display: flex; align-items: center; gap: 8px;
+        text-decoration: none;
+    }
+    .tool-tab-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
+    .tool-tab-btn.active {
+        background: var(--color-primary); color: #fff; border-color: var(--color-primary);
+        box-shadow: 0 2px 8px rgba(67,97,238,0.25);
+    }
+    .result-badge {
+        position: absolute; top: 10px; right: 10px;
+        background: rgba(67,97,238,0.85); color: #fff;
+        border-radius: 6px; font-size: 0.72rem; padding: 3px 8px;
+        font-weight: 600;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div id="loaderOverlay" class="loader-overlay">
+    <div class="spinner-pro"></div>
+    <p class="mt-3 fw-bold" style="color: var(--color-primary)" id="loaderMsg">Đang xử lý ảnh...</p>
+</div>
+
+<div class="card card-custom">
+    <div class="card-header bg-white border-0 pt-4 text-center">
+        <h3 class="fw-bold" style="color: var(--color-primary)">IMAGE STUDIO</h3>
+        <p class="text-muted mb-0">Xóa nền & Nâng cấp ảnh bằng AI</p>
+    </div>
+
+    <div class="card-body p-4">
+
+        <!-- Tool Selector -->
+        <div class="d-flex gap-3 mb-4 justify-content-center flex-wrap">
+            <a class="tool-tab-btn {% if active_tool == 'remove-bg' %}active{% endif %}" href="/image-studio/remove-bg">
+                <i class="fas fa-cut"></i> Xóa nền
+            </a>
+            <a class="tool-tab-btn {% if active_tool == 'upscale' %}active{% endif %}" href="/image-studio/upscale">
+                <i class="fas fa-expand-arrows-alt"></i> Nâng cấp ảnh
+            </a>
+        </div>
+
+        <!-- Upload Zone -->
+        <div class="drop-zone mb-4" id="dropZone" onclick="document.getElementById('imageInput').click()">
+            <input type="file" id="imageInput" accept="image/jpeg,image/png,image/webp">
+            <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2 d-block"></i>
+            <div class="fw-semibold text-muted">Kéo thả ảnh vào đây hoặc click để chọn</div>
+            <div class="small text-muted mt-1">Hỗ trợ JPG, PNG, WEBP — tối đa 16MB</div>
+            <div class="small text-muted mt-1" style="opacity:0.6"><i class="fas fa-paste me-1"></i>Hoặc nhấn <kbd>Ctrl+V</kbd> để dán ảnh từ clipboard</div>
+            <div id="uploadedFileName" class="mt-2 fw-bold d-none" style="color: var(--color-primary)"></div>
+        </div>
+
+        <!-- Upscale options (chỉ hiện khi chọn upscale) -->
+        <div id="upscaleOptions" class="mb-4 d-none">
+            <label class="form-label">Hệ số phóng to</label>
+            <div class="d-flex gap-2">
+                <button class="btn btn-outline-primary scale-btn active" data-scale="2">2x</button>
+                <button class="btn btn-outline-primary scale-btn" data-scale="3">3x</button>
+                <button class="btn btn-outline-primary scale-btn" data-scale="4">4x</button>
+            </div>
+        </div>
+
+        <!-- Action Button -->
+        <button class="btn-primary-custom mb-4" id="processBtn" disabled>
+            <i class="fas fa-magic me-2"></i> <span id="processBtnText">Xử lý ảnh</span>
+        </button>
+
+        <!-- Error -->
+        <div id="errorArea" class="mb-3 d-none">
+            <div class="alert alert-danger d-flex align-items-center gap-2 mb-0">
+                <i class="fas fa-exclamation-circle"></i>
+                <span id="errorMsg"></span>
+            </div>
+        </div>
+
+        <!-- Preview: Before / After -->
+        <div id="previewSection" class="d-none">
+            <hr class="my-3">
+            <div class="row g-3 align-items-start">
+                <div class="col-md-6">
+                    <div class="form-label fw-semibold mb-2"><i class="fas fa-image me-1"></i> Ảnh gốc</div>
+                    <div class="preview-box">
+                        <img id="imgOriginal" src="" alt="Ảnh gốc">
+                    </div>
+                    <div class="small text-muted mt-1" id="originalInfo"></div>
+                </div>
+                <div class="col-md-6">
+                    <div class="form-label fw-semibold mb-2"><i class="fas fa-star me-1 text-warning"></i> Kết quả</div>
+                    <div class="preview-box">
+                        <div class="placeholder" id="resultPlaceholder">
+                            <i class="fas fa-clock fa-2x mb-2 d-block"></i>
+                            Chưa xử lý
+                        </div>
+                        <img id="imgResult" src="" alt="Kết quả" style="display:none">
+                        <span class="result-badge d-none" id="resultBadge"></span>
+                    </div>
+                    <div class="small text-muted mt-1" id="resultInfo"></div>
+                </div>
+            </div>
+
+            <!-- Download -->
+            <div id="downloadArea" class="mt-4 text-center d-none">
+                <div class="alert alert-success d-flex align-items-center justify-content-center gap-3 mb-0">
+                    <i class="fas fa-check-circle fa-lg"></i>
+                    <span>Xử lý xong!</span>
+                    <a id="downloadLink" href="#" class="btn btn-success btn-sm px-3">
+                        <i class="fas fa-download me-1"></i> Tải về
+                    </a>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    let currentTool = '{{ active_tool }}';
+    let selectedFile = null;
+    let selectedScale = 2;
+
+    // Hiện upscale options nếu đang ở trang upscale
+    if (currentTool === 'upscale') {
+        document.getElementById('upscaleOptions').classList.remove('d-none');
+        document.getElementById('processBtnText').textContent = 'Nâng cấp ảnh';
+    } else {
+        document.getElementById('processBtnText').textContent = 'Xóa nền';
+    }
+
+    // Scale buttons
+    document.querySelectorAll('.scale-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            document.querySelectorAll('.scale-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            selectedScale = parseInt(btn.dataset.scale);
+        });
+    });
+
+    // Drag & drop
+    const dropZone = document.getElementById('dropZone');
+    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        const f = e.dataTransfer.files[0];
+        if (f) handleFileSelected(f);
+    });
+
+    // File input
+    document.getElementById('imageInput').addEventListener('change', e => {
+        if (e.target.files[0]) handleFileSelected(e.target.files[0]);
+    });
+
+    function handleFileSelected(file) {
+        selectedFile = file;
+        document.getElementById('uploadedFileName').textContent = `✓ ${file.name}`;
+        document.getElementById('uploadedFileName').classList.remove('d-none');
+        document.getElementById('processBtn').disabled = false;
+
+        // Show preview original
+        const reader = new FileReader();
+        reader.onload = e => {
+            document.getElementById('imgOriginal').src = e.target.result;
+            document.getElementById('originalInfo').textContent =
+                `${file.name} — ${(file.size / 1024).toFixed(0)} KB`;
+            document.getElementById('previewSection').classList.remove('d-none');
+        };
+        reader.readAsDataURL(file);
+        resetResult();
+    }
+
+    function resetResult() {
+        document.getElementById('imgResult').src = '';
+        document.getElementById('imgResult').style.display = 'none';
+        document.getElementById('resultPlaceholder').style.display = 'block';
+        document.getElementById('resultBadge').classList.add('d-none');
+        document.getElementById('downloadArea').classList.add('d-none');
+        document.getElementById('resultInfo').textContent = '';
+        document.getElementById('errorArea').classList.add('d-none');
+    }
+
+    function showError(msg) {
+        document.getElementById('errorMsg').textContent = msg;
+        document.getElementById('errorArea').classList.remove('d-none');
+    }
+
+    // Process
+    document.getElementById('processBtn').addEventListener('click', async () => {
+        if (!selectedFile) return;
+
+        const loader = document.getElementById('loaderOverlay');
+        const loaderMsg = document.getElementById('loaderMsg');
+        loaderMsg.textContent = currentTool === 'rembg' ? 'Đang xóa nền...' : 'Đang nâng cấp ảnh...';
+        loader.style.display = 'flex';
+        document.getElementById('errorArea').classList.add('d-none');
+
+        const formData = new FormData();
+        formData.append('image', selectedFile);
+
+        let url = '/image/remove-bg';
+        if (currentTool === 'upscale') {
+            url = '/image/upscale';
+            formData.append('scale', selectedScale);
+        }
+
+        try {
+            const res = await fetch(url, { method: 'POST', body: formData });
+            const data = await res.json();
+
+            if (data.error) {
+                showError(data.error);
+                return;
+            }
+
+            // Show result
+            document.getElementById('imgResult').src = data.result_url + '?t=' + Date.now();
+            document.getElementById('imgResult').style.display = 'block';
+            document.getElementById('resultPlaceholder').style.display = 'none';
+
+            if (currentTool === 'rembg') {
+                document.getElementById('resultBadge').textContent = 'Đã xóa nền';
+                document.getElementById('resultBadge').classList.remove('d-none');
+                document.getElementById('resultInfo').textContent = 'PNG trong suốt, sẵn sàng tải về';
+            } else {
+                document.getElementById('resultBadge').textContent = `${selectedScale}x`;
+                document.getElementById('resultBadge').classList.remove('d-none');
+                document.getElementById('resultInfo').textContent =
+                    `${data.original_size} → ${data.new_size}`;
+            }
+
+            document.getElementById('downloadLink').href = data.result_url;
+            document.getElementById('downloadLink').download = data.filename;
+            document.getElementById('downloadArea').classList.remove('d-none');
+
+        } catch(e) {
+            showError('Lỗi kết nối. Vui lòng thử lại.');
+        } finally {
+            loader.style.display = 'none';
+        }
+    });
+</script>
+{% endblock %}

templates/tools/smart_pdf/index.html

@@ -0,0 +1,351 @@
+{% extends "layout.html" %}
+
+{% block title %}Smart PDF - Pum's Toolkit{% endblock %}
+
+{% block styles %}
+<style>
+    .tool-tab-btn {
+        border: 1.5px solid var(--color-border);
+        border-radius: var(--radius-md);
+        padding: 0.8rem 1.5rem;
+        font-weight: var(--font-weight-semi);
+        font-size: 0.9rem;
+        color: var(--color-text-muted);
+        background: #fff;
+        cursor: pointer;
+        transition: all 0.15s;
+        display: flex; align-items: center; gap: 8px;
+        text-decoration: none;
+    }
+    .tool-tab-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
+    .tool-tab-btn.active {
+        background: var(--color-primary); color: #fff;
+        border-color: var(--color-primary);
+        box-shadow: 0 2px 8px rgba(67,97,238,0.25);
+    }
+    .drop-zone {
+        border: 2px dashed var(--color-border-input);
+        border-radius: var(--radius-lg);
+        padding: 2.5rem;
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 0.2s, background 0.2s;
+        background: var(--color-bg-input);
+        position: relative;
+    }
+    .drop-zone:hover, .drop-zone.drag-over {
+        border-color: var(--color-primary);
+        background: var(--color-primary-hover);
+    }
+    .drop-zone input[type="file"] {
+        position: absolute; inset: 0; opacity: 0; cursor: pointer;
+    }
+    .result-box {
+        background: var(--color-bg-input);
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-lg);
+        padding: 1.5rem;
+        min-height: 200px;
+        font-size: 0.875rem;
+        line-height: 1.7;
+        white-space: pre-wrap;
+        word-break: break-word;
+        overflow-y: auto;
+        max-height: 500px;
+    }
+    .result-box table {
+        border-collapse: collapse;
+        width: 100%;
+        font-size: 0.82rem;
+    }
+    .result-box th, .result-box td {
+        border: 1px solid var(--color-border);
+        padding: 6px 10px;
+        text-align: left;
+    }
+    .result-box th { background: var(--color-primary-light); font-weight: 600; }
+    .extract-type-btn {
+        border: 1.5px solid var(--color-border);
+        border-radius: var(--radius-sm);
+        padding: 0.4rem 0.9rem;
+        font-size: 0.82rem;
+        font-weight: 600;
+        color: var(--color-text-muted);
+        background: #fff;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+    .extract-type-btn.active {
+        background: var(--color-primary-light);
+        color: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div id="loaderOverlay" class="loader-overlay">
+    <div class="spinner-pro"></div>
+    <p class="mt-3 fw-bold" style="color: var(--color-primary)" id="loaderMsg">Đang xử lý PDF...</p>
+</div>
+
+<div class="card card-custom">
+    <div class="card-header bg-white border-0 pt-4 text-center">
+        <h3 class="fw-bold" style="color: var(--color-primary)">SMART PDF</h3>
+        <p class="text-muted mb-0">Tóm tắt & Trích xuất dữ liệu từ PDF bằng Gemini AI</p>
+    </div>
+
+    <div class="card-body p-4">
+
+        <!-- Tool tabs -->
+        <div class="d-flex gap-3 mb-4 justify-content-center flex-wrap">
+            <a class="tool-tab-btn {% if active_tool == 'summarize' %}active{% endif %}" href="/pdf/summarize">
+                <i class="fas fa-align-left"></i> Tóm tắt
+            </a>
+            <a class="tool-tab-btn {% if active_tool == 'extract' %}active{% endif %}" href="/pdf/extract">
+                <i class="fas fa-table"></i> Trích xuất dữ liệu
+            </a>
+        </div>
+
+        <!-- Upload PDF -->
+        <div class="drop-zone mb-4" id="dropZone" onclick="document.getElementById('pdfInput').click()">
+            <input type="file" id="pdfInput" accept=".pdf">
+            <i class="fas fa-file-pdf fa-2x text-danger mb-2 d-block"></i>
+            <div class="fw-semibold text-muted">Kéo thả file PDF vào đây hoặc click để chọn</div>
+            <div class="small text-muted mt-1">Chỉ hỗ trợ PDF — tối đa 16MB</div>
+            <div class="small text-muted mt-1" style="opacity:0.6"><i class="fas fa-paste me-1"></i>Hoặc nhấn <kbd>Ctrl+V</kbd> nếu copy file PDF</div>
+            <div id="uploadedFileName" class="mt-2 fw-bold d-none" style="color: var(--color-primary)"></div>
+        </div>
+
+        <!-- Gemini model -->
+        <div class="row g-3 mb-4">
+            <div class="col-md-6">
+                <label class="form-label">Mô hình Gemini</label>
+                <select id="geminiModel" class="form-select">
+                    <option value="">Đang tải...</option>
+                </select>
+                <div id="modelQuota" class="mt-1 small text-muted"></div>
+            </div>
+            <div class="col-md-6">
+                <label class="form-label">Ngôn ngữ kết quả</label>
+                <select id="outputLang" class="form-select">
+                    <option value="vi" selected>Tiếng Việt</option>
+                    <option value="en">English</option>
+                    <option value="ja">日本語</option>
+                    <option value="zh-CN">中文</option>
+                    <option value="ko">한국어</option>
+                    <option value="fr">Français</option>
+                    <option value="de">Deutsch</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- Extract options (chỉ hiện khi chọn extract) -->
+        <div id="extractOptions" class="mb-4 {% if active_tool != 'extract' %}d-none{% endif %}">
+            <label class="form-label">Loại dữ liệu cần trích xuất</label>
+            <div class="d-flex gap-2 flex-wrap">
+                <button class="extract-type-btn active" data-type="table">
+                    <i class="fas fa-table me-1"></i> Bảng dữ liệu
+                </button>
+                <button class="extract-type-btn" data-type="key_value">
+                    <i class="fas fa-tag me-1"></i> Thông tin chính
+                </button>
+                <button class="extract-type-btn" data-type="entity">
+                    <i class="fas fa-user-tag me-1"></i> Thực thể (Tên, Ngày, Số liệu)
+                </button>
+                <button class="extract-type-btn" data-type="custom">
+                    <i class="fas fa-pen me-1"></i> Tùy chỉnh
+                </button>
+            </div>
+            <div id="customPromptBox" class="mt-3 d-none">
+                <textarea id="customPrompt" class="form-control" rows="2"
+                    placeholder="Nhập yêu cầu trích xuất, ví dụ: tất cả các số hợp đồng và giá trị..."></textarea>
+            </div>
+        </div>
+
+        <!-- Action button -->
+        <button class="btn-primary-custom mb-4" id="processBtn" disabled>
+            <i class="fas fa-magic me-2"></i>
+            <span id="processBtnText">{% if active_tool == 'summarize' %}Tóm tắt PDF{% else %}Trích xuất dữ liệu{% endif %}</span>
+        </button>
+
+        <!-- Error -->
+        <div id="errorArea" class="mb-3 d-none">
+            <div class="alert alert-danger d-flex align-items-center gap-2 mb-0">
+                <i class="fas fa-exclamation-circle"></i>
+                <span id="errorMsg"></span>
+            </div>
+        </div>
+
+        <!-- Result -->
+        <div id="resultSection" class="d-none">
+            <hr class="my-3">
+            <div class="d-flex justify-content-between align-items-center mb-2">
+                <div class="fw-semibold">
+                    <i class="fas fa-check-circle text-success me-1"></i> Kết quả
+                    <span id="truncatedBadge" class="badge bg-warning text-dark ms-2 d-none">
+                        Chỉ xử lý 15.000 ký tự đầu
+                    </span>
+                </div>
+                <div class="d-flex gap-2">
+                    <button class="btn btn-sm btn-outline-secondary" onclick="copyResult()">
+                        <i class="fas fa-copy me-1"></i> Sao chép
+                    </button>
+                    <button class="btn btn-sm btn-outline-primary" onclick="downloadResult()">
+                        <i class="fas fa-download me-1"></i> Tải .txt
+                    </button>
+                </div>
+            </div>
+            <div class="result-box" id="resultBox"></div>
+        </div>
+
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script>
+    const activeTool = '{{ active_tool }}';
+    let selectedFile = null;
+    let selectedExtractType = 'table';
+    let geminiModelList = [];
+
+    // Load Gemini models
+    async function loadGeminiModels() {
+        try {
+            const res = await fetch('/api/gemini-models');
+            geminiModelList = await res.json();
+            const sel = document.getElementById('geminiModel');
+            sel.innerHTML = '';
+            geminiModelList.forEach(m => {
+                const opt = document.createElement('option');
+                opt.value = m.id;
+                const quota = m.remaining > 0
+                    ? `✓ Còn ${m.remaining.toLocaleString()}/${m.rpd}`
+                    : `✗ Hết`;
+                opt.textContent = `${m.name}  —  ${quota}`;
+                if (m.remaining === 0) opt.disabled = true;
+                sel.appendChild(opt);
+            });
+            updateModelQuota();
+        } catch(e) { console.error(e); }
+    }
+
+    function updateModelQuota() {
+        const sel = document.getElementById('geminiModel');
+        const chosen = geminiModelList.find(m => m.id === sel.value);
+        const el = document.getElementById('modelQuota');
+        if (chosen) {
+            el.innerHTML = chosen.remaining > 0
+                ? `<span style="color:var(--color-primary)"><i class="fas fa-check-circle"></i> Còn <strong>${chosen.remaining.toLocaleString()}</strong> request hôm nay</span>`
+                : `<span style="color:#dc3545"><i class="fas fa-exclamation-triangle"></i> Đã hết quota</span>`;
+        }
+    }
+
+    document.getElementById('geminiModel').addEventListener('change', updateModelQuota);
+    loadGeminiModels();
+
+    // Drag & drop
+    const dropZone = document.getElementById('dropZone');
+    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
+    });
+    document.getElementById('pdfInput').addEventListener('change', e => {
+        if (e.target.files[0]) handleFile(e.target.files[0]);
+    });
+
+    function handleFile(file) {
+        selectedFile = file;
+        document.getElementById('uploadedFileName').textContent = `✓ ${file.name} (${(file.size/1024).toFixed(0)} KB)`;
+        document.getElementById('uploadedFileName').classList.remove('d-none');
+        document.getElementById('processBtn').disabled = false;
+        document.getElementById('resultSection').classList.add('d-none');
+        document.getElementById('errorArea').classList.add('d-none');
+    }
+
+    // Extract type buttons
+    document.querySelectorAll('.extract-type-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            document.querySelectorAll('.extract-type-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            selectedExtractType = btn.dataset.type;
+            document.getElementById('customPromptBox').classList.toggle('d-none', selectedExtractType !== 'custom');
+        });
+    });
+
+    // Process
+    document.getElementById('processBtn').addEventListener('click', async () => {
+        if (!selectedFile) return;
+
+        document.getElementById('loaderMsg').textContent =
+            activeTool === 'summarize' ? 'Đang tóm tắt PDF...' : 'Đang trích xuất dữ liệu...';
+        document.getElementById('loaderOverlay').style.display = 'flex';
+        document.getElementById('errorArea').classList.add('d-none');
+        document.getElementById('resultSection').classList.add('d-none');
+
+        const formData = new FormData();
+        formData.append('file', selectedFile);
+        formData.append('tool', activeTool);
+        formData.append('gemini_model', document.getElementById('geminiModel').value);
+        formData.append('lang', document.getElementById('outputLang').value);
+        if (activeTool === 'extract') {
+            formData.append('extract_type', selectedExtractType);
+            if (selectedExtractType === 'custom') {
+                formData.append('custom_prompt', document.getElementById('customPrompt').value);
+            }
+        }
+
+        try {
+            const res = await fetch('/pdf/process', { method: 'POST', body: formData });
+            const data = await res.json();
+
+            if (data.error) {
+                document.getElementById('errorMsg').textContent = data.error;
+                document.getElementById('errorArea').classList.remove('d-none');
+                return;
+            }
+
+            // Render markdown trong result box
+            document.getElementById('resultBox').innerHTML = marked.parse(data.result);
+            document.getElementById('resultSection').classList.remove('d-none');
+
+            if (data.truncated) {
+                document.getElementById('truncatedBadge').classList.remove('d-none');
+            } else {
+                document.getElementById('truncatedBadge').classList.add('d-none');
+            }
+
+            await loadGeminiModels(); // Cập nhật quota
+
+        } catch(e) {
+            document.getElementById('errorMsg').textContent = 'Lỗi kết nối. Vui lòng thử lại.';
+            document.getElementById('errorArea').classList.remove('d-none');
+        } finally {
+            document.getElementById('loaderOverlay').style.display = 'none';
+        }
+    });
+
+    function copyResult() {
+        const text = document.getElementById('resultBox').innerText;
+        navigator.clipboard.writeText(text).then(() => {
+            const btn = event.target.closest('button');
+            btn.innerHTML = '<i class="fas fa-check me-1"></i> Đã sao chép';
+            setTimeout(() => btn.innerHTML = '<i class="fas fa-copy me-1"></i> Sao chép', 2000);
+        });
+    }
+
+    function downloadResult() {
+        const text = document.getElementById('resultBox').innerText;
+        const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = `pdf_result_${Date.now()}.txt`;
+        a.click();
+    }
+</script>
+{% endblock %}

templates/tools/translator/image.html

@@ -0,0 +1,315 @@
+{% extends "layout.html" %}
+
+{% block title %}AI Translator Pro - Pum's Toolkit{% endblock %}
+
+{% block styles %}
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
+<style>
+    .select2-container .select2-selection--single {
+        height: calc(1.5em + 0.75rem + 2px);
+        border-color: var(--color-border-input);
+        border-radius: var(--radius-md);
+        display: flex; align-items: center;
+    }
+    .select2-container--default .select2-selection--single .select2-selection__rendered {
+        line-height: 1.5; color: var(--color-text-body); padding-left: 12px;
+    }
+    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
+        background-color: var(--color-primary);
+    }
+    .select2-dropdown { border-color: var(--color-border-input); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
+    .select2-search--dropdown .select2-search__field { border-color: var(--color-border-input); border-radius: var(--radius-sm); padding: 6px 10px; }
+
+    .drop-zone {
+        border: 2px dashed var(--color-border-input);
+        border-radius: var(--radius-lg);
+        padding: 2.5rem;
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 0.2s, background 0.2s;
+        background: var(--color-bg-input);
+        position: relative;
+    }
+    .drop-zone:hover, .drop-zone.drag-over {
+        border-color: var(--color-primary);
+        background: var(--color-primary-hover);
+    }
+    .drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+
+    .img-preview-wrap {
+        border-radius: var(--radius-lg);
+        overflow: hidden;
+        background: #f8fafc;
+        border: 1px solid var(--color-border);
+        max-height: 400px;
+        display: flex; align-items: center; justify-content: center;
+    }
+    .img-preview-wrap img { max-width: 100%; max-height: 400px; object-fit: contain; display: block; }
+
+    .result-box {
+        background: var(--color-bg-input);
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-lg);
+        padding: 1.5rem;
+        min-height: 160px;
+        font-size: 0.875rem;
+        line-height: 1.8;
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+    .mode-btn {
+        border: 1.5px solid var(--color-border);
+        border-radius: var(--radius-sm);
+        padding: 0.45rem 1rem;
+        font-size: 0.82rem;
+        font-weight: 600;
+        color: var(--color-text-muted);
+        background: #fff;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+    .mode-btn.active {
+        background: var(--color-primary-light);
+        color: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div id="loaderOverlay" class="loader-overlay">
+    <div class="spinner-pro"></div>
+    <p class="mt-3 fw-bold" style="color: var(--color-primary)">Đang đọc và dịch ảnh...</p>
+</div>
+
+<div class="card card-custom">
+    <div class="card-header bg-white border-0 pt-4 text-center">
+        <h3 class="fw-bold" style="color: var(--color-primary)">AI TRANSLATOR PRO</h3>
+        <p class="text-muted">Dịch văn bản, tài liệu & ảnh bằng AI</p>
+    </div>
+
+    <div class="card-body p-4">
+
+        <!-- Tab pills -->
+        <ul class="nav nav-pills mb-4 justify-content-center">
+            <li class="nav-item"><a class="nav-link" href="/translator/text">Văn bản</a></li>
+            <li class="nav-item"><a class="nav-link" href="/translator/file">Tài liệu</a></li>
+            <li class="nav-item"><a class="nav-link active" href="/translator/image"><i class="fas fa-image me-1"></i>Dịch ảnh</a></li>
+        </ul>
+
+        <!-- Upload ảnh -->
+        <div class="drop-zone mb-4" id="dropZone" onclick="document.getElementById('imageInput').click()">
+            <input type="file" id="imageInput" accept="image/jpeg,image/png,image/webp,image/gif">
+            <i class="fas fa-image fa-2x text-muted mb-2 d-block"></i>
+            <div class="fw-semibold text-muted">Kéo thả ảnh vào đây hoặc click để chọn</div>
+            <div class="small text-muted mt-1">Hỗ trợ JPG, PNG, WEBP, GIF — tối đa 16MB</div>
+            <div class="small text-muted mt-1" style="opacity:0.6"><i class="fas fa-paste me-1"></i>Hoặc nhấn <kbd>Ctrl+V</kbd> để dán ảnh từ clipboard</div>
+            <div id="uploadedFileName" class="mt-2 fw-bold d-none" style="color: var(--color-primary)"></div>
+        </div>
+
+        <!-- Preview ảnh -->
+        <div id="imgPreviewArea" class="mb-4 d-none">
+            <div class="img-preview-wrap">
+                <img id="imgPreview" src="" alt="Preview">
+            </div>
+        </div>
+
+        <!-- Settings -->
+        <div class="row g-3 mb-4">
+            <div class="col-md-4">
+                <label class="form-label">Ngôn ngữ đích</label>
+                <select id="targetLang" class="form-select">
+                    <option value="vi" selected>Vietnamese (Tiếng Việt)</option>
+                </select>
+            </div>
+            <div class="col-md-4">
+                <label class="form-label">Mô hình Gemini</label>
+                <select id="geminiModel" class="form-select">
+                    <option value="">Đang tải...</option>
+                </select>
+                <div id="modelQuota" class="mt-1 small text-muted"></div>
+            </div>
+            <div class="col-md-4">
+                <label class="form-label">Chế độ</label>
+                <div class="d-flex gap-2 mt-1">
+                    <button class="mode-btn active" data-mode="translate">
+                        <i class="fas fa-language me-1"></i> OCR + Dịch
+                    </button>
+                    <button class="mode-btn" data-mode="ocr_only">
+                        <i class="fas fa-eye me-1"></i> Chỉ đọc
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Action button -->
+        <button class="btn-primary-custom mb-4" id="translateBtn" disabled>
+            <i class="fas fa-magic me-2"></i> Xử lý ảnh
+        </button>
+
+        <!-- Error -->
+        <div id="errorArea" class="mb-3 d-none">
+            <div class="alert alert-danger d-flex align-items-center gap-2 mb-0">
+                <i class="fas fa-exclamation-circle"></i>
+                <span id="errorMsg"></span>
+            </div>
+        </div>
+
+        <!-- Result -->
+        <div id="resultSection" class="d-none">
+            <hr class="my-3">
+            <div class="d-flex justify-content-between align-items-center mb-2">
+                <div class="fw-semibold">
+                    <i class="fas fa-check-circle text-success me-1"></i> Kết quả
+                </div>
+                <button class="btn btn-sm btn-outline-secondary" onclick="copyResult()">
+                    <i class="fas fa-copy me-1"></i> Sao chép
+                </button>
+            </div>
+            <div class="result-box" id="resultBox"></div>
+        </div>
+
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script>
+    let selectedFile = null;
+    let selectedMode = 'translate';
+    let geminiModelList = [];
+
+    // Load languages
+    async function loadLanguages() {
+        try {
+            const res = await fetch('/api/languages');
+            const langs = await res.json();
+            const sel = document.getElementById('targetLang');
+            sel.innerHTML = '';
+            langs.filter(l => !l.source_only).forEach(l => {
+                const opt = document.createElement('option');
+                opt.value = l.code;
+                opt.textContent = l.name;
+                if (l.code === 'vi') opt.selected = true;
+                sel.appendChild(opt);
+            });
+            $('#targetLang').select2({ placeholder: 'Chọn ngôn ngữ đích', width: '100%' });
+        } catch(e) { console.error(e); }
+    }
+
+    // Load Gemini models
+    async function loadGeminiModels() {
+        try {
+            const res = await fetch('/api/gemini-models');
+            geminiModelList = await res.json();
+            const sel = document.getElementById('geminiModel');
+            sel.innerHTML = '';
+            geminiModelList.forEach(m => {
+                const opt = document.createElement('option');
+                opt.value = m.id;
+                const quota = m.remaining > 0 ? `✓ Còn ${m.remaining.toLocaleString()}/${m.rpd}` : `✗ Hết`;
+                opt.textContent = `${m.name}  —  ${quota}`;
+                if (m.remaining === 0) opt.disabled = true;
+                sel.appendChild(opt);
+            });
+            updateModelQuota();
+        } catch(e) { console.error(e); }
+    }
+
+    function updateModelQuota() {
+        const sel = document.getElementById('geminiModel');
+        const chosen = geminiModelList.find(m => m.id === sel.value);
+        const el = document.getElementById('modelQuota');
+        if (chosen) {
+            el.innerHTML = chosen.remaining > 0
+                ? `<span style="color:var(--color-primary)"><i class="fas fa-check-circle"></i> Còn <strong>${chosen.remaining.toLocaleString()}</strong> request hôm nay</span>`
+                : `<span style="color:#dc3545"><i class="fas fa-exclamation-triangle"></i> Đã hết quota</span>`;
+        }
+    }
+
+    document.getElementById('geminiModel').addEventListener('change', updateModelQuota);
+    loadLanguages();
+    loadGeminiModels();
+
+    // Mode buttons
+    document.querySelectorAll('.mode-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            selectedMode = btn.dataset.mode;
+        });
+    });
+
+    // Drag & drop
+    const dropZone = document.getElementById('dropZone');
+    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
+    });
+    document.getElementById('imageInput').addEventListener('change', e => {
+        if (e.target.files[0]) handleFile(e.target.files[0]);
+    });
+
+    function handleFile(file) {
+        selectedFile = file;
+        document.getElementById('uploadedFileName').textContent = `✓ ${file.name}`;
+        document.getElementById('uploadedFileName').classList.remove('d-none');
+        document.getElementById('translateBtn').disabled = false;
+        document.getElementById('resultSection').classList.add('d-none');
+        document.getElementById('errorArea').classList.add('d-none');
+
+        const reader = new FileReader();
+        reader.onload = e => {
+            document.getElementById('imgPreview').src = e.target.result;
+            document.getElementById('imgPreviewArea').classList.remove('d-none');
+        };
+        reader.readAsDataURL(file);
+    }
+
+    // Process
+    document.getElementById('translateBtn').addEventListener('click', async () => {
+        if (!selectedFile) return;
+        document.getElementById('loaderOverlay').style.display = 'flex';
+        document.getElementById('errorArea').classList.add('d-none');
+        document.getElementById('resultSection').classList.add('d-none');
+
+        const formData = new FormData();
+        formData.append('image', selectedFile);
+        formData.append('target_lang', $('#targetLang').val());
+        formData.append('gemini_model', document.getElementById('geminiModel').value);
+        formData.append('mode', selectedMode);
+
+        try {
+            const res = await fetch('/translate-image', { method: 'POST', body: formData });
+            const data = await res.json();
+            if (data.error) {
+                document.getElementById('errorMsg').textContent = data.error;
+                document.getElementById('errorArea').classList.remove('d-none');
+            } else {
+                document.getElementById('resultBox').innerHTML = marked.parse(data.result);
+                document.getElementById('resultSection').classList.remove('d-none');
+                await loadGeminiModels();
+            }
+        } catch(e) {
+            document.getElementById('errorMsg').textContent = 'Lỗi kết nối. Vui lòng thử lại.';
+            document.getElementById('errorArea').classList.remove('d-none');
+        } finally {
+            document.getElementById('loaderOverlay').style.display = 'none';
+        }
+    });
+
+    function copyResult() {
+        navigator.clipboard.writeText(document.getElementById('resultBox').innerText).then(() => {
+            const btn = event.target.closest('button');
+            btn.innerHTML = '<i class="fas fa-check me-1"></i> Đã sao chép';
+            setTimeout(() => btn.innerHTML = '<i class="fas fa-copy me-1"></i> Sao chép', 2000);
+        });
+    }
+</script>
+{% endblock %}

templates/tools/translator/index.html

@@ -0,0 +1,373 @@
+{% extends "layout.html" %}
+
+{% block title %}AI Translator Pro - Pum's Toolkit{% endblock %}
+
+{% block styles %}
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
+<style>
+    .select2-container .select2-selection--single {
+        height: calc(1.5em + 0.75rem + 2px);
+        border-color: var(--color-border-input);
+        border-radius: var(--radius-md);
+        display: flex;
+        align-items: center;
+    }
+    .select2-container--default .select2-selection--single .select2-selection__rendered {
+        line-height: 1.5;
+        color: var(--color-text-body);
+        padding-left: 12px;
+    }
+    .select2-container--default .select2-selection--single .select2-selection__arrow {
+        height: 100%;
+    }
+    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
+        background-color: var(--color-primary);
+    }
+    .select2-dropdown {
+        border-color: var(--color-border-input);
+        border-radius: var(--radius-md);
+        box-shadow: var(--shadow-card);
+    }
+    .select2-search--dropdown .select2-search__field {
+        border-color: var(--color-border-input);
+        border-radius: var(--radius-sm);
+        padding: 6px 10px;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div id="loaderOverlay" class="loader-overlay">
+    <div class="spinner-pro"></div>
+    <p class="mt-3 fw-bold" style="color: var(--color-primary)">Đang xử lý bản dịch...</p>
+</div>
+
+<div class="card card-custom">
+    <div class="card-header bg-white border-0 pt-4 text-center">
+        <h3 class="fw-bold" style="color: var(--color-primary)">AI TRANSLATOR PRO</h3>
+        <p class="text-muted">Dịch văn bản, tài liệu & ảnh bằng AI</p>
+    </div>
+
+    <div class="card-body p-4">
+        <ul class="nav nav-pills mb-4 justify-content-center" id="pills-tab">
+            <li class="nav-item">
+                <a class="nav-link {% if active_tab == 'text' %}active{% endif %}" href="/translator/text">Văn bản</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link {% if active_tab == 'file' %}active{% endif %}" href="/translator/file">Tài liệu</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/translator/image"><i class="fas fa-image me-1"></i>Dịch ảnh</a>
+            </li>
+        </ul>
+
+        <div class="row g-3 mb-4">
+            <div class="col-md-4">
+                <label class="form-label">Ngôn ngữ nguồn</label>
+                <select id="sourceLang" class="form-select">
+                    <option value="auto">Đang tải...</option>
+                </select>
+            </div>
+            <div class="col-md-4">
+                <label class="form-label">Ngôn ngữ đích</label>
+                <select id="targetLang" class="form-select">
+                    <option value="vi">Đang tải...</option>
+                </select>
+            </div>
+            <div class="col-md-4">
+                <label class="form-label">Công cụ</label>
+                <select id="engine" class="form-select" onchange="toggleGeminiStyles()">
+                    <option value="google">Google Translate</option>
+                    <option value="gemini">Gemini AI</option>
+                </select>
+            </div>
+        </div>
+
+        <div id="geminiStyles" class="mb-4" style="display:none">
+            <div class="row g-3">
+                <div class="col-md-6">
+                    <label class="form-label" style="color: var(--color-primary)">Mô hình Gemini</label>
+                    <select id="geminiModel" class="form-select" style="border-color: var(--color-primary)">
+                        <option value="">Đang tải...</option>
+                    </select>
+                    <div id="modelQuota" class="mt-1 small text-muted"></div>
+                </div>
+                <div class="col-md-6">
+                    <label class="form-label" style="color: var(--color-primary)">Phong cách dịch</label>
+                    <select id="translationStyle" class="form-select" style="border-color: var(--color-primary)">
+                        <option value="default">Mặc định</option>
+                        <option value="formal">Trang trọng</option>
+                        <option value="casual">Thân mật</option>
+                        <option value="creative">Sáng tạo</option>
+                        <option value="technical">Kỹ thuật</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <div class="tab-content">
+            <div class="tab-pane fade {% if active_tab == 'text' %}show active{% endif %}" id="text-mode">
+                <div class="row g-3">
+                    <div class="col-md-6">
+                        <textarea id="inputText" class="form-control" rows="8" placeholder="Nhập văn bản..."></textarea>
+                    </div>
+                    <div class="col-md-6">
+                        <textarea id="outputText" class="form-control" rows="8" placeholder="Bản dịch..." readonly></textarea>
+                    </div>
+                </div>
+            </div>
+            <div class="tab-pane fade {% if active_tab == 'file' %}show active{% endif %}" id="file-mode">
+                <div class="file-upload-wrapper" id="dropZone" onclick="document.getElementById('fileInput').click()">
+                    <i class="fas fa-file-upload fa-3x mb-3 text-muted"></i>
+                    <h5>Chọn file (.txt, .docx, .pdf)</h5>
+                    <div class="small text-muted mt-1" style="opacity:0.6"><i class="fas fa-paste me-1"></i>Hoặc nhấn <kbd>Ctrl+V</kbd> để dán file</div>
+                    <input type="file" id="fileInput" class="d-none" accept=".txt,.docx,.pdf">
+                    <div id="fileNameDisplay" class="mt-2 fw-bold" style="color: var(--color-primary)"></div>
+                </div>
+
+                <!-- Preview trước/sau dịch -->
+                <div id="previewArea" class="d-none mt-4">
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label class="form-label d-flex justify-content-between">
+                                <span><i class="fas fa-file-alt me-1"></i> Nội dung gốc <span class="badge bg-secondary" id="previewCharCount"></span></span>
+                            </label>
+                            <textarea id="previewOriginal" class="form-control" rows="10" readonly
+                                style="font-size: 0.82rem; background: var(--color-bg-input);"></textarea>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">
+                                <i class="fas fa-language me-1"></i> Bản dịch preview
+                                <span id="previewTranslatedBadge" class="badge bg-secondary ms-1 d-none">1000 ký tự đầu</span>
+                            </label>
+                            <textarea id="previewTranslated" class="form-control" rows="10" readonly
+                                placeholder="Bản dịch sẽ hiển thị sau khi nhấn Dịch Ngay..."
+                                style="font-size: 0.82rem; background: var(--color-bg-input);"></textarea>
+                        </div>
+                    </div>
+                    <p class="text-muted small mt-2 mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        Chỉ hiển thị 1000 ký tự đầu để review. File dịch đầy đủ sẽ có ở phần tải về bên dưới.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <button id="translateBtn" class="btn-primary-custom mt-4">DỊCH NGAY</button>
+
+        <div id="errorArea" class="mt-3 d-none">
+            <div class="alert alert-danger d-flex align-items-center gap-2 mb-0">
+                <i class="fas fa-exclamation-circle"></i>
+                <span id="errorMsg"></span>
+            </div>
+        </div>
+
+        <div id="downloadArea" class="mt-3 text-center d-none">
+            <div class="alert alert-success">
+                Dịch xong!
+                <a id="downloadLink" href="#" class="btn btn-sm btn-success ms-2">Tải về file</a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+    // Load danh sách ngôn ngữ
+    async function loadLanguages() {
+        try {
+            const res = await fetch('/api/languages');
+            const langs = await res.json();
+
+            const sourceSel = document.getElementById('sourceLang');
+            const targetSel = document.getElementById('targetLang');
+            sourceSel.innerHTML = '';
+            targetSel.innerHTML = '';
+
+            langs.forEach(l => {
+                // Source: thêm tất cả
+                const srcOpt = document.createElement('option');
+                srcOpt.value = l.code;
+                srcOpt.textContent = l.name;
+                if (l.code === 'auto') srcOpt.selected = true;
+                sourceSel.appendChild(srcOpt);
+
+                // Target: bỏ "auto"
+                if (!l.source_only) {
+                    const tgtOpt = document.createElement('option');
+                    tgtOpt.value = l.code;
+                    tgtOpt.textContent = l.name;
+                    if (l.code === 'vi') tgtOpt.selected = true;
+                    targetSel.appendChild(tgtOpt);
+                }
+            });
+
+            // Khởi tạo select2 sau khi đã có options
+            $('#sourceLang').select2({ placeholder: 'Chọn ngôn ngữ nguồn', width: '100%' });
+            $('#targetLang').select2({ placeholder: 'Chọn ngôn ngữ đích', width: '100%' });
+        } catch(e) {
+            console.error('Không load được danh sách ngôn ngữ:', e);
+        }
+    }
+    loadLanguages();
+
+    function toggleGeminiStyles() {
+        const isGemini = document.getElementById('engine').value === 'gemini';
+        document.getElementById('geminiStyles').style.display = isGemini ? 'block' : 'none';
+    }
+
+    // Load danh sách model Gemini
+    let geminiModelList = [];
+    async function loadGeminiModels() {
+        try {
+            const res = await fetch('/api/gemini-models');
+            geminiModelList = await res.json();
+            const sel = document.getElementById('geminiModel');
+            sel.innerHTML = '';
+            geminiModelList.forEach(m => {
+                const opt = document.createElement('option');
+                opt.value = m.id;
+                const quotaText = m.remaining > 0
+                    ? `✓ Còn ${m.remaining.toLocaleString()}/${m.rpd.toLocaleString()}`
+                    : `✗ Hết (${m.used}/${m.rpd})`;
+                opt.textContent = `${m.name}  —  ${quotaText}`;
+                if (m.remaining === 0) opt.disabled = true;
+                sel.appendChild(opt);
+            });
+            updateModelQuota();
+        } catch(e) {
+            console.error('Không load được model list:', e);
+        }
+    }
+
+    function updateModelQuota() {
+        const sel = document.getElementById('geminiModel');
+        const chosen = geminiModelList.find(m => m.id === sel.value);
+        const el = document.getElementById('modelQuota');
+        if (chosen) {
+            const status = chosen.remaining > 0
+                ? `<span style="color: var(--color-primary)"><i class="fas fa-check-circle"></i> Còn <strong>${chosen.remaining.toLocaleString()}</strong> request hôm nay</span>`
+                : `<span style="color: #dc3545"><i class="fas fa-exclamation-triangle"></i> Đã hết quota (${chosen.used}/${chosen.rpd})</span>`;
+            el.innerHTML = status;
+        }
+    }
+
+    document.getElementById('geminiModel')?.addEventListener('change', updateModelQuota);
+    loadGeminiModels();
+
+    function showError(msg) {
+        const area = document.getElementById('errorArea');
+        document.getElementById('errorMsg').textContent = msg;
+        area.classList.remove('d-none');
+    }
+
+    function clearError() {
+        document.getElementById('errorArea').classList.add('d-none');
+    }
+
+    const fileInput = document.getElementById('fileInput');
+    if (fileInput) {
+        fileInput.addEventListener('change', async e => {
+            const file = e.target.files[0];
+            if (!file) return;
+            document.getElementById('fileNameDisplay').textContent = `Đã chọn: ${file.name}`;
+
+            // Gọi preview file
+            const fd = new FormData();
+            fd.append('file', file);
+            try {
+                const res = await fetch('/preview-file', { method: 'POST', body: fd });
+                const data = await res.json();
+                if (data.error) { showError(data.error); return; }
+
+                document.getElementById('previewOriginal').value = data.preview + (data.truncated ? '\n...' : '');
+                document.getElementById('previewCharCount').textContent =
+                    data.truncated ? `1.000 / ${data.total_chars.toLocaleString()} ký tự` : `${data.total_chars.toLocaleString()} ký tự`;
+                document.getElementById('previewTranslated').value = '';
+                document.getElementById('previewTranslatedBadge').classList.add('d-none');
+                document.getElementById('previewArea').classList.remove('d-none');
+            } catch(err) {
+                showError('Không đọc được file để preview.');
+            }
+        });
+    }
+
+    document.getElementById('translateBtn').addEventListener('click', async () => {
+        const isFileMode = window.location.pathname === '/translator/file';
+        const loader = document.getElementById('loaderOverlay');
+        loader.style.display = 'flex';
+        clearError();
+        try {
+            if (!isFileMode) {
+                const res = await fetch('/translate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        text: document.getElementById('inputText').value,
+                        target_lang: $('#targetLang').val(),
+                        engine: document.getElementById('engine').value,
+                        style: document.getElementById('translationStyle').value,
+                        gemini_model: document.getElementById('geminiModel').value
+                    })
+                });
+                const data = await res.json();
+                if (data.error) showError(data.error);
+                else {
+                    document.getElementById('outputText').value = data.translated_text;
+                    if (document.getElementById('engine').value === 'gemini') {
+                        await loadGeminiModels(); // Cập nhật quota
+                    }
+                }
+            } else {
+                const formData = new FormData();
+                formData.append('file', document.getElementById('fileInput').files[0]);
+                formData.append('target_lang', $('#targetLang').val());
+                formData.append('engine', document.getElementById('engine').value);
+                formData.append('style', document.getElementById('translationStyle').value);
+                formData.append('gemini_model', document.getElementById('geminiModel').value);
+                const res = await fetch('/translate', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.error) showError(data.error);
+                else {
+                    document.getElementById('downloadLink').href = data.download_url;
+                    document.getElementById('downloadArea').classList.remove('d-none');
+
+                    if (document.getElementById('engine').value === 'gemini') {
+                        await loadGeminiModels(); // Cập nhật quota
+                    }
+
+                    // Dịch 1000 ký tự đầu để preview
+                    const previewText = document.getElementById('previewOriginal').value.replace(/\n\.\.\.$/, '');
+                    if (previewText.trim()) {
+                        try {
+                            const pvRes = await fetch('/translate', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({
+                                    text: previewText,
+                                    target_lang: $('#targetLang').val(),
+                                    engine: document.getElementById('engine').value,
+                                    style: document.getElementById('translationStyle').value,
+                                    gemini_model: document.getElementById('geminiModel').value
+                                })
+                            });
+                            const pvData = await pvRes.json();
+                            if (!pvData.error) {
+                                document.getElementById('previewTranslated').value = pvData.translated_text;
+                                document.getElementById('previewTranslatedBadge').classList.remove('d-none');
+                            }
+                        } catch(e) { /* preview dịch lỗi thì bỏ qua */ }
+                    }
+                }
+            }
+        } catch (e) {
+            showError('Lỗi kết nối. Vui lòng thử lại.');
+        } finally {
+            loader.style.display = 'none';
+        }
+    });
+</script>
+{% endblock %}

templates/tools/tts/edge.html

@@ -0,0 +1,263 @@
+{% extends "layout.html" %}
+
+{% block title %}Text to Speech - Pum's Toolkit{% endblock %}
+
+{% block styles %}
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
+<style>
+    .select2-container .select2-selection--single { height: calc(1.5em + 0.75rem + 2px); border-color: var(--color-border-input); border-radius: var(--radius-md); display: flex; align-items: center; }
+    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5; color: var(--color-text-body); padding-left: 12px; }
+    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--color-primary); }
+    .select2-dropdown { border-color: var(--color-border-input); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
+    .select2-search--dropdown .select2-search__field { border-color: var(--color-border-input); border-radius: var(--radius-sm); padding: 6px 10px; }
+    .char-counter { font-size: 0.78rem; color: var(--color-text-muted); }
+    .char-counter.warn { color: #f59e0b; }
+    .char-counter.over  { color: #ef4444; }
+    .audio-player-wrap { background: var(--color-bg-input); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; }
+    audio { width: 100%; border-radius: 8px; }
+    .range-wrap { display: flex; align-items: center; gap: 10px; }
+    .range-wrap input[type=range] { flex: 1; accent-color: var(--color-primary); }
+    .range-val { min-width: 52px; text-align: right; font-size: 0.82rem; font-weight: 600; color: var(--color-primary); }
+    .voice-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; }
+    .badge-female { background: #fce7f3; color: #be185d; }
+    .badge-male   { background: #dbeafe; color: #1d4ed8; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div id="loaderOverlay" class="loader-overlay">
+    <div class="spinner-pro"></div>
+    <p class="mt-3 fw-bold" style="color: var(--color-primary)">Đang tạo giọng nói...</p>
+</div>
+
+<div class="card card-custom">
+    <!-- Header chung -->
+    <div class="card-header bg-white border-0 pt-4 text-center">
+        <h3 class="fw-bold" style="color: var(--color-primary)">TEXT TO SPEECH</h3>
+        <p class="text-muted">Chuyển văn bản thành giọng nói tự nhiên</p>
+        <ul class="nav nav-pills justify-content-center mb-0">
+            <li class="nav-item"><a class="nav-link" href="/tts/vieneu"><i class="fas fa-dragon me-1"></i> VieNeu-TTS</a></li>
+            <li class="nav-item"><a class="nav-link" href="/tts/gtts"><i class="fab fa-google me-1"></i> Google TTS</a></li>
+            <li class="nav-item"><a class="nav-link active" href="/tts/edge"><i class="fab fa-microsoft me-1"></i> Edge TTS</a></li>
+        </ul>
+    </div>
+
+    <div class="card-body p-4">
+
+        <!-- Lọc ngôn ngữ + chọn giọng -->
+        <div class="row g-3 mb-4">
+            <div class="col-md-4">
+                <label class="form-label">Ngôn ngữ</label>
+                <select id="langFilter" class="form-select">
+                    <option value="">Đang tải...</option>
+                </select>
+            </div>
+            <div class="col-md-8">
+                <label class="form-label">Giọng đọc <span id="voiceCount" class="text-muted fw-normal" style="font-size:0.78rem"></span></label>
+                <select id="voiceSelect" class="form-select">
+                    <option value="">Chọn ngôn ngữ trước...</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- Điều chỉnh tốc độ & cao độ -->
+        <div class="row g-3 mb-4">
+            <div class="col-md-6">
+                <label class="form-label">Tốc độ</label>
+                <div class="range-wrap">
+                    <input type="range" id="rateRange" min="-50" max="100" step="5" value="0">
+                    <span class="range-val" id="rateVal">+0%</span>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <label class="form-label">Cao độ (Pitch)</label>
+                <div class="range-wrap">
+                    <input type="range" id="pitchRange" min="-50" max="50" step="5" value="0">
+                    <span class="range-val" id="pitchVal">+0Hz</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Văn bản -->
+        <div class="mb-4">
+            <label class="form-label d-flex justify-content-between">
+                <span>Văn bản <small class="text-muted fw-normal">(322 giọng neural, 70+ ngôn ngữ)</small></span>
+                <span class="char-counter" id="charCounter">0 / 10.000</span>
+            </label>
+            <textarea id="ttsText" class="form-control" rows="7"
+                placeholder="Nhập văn bản bất kỳ ngôn ngữ nào..."></textarea>
+        </div>
+
+        <button class="btn-primary-custom mb-4" id="generateBtn" disabled>
+            <i class="fas fa-play me-2"></i> Tạo giọng nói
+        </button>
+
+        <div id="errorArea" class="mb-3 d-none">
+            <div class="alert alert-danger d-flex align-items-center gap-2 mb-0">
+                <i class="fas fa-exclamation-circle"></i>
+                <span id="errorMsg"></span>
+            </div>
+        </div>
+
+        <div id="audioSection" class="d-none">
+            <hr class="my-3">
+            <div class="audio-player-wrap">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <div class="fw-semibold"><i class="fas fa-check-circle text-success me-1"></i> Hoàn thành</div>
+                    <a id="downloadLink" href="#" class="btn btn-success btn-sm px-3">
+                        <i class="fas fa-download me-1"></i> Tải về MP3
+                    </a>
+                </div>
+                <audio id="audioPlayer" controls></audio>
+            </div>
+        </div>
+
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+    let allVoices = [];
+
+    // Tên ngôn ngữ hiển thị
+    const langNames = {
+        'af': 'Afrikaans', 'sq': 'Albanian', 'am': 'Amharic', 'ar': 'Arabic (العربية)',
+        'az': 'Azerbaijani', 'bn': 'Bengali', 'bs': 'Bosnian', 'bg': 'Bulgarian',
+        'my': 'Burmese', 'ca': 'Catalan', 'zh': 'Chinese (中文)', 'hr': 'Croatian',
+        'cs': 'Czech', 'da': 'Danish', 'nl': 'Dutch', 'en': 'English',
+        'et': 'Estonian', 'fi': 'Finnish', 'fr': 'French', 'gl': 'Galician',
+        'ka': 'Georgian', 'de': 'German', 'el': 'Greek', 'gu': 'Gujarati',
+        'he': 'Hebrew', 'hi': 'Hindi (हिन्दी)', 'hu': 'Hungarian', 'is': 'Icelandic',
+        'id': 'Indonesian', 'ga': 'Irish', 'it': 'Italian', 'ja': 'Japanese (日本語)',
+        'jv': 'Javanese', 'kn': 'Kannada', 'kk': 'Kazakh', 'km': 'Khmer',
+        'ko': 'Korean (한국어)', 'lo': 'Lao', 'lv': 'Latvian', 'lt': 'Lithuanian',
+        'mk': 'Macedonian', 'ms': 'Malay', 'ml': 'Malayalam', 'mt': 'Maltese',
+        'mr': 'Marathi', 'mn': 'Mongolian', 'ne': 'Nepali', 'nb': 'Norwegian',
+        'or': 'Odia', 'ps': 'Pashto', 'fa': 'Persian (فارسی)', 'pl': 'Polish',
+        'pt': 'Portuguese', 'pa': 'Punjabi', 'ro': 'Romanian', 'ru': 'Russian (Русский)',
+        'sr': 'Serbian', 'si': 'Sinhala', 'sk': 'Slovak', 'sl': 'Slovenian',
+        'so': 'Somali', 'es': 'Spanish', 'su': 'Sundanese', 'sw': 'Swahili',
+        'sv': 'Swedish', 'tl': 'Filipino', 'ta': 'Tamil', 'te': 'Telugu',
+        'th': 'Thai (ภาษาไทย)', 'tr': 'Turkish', 'uk': 'Ukrainian', 'ur': 'Urdu',
+        'uz': 'Uzbek', 'vi': 'Vietnamese (Tiếng Việt)', 'cy': 'Welsh', 'zu': 'Zulu'
+    };
+
+    async function loadVoices() {
+        try {
+            const res = await fetch('/api/edge-voices');
+            allVoices = await res.json();
+            if (allVoices.error) return;
+
+            // Build language list
+            const langs = [...new Set(allVoices.map(v => v.lang))].sort();
+            const langSel = document.getElementById('langFilter');
+            langSel.innerHTML = '<option value="">-- Chọn ngôn ngữ --</option>';
+            langs.forEach(code => {
+                const opt = document.createElement('option');
+                opt.value = code;
+                opt.textContent = langNames[code] || code.toUpperCase();
+                langSel.appendChild(opt);
+            });
+
+            $('#langFilter').select2({ placeholder: 'Tìm ngôn ngữ...', width: '100%' });
+            $('#langFilter').on('change', filterVoices);
+
+            // Default: tiếng Việt
+            $('#langFilter').val('vi').trigger('change');
+        } catch(e) { console.error(e); }
+    }
+
+    function filterVoices() {
+        const lang = document.getElementById('langFilter').value;
+        const filtered = lang ? allVoices.filter(v => v.lang === lang) : [];
+        const sel = document.getElementById('voiceSelect');
+        sel.innerHTML = '';
+
+        if (!lang) {
+            sel.innerHTML = '<option value="">Chọn ngôn ngữ trước...</option>';
+            document.getElementById('generateBtn').disabled = true;
+            document.getElementById('voiceCount').textContent = '';
+            return;
+        }
+
+        filtered.forEach(v => {
+            const opt = document.createElement('option');
+            opt.value = v.name;
+            const genderIcon = v.gender === 'Female' ? '♀' : '♂';
+            // Lấy tên ngắn gọn từ friendly name
+            const friendlyName = v.display.replace(/^Microsoft /, '').replace(/ Online \(Natural\).*$/, '');
+            opt.textContent = `${genderIcon} ${friendlyName}`;
+            sel.appendChild(opt);
+        });
+
+        // Select2 cho voice
+        if ($.fn.select2 && $(sel).data('select2')) $(sel).select2('destroy');
+        $(sel).select2({ placeholder: 'Chọn giọng...', width: '100%' });
+        document.getElementById('voiceCount').textContent = `(${filtered.length} giọng)`;
+        document.getElementById('generateBtn').disabled = filtered.length === 0;
+    }
+
+    // Rate & Pitch sliders
+    document.getElementById('rateRange').addEventListener('input', function() {
+        const v = parseInt(this.value);
+        document.getElementById('rateVal').textContent = (v >= 0 ? '+' : '') + v + '%';
+    });
+    document.getElementById('pitchRange').addEventListener('input', function() {
+        const v = parseInt(this.value);
+        document.getElementById('pitchVal').textContent = (v >= 0 ? '+' : '') + v + 'Hz';
+    });
+
+    // Char counter
+    document.getElementById('ttsText').addEventListener('input', function() {
+        const len = this.value.length;
+        const el = document.getElementById('charCounter');
+        el.textContent = `${len.toLocaleString()} / 10.000`;
+        el.className = 'char-counter' + (len>10000?' over':len>8500?' warn':'');
+    });
+
+    // Generate
+    document.getElementById('generateBtn').addEventListener('click', async () => {
+        const text = document.getElementById('ttsText').value.trim();
+        const voice = $('#voiceSelect').val();
+        if (!text) { showError('Vui lòng nhập văn bản'); return; }
+        if (!voice) { showError('Vui lòng chọn giọng đọc'); return; }
+        if (text.length > 10000) { showError(`Văn bản quá dài (${text.length}/10000)`); return; }
+
+        const rateVal = document.getElementById('rateVal').textContent;
+        const pitchVal = document.getElementById('pitchVal').textContent;
+
+        document.getElementById('loaderOverlay').style.display = 'flex';
+        document.getElementById('errorArea').classList.add('d-none');
+        document.getElementById('audioSection').classList.add('d-none');
+
+        const fd = new FormData();
+        fd.append('text', text);
+        fd.append('voice', voice);
+        fd.append('rate', rateVal);
+        fd.append('pitch', pitchVal);
+
+        try {
+            const res = await fetch('/tts/edge/generate', {method:'POST', body:fd});
+            const data = await res.json();
+            if (data.error) { showError(data.error); return; }
+            const p = document.getElementById('audioPlayer');
+            p.src = data.audio_url + '?t=' + Date.now();
+            p.load(); p.play();
+            document.getElementById('downloadLink').href = data.audio_url;
+            document.getElementById('downloadLink').download = data.filename;
+            document.getElementById('audioSection').classList.remove('d-none');
+        } catch(e) { showError('Lỗi kết nối. Vui lòng thử lại.'); }
+        finally { document.getElementById('loaderOverlay').style.display = 'none'; }
+    });
+
+    function showError(msg) {
+        document.getElementById('errorMsg').textContent = msg;
+        document.getElementById('errorArea').classList.remove('d-none');
+    }
+
+    loadVoices();
+</script>
+{% endblock %}

templates/tools/tts/gtts.html

@@ -0,0 +1,171 @@
+{% extends "layout.html" %}
+
+{% block title %}Text to Speech - Pum's Toolkit{% endblock %}
+
+{% block styles %}
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
+<style>
+    .select2-container .select2-selection--single { height: calc(1.5em + 0.75rem + 2px); border-color: var(--color-border-input); border-radius: var(--radius-md); display: flex; align-items: center; }
+    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5; color: var(--color-text-body); padding-left: 12px; }
+    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--color-primary); }
+    .select2-dropdown { border-color: var(--color-border-input); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
+    .select2-search--dropdown .select2-search__field { border-color: var(--color-border-input); border-radius: var(--radius-sm); padding: 6px 10px; }
+    .char-counter { font-size: 0.78rem; color: var(--color-text-muted); }
+    .char-counter.warn { color: #f59e0b; }
+    .char-counter.over  { color: #ef4444; }
+    .audio-player-wrap { background: var(--color-bg-input); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; }
+    audio { width: 100%; border-radius: 8px; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div id="loaderOverlay" class="loader-overlay">
+    <div class="spinner-pro"></div>
+    <p class="mt-3 fw-bold" style="color: var(--color-primary)">Đang tạo giọng nói...</p>
+</div>
+
+<div class="card card-custom">
+    <!-- Header chung — giữ nguyên khi chuyển tab -->
+    <div class="card-header bg-white border-0 pt-4 text-center">
+        <h3 class="fw-bold" style="color: var(--color-primary)">TEXT TO SPEECH</h3>
+        <p class="text-muted">Chuyển văn bản thành giọng nói tự nhiên</p>
+        <ul class="nav nav-pills justify-content-center mb-0" id="pills-tab">
+            <li class="nav-item">
+                <a class="nav-link" href="/tts/vieneu">
+                    <i class="fas fa-dragon me-1"></i> VieNeu-TTS
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link active" href="/tts/gtts">
+                    <i class="fab fa-google me-1"></i> Google TTS
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/tts/edge">
+                    <i class="fab fa-microsoft me-1"></i> Edge TTS
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <div class="card-body p-4">
+
+        <!-- Cài đặt -->
+        <div class="row g-3 mb-4">
+            <div class="col-md-8">
+                <label class="form-label">Ngôn ngữ</label>
+                <select id="gttsLang" class="form-select">
+                    <option value="">Đang tải...</option>
+                </select>
+            </div>
+            <div class="col-md-4 d-flex align-items-end pb-1">
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" id="gttsSlow">
+                    <label class="form-check-label" for="gttsSlow">
+                        <i class="fas fa-turtle me-1 text-muted"></i> Đọc chậm hơn
+                    </label>
+                </div>
+            </div>
+        </div>
+
+        <!-- Văn bản -->
+        <div class="mb-4">
+            <label class="form-label d-flex justify-content-between">
+                <span>Văn bản <small class="text-muted fw-normal">(50+ ngôn ngữ, tối đa 5.000 ký tự)</small></span>
+                <span class="char-counter" id="charCounter">0 / 5.000</span>
+            </label>
+            <textarea id="ttsText" class="form-control" rows="7"
+                placeholder="Nhập văn bản bằng bất kỳ ngôn ngữ nào..."></textarea>
+        </div>
+
+        <button class="btn-primary-custom mb-4" id="generateBtn">
+            <i class="fas fa-play me-2"></i> Tạo giọng nói
+        </button>
+
+        <div id="errorArea" class="mb-3 d-none">
+            <div class="alert alert-danger d-flex align-items-center gap-2 mb-0">
+                <i class="fas fa-exclamation-circle"></i>
+                <span id="errorMsg"></span>
+            </div>
+        </div>
+
+        <div id="audioSection" class="d-none">
+            <hr class="my-3">
+            <div class="audio-player-wrap">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <div class="fw-semibold"><i class="fas fa-check-circle text-success me-1"></i> Hoàn thành</div>
+                    <a id="downloadLink" href="#" class="btn btn-success btn-sm px-3">
+                        <i class="fas fa-download me-1"></i> Tải về MP3
+                    </a>
+                </div>
+                <audio id="audioPlayer" controls></audio>
+            </div>
+        </div>
+
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+    async function loadLangs() {
+        try {
+            const res = await fetch('/api/gtts-langs');
+            const langs = await res.json();
+            const sel = document.getElementById('gttsLang');
+            sel.innerHTML = '';
+            langs.forEach(l => {
+                const opt = document.createElement('option');
+                opt.value = l.code; opt.textContent = l.name;
+                if (l.code === 'vi') opt.selected = true;
+                sel.appendChild(opt);
+            });
+            $('#gttsLang').select2({ placeholder: 'Chọn ngôn ngữ', width: '100%' });
+        } catch(e) { console.error(e); }
+    }
+    loadLangs();
+
+    document.getElementById('ttsText').addEventListener('input', function() {
+        const len = this.value.length;
+        const el = document.getElementById('charCounter');
+        el.textContent = `${len.toLocaleString()} / 5.000`;
+        el.className = 'char-counter' + (len>5000?' over':len>4200?' warn':'');
+    });
+
+    document.getElementById('generateBtn').addEventListener('click', async () => {
+        const text = document.getElementById('ttsText').value.trim();
+        if (!text) { showError('Vui lòng nhập văn bản'); return; }
+        if (text.length > 5000) { showError(`Văn bản quá dài (${text.length}/5000)`); return; }
+
+        document.getElementById('loaderOverlay').style.display = 'flex';
+        document.getElementById('errorArea').classList.add('d-none');
+        document.getElementById('audioSection').classList.add('d-none');
+
+        const fd = new FormData();
+        fd.append('text', text);
+        fd.append('engine', 'gtts');
+        fd.append('gtts_lang', $('#gttsLang').val());
+        fd.append('gtts_slow', document.getElementById('gttsSlow').checked);
+
+        try {
+            const res = await fetch('/tts/generate', {method:'POST', body:fd});
+            const data = await res.json();
+            if (data.error) { showError(data.error); return; }
+            const p = document.getElementById('audioPlayer');
+            p.src = data.audio_url + '?t=' + Date.now();
+            p.load(); p.play();
+            document.getElementById('downloadLink').href = data.audio_url;
+            document.getElementById('downloadLink').download = data.filename;
+            document.getElementById('audioSection').classList.remove('d-none');
+        } catch(e) { showError('Lỗi kết nối. Vui lòng thử lại.'); }
+        finally { document.getElementById('loaderOverlay').style.display = 'none'; }
+    });
+
+    function showError(msg) {
+        document.getElementById('errorMsg').textContent = msg;
+        document.getElementById('errorArea').classList.remove('d-none');
+    }
+</script>
+{% endblock %}

templates/tools/tts/vieneu.html

@@ -0,0 +1,247 @@
+{% extends "layout.html" %}
+
+{% block title %}Text to Speech - Pum's Toolkit{% endblock %}
+
+{% block styles %}
+<style>
+    .voice-card {
+        border: 1.5px solid var(--color-border);
+        border-radius: var(--radius-md);
+        padding: 0.75rem 1rem;
+        cursor: pointer;
+        transition: all 0.15s;
+        display: flex; align-items: center; gap: 10px;
+        background: #fff;
+        text-decoration: none;
+    }
+    .voice-card:hover { border-color: var(--color-primary); background: var(--color-primary-hover); }
+    .voice-card.active { border-color: var(--color-primary); background: var(--color-primary-light); }
+    .voice-card .voice-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; flex-shrink: 0; }
+    .voice-card .voice-name { font-weight: 600; font-size: 0.875rem; color: var(--color-text-heading); }
+    .voice-card .voice-desc { font-size: 0.75rem; color: var(--color-text-muted); }
+    .char-counter { font-size: 0.78rem; color: var(--color-text-muted); }
+    .char-counter.warn { color: #f59e0b; }
+    .char-counter.over  { color: #ef4444; }
+    .audio-player-wrap { background: var(--color-bg-input); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; }
+    audio { width: 100%; border-radius: 8px; }
+    .drop-zone { border: 2px dashed var(--color-border-input); border-radius: var(--radius-md); padding: 1.2rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: var(--color-bg-input); position: relative; font-size: 0.85rem; }
+    .drop-zone:hover { border-color: var(--color-primary); background: var(--color-primary-hover); }
+    .drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+    .mode-btn { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); background: #fff; cursor: pointer; transition: all 0.15s; }
+    .mode-btn.active { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }
+</style>
+{% endblock %}
+
+{% block content %}
+<div id="loaderOverlay" class="loader-overlay">
+    <div class="spinner-pro"></div>
+    <p class="mt-3 fw-bold" style="color: var(--color-primary)">Đang tạo giọng nói...</p>
+</div>
+
+<div class="card card-custom">
+    <!-- Header chung — giữ nguyên khi chuyển tab -->
+    <div class="card-header bg-white border-0 pt-4 text-center">
+        <h3 class="fw-bold" style="color: var(--color-primary)">TEXT TO SPEECH</h3>
+        <p class="text-muted">Chuyển văn bản thành giọng nói tự nhiên</p>
+        <ul class="nav nav-pills justify-content-center mb-0" id="pills-tab">
+            <li class="nav-item">
+                <a class="nav-link active" href="/tts/vieneu">
+                    <i class="fas fa-dragon me-1"></i> VieNeu-TTS
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/tts/gtts">
+                    <i class="fab fa-google me-1"></i> Google TTS
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/tts/edge">
+                    <i class="fab fa-microsoft me-1"></i> Edge TTS
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <div class="card-body p-4">
+
+        <!-- Văn bản -->
+        <div class="mb-3">
+            <label class="form-label d-flex justify-content-between">
+                <span>Văn bản <small class="text-muted fw-normal">(Hỗ trợ song ngữ Anh–Việt, tag: [cười] [thở dài] [hắng giọng])</small></span>
+                <span class="char-counter" id="charCounter">0 / 3.000</span>
+            </label>
+            <textarea id="ttsText" class="form-control" rows="6"
+                placeholder="Nhập văn bản... Ví dụ: Xin chào! This is a bilingual demo [cười]."></textarea>
+            <div class="d-flex gap-2 mt-2 flex-wrap">
+                <button class="btn btn-sm btn-outline-secondary" onclick="insertTag('[cười]')"><i class="fas fa-laugh me-1"></i>[cười]</button>
+                <button class="btn btn-sm btn-outline-secondary" onclick="insertTag('[thở dài]')"><i class="fas fa-wind me-1"></i>[thở dài]</button>
+                <button class="btn btn-sm btn-outline-secondary" onclick="insertTag('[hắng giọng]')"><i class="fas fa-comment-medical me-1"></i>[hắng giọng]</button>
+            </div>
+        </div>
+
+        <!-- Giọng đọc -->
+        <div class="mb-4">
+            <label class="form-label d-flex justify-content-between align-items-center">
+                <span>Giọng đọc</span>
+                <div class="d-flex gap-2">
+                    <button class="mode-btn active" data-mode="preset" onclick="switchMode('preset')">
+                        <i class="fas fa-user-circle me-1"></i> Giọng có sẵn
+                    </button>
+                    <button class="mode-btn" data-mode="clone" onclick="switchMode('clone')">
+                        <i class="fas fa-fingerprint me-1"></i> Clone giọng
+                    </button>
+                </div>
+            </label>
+            <div id="presetVoices">
+                <div class="row g-2" id="voiceGrid">
+                    <div class="col-12 text-muted small">Đang tải danh sách giọng...</div>
+                </div>
+            </div>
+            <div id="cloneVoice" class="d-none">
+                <div class="drop-zone" onclick="document.getElementById('refAudioInput').click()">
+                    <input type="file" id="refAudioInput" accept=".wav,.mp3,.ogg,.flac">
+                    <i class="fas fa-microphone fa-lg text-muted mb-1 d-block"></i>
+                    <div class="fw-semibold text-muted">Upload audio mẫu (3–5 giây)</div>
+                    <div class="text-muted" style="opacity:0.7;font-size:0.75rem">WAV, MP3, OGG — giọng rõ, ít nhiễu</div>
+                    <div class="text-muted mt-1" style="opacity:0.6;font-size:0.75rem"><i class="fas fa-paste me-1"></i>Hoặc nhấn <kbd>Ctrl+V</kbd> để dán</div>
+                    <div id="refFileName" class="mt-1 fw-bold d-none" style="color:var(--color-primary);font-size:0.82rem"></div>
+                </div>
+            </div>
+        </div>
+
+        <button class="btn-primary-custom mb-4" id="generateBtn">
+            <i class="fas fa-play me-2"></i> Tạo giọng nói
+        </button>
+
+        <div id="errorArea" class="mb-3 d-none">
+            <div class="alert alert-danger d-flex align-items-center gap-2 mb-0">
+                <i class="fas fa-exclamation-circle"></i>
+                <span id="errorMsg"></span>
+            </div>
+        </div>
+
+        <div id="audioSection" class="d-none">
+            <hr class="my-3">
+            <div class="audio-player-wrap">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <div class="fw-semibold"><i class="fas fa-check-circle text-success me-1"></i> Hoàn thành</div>
+                    <a id="downloadLink" href="#" class="btn btn-success btn-sm px-3">
+                        <i class="fas fa-download me-1"></i> Tải về WAV
+                    </a>
+                </div>
+                <audio id="audioPlayer" controls></audio>
+            </div>
+        </div>
+
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    let selectedVoice = 'Ngọc Lan';
+    let voiceMode = 'preset';
+
+    const voiceColors = { 'nữ': ['#f472b6','#ec4899','#a855f7','#8b5cf6'], 'nam': ['#60a5fa','#3b82f6','#06b6d4','#0ea5e9'] };
+    function getVoiceColor(label) {
+        const arr = label.includes('nam') ? voiceColors.nam : voiceColors['nữ'];
+        return arr[label.split('').reduce((a,c)=>a+c.charCodeAt(0),0) % arr.length];
+    }
+
+    async function loadVoices() {
+        try {
+            const res = await fetch('/api/tts-voices');
+            const data = await res.json();
+            if (data.error) return;
+            const grid = document.getElementById('voiceGrid');
+            grid.innerHTML = '';
+            data.forEach(v => {
+                const color = getVoiceColor(v.label);
+                const [name, desc=''] = v.label.split(' — ');
+                const col = document.createElement('div');
+                col.className = 'col-md-4 col-sm-6';
+                col.innerHTML = `<div class="voice-card ${v.id===selectedVoice?'active':''}" onclick="selectVoice('${v.id}',this)">
+                    <div class="voice-avatar" style="background:${color}20;color:${color}">${v.id.charAt(0)}</div>
+                    <div><div class="voice-name">${name}</div><div class="voice-desc">${desc}</div></div>
+                </div>`;
+                grid.appendChild(col);
+            });
+        } catch(e) { console.error(e); }
+    }
+
+    function selectVoice(id, el) {
+        selectedVoice = id;
+        document.querySelectorAll('.voice-card').forEach(c=>c.classList.remove('active'));
+        el.classList.add('active');
+    }
+
+    function switchMode(mode) {
+        voiceMode = mode;
+        document.querySelectorAll('.mode-btn').forEach(b=>b.classList.remove('active'));
+        document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
+        document.getElementById('presetVoices').classList.toggle('d-none', mode!=='preset');
+        document.getElementById('cloneVoice').classList.toggle('d-none', mode!=='clone');
+    }
+
+    document.getElementById('ttsText').addEventListener('input', function() {
+        const len = this.value.length;
+        const el = document.getElementById('charCounter');
+        el.textContent = `${len.toLocaleString()} / 3.000`;
+        el.className = 'char-counter' + (len>3000?' over':len>2500?' warn':'');
+    });
+
+    function insertTag(tag) {
+        const ta = document.getElementById('ttsText');
+        const s = ta.selectionStart;
+        ta.value = ta.value.slice(0,s)+tag+ta.value.slice(s);
+        ta.selectionStart = ta.selectionEnd = s+tag.length;
+        ta.focus(); ta.dispatchEvent(new Event('input'));
+    }
+
+    document.getElementById('refAudioInput').addEventListener('change', e => {
+        const f = e.target.files[0];
+        if (f) { document.getElementById('refFileName').textContent=`✓ ${f.name}`; document.getElementById('refFileName').classList.remove('d-none'); }
+    });
+
+    document.getElementById('generateBtn').addEventListener('click', async () => {
+        const text = document.getElementById('ttsText').value.trim();
+        if (!text) { showError('Vui lòng nhập văn bản'); return; }
+        if (text.length > 3000) { showError(`Văn bản quá dài (${text.length}/3000)`); return; }
+
+        document.getElementById('loaderOverlay').style.display = 'flex';
+        document.getElementById('errorArea').classList.add('d-none');
+        document.getElementById('audioSection').classList.add('d-none');
+
+        const fd = new FormData();
+        fd.append('text', text);
+        fd.append('engine', 'vieneu');
+        if (voiceMode === 'clone') {
+            const f = document.getElementById('refAudioInput').files[0];
+            if (!f) { showError('Vui lòng upload audio mẫu'); document.getElementById('loaderOverlay').style.display='none'; return; }
+            fd.append('ref_audio', f);
+        } else {
+            fd.append('voice', selectedVoice);
+        }
+
+        try {
+            const res = await fetch('/tts/generate', {method:'POST', body:fd});
+            const data = await res.json();
+            if (data.error) { showError(data.error); return; }
+            const p = document.getElementById('audioPlayer');
+            p.src = data.audio_url + '?t=' + Date.now();
+            p.load(); p.play();
+            document.getElementById('downloadLink').href = data.audio_url;
+            document.getElementById('downloadLink').download = data.filename;
+            document.getElementById('audioSection').classList.remove('d-none');
+        } catch(e) { showError('Lỗi kết nối. Vui lòng thử lại.'); }
+        finally { document.getElementById('loaderOverlay').style.display='none'; }
+    });
+
+    function showError(msg) {
+        document.getElementById('errorMsg').textContent = msg;
+        document.getElementById('errorArea').classList.remove('d-none');
+    }
+
+    loadVoices();
+</script>
+{% endblock %}