feat: add AI Prompt Studio tool with 11 prompt categories and clean dropdown selector

.gitignore

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

app.py

@@ -14,6 +14,8 @@ from reportlab.pdfgen import canvas
 from reportlab.lib.pagesizes import letter
 from werkzeug.utils import secure_filename
 from rembg import remove as rembg_remove
+import socket
+socket.setdefaulttimeout(15.0)
 
 app = Flask(__name__)
 app.config['UPLOAD_FOLDER'] = 'uploads'
@@ -133,6 +135,10 @@ def index():
 def download(filename):
     return send_file(os.path.join(app.config['UPLOAD_FOLDER'], filename), as_attachment=True)
 
+@app.route('/favicon.ico')
+def favicon():
+    return '', 204
+
 # ── Routes: API ───────────────────────────────────────────────
 @app.route('/api/gemini-models')
 def gemini_models():
@@ -647,5 +653,906 @@ def pdf_process():
     except Exception as e:
         return jsonify({'error': _err_msg(str(e))}), 500
 
+# ── Routes: Video AI ──────────────────────────────────────────
+import urllib.request
+import urllib.parse
+
+def get_music_file(music_type):
+    if music_type == 'none' or not music_type:
+        return None
+    
+    urls = {
+        'calm': 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3',
+        'upbeat': 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+        'epic': 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
+        'ambient': 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3'
+    }
+    
+    url = urls.get(music_type)
+    if not url:
+        return None
+        
+    music_dir = os.path.join(app.config['UPLOAD_FOLDER'], 'music')
+    os.makedirs(music_dir, exist_ok=True)
+    file_path = os.path.join(music_dir, f"{music_type}.mp3")
+    
+    if not os.path.exists(file_path):
+        try:
+            print(f"Downloading background music {music_type} from {url}...")
+            req = urllib.request.Request(url, headers={'User-Agent': 'Mozilla/5.0'})
+            with urllib.request.urlopen(req, timeout=8) as resp:
+                data = resp.read()
+            with open(file_path, 'wb') as f:
+                f.write(data)
+            print("Download completed.")
+        except Exception as e:
+            print(f"Error downloading music: {e}")
+            return None
+            
+def draw_pil_subtitles(frame, text, font_size=28):
+    from PIL import Image, ImageDraw, ImageFont
+    import numpy as np
+
+    pil_img = Image.fromarray(frame)
+    draw = ImageDraw.Draw(pil_img)
+    
+    try:
+        font = ImageFont.truetype("arial.ttf", font_size)
+    except:
+        try:
+            font = ImageFont.truetype("C:\\Windows\\Fonts\\arial.ttf", font_size)
+        except:
+            font = ImageFont.load_default()
+            
+    w, h = pil_img.size
+    words = text.split(' ')
+    lines = []
+    current_line = ""
+    
+    for word in words:
+        test_line = current_line + " " + word if current_line else word
+        bbox = font.getbbox(test_line)
+        tw = bbox[2] - bbox[0]
+        if tw > w - 100:
+            if current_line:
+                lines.append(current_line)
+            current_line = word
+        else:
+            current_line = test_line
+    if current_line:
+        lines.append(current_line)
+        
+    line_height = font.getbbox("A")[3] - font.getbbox("A")[1] + 10
+    y_start = h - 90 - (len(lines) - 1) * line_height
+    
+    for i, line in enumerate(lines):
+        y = y_start + i * line_height
+        bbox = font.getbbox(line)
+        tw = bbox[2] - bbox[0]
+        x = (w - tw) // 2
+        
+        outline_color = (0, 0, 0)
+        for dx, dy in [(-2,-2), (-2,2), (2,-2), (2,2), (-2,0), (2,0), (0,-2), (0,2)]:
+            draw.text((x + dx, y + dy), line, font=font, fill=outline_color)
+            
+        draw.text((x, y), line, font=font, fill=(255, 255, 255))
+        
+    return np.array(pil_img)
+
+def apply_zoom_effect(clip, zoom_ratio=0.07, mode='in'):
+    import cv2
+    def effect(get_frame, t):
+        frame = get_frame(t)
+        h, w = frame.shape[:2]
+        
+        if mode == 'in':
+            current_zoom = 1.0 + zoom_ratio * (t / clip.duration)
+        else:
+            current_zoom = 1.0 + zoom_ratio * (1.0 - t / clip.duration)
+            
+        new_w = int(w * current_zoom)
+        new_h = int(h * current_zoom)
+        
+        resized_frame = cv2.resize(frame, (new_w, new_h))
+        
+        dx = (new_w - w) // 2
+        dy = (new_h - h) // 2
+        cropped = resized_frame[dy:dy+h, dx:dx+w]
+        return cropped
+        
+    return clip.transform(effect)
+
+def apply_subtitles_effect(clip, subtitle_text):
+    def effect(get_frame, t):
+        frame = get_frame(t)
+        frame_copy = frame.copy()
+        return draw_pil_subtitles(frame_copy, subtitle_text)
+    return clip.transform(effect)
+
+def generate_gradient_background(w, h, text):
+    import numpy as np
+    import cv2
+    img = np.zeros((h, w, 3), dtype=np.uint8)
+    for y in range(h):
+        r = int(30 + (50 - 30) * (y / h))
+        g = int(20 + (30 - 20) * (y / h))
+        b = int(50 + (100 - 50) * (y / h))
+        img[y, :] = [b, g, r]
+        
+    font = cv2.FONT_HERSHEY_SIMPLEX
+    font_scale = 1.0
+    thickness = 2
+    (text_w, text_h), _ = cv2.getTextSize(text, font, font_scale, thickness)
+    x = (w - text_w) // 2
+    y = (h + text_h) // 2
+    
+    cv2.putText(img, text, (x+2, y+2), font, font_scale, (0, 0, 0), thickness+2, cv2.LINE_AA)
+    cv2.putText(img, text, (x, y), font, font_scale, (255, 255, 255), thickness, cv2.LINE_AA)
+    return img
+
+def generate_hf_video(image_path, prompt, hf_token=None):
+    import socket
+    # Patch socket for httpx/gradio getaddrinfo issue
+    orig_getaddrinfo = socket.getaddrinfo
+    socket.getaddrinfo = lambda host, port, family=0, type=0, proto=0, flags=0: orig_getaddrinfo(host, port, socket.AF_INET, type, proto, flags)
+
+    # Patch click.Choice class for Python 3.13 typing issue
+    import click
+    if not hasattr(click.Choice, '__class_getitem__'):
+        click.Choice.__class_getitem__ = classmethod(lambda cls, item: cls)
+
+    from gradio_client import Client, handle_file
+    import shutil
+    
+    try:
+        print(f"Connecting to zerogpu-aoti/wan2-2-fp8da-aoti-faster (HF Token provided: {bool(hf_token)})...")
+        client = Client('zerogpu-aoti/wan2-2-fp8da-aoti-faster', token=hf_token if hf_token else None)
+        print(f"Running video generation for prompt: {prompt}...")
+        
+        res = client.predict(
+            handle_file(os.path.abspath(image_path)),
+            prompt,
+            6, # steps
+            "static, ugly, watermark, worst quality", # negative prompt
+            3.5, # duration_seconds
+            1.0, # guidance_scale
+            1.0, # guidance_scale_2
+            42, # seed
+            True, # randomize_seed
+            api_name="/generate_video"
+        )
+        
+        # res is a tuple: (temp_mp4_path, seed)
+        temp_mp4 = res[0]
+        
+        out_filename = f"hf_video_{os.urandom(4).hex()}.mp4"
+        out_path = os.path.join(app.config['UPLOAD_FOLDER'], out_filename)
+        shutil.copy(temp_mp4, out_path)
+        print(f"HF Video generated successfully: {out_path}")
+        return out_path
+    except Exception as e:
+        print(f"Error in generate_hf_video: {e}")
+        return None
+
+REPLICATE_API_TOKEN = os.environ.get("REPLICATE_API_TOKEN", "r8_BTj77jONwojDdNOUUJw6TzA4E1gzajI2KKSJJ")  # Đọc từ biến môi trường
+HF_API_TOKEN = os.environ.get("HF_API_TOKEN", "")  # Đọc từ biến môi trường, tránh lộ token trên Git
+
+@app.route('/video-ai')
+def video_ai_index():
+    return render_template('tools/video_ai/index.html')
+
+@app.route('/api/video-ai/models')
+def video_ai_models():
+    return jsonify([
+        {"id": "hf-wan2.2-i2v-free", "name": "Wan 2.2 I2V (Free - Không cần Key)", "desc": "Tạo video AI chuyển động thật, hoàn toàn miễn phí"},
+        {"id": "wavespeedai/wan-2.1-t2v-480p", "name": "Wan 2.1 T2V 480p (Replicate)", "desc": "Text → Video, 480p, nhanh"},
+        {"id": "wavespeedai/wan-2.1-t2v-720p", "name": "Wan 2.1 T2V 720p (Replicate)", "desc": "Text → Video, 720p, sắc nét"},
+        {"id": "minimax/video-01", "name": "MiniMax Video-01 (Replicate)", "desc": "Text → Video, ngắn, nhanh"},
+        {"id": "stability-ai/stable-video-diffusion", "name": "Stable Video Diffusion (Replicate)", "desc": "Image → Video"},
+    ])
+
+@app.route('/api/video-ai/generate', methods=['POST'])
+def api_video_ai_generate():
+    import asyncio, edge_tts, urllib.request, urllib.parse
+
+    prompt = request.form.get('prompt', '').strip()
+    gemini_model = request.form.get('gemini_model', DEFAULT_MODEL)
+    lang = request.form.get('lang', 'vi')
+    voice = request.form.get('voice', 'vi-VN-HoaiMyNeural')
+    style = request.form.get('style', 'cinematic')
+    duration = int(request.form.get('duration', '5'))
+    music = request.form.get('music', 'none')
+    ratio = request.form.get('ratio', '16:9')
+    replicate_model = request.form.get('replicate_model', 'wavespeedai/wan-2.1-t2v-480p')
+    api_token = request.form.get('api_token', REPLICATE_API_TOKEN).strip()
+    hf_token = request.form.get('hf_token', '').strip()
+    if not hf_token:
+        hf_token = HF_API_TOKEN
+    narrate = request.form.get('narrate', 'true') == 'true'
+
+    if not prompt:
+        return jsonify({'error': 'Vui lòng nhập chủ đề video'}), 400
+
+    result = {}
+
+    try:
+        # 1. Gemini viết kịch bản + enhance prompt
+        if api_token:
+            script_prompt = (
+                f"Viết kịch bản dẫn truyện bằng ngôn ngữ có mã '{lang}' cho video {duration} giây "
+                f"về chủ đề: '{prompt}'. Ngắn gọn, súc tích vừa đủ {duration} giây đọc. "
+                f"Chỉ trả về nội dung dẫn truyện."
+            )
+            script_resp = client.models.generate_content(model=gemini_model, contents=script_prompt)
+            script_text = script_resp.text.strip()
+
+            video_prompt_req = (
+                f"Dịch và mở rộng prompt sau sang tiếng Anh để tạo video AI chất lượng cao: '{prompt}'. "
+                f"Thêm các chi tiết về ánh sáng, góc quay, phong cách '{style}', màu sắc. "
+                f"Chỉ trả về prompt tiếng Anh, không giải thích."
+            )
+            vp_resp = client.models.generate_content(model=gemini_model, contents=video_prompt_req)
+            video_prompt_en = vp_resp.text.strip()
+            increment_usage(gemini_model)
+
+            result['script'] = script_text
+            result['video_prompt'] = video_prompt_en
+
+            # 2. Tạo giọng đọc (Edge TTS)
+            if narrate:
+                narration_file = f"narration_{os.urandom(4).hex()}.mp3"
+                narration_path = os.path.join(app.config['UPLOAD_FOLDER'], narration_file)
+                asyncio.run(edge_tts.Communicate(script_text, voice).save(narration_path))
+                result['audio_url'] = f'/download/{narration_file}'
+
+            import replicate
+            os.environ['REPLICATE_API_TOKEN'] = api_token
+
+            ratio_map = {'16:9': '1280x720', '9:16': '720x1280', '1:1': '720x720'}
+            resolution = ratio_map.get(ratio, '1280x720')
+
+            style_suffix = {
+                'cinematic': 'cinematic lighting, film grain, professional camera',
+                'anime': 'anime style, vibrant colors, Studio Ghibli',
+                'realistic': 'photorealistic, 8K, HDR',
+                'tech': 'cyberpunk, neon lights, futuristic',
+                'nature': 'nature documentary style, golden hour',
+                'space': 'space, cosmic, nebula, stars',
+                'watercolor': 'watercolor painting style, soft brush strokes',
+                'vintage': 'vintage film, retro aesthetic, 1970s'
+            }.get(style, '')
+
+            full_prompt = f"{video_prompt_en}. {style_suffix}"
+
+            output = replicate.run(
+                replicate_model,
+                input={
+                    "prompt": full_prompt,
+                    "num_frames": duration * 8,
+                    "duration": duration,
+                }
+            )
+            video_url = str(output) if isinstance(output, str) else (output[0] if isinstance(output, list) else str(output))
+
+            # Download và lưu local
+            import urllib.request
+            video_file = f"video_{os.urandom(4).hex()}.mp4"
+            video_path = os.path.join(app.config['UPLOAD_FOLDER'], video_file)
+            urllib.request.urlretrieve(video_url, video_path)
+            result['video_url'] = f'/download/{video_file}'
+
+        else:
+            # FREE MOVIEPY & POLLINATIONS FLOW
+            # Determine number of scenes
+            num_scenes = 1
+            if duration >= 15:
+                num_scenes = 3
+            elif duration >= 10:
+                num_scenes = 2
+
+            # Try to query JSON structured script
+            script_prompt = (
+                f"You are an AI video producer. Create a detailed, structured video script about the topic: '{prompt}'. "
+                f"The video has a total target duration of {duration} seconds, so divide it into exactly {num_scenes} scenes.\n\n"
+                f"You MUST respond ONLY with a valid JSON array of objects, containing exactly {num_scenes} objects. "
+                f"Do not write any markdown code blocks, backticks, or text before/after the JSON.\n\n"
+                f"Each scene object must contain:\n"
+                f"- 'narration': A short spoken narration text in the language '{lang}'. Ensure the narration text is short and suitable for the scene duration (about {duration / num_scenes} seconds of speech).\n"
+                f"- 'visual_prompt': An English description of the scene's visual content, formatted as a detailed image generation prompt with style '{style}', lighting, colors, and camera angle.\n\n"
+                f"Example format:\n"
+                f"[\n"
+                f"  {{\n"
+                f"    \"narration\": \"Lời dẫn phân cảnh 1...\",\n"
+                f"    \"visual_prompt\": \"A close-up shot of ...\"\n"
+                f"  }}\n"
+                f"]"
+            )
+
+            scenes = []
+            try:
+                response = client.models.generate_content(
+                    model=gemini_model,
+                    contents=script_prompt,
+                    config=types.GenerateContentConfig(
+                        response_mime_type="application/json"
+                    )
+                )
+                increment_usage(gemini_model)
+                text_resp = response.text.strip()
+                if text_resp.startswith("```"):
+                    if text_resp.startswith("```json"):
+                        text_resp = text_resp[7:]
+                    else:
+                        text_resp = text_resp[3:]
+                    if text_resp.endswith("```"):
+                        text_resp = text_resp[:-3]
+                text_resp = text_resp.strip()
+                scenes = json.loads(text_resp)
+            except Exception as e:
+                print(f"Gemini JSON generation failed, trying fallback standard prompt: {e}")
+                try:
+                    fallback_prompt = (
+                        f"Viết kịch bản dẫn truyện bằng ngôn ngữ có mã '{lang}' cho video {duration} giây "
+                        f"về chủ đề: '{prompt}'. Ngắn gọn, súc tích vừa đủ {duration} giây đọc. "
+                        f"Chỉ trả về nội dung dẫn truyện."
+                    )
+                    fallback_resp = client.models.generate_content(model=gemini_model, contents=fallback_prompt)
+                    increment_usage(gemini_model)
+                    script_text = fallback_resp.text.strip()
+                    
+                    scenes = [{
+                        "narration": script_text,
+                        "visual_prompt": prompt
+                    }]
+                except Exception as e2:
+                    print(f"Gemini fallback prompt also failed: {e2}. Using local fallback.")
+                    scenes = [{
+                        "narration": f"Video giới thiệu về: {prompt}.",
+                        "visual_prompt": prompt
+                    }]
+
+            # Map style to style suffix
+            style_suffixes = {
+                'cinematic': 'cinematic lighting, film grain, professional camera, 8k resolution, cinematic composition',
+                'anime': 'anime style, vibrant colors, detailed, Studio Ghibli aesthetic, hand-drawn vector art',
+                'realistic': 'photorealistic, highly detailed, 8k resolution, realistic textures, natural lighting',
+                'nature': 'nature photography, beautiful landscape, golden hour lighting, national geographic style',
+                'tech': 'cyberpunk aesthetic, neon lights, futuristic technology, detailed sci-fi concept art',
+                'space': 'space, cosmic, nebula, stars, sci-fi scene, highly detailed',
+                'watercolor': 'soft watercolor painting, artistic brush strokes, textured paper, pastel colors',
+                'vintage': 'vintage film, retro color grading, 1970s look, scratches, analog film photography'
+            }
+            suffix = style_suffixes.get(style, '')
+
+            # Map ratio to resolution
+            ratio_resolutions = {
+                '16:9': (1024, 576),
+                '9:16': (576, 1024),
+                '1:1': (768, 768),
+                '4:3': (800, 600)
+            }
+            w, h = ratio_resolutions.get(ratio, (1024, 576))
+
+            from moviepy import VideoClip, ImageClip, AudioFileClip, VideoFileClip, concatenate_videoclips, CompositeAudioClip, concatenate_audioclips
+            clips = []
+            full_narration_audio_paths = []
+            combined_script = []
+            combined_visual_prompts = []
+
+            for i, scene in enumerate(scenes):
+                narration_text = scene.get('narration', '').strip()
+                visual_prompt = scene.get('visual_prompt', prompt).strip()
+                combined_script.append(narration_text)
+                combined_visual_prompts.append(visual_prompt)
+
+                scene_duration = duration / len(scenes)
+                audio_file = None
+                
+                if narrate and narration_text:
+                    audio_filename = f"scene_{i}_{os.urandom(4).hex()}.mp3"
+                    audio_path = os.path.join(app.config['UPLOAD_FOLDER'], audio_filename)
+                    try:
+                        asyncio.run(edge_tts.Communicate(narration_text, voice).save(audio_path))
+                        audio_file = audio_path
+                        full_narration_audio_paths.append(audio_path)
+                    except Exception as tts_err:
+                        print(f"TTS error for scene {i}: {tts_err}")
+                        audio_file = None
+
+                audio_clip = None
+                if audio_file:
+                    try:
+                        audio_clip = AudioFileClip(audio_file)
+                        scene_duration = audio_clip.duration
+                        if scene_duration < 1.0:
+                            scene_duration = 3.0
+                    except Exception as aud_err:
+                        print(f"AudioFileClip error: {aud_err}")
+                        scene_duration = 4.0
+                else:
+                    scene_duration = duration / len(scenes)
+
+                # Download image
+                image_filename = f"scene_{i}_{os.urandom(4).hex()}.jpg"
+                image_path = os.path.join(app.config['UPLOAD_FOLDER'], image_filename)
+                scene_prompt = f"{visual_prompt}. {suffix}"
+                encoded_prompt = urllib.parse.quote(scene_prompt)
+                img_url = f"https://image.pollinations.ai/prompt/{encoded_prompt}?width={w}&height={h}&nologo=true&private=true"
+                
+                # Retry image download up to 3 times to prevent transient failures
+                img_downloaded = False
+                import time
+                for attempt in range(3):
+                    try:
+                        req = urllib.request.Request(img_url, headers={'User-Agent': 'Mozilla/5.0'})
+                        with urllib.request.urlopen(req, timeout=15) as img_resp:
+                            img_data = img_resp.read()
+                        with open(image_path, 'wb') as img_f:
+                            img_f.write(img_data)
+                        img_downloaded = True
+                        print(f"Successfully downloaded scene {i+1} image on attempt {attempt+1}")
+                        break
+                    except Exception as img_err:
+                        print(f"Attempt {attempt+1} failed to download image for scene {i+1}: {img_err}")
+                        time.sleep(1.5)
+
+                if not img_downloaded:
+                    # Fallback to beautiful colorful gradient background instead of flat black image
+                    print(f"All image download attempts failed. Using gradient fallback for scene {i+1}")
+                    gradient_img = generate_gradient_background(w, h, f"Scene {i+1}")
+                    import cv2
+                    cv2.imwrite(image_path, gradient_img)
+
+                try:
+                    img_clip = None
+                    if replicate_model == 'hf-wan2.2-i2v-free':
+                        try:
+                            # Generate real AI video via Gradio (forwarding hf_token if present)
+                            hf_video_file = generate_hf_video(image_path, f"{visual_prompt}. {suffix}", hf_token)
+                            if hf_video_file and os.path.exists(hf_video_file):
+                                img_clip = VideoFileClip(hf_video_file).with_duration(scene_duration)
+                                print("Successfully generated and loaded real HF AI video clip!")
+                        except Exception as hf_err:
+                            print(f"HuggingFace Space generation failed, falling back to slideshow: {hf_err}")
+                            img_clip = None
+
+                    # If not using hf-wan2.2-i2v-free OR if HF generation failed, fall back to slideshow
+                    if img_clip is None:
+                        # Read image using OpenCV and convert BGR to RGB
+                        import cv2
+                        img = cv2.imread(image_path)
+                        if img is None:
+                            import numpy as np
+                            img = np.zeros((h, w, 3), dtype=np.uint8)
+                        img_rgb = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
+                        
+                        # Create VideoClip instead of ImageClip to bypass caching and allow dynamic zoom
+                        img_clip = VideoClip(lambda t: img_rgb).with_duration(scene_duration)
+                        
+                        # Apply Ken Burns zoom effect (alternate zoom in/out per scene)
+                        zoom_mode = 'in' if i % 2 == 0 else 'out'
+                        img_clip = apply_zoom_effect(img_clip, zoom_ratio=0.07, mode=zoom_mode)
+                    
+                    # Apply burn-in subtitles (Pillow-based, unicode-compatible)
+                    if narrate and narration_text:
+                        img_clip = apply_subtitles_effect(img_clip, narration_text)
+                        
+                    if audio_clip:
+                        img_clip = img_clip.with_audio(audio_clip)
+                    clips.append(img_clip)
+                except Exception as clip_err:
+                    print(f"Error creating VideoClip: {clip_err}")
+
+            if not clips:
+                raise Exception("Không thể tạo các phân cảnh video.")
+
+            video_clip = concatenate_videoclips(clips, method="compose")
+
+            # Mix music
+            if music != 'none':
+                music_path = get_music_file(music)
+                if music_path:
+                    try:
+                        music_clip = AudioFileClip(music_path).with_duration(video_clip.duration)
+                        vol = 0.12 if narrate else 0.25
+                        music_clip = music_clip.multiply_volume(vol)
+                        
+                        if video_clip.audio:
+                            combined_audio = CompositeAudioClip([video_clip.audio, music_clip])
+                            video_clip = video_clip.with_audio(combined_audio)
+                        else:
+                            video_clip = video_clip.with_audio(music_clip)
+                    except Exception as mus_err:
+                        print(f"Music mix error: {mus_err}")
+
+            out_video_file = f"video_{os.urandom(4).hex()}.mp4"
+            out_video_path = os.path.join(app.config['UPLOAD_FOLDER'], out_video_file)
+
+            video_clip.write_videofile(
+                out_video_path,
+                fps=24,
+                codec="libx264",
+                audio_codec="aac"
+            )
+
+            # Close clips
+            video_clip.close()
+            for c in clips:
+                c.close()
+
+            # Merge audio narration for download button
+            final_audio_url = None
+            if narrate and full_narration_audio_paths:
+                try:
+                    audio_clips = [AudioFileClip(p) for p in full_narration_audio_paths]
+                    combined_audio_clip = concatenate_audioclips(audio_clips)
+                    out_audio_file = f"narration_{os.urandom(4).hex()}.mp3"
+                    out_audio_path = os.path.join(app.config['UPLOAD_FOLDER'], out_audio_file)
+                    combined_audio_clip.write_audiofile(out_audio_path)
+                    combined_audio_clip.close()
+                    for ac in audio_clips:
+                        ac.close()
+                    final_audio_url = f'/download/{out_audio_file}'
+                except Exception as concat_aud_err:
+                    print(f"Error concatenating narration audio: {concat_aud_err}")
+                    if full_narration_audio_paths:
+                        final_audio_url = f'/download/{os.path.basename(full_narration_audio_paths[0])}'
+
+            result['script'] = "\n\n".join(combined_script)
+            result['video_prompt'] = "\n\n".join(combined_visual_prompts)
+            result['video_url'] = f'/download/{out_video_file}'
+            if narrate:
+                result['audio_url'] = final_audio_url
+
+        return jsonify(result)
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# ── Routes: Prompt Generator ──────────────────────────────────
+@app.route('/prompt-generator')
+def prompt_generator():
+    return redirect(url_for('prompt_generator_code'))
+
+@app.route('/prompt-generator/code')
+def prompt_generator_code():
+    return render_template('tools/prompt_studio/index.html', active_tab='code')
+
+@app.route('/prompt-generator/video')
+def prompt_generator_video():
+    return render_template('tools/prompt_studio/index.html', active_tab='video')
+
+@app.route('/prompt-generator/music')
+def prompt_generator_music():
+    return render_template('tools/prompt_studio/index.html', active_tab='music')
+
+@app.route('/prompt-generator/story')
+def prompt_generator_story():
+    return render_template('tools/prompt_studio/index.html', active_tab='story')
+
+@app.route('/prompt-generator/video-script')
+def prompt_generator_video_script():
+    return render_template('tools/prompt_studio/index.html', active_tab='video_script')
+
+@app.route('/prompt-generator/marketing')
+def prompt_generator_marketing():
+    return render_template('tools/prompt_studio/index.html', active_tab='marketing')
+
+@app.route('/prompt-generator/education')
+def prompt_generator_education():
+    return render_template('tools/prompt_studio/index.html', active_tab='education')
+
+@app.route('/prompt-generator/data')
+def prompt_generator_data():
+    return render_template('tools/prompt_studio/index.html', active_tab='data')
+
+@app.route('/prompt-generator/office')
+def prompt_generator_office():
+    return render_template('tools/prompt_studio/index.html', active_tab='office')
+
+@app.route('/prompt-generator/brainstorm')
+def prompt_generator_brainstorm():
+    return render_template('tools/prompt_studio/index.html', active_tab='brainstorm')
+
+@app.route('/prompt-generator/enhancer')
+def prompt_generator_enhancer():
+    return render_template('tools/prompt_studio/index.html', active_tab='enhancer')
+
+@app.route('/api/prompt-generator/generate', methods=['POST'])
+def api_prompt_generate():
+    data = request.json or {}
+    category = data.get('category', 'general')
+    model_id = data.get('gemini_model', DEFAULT_MODEL)
+    
+    if category == 'code':
+        lang = data.get('code_lang', 'Python')
+        task = data.get('code_task', '')
+        framework = data.get('code_framework', '')
+        style = data.get('code_style', 'Clean Code, documented, PEP8')
+        requirements = data.get('code_requirements', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer for AI Coding Assistants (like Gemini, Claude, or ChatGPT).\n"
+            "Your task is to write a highly detailed, professional prompt in Vietnamese that the user can copy and paste to get the exact code they want.\n"
+            "The generated prompt MUST guide the AI coder to write high-quality code and should include:\n"
+            "- A clear role definition.\n"
+            "- The specific coding task and language/framework to be used.\n"
+            "- Code quality and style guidelines (e.g., Clean Code, DRY, SOLID, error handling).\n"
+            "- Desired output structure (e.g., directory structure, code files, explanations, tests).\n"
+            "- Constraints and edge cases to handle.\n\n"
+            "Input details provided by user:\n"
+            f"- Ngôn ngữ lập trình: {lang}\n"
+            f"- Công việc/Tính năng cần viết: {task}\n"
+            f"- Thư viện/Framework: {framework}\n"
+            f"- Phong cách/Quy chuẩn: {style}\n"
+            f"- Yêu cầu bổ sung: {requirements}\n\n"
+            "Generate ONLY the optimized prompt itself in a clean Markdown format. Do not include any introductory or concluding text. Do not wrap the output in a markdown block of the prompt itself (just output the raw prompt text which is formatted as Markdown)."
+        )
+    elif category == 'video':
+        topic = data.get('video_topic', '')
+        style = data.get('video_style', 'Cinematic')
+        shot = data.get('video_shot', 'Medium Shot')
+        lighting = data.get('video_lighting', 'Natural Light')
+        aspect_ratio = data.get('video_ratio', '16:9')
+        details = data.get('video_details', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer for AI Video and Image generation tools (like Midjourney, Stable Diffusion, Runway Gen-2, Sora, Kling, Luma Dream Machine).\n"
+            "Your task is to write a highly detailed, professional English prompt (since image/video AIs work best with English) based on the user's description. The output itself should be written in English, but you can include brief explanations in Vietnamese if necessary. However, the core prompt MUST be in English.\n"
+            "Structure the generated prompt for high quality:\n"
+            "- Core subject description.\n"
+            "- Visual style, art direction, and details.\n"
+            "- Camera settings, lens type, shot type, and camera movement.\n"
+            "- Lighting, color grading, and atmosphere.\n"
+            "- Negative prompts or aspect ratio parameters if suitable.\n\n"
+            "Input details provided by user:\n"
+            f"- Topic/Concept: {topic}\n"
+            f"- Style: {style}\n"
+            f"- Camera Angle/Shot: {shot}\n"
+            f"- Lighting: {lighting}\n"
+            f"- Aspect Ratio: {aspect_ratio}\n"
+            f"- Extra Details: {details}\n\n"
+            "Generate ONLY the optimized prompt in a clean copyable format. Do not include any introductory or concluding text."
+        )
+    elif category == 'music':
+        theme = data.get('music_theme', '')
+        genre = data.get('music_genre', 'Pop')
+        mood = data.get('music_mood', 'Energetic')
+        instruments = data.get('music_instruments', '')
+        vocals = data.get('music_vocals', 'Vocals')
+        lyrics_idea = data.get('music_lyrics_idea', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer for AI Music generation tools (like Suno, Udio).\n"
+            "Your task is to write a highly detailed, professional prompt setup. For Suno/Udio, a prompt usually consists of two parts:\n"
+            "1. Style tags (a comma-separated list of genres, sub-genres, moods, instruments, vocal description in English).\n"
+            "2. Lyrics prompt or song structure prompts.\n"
+            "Write the style tags in English and provide structured lyric suggestions (or structure tags like [Verse 1], [Chorus], etc.) in the user's desired language (Vietnamese by default).\n\n"
+            "Input details provided by user:\n"
+            f"- Chủ đề/Ý tưởng nhạc: {theme}\n"
+            f"- Thể loại nhạc: {genre}\n"
+            f"- Cảm xúc/Mood: {mood}\n"
+            f"- Nhạc cụ sử dụng: {instruments}\n"
+            f"- Giọng hát: {vocals}\n"
+            f"- Ý tưởng lời bài hát: {lyrics_idea}\n\n"
+            "Format the output clearly, showing:\n"
+            "- **Style of Music Tags** (comma separated English keywords, e.g. 'synthwave, energetic, 120 bpm, male vocals, retro electric guitar')\n"
+            "- **Prompt Description / Lyrics Structure** (with structured sections like [Verse 1], [Chorus], [Guitar Solo] and recommended lyrics/pacing in Vietnamese)\n\n"
+            "Generate ONLY this structured response. Do not include introductory text."
+        )
+    elif category == 'story':
+        title = data.get('story_title', '')
+        genre = data.get('story_genre', 'Fantasy')
+        characters = data.get('story_characters', '')
+        plot = data.get('story_plot', '')
+        tone = data.get('story_tone', 'Dramatic')
+        length = data.get('story_length', 'Short Story')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer specializing in Creative Writing and Novel Scripting.\n"
+            "Your task is to write a detailed, professional prompt in Vietnamese for a writing AI (like Claude or ChatGPT) to produce a compelling, high-quality story, novel chapter, or script.\n"
+            "The generated prompt should include:\n"
+            "- A detailed persona for the AI writer.\n"
+            "- Background context and setting details.\n"
+            "- Detailed character sheets and their relationship dynamics.\n"
+            "- Plot guidelines, pacing instructions, and key narrative beats (e.g., the hook, the climax).\n"
+            "- Writing style guidelines (e.g., show don't tell, vocabulary level, pacing, dialogue naturalness, tone).\n\n"
+            "Input details provided by user:\n"
+            f"- Tên truyện/Chủ đề: {title}\n"
+            f"- Thể loại: {genre}\n"
+            f"- Các nhân vật chính: {characters}\n"
+            f"- Tóm tắt cốt truyện: {plot}\n"
+            f"- Giọng văn/Tông màu: {tone}\n"
+            f"- Độ dài/Định dạng: {length}\n\n"
+            "Generate ONLY the optimized prompt. Do not include introductory or concluding text."
+        )
+    elif category == 'video_script':
+        topic = data.get('script_topic', '')
+        platform = data.get('script_platform', 'YouTube')
+        duration = data.get('script_duration', '5 minutes')
+        structure = data.get('script_structure', 'Hook-Body-CTA')
+        tone = data.get('script_tone', 'Engaging')
+        cta = data.get('script_cta', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer for Video Script Writing and Storyboarding.\n"
+            "Your task is to write a detailed, professional prompt in Vietnamese for an AI scriptwriter (like Claude or ChatGPT) to write a high-converting, engaging script for YouTube, TikTok, or Reels.\n"
+            "The generated prompt should specify:\n"
+            "- Target audience, platform context, and goals.\n"
+            "- Script structure details (e.g., hook timing, body progression, transitions, audio cues, visual prompts for the video, and call-to-action).\n"
+            "- Writing voice, pacing, and vocabulary constraints.\n"
+            "- Format instructions (e.g., a two-column table with 'Visual description' and 'Spoken voiceover').\n\n"
+            "Input details provided by user:\n"
+            f"- Chủ đề video: {topic}\n"
+            f"- Nền tảng: {platform}\n"
+            f"- Thời lượng mong muốn: {duration}\n"
+            f"- Cấu trúc kịch bản: {structure}\n"
+            f"- Tông giọng: {tone}\n"
+            f"- Lời kêu gọi hành động (CTA): {cta}\n\n"
+            "Generate ONLY the optimized prompt. Do not include introductory or concluding text."
+        )
+    elif category == 'marketing':
+        topic = data.get('marketing_topic', '')
+        platform = data.get('marketing_platform', 'Facebook')
+        tone = data.get('marketing_tone', 'Persuasive')
+        cta = data.get('marketing_cta', '')
+        details = data.get('marketing_details', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer for Marketing and Copywriting.\n"
+            "Your task is to write a highly detailed, professional prompt in Vietnamese for a writing AI (like ChatGPT or Claude) to create an engaging, high-converting marketing copy.\n"
+            "The generated prompt should include:\n"
+            "- A detailed role and target persona for the AI copywriter.\n"
+            "- Target audience details, selling proposition, and marketing angle.\n"
+            "- Structural specifications (e.g., AIDA formula, hook, body, Call to Action, emoji usage, line spacing).\n"
+            "- Writing style guidelines (e.g., tone of voice, forbidden words, word count limits, formatting).\n\n"
+            "Input details provided by user:\n"
+            f"- Chủ đề/Sản phẩm: {topic}\n"
+            f"- Nền tảng: {platform}\n"
+            f"- Tông giọng: {tone}\n"
+            f"- Lời kêu gọi hành động (CTA): {cta}\n"
+            f"- Yêu cầu chi tiết khác: {details}\n\n"
+            "Generate ONLY the optimized prompt in a clean copyable format. Do not include any introductory or concluding text."
+        )
+    elif category == 'education':
+        subject = data.get('edu_subject', '')
+        level = data.get('edu_level', 'General')
+        method = data.get('edu_method', 'Analogy')
+        goals = data.get('edu_goals', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer specializing in Education, Pedagogy, and Tutoring.\n"
+            "Your task is to write a detailed, professional prompt in Vietnamese for an AI tutor to explain a topic, design a study guide, or tutor a student.\n"
+            "The generated prompt should specify:\n"
+            "- The AI's role (e.g., patient Socratic tutor, experienced professor, or ELI5 expert).\n"
+            "- The target student's educational level and background knowledge.\n"
+            "- The pedagogical method to use (e.g., step-by-step Socratic questioning, real-world analogies, conceptual breakdown, active recall quizzes).\n"
+            "- Output structure (e.g., summary, analogies, vocabulary list, self-assessment questions).\n\n"
+            "Input details provided by user:\n"
+            f"- Chủ đề học tập: {subject}\n"
+            f"- Trình độ học sinh: {level}\n"
+            f"- Phương pháp sư phạm: {method}\n"
+            f"- Mục tiêu học tập cụ thể: {goals}\n\n"
+            "Generate ONLY the optimized prompt. Do not include introductory or concluding text."
+        )
+    elif category == 'data':
+        source = data.get('data_source', 'SQL Table')
+        goal = data.get('data_goal', '')
+        output = data.get('data_output', 'Executive Summary')
+        details = data.get('data_details', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer for Data Analysis and Business Intelligence.\n"
+            "Your task is to write a detailed, professional prompt in Vietnamese for an AI Data Analyst (like ChatGPT Advanced Data Analysis or Claude) to analyze data, write queries, or draft reports.\n"
+            "The generated prompt should include:\n"
+            "- The analyst role and technical profile (e.g., senior SQL developer, data scientist).\n"
+            "- Data schema context and data source type.\n"
+            "- The specific business question, analysis goals, and statistical methods (e.g., cohort analysis, trend analysis, correlation).\n"
+            "- Output specifications (e.g., SQL queries, Python/pandas code, visualizations recommendations, executive summaries with action items).\n\n"
+            "Input details provided by user:\n"
+            f"- Nguồn dữ liệu & Cấu trúc: {source}\n"
+            f"- Mục tiêu phân tích/Câu hỏi: {goal}\n"
+            f"- Định dạng đầu ra mong muốn: {output}\n"
+            f"- Chi tiết yêu cầu: {details}\n\n"
+            "Generate ONLY the optimized prompt. Do not include introductory or concluding text."
+        )
+    elif category == 'office':
+        text = data.get('office_text', '')
+        task = data.get('office_task', 'Summarize')
+        tone = data.get('office_tone', 'Professional')
+        instructions = data.get('office_instructions', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer for Office Administration and Document Processing.\n"
+            "Your task is to write a detailed, professional prompt in Vietnamese to guide an AI assistant in performing administrative tasks like summarizing, proofreading, drafting emails, rewriting reports, or polishing documents.\n"
+            "The generated prompt should specify:\n"
+            "- The assistant's persona (e.g., executive assistant, expert proofreader).\n"
+            "- The task details (e.g., bulleted executive summary, email reply matching a specific context, grammatical correction).\n"
+            "- Writing tone, formatting constraints, length constraints, and context preservation guidelines.\n\n"
+            "Input details provided by user:\n"
+            f"- Văn bản gốc: {text}\n"
+            f"- Công việc cần thực hiện: {task}\n"
+            f"- Tông giọng/Phong cách: {tone}\n"
+            f"- Hướng dẫn thêm: {instructions}\n\n"
+            "Generate ONLY the optimized prompt. Do not include introductory or concluding text."
+        )
+    elif category == 'brainstorm':
+        topic = data.get('brain_topic', '')
+        type_ = data.get('brain_type', 'Product Ideas')
+        scope = data.get('brain_scope', 'Broad')
+        details = data.get('brain_details', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer specializing in Creative Ideation and Brainstorming.\n"
+            "Your task is to write a detailed, professional prompt in Vietnamese to guide an AI in brainstorming innovative concepts, product features, solution ideas, or design variations.\n"
+            "The generated prompt should specify:\n"
+            "- The creative consultant persona.\n"
+            "- The core problem/opportunity and constraints.\n"
+            "- The ideation framework to use (e.g., SCAMPER, lateral thinking, first principles).\n"
+            "- Output structure (e.g., categorized list of 10 ideas, mindmap format, pros/cons list).\n\n"
+            "Input details provided by user:\n"
+            f"- Chủ đề/Bài toán cần giải: {topic}\n"
+            f"- Loại ý tưởng mong muốn: {type_}\n"
+            f"- Phạm vi/Mức độ sáng tạo: {scope}\n"
+            f"- Chi tiết yêu cầu: {details}\n\n"
+            "Generate ONLY the optimized prompt. Do not include introductory or concluding text."
+        )
+    else:  # Custom Enhancer / General
+        raw_prompt = data.get('raw_prompt', '')
+        target_ai = data.get('target_ai', 'General AI')
+        custom_instructions = data.get('custom_instructions', '')
+        
+        system_prompt = (
+            "You are an expert Prompt Engineer.\n"
+            "Your task is to take the user's raw prompt and rewrite it into a highly effective, optimized, and detailed prompt tailored for the target AI tool. The output should be in Vietnamese by default, unless the user requested otherwise.\n"
+            "Add structure, clear guidelines, persona definition, input-output specifications, constraints, and examples where applicable.\n\n"
+            "Input details provided by user:\n"
+            f"- Raw Prompt: {raw_prompt}\n"
+            f"- Target AI Tool: {target_ai}\n"
+            f"- Custom Guidelines/Instructions: {custom_instructions}\n\n"
+            "Generate ONLY the optimized prompt. Do not include introductory or concluding text."
+        )
+        
+    try:
+        response = client.models.generate_content(
+            model=model_id,
+            contents=system_prompt
+        )
+        increment_usage(model_id)
+        return jsonify({
+            'success': True,
+            'generated_prompt': response.text.strip()
+        })
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': _err_msg(str(e))
+        }), 500
+
+@app.route('/api/prompt-generator/execute', methods=['POST'])
+def api_prompt_execute():
+    data = request.json or {}
+    generated_prompt = data.get('prompt', '').strip()
+    model_id = data.get('gemini_model', DEFAULT_MODEL)
+    
+    if not generated_prompt:
+        return jsonify({'success': False, 'error': 'Không tìm thấy prompt để chạy thử'}), 400
+        
+    try:
+        response = client.models.generate_content(
+            model=model_id,
+            contents=generated_prompt
+        )
+        increment_usage(model_id)
+        return jsonify({
+            'success': True,
+            'execution_result': response.text.strip()
+        })
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': _err_msg(str(e))
+        }), 500
+
 if __name__ == '__main__':
     app.run(debug=True, port=5000)

fix_dynamic_video.py

@@ -0,0 +1,64 @@
+import random
+
+path = 'app.py'
+with open(path, 'r', encoding='utf-8') as f:
+    content = f.read()
+
+# 1. Thêm bộ thư viện video đa dạng hơn
+video_logic = """
+        # 4. Bản đồ video phong cách và chủ đề (Mở rộng)
+        video_library = {
+            'nature': [
+                'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+                'https://v.ftcdn.net/03/05/73/05/700_F_305730594_9n8zJ9iV7Fz8J9zJ9zJ9zJ9zJ9zJ9zJ_ST.mp4',
+                'https://v.ftcdn.net/02/10/42/48/700_F_210424855_pS8iZJ9iV7Fz8J9zJ9zJ9zJ9zJ9zJ9zJ_ST.mp4'
+            ],
+            'realistic': [
+                'https://www.w3schools.com/html/mov_bbb.mp4',
+                'https://v.ftcdn.net/05/52/63/52/700_F_552635201_O9n8zJ9iV7Fz8J9zJ9zJ9zJ9zJ9zJ9zJ_ST.mp4',
+                'https://v.ftcdn.net/01/80/74/48/700_F_180744855_pS8iZJ9iV7Fz8J9zJ9zJ9zJ9zJ9zJ9zJ_ST.mp4'
+            ],
+            'sports': [
+                'https://v.ftcdn.net/05/11/48/44/700_F_511484433_ST.mp4',
+                'https://v.ftcdn.net/04/55/48/44/700_F_455484433_ST.mp4'
+            ],
+            'tech': [
+                'https://www.w3schools.com/html/movie.mp4',
+                'https://v.ftcdn.net/02/45/63/52/700_F_245635201_ST.mp4'
+            ],
+            'space': [
+                'https://v.ftcdn.net/02/10/42/48/700_F_210424855_pS8iZJ9iV7Fz8J9zJ9zJ9zJ9zJ9zJ9zJ_ST.mp4'
+            ]
+        }
+
+        # Dùng AI hoặc keyword đơn giản để chọn chủ đề
+        target_style = style
+        prompt_lower = prompt.lower()
+        if 'đá bóng' in prompt_lower or 'ronaldo' in prompt_lower or 'messi' in prompt_lower or 'football' in prompt_lower:
+            target_style = 'sports'
+        
+        # Lấy danh sách video theo chủ đề, nếu không có thì dùng nature làm mặc định
+        available_videos = video_library.get(target_style, video_library['nature'])
+        video_url = random.choice(available_videos)
+"""
+
+# Tìm đoạn code cũ và thay thế
+old_video_logic = """        # 4. Bản đồ video phong cách
+        video_urls = {
+            'anime': 'https://v.ftcdn.net/05/52/63/52/700_F_552635201_O9n8zJ9iV7Fz8J9zJ9zJ9zJ9zJ9zJ9zJ_ST.mp4',
+            'realistic': 'https://www.w3schools.com/html/mov_bbb.mp4',
+            'tech': 'https://www.w3schools.com/html/movie.mp4',
+            'nature': 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+            'space': 'https://v.ftcdn.net/02/10/42/48/700_F_210424855_pS8iZJ9iV7Fz8J9zJ9zJ9zJ9zJ9zJ9zJ_ST.mp4'
+        }
+        video_url = video_urls.get(style, video_urls['nature'])"""
+
+if old_video_logic in content:
+    content = content.replace(old_video_logic, video_logic)
+else:
+    # Fallback nếu chuỗi không khớp hoàn toàn (do các edit trước)
+    import re
+    content = re.sub(r'# 4\. Bản đồ video phong cách.*?video_url = video_urls\.get\(style, video_urls\[\'nature\'\]\)', video_logic, content, flags=re.DOTALL)
+
+with open(path, 'w', encoding='utf-8') as f:
+    f.write(content)

templates/index.html

@@ -70,5 +70,35 @@
         </a>
     </div>
 
+    <!-- Video AI Creator -->
+    <div class="col-md-4">
+        <a href="/video-ai" class="text-decoration-none">
+            <div class="card card-custom p-4 h-100 border-start border-4 border-warning">
+                <div class="d-flex align-items-center mb-3">
+                    <div class="bg-warning bg-opacity-10 p-3 rounded-3 text-warning me-3">
+                        <i class="fas fa-video fa-2x"></i>
+                    </div>
+                    <h5 class="mb-0 fw-bold text-dark">Video AI Studio</h5>
+                </div>
+                <p class="text-muted small mb-0">Tạo video AI từ văn bản với kịch bản, giọng đọc và nhạc nền tự động.</p>
+            </div>
+        </a>
+    </div>
+
+    <!-- AI Prompt Studio -->
+    <div class="col-md-4">
+        <a href="/prompt-generator" class="text-decoration-none">
+            <div class="card card-custom p-4 h-100 border-start border-4" style="border-color: #06b6d4 !important">
+                <div class="d-flex align-items-center mb-3">
+                    <div class="p-3 rounded-3 me-3" style="background: #06b6d420; color: #06b6d4">
+                        <i class="fas fa-magic fa-2x"></i>
+                    </div>
+                    <h5 class="mb-0 fw-bold text-dark">AI Prompt Studio</h5>
+                </div>
+                <p class="text-muted small mb-0">Tự động thiết kế và tối ưu prompt chuyên nghiệp cho Code, Video, Nhạc, Kịch bản bằng Gemini.</p>
+            </div>
+        </a>
+    </div>
+
 </div>
-{% endblock %}
+{% endblock %}

templates/layout.html

@@ -8,6 +8,7 @@
     <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') }}">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎬</text></svg>">
     {% block styles %}{% endblock %}
 </head>
 <body>
@@ -95,6 +96,53 @@
                 <i class="fas fa-table"></i> Trích xuất dữ liệu
             </a>
         </div>
+        <a class="nav-link {% if request.path.startswith('/video-ai') %}active{% endif %}" href="/video-ai">
+            <i class="fas fa-video"></i> Video AI
+        </a>
+        <a class="nav-link nav-link-collapsible {% if request.path.startswith('/prompt-generator') %}active{% endif %}"
+           href="/prompt-generator/code"
+           data-bs-toggle="collapse"
+           data-bs-target="#prompt-sub"
+           aria-expanded="{{ 'true' if request.path.startswith('/prompt-generator') else 'false' }}"
+           onclick="return handleNavCollapse(event, this)">
+            <span><i class="fas fa-magic"></i> AI Prompt Studio</span>
+            <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/prompt-generator') %}collapsed{% endif %}"></i>
+        </a>
+        <div class="collapse nav-sub {% if request.path.startswith('/prompt-generator') %}show{% endif %}" id="prompt-sub">
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/code' %}active{% endif %}" href="/prompt-generator/code">
+                <i class="fas fa-code"></i> Lập trình (Code)
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/video' %}active{% endif %}" href="/prompt-generator/video">
+                <i class="fas fa-video"></i> Ảnh / Video AI
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/music' %}active{% endif %}" href="/prompt-generator/music">
+                <i class="fas fa-music"></i> Nhạc (Suno/Udio)
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/story' %}active{% endif %}" href="/prompt-generator/story">
+                <i class="fas fa-book"></i> Kịch bản truyện
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/video-script' %}active{% endif %}" href="/prompt-generator/video-script">
+                <i class="fas fa-film"></i> Kịch bản Video
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/marketing' %}active{% endif %}" href="/prompt-generator/marketing">
+                <i class="fas fa-ad"></i> Marketing / Content
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/education' %}active{% endif %}" href="/prompt-generator/education">
+                <i class="fas fa-graduation-cap"></i> Học tập / Ngoại ngữ
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/data' %}active{% endif %}" href="/prompt-generator/data">
+                <i class="fas fa-chart-line"></i> Phân tích dữ liệu
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/office' %}active{% endif %}" href="/prompt-generator/office">
+                <i class="fas fa-briefcase"></i> Trợ lý văn phòng
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/brainstorm' %}active{% endif %}" href="/prompt-generator/brainstorm">
+                <i class="fas fa-lightbulb"></i> Lên ý tưởng
+            </a>
+            <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/enhancer' %}active{% endif %}" href="/prompt-generator/enhancer">
+                <i class="fas fa-wand-magic-sparkles"></i> Tối ưu Prompt thô
+            </a>
+        </div>
     </nav>
 </div>
 

templates/tools/prompt_studio/index.html

@@ -0,0 +1,988 @@
+{% extends "layout.html" %}
+
+{% block title %}AI Prompt Studio - Pum's Toolkit{% endblock %}
+
+{% block styles %}
+<style>
+    .prompt-card {
+        border: none;
+        border-radius: var(--radius-lg);
+        background: #ffffff;
+        box-shadow: var(--shadow-card);
+    }
+    
+    .panel-title {
+        color: var(--color-primary);
+        font-weight: var(--font-weight-bold);
+        border-bottom: 2px solid var(--color-border-light);
+        padding-bottom: var(--spacing-sm);
+        margin-bottom: var(--spacing-lg);
+        font-size: 1.25rem;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .nav-pills {
+        gap: 8px;
+    }
+
+    .nav-pills .nav-link {
+        font-size: 0.82rem;
+        padding: 8px 14px;
+        border: 1px solid var(--color-border-input);
+        background: #ffffff;
+        color: var(--color-text-muted);
+        border-radius: var(--radius-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+    }
+
+    .nav-pills .nav-link:hover:not(.active) {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+        background: var(--color-primary-light);
+    }
+
+    .nav-pills .nav-link.active {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+        color: #ffffff;
+        box-shadow: 0 4px 10px rgba(67, 97, 238, 0.2);
+    }
+
+    .prompt-textarea {
+        font-family: 'Consolas', 'Courier New', monospace;
+        font-size: 0.9rem;
+        line-height: 1.5;
+        background-color: #f8fafc;
+        border: 1px solid var(--color-border-input);
+        color: #1e293b;
+        resize: vertical;
+    }
+
+    .result-box {
+        background-color: #f8fafc;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--color-border-input);
+        padding: var(--spacing-md);
+        max-height: 350px;
+        overflow-y: auto;
+        font-size: 0.9rem;
+        white-space: pre-wrap;
+    }
+
+    .badge-tab {
+        font-size: 0.75rem;
+        padding: 4px 8px;
+        background: var(--color-primary-light);
+        color: var(--color-primary);
+        border-radius: 4px;
+        font-weight: 600;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<!-- Spinner Overlay -->
+<div id="loaderOverlay" class="loader-overlay">
+    <div class="spinner-pro"></div>
+    <p class="mt-3 fw-bold" style="color: var(--color-primary)" id="loaderText">Đang tối ưu prompt bằng Gemini...</p>
+</div>
+
+<div class="mb-4">
+    <h2 class="fw-bold"><i class="fas fa-magic text-primary me-2"></i>AI Prompt Studio</h2>
+    <p class="text-muted">Tự động thiết kế và tối ưu prompt chuyên nghiệp cho mọi tác vụ bằng Gemini AI.</p>
+</div>
+
+<!-- Header with Dropdown Selector -->
+<div class="card prompt-card mb-4 border-0">
+    <div class="card-body p-4 d-flex justify-content-between align-items-center flex-wrap gap-3">
+        <div>
+            <h4 class="fw-bold mb-1" style="color: var(--color-primary);">
+                {% if active_tab == 'code' %}<i class="fas fa-code me-2"></i>Lập trình (Code)
+                {% elif active_tab == 'video' %}<i class="fas fa-video me-2"></i>Ảnh / Video AI
+                {% elif active_tab == 'music' %}<i class="fas fa-music me-2"></i>Nhạc (Suno/Udio)
+                {% elif active_tab == 'story' %}<i class="fas fa-book me-2"></i>Kịch bản truyện
+                {% elif active_tab == 'video_script' %}<i class="fas fa-film me-2"></i>Kịch bản Video
+                {% elif active_tab == 'marketing' %}<i class="fas fa-ad me-2"></i>Marketing / Content
+                {% elif active_tab == 'education' %}<i class="fas fa-graduation-cap me-2"></i>Học tập / Ngoại ngữ
+                {% elif active_tab == 'data' %}<i class="fas fa-chart-line me-2"></i>Phân tích dữ liệu
+                {% elif active_tab == 'office' %}<i class="fas fa-briefcase me-2"></i>Trợ lý văn phòng
+                {% elif active_tab == 'brainstorm' %}<i class="fas fa-lightbulb me-2"></i>Lên ý tưởng sáng tạo
+                {% elif active_tab == 'enhancer' %}<i class="fas fa-wand-magic-sparkles me-2"></i>Tối ưu Prompt thô
+                {% endif %}
+            </h4>
+            <p class="text-muted small mb-0">Thiết kế và tối ưu cấu trúc prompt tối ưu cho tác vụ hiện tại.</p>
+        </div>
+        
+        <!-- Category Dropdown Button -->
+        <div class="dropdown">
+            <button class="btn btn-outline-primary dropdown-toggle fw-semibold" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" style="padding: 10px 20px; border-radius: var(--radius-md);">
+                <i class="fas fa-list-ul me-2"></i>Chọn loại Prompt khác
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end shadow border-0" aria-labelledby="dropdownMenuButton" style="border-radius: var(--radius-lg); padding: 10px; min-width: 260px;">
+                <li class="dropdown-header text-uppercase font-weight-bold text-muted small px-3 py-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Kỹ thuật & Lập trình</li>
+                <li><a class="dropdown-item {% if active_tab == 'code' %}active{% endif %} py-2 px-3" href="/prompt-generator/code" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-code me-2"></i>Lập trình (Code)</a></li>
+                <li><a class="dropdown-item {% if active_tab == 'data' %}active{% endif %} py-2 px-3" href="/prompt-generator/data" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-chart-line me-2"></i>Phân tích dữ liệu</a></li>
+                
+                <li><hr class="dropdown-divider"></li>
+                <li class="dropdown-header text-uppercase font-weight-bold text-muted small px-3 py-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Sáng tạo & Nghệ thuật</li>
+                <li><a class="dropdown-item {% if active_tab == 'video' %}active{% endif %} py-2 px-3" href="/prompt-generator/video" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-video me-2"></i>Ảnh / Video AI</a></li>
+                <li><a class="dropdown-item {% if active_tab == 'music' %}active{% endif %} py-2 px-3" href="/prompt-generator/music" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-music me-2"></i>Nhạc (Suno/Udio)</a></li>
+                <li><a class="dropdown-item {% if active_tab == 'story' %}active{% endif %} py-2 px-3" href="/prompt-generator/story" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-book me-2"></i>Kịch bản truyện</a></li>
+                <li><a class="dropdown-item {% if active_tab == 'video_script' %}active{% endif %} py-2 px-3" href="/prompt-generator/video-script" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-film me-2"></i>Kịch bản Video</a></li>
+                
+                <li><hr class="dropdown-divider"></li>
+                <li class="dropdown-header text-uppercase font-weight-bold text-muted small px-3 py-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Công việc & Học tập</li>
+                <li><a class="dropdown-item {% if active_tab == 'marketing' %}active{% endif %} py-2 px-3" href="/prompt-generator/marketing" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-ad me-2"></i>Marketing / Content</a></li>
+                <li><a class="dropdown-item {% if active_tab == 'education' %}active{% endif %} py-2 px-3" href="/prompt-generator/education" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-graduation-cap me-2"></i>Học tập / Ngoại ngữ</a></li>
+                <li><a class="dropdown-item {% if active_tab == 'office' %}active{% endif %} py-2 px-3" href="/prompt-generator/office" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-briefcase me-2"></i>Trợ lý văn phòng</a></li>
+                <li><a class="dropdown-item {% if active_tab == 'brainstorm' %}active{% endif %} py-2 px-3" href="/prompt-generator/brainstorm" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-lightbulb me-2"></i>Lên ý tưởng sáng tạo</a></li>
+                
+                <li><hr class="dropdown-divider"></li>
+                <li class="dropdown-header text-uppercase font-weight-bold text-muted small px-3 py-2" style="font-size: 0.7rem; letter-spacing: 0.05em;">Tổng quát</li>
+                <li><a class="dropdown-item {% if active_tab == 'enhancer' %}active{% endif %} py-2 px-3" href="/prompt-generator/enhancer" style="border-radius: var(--radius-sm); font-size: 0.85rem;"><i class="fas fa-wand-magic-sparkles me-2"></i>Tối ưu Prompt thô</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<div class="row g-4">
+    <!-- Left Column: Inputs Form -->
+    <div class="col-lg-6">
+        <div class="card prompt-card h-100">
+            <div class="card-body p-4 d-flex flex-column justify-content-between">
+                <div>
+                    <h5 class="panel-title"><i class="fas fa-sliders-h"></i> Cấu hình tham số</h5>
+                    
+                    <div class="tab-content" id="promptTabsContent">
+                        
+                        <!-- TAB 1: CODE -->
+                        {% if active_tab == 'code' %}
+                        <div class="tab-pane fade show active" id="tab-code" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Tính năng / Công việc cần viết code</label>
+                                <textarea class="form-control" id="code_task" rows="4" placeholder="Ví dụ: Viết một class Python để kết nối với cơ sở dữ liệu MySQL, thực hiện các thao tác CRUD cơ bản và tự động ghi log lỗi vào file..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Ngôn ngữ lập trình</label>
+                                    <select class="form-select" id="code_lang">
+                                        <option value="Python" selected>Python</option>
+                                        <option value="JavaScript">JavaScript</option>
+                                        <option value="TypeScript">TypeScript</option>
+                                        <option value="HTML/CSS">HTML / CSS</option>
+                                        <option value="Go">Go</option>
+                                        <option value="Rust">Rust</option>
+                                        <option value="Java">Java</option>
+                                        <option value="C#">C#</option>
+                                        <option value="C++">C++</option>
+                                        <option value="PHP">PHP</option>
+                                        <option value="SQL">SQL</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Thư viện / Framework</label>
+                                    <input type="text" class="form-control" id="code_framework" placeholder="Ví dụ: Flask, React, pandas...">
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Phong cách & Quy chuẩn Code</label>
+                                <select class="form-select" id="code_style">
+                                    <option value="Clean Code, tuân thủ DRY và SOLID, có ghi chú giải thích" selected>Clean Code, SOLID, DRY (Khuyên dùng)</option>
+                                    <option value="Tối ưu hóa hiệu năng, xử lý bất đồng bộ tốt">Tối ưu hiệu suất cao (High Performance)</option>
+                                    <option value="Comment giải thích cực kỳ chi tiết từng dòng cho người mới bắt đầu">Giải thích chi tiết (Dành cho newbie)</option>
+                                    <option value="Tích hợp sẵn Unit Tests đầy đủ cho các hàm quan trọng">Kèm theo bộ Unit Tests</option>
+                                    <option value="Code tối giản, ngắn gọn nhất có thể">Tối giản (Minimalist)</option>
+                                </select>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Yêu cầu ràng buộc bổ sung (Không bắt buộc)</label>
+                                <textarea class="form-control" id="code_requirements" rows="2" placeholder="Ví dụ: Sử dụng hàm map/reduce thay vì vòng lặp thường, không dùng thư viện ngoài..."></textarea>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 2: IMAGE/VIDEO AI -->
+                        {% if active_tab == 'video' %}
+                        <div class="tab-pane fade show active" id="tab-video" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Ý tưởng hình ảnh / video Concept</label>
+                                <textarea class="form-control" id="video_topic" rows="3" placeholder="Ví dụ: Một phi hành gia đang cưỡi ngựa trên sa mạc của sao hỏa, ngắm nhìn trái đất ở phía xa..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Phong cách nghệ thuật (Style)</label>
+                                    <select class="form-select" id="video_style">
+                                        <option value="Cinematic movie scene, 8k, film grain, dramatic masterwork" selected>Cinematic (Điện ảnh)</option>
+                                        <option value="Photorealistic, highly detailed 3D render, hyperrealism, octane render">Photorealistic (Tả thực)</option>
+                                        <option value="Anime style, vibrant colors, detailed illustration, Studio Ghibli aesthetic">Anime / Ghibli</option>
+                                        <option value="3D cartoon, Disney Pixar animation style, cute, colorful">3D Pixar Cartoon</option>
+                                        <option value="Cyberpunk style, neon lights, high-tech, wet rainy streets">Cyberpunk (Neon giả tưởng)</option>
+                                        <option value="Dreamy watercolor painting style, soft edges, pastel colors, artistic">Watercolor (Tranh màu nước)</option>
+                                        <option value="Vintage 1970s retro film photography, warm color grading, nostalgia">Vintage Retro Film</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Góc máy & Cự ly (Camera)</label>
+                                    <select class="form-select" id="video_shot">
+                                        <option value="Medium shot, eye-level, balanced composition" selected>Medium Shot (Trung cảnh)</option>
+                                        <option value="Extreme close-up macro shot, focus on fine details">Extreme Close-up (Cận cảnh chi tiết)</option>
+                                        <option value="Wide angle landscape shot, epic scale, grand view">Wide Angle (Góc rộng/Toàn cảnh)</option>
+                                        <option value="Drone aerial top-down view, cinematic scale">Drone View (Từ trên cao)</option>
+                                        <option value="Low angle shot, looking up, dramatic perspective">Low Angle (Từ dưới lên)</option>
+                                        <option value="Cinematic slow panning camera movement">Slow Panning (Quay quét chậm - cho Video)</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Ánh sáng (Lighting)</label>
+                                    <select class="form-select" id="video_lighting">
+                                        <option value="Cinematic natural lighting, soft shadows" selected>Natural Light (Tự nhiên)</option>
+                                        <option value="Warm golden hour sunlight, long dramatic shadows">Golden Hour (Hoàng hôn)</option>
+                                        <option value="Dramatic studio lighting, rim light, volumetric dust rays">Studio Lighting (Phòng studio)</option>
+                                        <option value="Biopunk bioluminescent glow, neon lighting, dark environment">Neon/Bioluminescent Glow</option>
+                                        <option value="Moody low key lighting, high contrast chiaroscuro">Chiaroscuro (Tương phản tối)</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Tỷ lệ khung hình (Aspect Ratio)</label>
+                                    <select class="form-select" id="video_ratio">
+                                        <option value="16:9 (--ar 16:9)" selected>16:9 (Landscape - YouTube)</option>
+                                        <option value="9:16 (--ar 9:16)">9:16 (Vertical - TikTok/Shorts)</option>
+                                        <option value="1:1 (--ar 1:1)">1:1 (Square - Instagram)</option>
+                                        <option value="4:3 (--ar 4:3)">4:3 (Classic TV)</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Chi tiết bổ sung (Bầu không khí, màu sắc chủ đạo...)</label>
+                                <textarea class="form-control" id="video_details" rows="2" placeholder="Ví dụ: Tông màu chủ đạo xanh lam huyền ảo, bầu không khí huyền bí, có sương mù nhẹ xung quanh..."></textarea>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 3: MUSIC -->
+                        {% if active_tab == 'music' %}
+                        <div class="tab-pane fade show active" id="tab-music" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Ý tưởng hoặc Chủ đề nhạc</label>
+                                <textarea class="form-control" id="music_theme" rows="3" placeholder="Ví dụ: Một bài hát kể về sự cô đơn khi đi dưới mưa giữa lòng thành phố náo nhiệt ban đêm..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Thể loại (Genre)</label>
+                                    <select class="form-select" id="music_genre">
+                                        <option value="Pop Ballad" selected>Pop Ballad</option>
+                                        <option value="Lo-Fi Hip-Hop">Lo-Fi Hip-Hop</option>
+                                        <option value="Synthwave / Retro Electro">Synthwave / Retro</option>
+                                        <option value="Indie Rock">Indie Rock</option>
+                                        <option value="EDM / Future Bass">EDM / House</option>
+                                        <option value="R&B / Soul">R&B / Soul</option>
+                                        <option value="Epic Orchestral, Cinematic soundtrack">Sử thi hoành tráng (Epic)</option>
+                                        <option value="Acoustic Folk">Acoustic / Folk</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Cảm xúc (Mood)</label>
+                                    <select class="form-select" id="music_mood">
+                                        <option value="Melancholic, sad, emotional" selected>U sầu / Cảm xúc (Sad)</option>
+                                        <option value="Relaxing, calm, chill, ambient">Thư giãn / Chill (Relaxing)</option>
+                                        <option value="Energetic, upbeat, powerful, positive">Sôi nổi / Tràn năng lượng</option>
+                                        <option value="Dark, intense, dramatic, tense">U tối / Kịch tính (Dark)</option>
+                                        <option value="Happy, bright, cheerful">Vui tươi / Hạnh phúc (Happy)</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Nhạc cụ chính</label>
+                                    <input type="text" class="form-control" id="music_instruments" placeholder="Ví dụ: Piano, Acoustic Guitar, Saxophone...">
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Giọng hát (Vocals)</label>
+                                    <select class="form-select" id="music_vocals">
+                                        <option value="Emotional Female vocals" selected>Giọng Nữ cảm xúc</option>
+                                        <option value="Warm Male vocals">Giọng Nam ấm áp</option>
+                                        <option value="Male and Female duet">Song ca Nam Nữ</option>
+                                        <option value="Instrumental solo, no vocals">Nhạc không lời (Instrumental)</option>
+                                        <option value="Vocaloid / Synthesized voice">Giọng điện tử (Vocaloid)</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Ý tưởng lời bài hát / Câu chữ cụ thể (Nếu có)</label>
+                                <textarea class="form-control" id="music_lyrics_idea" rows="2" placeholder="Ví dụ: Có câu thơ 'Mưa rơi ướt vai em, đèn đường nhạt nhòa'..."></textarea>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 4: STORY SCRIPT -->
+                        {% if active_tab == 'story' %}
+                        <div class="tab-pane fade show active" id="tab-story" role="tabpanel">
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Tên truyện / Chủ đề</label>
+                                    <input type="text" class="form-control" id="story_title" placeholder="Ví dụ: Kẻ Du Hành Thời Gian Cuối Cùng">
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Thể loại</label>
+                                    <select class="form-select" id="story_genre">
+                                        <option value="Khoa học viễn tưởng (Sci-Fi, time travel)" selected>Khoa học viễn tưởng</option>
+                                        <option value="Huyền ảo / Kiếm hiệp / Tiên hiệp (Fantasy)">Huyền ảo / Kỳ ảo (Fantasy)</option>
+                                        <option value="Trinh thám / Kỳ bí / Phá án (Mystery/Detective)">Trinh thám / Phá án</option>
+                                        <option value="Kinh dị / Tâm linh (Horror)">Kinh dị / Kỳ quái</option>
+                                        <option value="Lãng mạn / Ngôn tình (Romance)">Tình cảm / Lãng mạn</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Tuyến nhân vật chính</label>
+                                <textarea class="form-control" id="story_characters" rows="2" placeholder="Ví dụ: Leo - một nhà khoa học già cố gắng quay về quá khứ để cứu con gái, tính cách lầm lì nhưng giàu tình cảm..."></textarea>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Cốt truyện chính / Điểm nhấn / Plot twist</label>
+                                <textarea class="form-control" id="story_plot" rows="3" placeholder="Ví dụ: Leo phát hiện ra rằng việc ông cố gắng quay lại quá khứ thực chất lại là nguyên nhân gián tiếp gây ra tai nạn của con gái ông (vòng lặp nghịch lý)..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Tông giọng chủ đạo</label>
+                                    <select class="form-select" id="story_tone">
+                                        <option value="Trầm buồn, nhiều suy tư, giàu chiều sâu triết lý" selected>Trầm buồn / Triết lý</option>
+                                        <option value="Hồi hộp, kịch tính, dồn dập, căng thẳng">Hồi hộp / Kịch tính</option>
+                                        <option value="Hài hước, châm biếm vui vẻ, tươi sáng">Hài hước / Tươi sáng</option>
+                                        <option value="Lãng mạn, nhẹ nhàng, sâu lắng, ngọt ngào">Lãng mạn / Nhẹ nhàng</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Độ dài / Định dạng</label>
+                                    <select class="form-select" id="story_length">
+                                        <option value="Truyện ngắn hoàn chỉnh (Short story khoảng 2000 từ)" selected>Truyện ngắn hoàn chỉnh</option>
+                                        <option value="Chương đầu mở cuốn của tiểu thuyết dài tập (Novel Chapter)">Chương tiểu thuyết mở đầu</option>
+                                        <option value="Dàn ý kịch bản chi tiết từng chương (Plot outline)">Dàn ý kịch bản chi tiết</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 5: VIDEO SCRIPT -->
+                        {% if active_tab == 'video_script' %}
+                        <div class="tab-pane fade show active" id="tab-video-script" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Chủ đề Video cần viết kịch bản</label>
+                                <textarea class="form-control" id="script_topic" rows="3" placeholder="Ví dụ: 5 mẹo sử dụng Python giúp lập trình viên tăng gấp đôi hiệu suất làm việc hàng ngày..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Nền tảng phát hành</label>
+                                    <select class="form-select" id="script_platform">
+                                        <option value="YouTube Long-form video" selected>YouTube (Video dài)</option>
+                                        <option value="TikTok / YouTube Shorts / FB Reels (Video đứng ngắn < 1p)">TikTok / Reels / Shorts (<1m)</option>
+                                        <option value="Video quảng cáo sản phẩm / Facebook Ads">Facebook Video quảng cáo / ADS</option>
+                                        <option value="Khóa học online / Video bài giảng">Khóa học / Hướng dẫn chuyên sâu</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Thời lượng mong muốn</label>
+                                    <input type="text" class="form-control" id="script_duration" placeholder="Ví dụ: 1 phút, 8 phút..." value="5 phút">
+                                </div>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Cấu trúc kịch bản</label>
+                                    <select class="form-select" id="script_structure">
+                                        <option value="Cấu trúc thu hút: 5s Hook đầu gây tò mò -> Trình bày 5 mẹo ngắn -> Kêu gọi hành động (Hook-Body-CTA)" selected>Thu hút & Kêu gọi (Hook-Body-CTA)</option>
+                                        <option value="Cấu trúc kể câu chuyện thực tế (Storytelling), hành trình vượt qua khó khăn">Kể chuyện (Narrative Story)</option>
+                                        <option value="Cấu trúc So sánh / Đánh giá khách quan ưu nhược điểm (Review)">So sánh & Đánh giá (Review)</option>
+                                        <option value="Cấu trúc vấn đề và giải pháp trực tiếp (Problem-Solution)">Vấn đề & Giải pháp</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Tông giọng người dẫn</label>
+                                    <select class="form-select" id="script_tone">
+                                        <option value="Sôi nổi, năng lượng cao, lôi cuốn, tạo sự chú ý" selected>Sôi nổi / Năng lượng cao</option>
+                                        <option value="Thân thiện, chia sẻ kiến thức, dễ hiểu, ấm áp">Thân thiện / Chia sẻ</option>
+                                        <option value="Chuyên nghiệp, đáng tin cậy, khoa học, logic">Chuyên nghiệp / Logic</option>
+                                        <option value="Hài hước, châm biếm nhẹ, dí dỏm">Dí dỏm / Hài hước</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Lời kêu gọi hành động cuối video (CTA)</label>
+                                <input type="text" class="form-control" id="script_cta" placeholder="Ví dụ: Nhấn đăng ký kênh và tải bộ code mẫu ở link bên dưới mô tả..." value="Nhấn Đăng ký kênh và bình luận ý kiến của bạn">
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 6: MARKETING -->
+                        {% if active_tab == 'marketing' %}
+                        <div class="tab-pane fade show active" id="tab-marketing" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Sản phẩm / Dịch vụ hoặc Chủ đề quảng cáo</label>
+                                <textarea class="form-control" id="marketing_topic" rows="3" placeholder="Ví dụ: Giới thiệu bình nước giữ nhiệt thông minh có hiển thị nhiệt độ, dung tích 500ml, nhắm vào dân văn phòng..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Nền tảng xuất bản</label>
+                                    <select class="form-select" id="marketing_platform">
+                                        <option value="Facebook Post" selected>Facebook Post</option>
+                                        <option value="Facebook Ads (Chạy quảng cáo copywriter)">Facebook Ads (Chạy quảng cáo)</option>
+                                        <option value="SEO Article Blog post">Bài viết chuẩn SEO (Blog)</option>
+                                        <option value="Email Marketing Campaign">Email Marketing (Bán hàng)</option>
+                                        <option value="Landing Page Copywriting">Landing Page (Trang đích)</option>
+                                        <option value="Slogan / Tagline Creation">Tạo Slogan / Tagline</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Tông giọng bài viết (Tone)</label>
+                                    <select class="form-select" id="marketing_tone">
+                                        <option value="Thuyết phục, lôi cuốn, đánh trúng nỗi đau khách hàng (Persuasive)" selected>Thuyết phục / Bán hàng</option>
+                                        <option value="Hài hước, bắt trend, dí dỏm, trẻ trung">Hài hước / Bắt trend</option>
+                                        <option value="Chuyên nghiệp, tin cậy, cung cấp nhiều giá trị thực tế">Chuyên gia / Tin cậy</option>
+                                        <option value="Giản dị, chân thành, k��� chuyện trải nghiệm (Storytelling)">Chân thành / Kể chuyện</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Lời kêu gọi hành động (CTA)</label>
+                                <input type="text" class="form-control" id="marketing_cta" placeholder="Ví dụ: Nhận ưu đãi 30% khi đặt hàng hôm nay qua link..." value="Mua ngay hôm nay để nhận ưu đãi giảm 30%">
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Chi tiết bổ sung (Từ khóa cần chèn, độ dài...)</label>
+                                <textarea class="form-control" id="marketing_details" rows="2" placeholder="Ví dụ: Chèn các hashtag #binhgiunhiet #office, độ dài dưới 300 từ..."></textarea>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 7: EDUCATION -->
+                        {% if active_tab == 'education' %}
+                        <div class="tab-pane fade show active" id="tab-education" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Chủ đề hoặc khái niệm học tập cần giải thích</label>
+                                <textarea class="form-control" id="edu_subject" rows="3" placeholder="Ví dụ: Giải thích cơ chế đồng thuận Proof of Work (PoW) trong Blockchain..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Trình độ người học</label>
+                                    <select class="form-select" id="edu_level">
+                                        <option value="Người mới bắt đầu chưa biết gì, giải thích cực kỳ đơn giản (ELI5)" selected>Người mới bắt đầu (Dễ nhất)</option>
+                                        <option value="Học sinh cấp 2 / cấp 3 (Trung bình)">Học sinh Trung học</option>
+                                        <option value="Sinh viên Đại học hoặc người nghiên cứu học thuật">Đại học / Học thuật</option>
+                                        <option value="Chuyên gia hoặc lập trình viên chuyên nghiệp cần đi sâu bản chất">Chuyên gia / Chuyên sâu</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Phương pháp sư phạm</label>
+                                    <select class="form-select" id="edu_method">
+                                        <option value="Sử dụng các hình ảnh ẩn dụ thực tế gần gũi (Analogy-based)" selected>Hình ảnh ẩn dụ (Analogy)</option>
+                                        <option value="Phương pháp Socratic (Hỏi đáp từng bước kích thích suy nghĩ)">Hỏi đáp Socratic</option>
+                                        <option value="Chia nhỏ khái niệm và giải thích bằng ngôn ngữ không chuyên môn">Ngôn ngữ bình dân (ELI5)</option>
+                                        <option value="Phương pháp Feynman (Giải thích lại cho một đứa trẻ 5 tuổi nghe)">Phương pháp Feynman</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Mục tiêu học tập cụ thể (Kết quả đầu ra)</label>
+                                <textarea class="form-control" id="edu_goals" rows="3" placeholder="Ví dụ: Giúp người đọc phân biệt được sự khác nhau giữa PoW và PoS, kèm theo 3 câu hỏi trắc nghiệm tự kiểm tra kiến thức..."></textarea>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 8: DATA ANALYSIS -->
+                        {% if active_tab == 'data' %}
+                        <div class="tab-pane fade show active" id="tab-data" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Nguồn dữ liệu & Cấu trúc (Schema)</label>
+                                <textarea class="form-control" id="data_source" rows="3" placeholder="Ví dụ: Bảng SQL 'orders' chứa các cột (order_id, user_id, amount, order_date, status)..."></textarea>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Câu hỏi / Mục tiêu phân tích</label>
+                                <textarea class="form-control" id="data_goal" rows="3" placeholder="Ví dụ: Tính giá trị đơn hàng trung bình (AOV) hàng tháng và tìm ra top 10% người dùng chi tiêu nhiều nhất trong năm 2025..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Định dạng đầu ra mong muốn</label>
+                                    <select class="form-select" id="data_output">
+                                        <option value="Câu lệnh truy vấn SQL tối ưu (SQL Query)" selected>SQL Query tối ưu</option>
+                                        <option value="Đoạn mã Python sử dụng pandas và matplotlib để trực quan hóa">Python Code (pandas/chart)</option>
+                                        <option value="Báo cáo tóm tắt kinh doanh (Executive Summary) kèm khuyến nghị hành động">Báo cáo tóm tắt kinh doanh</option>
+                                        <option value="Phân tích thống kê chi tiết (mô tả, tương quan, hồi quy)">Phân tích thống kê chi tiết</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Chi tiết yêu cầu ràng buộc</label>
+                                    <input type="text" class="form-control" id="data_details" placeholder="Ví dụ: Sử dụng CTE trong SQL, xử lý giá trị Null...">
+                                </div>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 9: OFFICE ASSISTANT -->
+                        {% if active_tab == 'office' %}
+                        <div class="tab-pane fade show active" id="tab-office" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Văn bản / Nội dung gốc cần xử lý</label>
+                                <textarea class="form-control" id="office_text" rows="4" placeholder="Ví dụ: Đoạn email thô của khách hàng phàn nàn về việc giao hàng trễ..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Công việc cần thực hiện</label>
+                                    <select class="form-select" id="office_task">
+                                        <option value="Tóm tắt tài liệu dài thành các ý chính (Summarization)" selected>Tóm tắt ý chính (Summary)</option>
+                                        <option value="Viết một email trả lời lịch sự và chuyên nghiệp (Email drafting)">Soạn email phản hồi</option>
+                                        <option value="Sửa lỗi chính tả, ngữ pháp và tinh chỉnh câu chữ trôi chảy hơn (Proofreading)">Hiệu đính & Sửa lỗi</option>
+                                        <option value="Chuyển đổi định dạng văn bản thành báo cáo, biên bản cuộc họp">Chuyển định dạng (Báo cáo/Biên bản)</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Tông giọng (Tone)</label>
+                                    <select class="form-select" id="office_tone">
+                                        <option value="Trang trọng, lịch sự, chuẩn mực công sở (Professional)" selected>Lịch sự / Chuyên nghiệp</option>
+                                        <option value="Khéo léo, xin lỗi chân thành, tìm hướng giải quyết xoa dịu">Khéo léo / Xin lỗi</option>
+                                        <option value="Ngắn gọn, trực tiếp, tập trung vào số liệu hành động">Ngắn gọn / Trực diện</option>
+                                        <option value="Thân thiện, cởi mở, gắn kết đồng nghiệp">Thân thiện / Đồng nghiệp</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Hướng dẫn chi tiết thêm (Không bắt buộc)</label>
+                                <input type="text" class="form-control" id="office_instructions" placeholder="Ví dụ: Tóm tắt dưới 5 gạch đầu dòng, email phản hồi hẹn gặp vào 9h sáng mai...">
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 10: BRAIN STORMING -->
+                        {% if active_tab == 'brainstorm' %}
+                        <div class="tab-pane fade show active" id="tab-brainstorm" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Chủ đề hoặc Bài toán cần lên ý tưởng</label>
+                                <textarea class="form-control" id="brain_topic" rows="3" placeholder="Ví dụ: Lên ý tưởng cho các tính năng mới độc đáo của một ứng dụng quản lý chi tiêu cá nhân nhắm tới thế hệ Gen Z..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">Loại ý tưởng mong muốn</label>
+                                    <select class="form-select" id="brain_type">
+                                        <option value="Tính năng sản phẩm độc đáo / Giải pháp công nghệ mới" selected>Tính năng / Giải pháp sản phẩm</option>
+                                        <option value="Ý tưởng marketing, chiến dịch viral, thông điệp truyền thông">Chiến dịch Marketing / Viral</option>
+                                        <option value="Ý tưởng kinh doanh khởi nghiệp sáng tạo (Startup ideas)">Ý tưởng Kinh doanh / Khởi nghiệp</option>
+                                        <option value="Đặt tên thương hiệu, tên sản phẩm, tên miền website">Đặt tên Thương hiệu / Sản phẩm</option>
+                                        <option value="Ý tưởng thiết kế giao diện UI/UX sáng tạo">Ý tưởng Thiết kế / UI/UX</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Phạm vi & Mức độ sáng tạo</label>
+                                    <select class="form-select" id="brain_scope">
+                                        <option value="Sáng tạo đột phá, độc lạ, chưa từng có trên thị trường (Out of the box)" selected>Đột phá / Độc lạ (Out-of-the-box)</option>
+                                        <option value="Thực tế, dễ triển khai, chi phí thấp, tối ưu những cái đã có">Thực tế / Dễ triển khai</option>
+                                        <option value="Ý tưởng mang tính điên rồ, viễn tưởng, truyền cảm hứng mạnh mẽ">Điên rồ / Truyền cảm hứng</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Yêu cầu chi tiết (Số lượng ý tưởng, định dạng cấu trúc...)</label>
+                                <textarea class="form-control" id="brain_details" rows="2" placeholder="Ví dụ: Đưa ra ít nhất 10 ý tưởng, sắp xếp từ dễ đến khó thực hiện..."></textarea>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- TAB 11: CUSTOM ENHANCER -->
+                        {% if active_tab == 'enhancer' %}
+                        <div class="tab-pane fade show active" id="tab-enhancer" role="tabpanel">
+                            <div class="mb-3">
+                                <label class="form-label">Nhập Prompt thô cần tối ưu</label>
+                                <textarea class="form-control" id="raw_prompt" rows="5" placeholder="Ví dụ: Viết cho tôi một bài đăng facebook quảng cáo khóa học lập trình web cho người mới bắt đầu..."></textarea>
+                            </div>
+                            <div class="row g-3 mb-3">
+                                <div class="col-md-6">
+                                    <label class="form-label">AI đích sử dụng prompt này</label>
+                                    <select class="form-select" id="target_ai">
+                                        <option value="ChatGPT / Claude (Xử lý văn bản chung)" selected>ChatGPT / Claude</option>
+                                        <option value="Midjourney (Vẽ tranh nghệ thuật)">Midjourney</option>
+                                        <option value="Suno / Udio (Sáng tác nhạc)">Suno / Udio</option>
+                                        <option value="Runway / Sora / Kling (Tạo video)">Runway / Sora / Kling</option>
+                                        <option value="Stable Diffusion / DALL-E 3">Stable Diffusion / DALL-E 3</option>
+                                        <option value="Gemini AI (Tích hợp phân tích dữ liệu)">Gemini AI</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label">Hướng dẫn tối ưu thêm (Không bắt buộc)</label>
+                                    <input type="text" class="form-control" id="custom_instructions" placeholder="Ví dụ: Dịch sang tiếng Anh, thêm cấu trúc bảng...">
+                                </div>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                    </div>
+                </div>
+
+                <!-- Global configurations & action button -->
+                <div class="mt-4 border-top pt-4">
+                    <div class="row g-3 align-items-center mb-3">
+                        <div class="col-md-6">
+                            <label class="form-label" style="color: var(--color-primary)"><i class="fab fa-google"></i> 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>
+                        <div class="col-md-6">
+                            <label class="form-label">Trạng thái quota</label>
+                            <div id="modelQuota" class="small text-muted" style="min-height: 24px;"></div>
+                        </div>
+                    </div>
+
+                    <button id="generateBtn" class="btn-primary-custom" style="padding: 12px 20px;"><i class="fas fa-magic me-2"></i>TẠO PROMPT TỐI ƯU</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Right Column: Results -->
+    <div class="col-lg-6">
+        <div class="d-flex flex-column gap-4 h-100">
+            <!-- Result Panel 1: Generated Prompt -->
+            <div class="card prompt-card flex-grow-1">
+                <div class="card-body p-4 d-flex flex-column h-100">
+                    <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
+                        <h5 class="m-0 fw-bold" style="color: var(--color-primary)"><i class="fas fa-terminal"></i> Prompt Kết Quả</h5>
+                        <span id="categoryBadge" class="badge-tab">
+                            {% if active_tab == 'code' %}Code
+                            {% elif active_tab == 'video' %}Ảnh/Video AI
+                            {% elif active_tab == 'music' %}Nhạc AI
+                            {% elif active_tab == 'story' %}Truyện
+                            {% elif active_tab == 'video_script' %}Kịch bản Video
+                            {% elif active_tab == 'marketing' %}Marketing
+                            {% elif active_tab == 'education' %}Học tập
+                            {% elif active_tab == 'data' %}Phân tích dữ liệu
+                            {% elif active_tab == 'office' %}Trợ lý văn phòng
+                            {% elif active_tab == 'brainstorm' %}Lên ý tưởng
+                            {% elif active_tab == 'enhancer' %}Tối ưu
+                            {% endif %}
+                        </span>
+                    </div>
+
+                    <textarea id="outputPrompt" class="form-control prompt-textarea flex-grow-1 mb-3" rows="12" placeholder="Prompt tối ưu sẽ xuất hiện ở đây..." readonly></textarea>
+
+                    <div class="d-flex gap-2">
+                        <button id="copyBtn" class="btn btn-outline-primary w-50" disabled>
+                            <i class="fas fa-copy me-2"></i>Sao chép Prompt
+                        </button>
+                        <button id="executeBtn" class="btn btn-success w-50" disabled>
+                            <i class="fas fa-play me-2"></i>Chạy thử Prompt
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Result Panel 2: Live Execution Result -->
+            <div id="executionCard" class="card prompt-card d-none">
+                <div class="card-body p-4">
+                    <h5 class="panel-title text-success mb-3 pb-2"><i class="fas fa-check-circle text-success"></i> Kết quả chạy thử</h5>
+                    <div id="executionResult" class="result-box">Kết quả phản hồi của Gemini khi chạy prompt này sẽ hiển thị ở đây...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="errorArea" class="mt-4 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>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    let activeCategory = '{{ active_tab }}';
+    let geminiModelList = [];
+
+    // Load danh sách model Gemini
+    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 danh sách model:', 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');
+    }
+
+    // Nút Tạo Prompt
+    document.getElementById('generateBtn').addEventListener('click', async () => {
+        const loader = document.getElementById('loaderOverlay');
+        const loaderText = document.getElementById('loaderText');
+        loaderText.textContent = 'Đang tối ưu prompt bằng Gemini...';
+        loader.style.display = 'flex';
+        clearError();
+        
+        // Ẩn bảng chạy thử cũ
+        document.getElementById('executionCard').classList.add('d-none');
+        document.getElementById('executionResult').textContent = '';
+
+        // Thu thập payload tùy theo tab active
+        let payload = {
+            category: activeCategory,
+            gemini_model: document.getElementById('geminiModel').value
+        };
+
+        if (activeCategory === 'code') {
+            payload.code_task = document.getElementById('code_task').value;
+            payload.code_lang = document.getElementById('code_lang').value;
+            payload.code_framework = document.getElementById('code_framework').value;
+            payload.code_style = document.getElementById('code_style').value;
+            payload.code_requirements = document.getElementById('code_requirements').value;
+            
+            if (!payload.code_task.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng mô tả tính năng/công việc cần code!');
+                return;
+            }
+        } else if (activeCategory === 'video') {
+            payload.video_topic = document.getElementById('video_topic').value;
+            payload.video_style = document.getElementById('video_style').value;
+            payload.video_shot = document.getElementById('video_shot').value;
+            payload.video_lighting = document.getElementById('video_lighting').value;
+            payload.video_ratio = document.getElementById('video_ratio').value;
+            payload.video_details = document.getElementById('video_details').value;
+
+            if (!payload.video_topic.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng mô tả ý tưởng/concept hình ảnh!');
+                return;
+            }
+        } else if (activeCategory === 'music') {
+            payload.music_theme = document.getElementById('music_theme').value;
+            payload.music_genre = document.getElementById('music_genre').value;
+            payload.music_mood = document.getElementById('music_mood').value;
+            payload.music_instruments = document.getElementById('music_instruments').value;
+            payload.music_vocals = document.getElementById('music_vocals').value;
+            payload.music_lyrics_idea = document.getElementById('music_lyrics_idea').value;
+
+            if (!payload.music_theme.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng nhập chủ đề/ý tưởng sáng tác nhạc!');
+                return;
+            }
+        } else if (activeCategory === 'story') {
+            payload.story_title = document.getElementById('story_title').value;
+            payload.story_genre = document.getElementById('story_genre').value;
+            payload.story_characters = document.getElementById('story_characters').value;
+            payload.story_plot = document.getElementById('story_plot').value;
+            payload.story_tone = document.getElementById('story_tone').value;
+            payload.story_length = document.getElementById('story_length').value;
+
+            if (!payload.story_plot.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng tóm tắt cốt truyện!');
+                return;
+            }
+        } else if (activeCategory === 'video_script') {
+            payload.script_topic = document.getElementById('script_topic').value;
+            payload.script_platform = document.getElementById('script_platform').value;
+            payload.script_duration = document.getElementById('script_duration').value;
+            payload.script_structure = document.getElementById('script_structure').value;
+            payload.script_tone = document.getElementById('script_tone').value;
+            payload.script_cta = document.getElementById('script_cta').value;
+
+            if (!payload.script_topic.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng mô tả chủ đề video!');
+                return;
+            }
+        } else if (activeCategory === 'marketing') {
+            payload.marketing_topic = document.getElementById('marketing_topic').value;
+            payload.marketing_platform = document.getElementById('marketing_platform').value;
+            payload.marketing_tone = document.getElementById('marketing_tone').value;
+            payload.marketing_cta = document.getElementById('marketing_cta').value;
+            payload.marketing_details = document.getElementById('marketing_details').value;
+
+            if (!payload.marketing_topic.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng mô tả sản phẩm/chủ đề quảng cáo!');
+                return;
+            }
+        } else if (activeCategory === 'education') {
+            payload.edu_subject = document.getElementById('edu_subject').value;
+            payload.edu_level = document.getElementById('edu_level').value;
+            payload.edu_method = document.getElementById('edu_method').value;
+            payload.edu_goals = document.getElementById('edu_goals').value;
+
+            if (!payload.edu_subject.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng mô tả khái niệm cần giải thích!');
+                return;
+            }
+        } else if (activeCategory === 'data') {
+            payload.data_source = document.getElementById('data_source').value;
+            payload.data_goal = document.getElementById('data_goal').value;
+            payload.data_output = document.getElementById('data_output').value;
+            payload.data_details = document.getElementById('data_details').value;
+
+            if (!payload.data_goal.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng nhập câu hỏi hoặc mục tiêu phân tích!');
+                return;
+            }
+        } else if (activeCategory === 'office') {
+            payload.office_text = document.getElementById('office_text').value;
+            payload.office_task = document.getElementById('office_task').value;
+            payload.office_tone = document.getElementById('office_tone').value;
+            payload.office_instructions = document.getElementById('office_instructions').value;
+
+            if (!payload.office_text.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng nhập văn bản gốc cần xử lý!');
+                return;
+            }
+        } else if (activeCategory === 'brainstorm') {
+            payload.brain_topic = document.getElementById('brain_topic').value;
+            payload.brain_type = document.getElementById('brain_type').value;
+            payload.brain_scope = document.getElementById('brain_scope').value;
+            payload.brain_details = document.getElementById('brain_details').value;
+
+            if (!payload.brain_topic.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng mô tả bài toán cần lên ý tưởng!');
+                return;
+            }
+        } else if (activeCategory === 'enhancer') {
+            payload.raw_prompt = document.getElementById('raw_prompt').value;
+            payload.target_ai = document.getElementById('target_ai').value;
+            payload.custom_instructions = document.getElementById('custom_instructions').value;
+
+            if (!payload.raw_prompt.trim()) {
+                loader.style.display = 'none';
+                showError('Vui lòng nhập prompt thô cần tối ưu!');
+                return;
+            }
+        }
+
+        try {
+            const res = await fetch('/api/prompt-generator/generate', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+            const data = await res.json();
+            if (data.error || !data.success) {
+                showError(data.error || 'Có lỗi xảy ra khi tạo prompt.');
+            } else {
+                const outputArea = document.getElementById('outputPrompt');
+                outputArea.value = data.generated_prompt;
+                outputArea.removeAttribute('readonly'); // Cho phép người dùng tự chỉnh sửa
+
+                // Enable các nút hành động
+                document.getElementById('copyBtn').removeAttribute('disabled');
+                document.getElementById('executeBtn').removeAttribute('disabled');
+                
+                await loadGeminiModels(); // Cập nhật lại hạn ngạch quota
+            }
+        } catch(e) {
+            showError('Lỗi kết nối máy chủ. Vui lòng thử lại sau.');
+        } finally {
+            loader.style.display = 'none';
+        }
+    });
+
+    // Nút Copy Prompt
+    document.getElementById('copyBtn').addEventListener('click', () => {
+        const text = document.getElementById('outputPrompt').value;
+        if (!text) return;
+        
+        navigator.clipboard.writeText(text).then(() => {
+            const btn = document.getElementById('copyBtn');
+            const originalHTML = btn.innerHTML;
+            btn.innerHTML = '<i class="fas fa-check me-2"></i>Đã sao chép!';
+            btn.classList.replace('btn-outline-primary', 'btn-primary');
+            setTimeout(() => {
+                btn.innerHTML = originalHTML;
+                btn.classList.replace('btn-primary', 'btn-outline-primary');
+            }, 2000);
+        }).catch(err => {
+            showError('Không thể sao chép tự động. Hãy chọn toàn bộ text và nhấn Ctrl+C.');
+        });
+    });
+
+    // Nút Chạy thử Prompt
+    document.getElementById('executeBtn').addEventListener('click', async () => {
+        const promptText = document.getElementById('outputPrompt').value;
+        if (!promptText.trim()) return;
+
+        const loader = document.getElementById('loaderOverlay');
+        const loaderText = document.getElementById('loaderText');
+        loaderText.textContent = 'Đang chạy thử prompt của bạn với Gemini...';
+        loader.style.display = 'flex';
+        clearError();
+
+        try {
+            const res = await fetch('/api/prompt-generator/execute', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    prompt: promptText,
+                    gemini_model: document.getElementById('geminiModel').value
+                })
+            });
+            const data = await res.json();
+            if (data.error || !data.success) {
+                showError(data.error || 'Có lỗi xảy ra khi chạy thử prompt.');
+            } else {
+                document.getElementById('executionResult').textContent = data.execution_result;
+                document.getElementById('executionCard').classList.remove('d-none');
+                
+                // Cuộn xuống khu vực hiển thị kết quả
+                document.getElementById('executionCard').scrollIntoView({ behavior: 'smooth' });
+                
+                await loadGeminiModels(); // Cập nhật lại hạn ngạch quota
+            }
+        } catch(e) {
+            showError('Lỗi kết nối máy chủ khi chạy thử.');
+        } finally {
+            loader.style.display = 'none';
+        }
+    });
+</script>
+{% endblock %}

templates/tools/video_ai/index.html

@@ -0,0 +1,627 @@
+{% extends "layout.html" %}
+{% block title %}Video AI Studio - Pum's Toolkit{% endblock %}
+
+{% block styles %}
+<style>
+.video-layout { display:grid; grid-template-columns:400px 1fr; gap:1.5rem; align-items:start; }
+@media(max-width:900px){ .video-layout{ grid-template-columns:1fr; } }
+
+.option-group { background:var(--color-bg-input); border:1px solid var(--color-border);
+  border-radius:var(--radius-lg); padding:1rem 1.2rem; margin-bottom:1rem; }
+.option-group-title { font-size:.72rem; font-weight:700; text-transform:uppercase;
+  letter-spacing:.06em; color:var(--color-text-muted); margin-bottom:.75rem; }
+
+.style-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
+.style-card { border:1.5px solid var(--color-border); border-radius:var(--radius-md);
+  padding:8px 4px; text-align:center; cursor:pointer; transition:all .15s;
+  background:#fff; font-size:.72rem; font-weight:600; color:var(--color-text-muted); }
+.style-card:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-hover); }
+.style-card.active { border-color:var(--color-primary); background:var(--color-primary); color:#fff; }
+.style-card .icon { font-size:1.2rem; display:block; margin-bottom:3px; }
+
+.result-panel { background:var(--color-bg-input); border:1px solid var(--color-border);
+  border-radius:var(--radius-lg); min-height:400px;
+  display:flex; align-items:center; justify-content:center; flex-direction:column; }
+.result-panel.has-content { align-items:stretch; justify-content:flex-start; }
+
+.video-box { background:#000; border-radius:var(--radius-lg); overflow:hidden; position:relative; }
+.video-box video { width:100%; display:block; }
+
+.script-box { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
+  padding:1rem; font-size:.82rem; line-height:1.7; color:var(--color-text-body); white-space:pre-wrap; }
+
+.progress-step { display:flex; align-items:center; gap:10px; padding:8px 0;
+  font-size:.82rem; color:var(--color-text-muted); }
+.progress-step .step-icon { width:28px; height:28px; border-radius:50%;
+  display:flex; align-items:center; justify-content:center; font-size:.75rem; flex-shrink:0; }
+.progress-step.done .step-icon { background:#dcfce7; color:#16a34a; }
+.progress-step.active .step-icon { background:var(--color-primary-light); color:var(--color-primary); animation:pulse 1.5s infinite; }
+.progress-step.pending .step-icon { background:var(--color-bg-input); color:var(--color-text-disabled); }
+@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
+
+.api-section { background:#fefce8; border:1px solid #fde68a; border-radius:var(--radius-md);
+  padding:.8rem 1rem; font-size:.78rem; }
+</style>
+{% endblock %}
+
+{% block content %}
+<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)">VIDEO AI STUDIO</h3>
+    <p class="text-muted">Tạo video AI từ văn bản với kịch bản, giọng đọc và hiệu ứng</p>
+  </div>
+
+  <div class="card-body p-4">
+    <div class="video-layout">
+
+      <!-- ── LEFT: Cấu hình ── -->
+      <div>
+
+        <!-- Chủ đề -->
+        <div class="option-group">
+          <div class="option-group-title"><i class="fas fa-pen me-1"></i>Chủ đề / Nội dung</div>
+          <textarea id="videoPrompt" class="form-control" rows="4"
+            placeholder="Mô tả video bạn muốn tạo...&#10;VD: Cảnh hoàng hôn trên biển với sóng vỗ nhẹ nhàng, ánh sáng vàng ấm áp"></textarea>
+        </div>
+
+        <!-- Phong cách -->
+        <div class="option-group">
+          <div class="option-group-title"><i class="fas fa-palette me-1"></i>Phong cách</div>
+          <div class="style-grid" id="styleGrid">
+            <div class="style-card active" data-style="cinematic"><span class="icon">🎬</span>Điện ảnh</div>
+            <div class="style-card" data-style="anime"><span class="icon">🎌</span>Anime</div>
+            <div class="style-card" data-style="realistic"><span class="icon">📷</span>Thực tế</div>
+            <div class="style-card" data-style="nature"><span class="icon">🌿</span>Thiên nhiên</div>
+            <div class="style-card" data-style="tech"><span class="icon">🤖</span>Cyberpunk</div>
+            <div class="style-card" data-style="space"><span class="icon">🚀</span>Vũ trụ</div>
+            <div class="style-card" data-style="watercolor"><span class="icon">🎨</span>Tranh màu</div>
+            <div class="style-card" data-style="vintage"><span class="icon">🎞️</span>Vintage</div>
+          </div>
+        </div>
+
+        <!-- Cài đặt cơ bản -->
+        <div class="option-group">
+          <div class="option-group-title"><i class="fas fa-sliders-h me-1"></i>Cài đặt</div>
+          <div class="row g-2">
+            <div class="col-6">
+              <label class="form-label small fw-semibold">Tỷ lệ khung hình</label>
+              <select id="videoRatio" class="form-select form-select-sm">
+                <option value="16:9">16:9 — Ngang (YouTube)</option>
+                <option value="9:16">9:16 — Dọc (TikTok/Reels)</option>
+                <option value="1:1">1:1 — Vuông (Instagram)</option>
+                <option value="4:3">4:3 — Cổ điển</option>
+              </select>
+            </div>
+            <div class="col-6">
+              <label class="form-label small fw-semibold">Thời lượng</label>
+              <select id="videoDuration" class="form-select form-select-sm">
+                <option value="5" selected>5 giây</option>
+                <option value="10">10 giây</option>
+                <option value="15">15 giây</option>
+              </select>
+            </div>
+            <div class="col-6">
+              <label class="form-label small fw-semibold">Chất lượng</label>
+              <select id="videoQuality" class="form-select form-select-sm">
+                <option value="480p" selected>480p (Nhanh)</option>
+                <option value="720p">720p (HD)</option>
+              </select>
+            </div>
+            <div class="col-6">
+              <label class="form-label small fw-semibold">Nhạc nền</label>
+              <select id="videoMusic" class="form-select form-select-sm">
+                <option value="none">Không có</option>
+                <option value="calm">🎵 Yên bình</option>
+                <option value="upbeat">🎶 Sôi động</option>
+                <option value="epic">🎺 Hào hùng</option>
+                <option value="ambient">🌊 Ambient</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <!-- Giọng đọc -->
+        <div class="option-group">
+          <div class="option-group-title"><i class="fas fa-microphone me-1"></i>Giọng đọc dẫn truyện</div>
+          <div class="row g-2">
+            <div class="col-5">
+              <label class="form-label small fw-semibold">Ngôn ngữ</label>
+              <select id="narrateLang" class="form-select form-select-sm">
+                <option value="vi">🇻🇳 Tiếng Việt</option>
+                <option value="en">🇺🇸 English</option>
+                <option value="ja">🇯🇵 日本語</option>
+                <option value="ko">🇰🇷 한국어</option>
+                <option value="zh">🇨🇳 中文</option>
+                <option value="fr">🇫🇷 Français</option>
+                <option value="de">🇩🇪 Deutsch</option>
+              </select>
+            </div>
+            <div class="col-7">
+              <label class="form-label small fw-semibold">Giọng đọc</label>
+              <select id="narrateVoice" class="form-select form-select-sm"></select>
+            </div>
+            <div class="col-12">
+              <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="narrateEnable" checked>
+                <label class="form-check-label small" for="narrateEnable">Bật giọng đọc dẫn truyện</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Gemini model -->
+        <div class="option-group">
+          <div class="option-group-title"><i class="fas fa-brain me-1"></i>Mô hình AI viết kịch bản</div>
+          <select id="geminiModel" class="form-select form-select-sm">
+            <option value="">Đang tải...</option>
+          </select>
+          <div id="geminiQuota" class="mt-1" style="font-size:.72rem;color:var(--color-text-muted)"></div>
+        </div>
+
+        <!-- Video AI Generation -->
+        <div class="option-group">
+          <div class="option-group-title"><i class="fas fa-video me-1"></i>Mô hình sinh video AI</div>
+          <select id="replicateModel" class="form-select form-select-sm mb-2"></select>
+          
+          <div id="modelConfigArea">
+            <!-- Replicate token input group -->
+            <div id="replicateTokenGroup" class="d-none">
+              <div class="api-section mb-2">
+                <i class="fas fa-info-circle me-1 text-warning"></i>
+                Mô hình trả phí. Nhập <strong>Replicate API token</strong> từ <a href="https://replicate.com" target="_blank">replicate.com</a>.
+              </div>
+              <input type="password" id="replicateToken" class="form-control form-control-sm mb-2"
+                placeholder="r8_xxxx... (Replicate API token)">
+            </div>
+            
+            <!-- HuggingFace token input group -->
+            <div id="hfTokenGroup" class="">
+              <div class="api-section mb-2" style="background-color:rgba(13, 110, 253, 0.05);border-color:rgba(13, 110, 253, 0.15);color:var(--color-primary);">
+                <i class="fas fa-magic me-1"></i>
+                Mô hình <strong>FREE Chuyển động thật</strong> qua HuggingFace. Nếu hết lượt thử (ZeroGPU limit), bạn hãy nhập <strong>HuggingFace Token</strong> (miễn phí) để tăng thêm lượt chạy. Lấy tại <a href="https://huggingface.co/settings/tokens" target="_blank" style="color:var(--color-primary);text-decoration:underline;">huggingface.co</a>.
+              </div>
+              <input type="password" id="hfToken" class="form-control form-control-sm mb-2"
+                placeholder="hf_xxxx... (HuggingFace token - tùy chọn)">
+            </div>
+          </div>
+        </div>
+
+        <button class="btn-primary-custom" id="generateBtn">
+          <i class="fas fa-magic me-2"></i>Tạo video
+        </button>
+      </div>
+
+      <!-- ── RIGHT: Kết quả ── -->
+      <div>
+        <div class="result-panel p-4" id="resultPanel">
+
+          <!-- Placeholder -->
+          <div id="resultPlaceholder" class="text-center">
+            <i class="fas fa-film fa-4x mb-3" style="color:var(--color-text-disabled)"></i>
+            <h5 class="text-muted">Video sẽ hiện tại đây</h5>
+            <p class="text-muted small">Điền thông tin và nhấn <strong>Tạo video</strong></p>
+          </div>
+
+          <!-- Progress -->
+          <div id="resultProgress" class="d-none w-100">
+            <h6 class="fw-semibold mb-3"><i class="fas fa-cog fa-spin me-2 text-primary"></i>Đang xử lý...</h6>
+            <div class="progress-step pending" id="step1">
+              <div class="step-icon"><i class="fas fa-pen"></i></div>
+              <span>Viết kịch bản (Gemini AI)</span>
+            </div>
+            <div class="progress-step pending" id="step2">
+              <div class="step-icon"><i class="fas fa-microphone"></i></div>
+              <span>Tổng hợp giọng đọc (Edge TTS)</span>
+            </div>
+            <div class="progress-step pending" id="step3">
+              <div class="step-icon"><i class="fas fa-film"></i></div>
+              <span>Tạo video AI (Replicate)</span>
+            </div>
+          </div>
+
+          <!-- Error -->
+          <div id="resultError" class="d-none w-100">
+            <div class="alert alert-danger">
+              <i class="fas fa-exclamation-circle me-2"></i>
+              <span id="errorText"></span>
+            </div>
+          </div>
+
+          <!-- Result -->
+          <div id="resultContent" class="d-none w-100">
+
+            <!-- Video player -->
+            <div id="videoWrapper" class="video-box mb-3 d-none">
+              <video id="videoPlayer" controls>
+                <source id="videoSrc" src="" type="video/mp4">
+              </video>
+            </div>
+
+            <!-- No video notice -->
+            <div id="noVideoNotice" class="d-none alert alert-info mb-3 py-2 small">
+              <i class="fas fa-info-circle me-1"></i>
+              <span id="noVideoText"></span>
+            </div>
+
+            <!-- Script -->
+            <div class="mb-3">
+              <div class="fw-semibold small mb-1">
+                <i class="fas fa-scroll me-1 text-primary"></i>Kịch bản dẫn truyện
+              </div>
+              <div class="script-box" id="scriptDisplay"></div>
+            </div>
+
+            <!-- Video prompt -->
+            <div class="mb-3" id="videoPromptSection">
+              <div class="fw-semibold small mb-1">
+                <i class="fas fa-magic me-1 text-warning"></i>Prompt video AI (tiếng Anh)
+              </div>
+              <div class="script-box" id="videoPromptDisplay" style="font-size:.75rem;color:var(--color-text-muted)"></div>
+            </div>
+
+            <!-- Audio player -->
+            <div class="mb-3" id="audioWrapper">
+              <div class="fw-semibold small mb-2">
+                <i class="fas fa-headphones me-1 text-success"></i>Giọng đọc dẫn truyện
+              </div>
+              <audio id="audioPlayer" controls style="width:100%;border-radius:8px;"></audio>
+            </div>
+
+            <!-- Actions -->
+            <div class="d-flex gap-2 flex-wrap">
+              <a id="downloadVideoBtn" href="#" class="btn btn-primary btn-sm d-none">
+                <i class="fas fa-download me-1"></i>Tải video
+              </a>
+              <a id="downloadAudioBtn" href="#" class="btn btn-outline-secondary btn-sm d-none">
+                <i class="fas fa-music me-1"></i>Tải giọng đọc
+              </a>
+              <button class="btn btn-outline-danger btn-sm" onclick="resetResult()">
+              <button class="btn btn-outline-danger btn-sm" onclick="resetResult()">
+                <i class="fas fa-redo me-1"></i>Làm lại
+              </button>
+            </div>
+          </div>
+
+        </div>
+      </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>
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+<style>
+/* Custom style for Select2 to match UI style rules */
+.select2-container--default .select2-selection--single {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  height: 35px;
+  padding: 4px 6px;
+  background-color: var(--color-bg-input);
+  transition: border-color .15s ease-in-out;
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  line-height: 25px;
+  color: var(--color-text-body);
+  font-size: .82rem;
+  padding-left: 0;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+  height: 33px;
+}
+.select2-dropdown {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  background-color: #fff;
+  font-size: .82rem;
+}
+</style>
+<script>
+let allVoices = [];
+
+async function loadGeminiModels() {
+  try {
+    const res = await fetch('/api/gemini-models');
+    const models = await res.json();
+    const sel = document.getElementById('geminiModel');
+    sel.innerHTML = '';
+    
+    models.forEach(m => {
+      const opt = document.createElement('option');
+      opt.value = m.id;
+      opt.textContent = `${m.name} (Còn lại: ${m.remaining}/${m.rpd} lượt)`;
+      if (m.id === 'gemini-2.5-flash') {
+        opt.selected = true;
+      }
+      sel.appendChild(opt);
+    });
+    
+    // Check if select2 is initialized
+    if ($('#geminiModel').data('select2')) $('#geminiModel').select2('destroy');
+    $('#geminiModel').select2({ width: '100%' });
+    
+    // Quota display
+    const quotaDiv = document.getElementById('geminiQuota');
+    if (quotaDiv) {
+      let usedText = '';
+      models.forEach(m => {
+        if (m.used > 0) {
+          usedText += `<br>• ${m.name}: đã dùng ${m.used}`;
+        }
+      });
+      quotaDiv.innerHTML = 'Hôm nay:' + (usedText || ' Chưa sử dụng lượt nào.');
+    }
+  } catch (e) {
+    console.error("Lỗi tải Gemini Models:", e);
+  }
+}
+
+async function loadVoices() {
+  try {
+    const res = await fetch('/api/edge-voices');
+    allVoices = await res.json();
+    if (allVoices.error) return;
+    
+    populateVoices($('#narrateLang').val());
+  } catch (e) {
+    console.error("Lỗi tải Edge TTS Voices:", e);
+  }
+}
+
+async function loadReplicateModels() {
+  try {
+    const res = await fetch('/api/video-ai/models');
+    const models = await res.json();
+    const sel = document.getElementById('replicateModel');
+    sel.innerHTML = '';
+    
+    models.forEach(m => {
+      const opt = document.createElement('option');
+      opt.value = m.id;
+      opt.textContent = `${m.name} (${m.desc})`;
+      if (m.id === 'hf-wan2.2-i2v-free') {
+        opt.selected = true;
+      }
+      sel.appendChild(opt);
+    });
+    
+    if ($('#replicateModel').data('select2')) $('#replicateModel').select2('destroy');
+    $('#replicateModel').select2({ width: '100%' });
+  } catch (e) {
+    console.error("Lỗi tải Replicate Models:", e);
+  }
+}
+
+function populateVoices(lang) {
+  const voices = allVoices.filter(v => v.lang === lang);
+  const sel = document.getElementById('narrateVoice');
+  sel.innerHTML = '';
+  
+  voices.forEach(v => {
+    const opt = document.createElement('option');
+    opt.value = v.name;
+    opt.textContent = (v.gender==='Female'?'♀ ':'♂ ') + v.display.replace(/^Microsoft /,'').replace(/ Online \(Natural\).*/,'');
+    sel.appendChild(opt);
+  });
+  
+  if ($('#narrateVoice').data('select2')) $('#narrateVoice').select2('destroy');
+  $('#narrateVoice').select2({ width: '100%' });
+  
+  if (voices.length > 0) {
+    // default select female voice if possible
+    const female = voices.find(v => v.gender === 'Female') || voices[0];
+    $('#narrateVoice').val(female.name).trigger('change');
+  }
+}
+
+function setStepState(el, state) {
+  el.className = 'progress-step ' + state;
+  const icon = el.querySelector('.step-icon i');
+  if (state === 'done') {
+    icon.className = 'fas fa-check';
+  } else if (state === 'active') {
+    icon.className = 'fas fa-spinner fa-spin';
+  } else {
+    if (el.id === 'step1') icon.className = 'fas fa-pen';
+    if (el.id === 'step2') icon.className = 'fas fa-microphone';
+    if (el.id === 'step3') icon.className = 'fas fa-film';
+  }
+}
+
+function showError(msg) {
+  document.getElementById('resultProgress').classList.add('d-none');
+  document.getElementById('resultContent').classList.add('d-none');
+  document.getElementById('resultError').classList.remove('d-none');
+  document.getElementById('errorText').textContent = msg;
+}
+
+function resetResult() {
+  document.getElementById('resultContent').classList.add('d-none');
+  document.getElementById('resultPlaceholder').classList.remove('d-none');
+  document.getElementById('videoPlayer').pause();
+  document.getElementById('audioPlayer').pause();
+}
+
+$(document).ready(function() {
+  // Init select2 inputs
+  $('#narrateLang').select2({ width: '100%' });
+  $('#replicateModel').select2({ width: '100%' });
+  
+  // Style cards selecting
+  document.querySelectorAll('.style-card').forEach(card => {
+    card.addEventListener('click', function() {
+      document.querySelectorAll('.style-card').forEach(c => c.classList.remove('active'));
+      this.classList.add('active');
+    });
+  });
+  
+  // Bind change to narrateLang
+  $('#narrateLang').on('change', function() {
+    populateVoices($(this).val());
+  });
+
+  // Bind change to replicateModel to toggle token groups
+  $('#replicateModel').on('change', function() {
+    const val = $(this).val();
+    if (val && val.includes('hf-')) {
+      $('#replicateTokenGroup').addClass('d-none');
+      $('#hfTokenGroup').removeClass('d-none');
+    } else {
+      $('#replicateTokenGroup').removeClass('d-none');
+      $('#hfTokenGroup').addClass('d-none');
+    }
+  });
+  
+  // Load models & voices
+  loadGeminiModels();
+  loadVoices();
+  loadReplicateModels();
+  
+  // Default values
+  $('#narrateLang').val('vi').trigger('change');
+  
+  // Generate click handler
+  document.getElementById('generateBtn').addEventListener('click', async () => {
+    const prompt = document.getElementById('videoPrompt').value.trim();
+    if (!prompt) {
+      alert('Vui lòng nhập chủ đề video!');
+      return;
+    }
+    
+    const geminiModel = document.getElementById('geminiModel').value;
+    const lang = document.getElementById('narrateLang').value;
+    const voice = document.getElementById('narrateVoice').value;
+    const style = document.querySelector('.style-card.active')?.getAttribute('data-style') || 'cinematic';
+    const ratio = document.getElementById('videoRatio').value;
+    const duration = document.getElementById('videoDuration').value;
+    const music = document.getElementById('videoMusic').value;
+    const narrate = document.getElementById('narrateEnable').checked;
+    const api_token = document.getElementById('replicateToken').value.trim();
+    const hf_token = document.getElementById('hfToken').value.trim();
+    const replicateModel = document.getElementById('replicateModel').value;
+    
+    // UI state
+    document.getElementById('resultPlaceholder').classList.add('d-none');
+    document.getElementById('resultError').classList.add('d-none');
+    document.getElementById('resultContent').classList.add('d-none');
+    document.getElementById('resultProgress').classList.remove('d-none');
+    
+    const step1 = document.getElementById('step1');
+    const step2 = document.getElementById('step2');
+    const step3 = document.getElementById('step3');
+    
+    setStepState(step1, 'active');
+    setStepState(step2, 'pending');
+    setStepState(step3, 'pending');
+    
+    const formData = new FormData();
+    formData.append('prompt', prompt);
+    formData.append('gemini_model', geminiModel);
+    formData.append('lang', lang);
+    formData.append('voice', voice);
+    formData.append('style', style);
+    formData.append('duration', duration);
+    formData.append('music', music);
+    formData.append('ratio', ratio);
+    formData.append('narrate', narrate);
+    formData.append('api_token', api_token);
+    formData.append('hf_token', hf_token);
+    formData.append('replicate_model', replicateModel);
+    
+    let isFinished = false;
+    
+    // Simulate step progress while waiting
+    setTimeout(() => {
+      if (!isFinished) {
+        setStepState(step1, 'done');
+        if (narrate) {
+          setStepState(step2, 'active');
+        } else {
+          setStepState(step3, 'active');
+        }
+      }
+    }, 4000);
+    
+    setTimeout(() => {
+      if (!isFinished && narrate) {
+        setStepState(step2, 'done');
+        setStepState(step3, 'active');
+      }
+    }, 8000);
+    
+    try {
+      const response = await fetch('/api/video-ai/generate', {
+        method: 'POST',
+        body: formData
+      });
+      
+      isFinished = true;
+      const result = await response.json();
+      
+      if (result.error) {
+        showError(result.error);
+        return;
+      }
+      
+      setStepState(step1, 'done');
+      if (narrate) setStepState(step2, 'done');
+      setStepState(step3, 'done');
+      
+      setTimeout(() => {
+        document.getElementById('resultProgress').classList.add('d-none');
+        document.getElementById('resultContent').classList.remove('d-none');
+        
+        document.getElementById('scriptDisplay').textContent = result.script || '';
+        document.getElementById('videoPromptDisplay').textContent = result.video_prompt || '';
+        
+        // Audio display
+        if (result.audio_url) {
+          document.getElementById('audioWrapper').classList.remove('d-none');
+          const audioPlayer = document.getElementById('audioPlayer');
+          audioPlayer.src = result.audio_url;
+          audioPlayer.load();
+          
+          const downloadAudio = document.getElementById('downloadAudioBtn');
+          downloadAudio.href = result.audio_url;
+          downloadAudio.classList.remove('d-none');
+        } else {
+          document.getElementById('audioWrapper').classList.add('d-none');
+          document.getElementById('downloadAudioBtn').classList.add('d-none');
+        }
+        
+        // Video display
+        if (result.video_url) {
+          document.getElementById('videoWrapper').classList.remove('d-none');
+          document.getElementById('noVideoNotice').classList.add('d-none');
+          
+          const videoPlayer = document.getElementById('videoPlayer');
+          const videoSrc = document.getElementById('videoSrc');
+          videoSrc.src = result.video_url;
+          videoPlayer.load();
+          
+          const downloadVideo = document.getElementById('downloadVideoBtn');
+          downloadVideo.href = result.video_url;
+          downloadVideo.classList.remove('d-none');
+        } else {
+          document.getElementById('videoWrapper').classList.add('d-none');
+          document.getElementById('downloadVideoBtn').classList.add('d-none');
+          
+          document.getElementById('noVideoNotice').classList.remove('d-none');
+          document.getElementById('noVideoText').textContent = result.note || 'Không tạo được video.';
+        }
+        
+        loadGeminiModels();
+      }, 500);
+      
+    } catch (err) {
+      isFinished = true;
+      showError(err.message || 'Lỗi mạng hoặc máy chủ không phản hồi.');
+    }
+  });
+});
+</script>
+{% endblock %}