feat: redesign Audio Story Studio with 3-step workflow (prompt > script > audio)

app.py

@@ -23,7 +23,7 @@ app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB
 
 os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
 
-GEMINI_API_KEY = "AQ.Ab8RN6JxMSl1LlebmW8kq6jjam99Z0qKf2wkwu8WjFKVEp6kGQ"
+GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY", "AQ.Ab8RN6JxMSl1LlebmW8kq6jjam99Z0qKf2wkwu8WjFKVEp6kGQ")
 USAGE_FILE = os.path.join(app.config['UPLOAD_FOLDER'], 'gemini_usage.json')
 
 GEMINI_MODELS = [
@@ -1587,26 +1587,87 @@ def api_prompt_execute():
 def audio_story_studio_index():
     return render_template('tools/audio_story_studio/index.html')
 
-@app.route('/api/audio-story-studio/generate', methods=['POST'])
-def audio_story_studio_generate():
+# ── Step 1: Generate optimized prompt from user config ──
+@app.route('/api/audio-story-studio/create-prompt', methods=['POST'])
+def audio_story_studio_create_prompt():
+    data = request.json or {}
+    idea = data.get('idea', '').strip()
+    genre = data.get('genre', 'Drama gia đình')
+    style = data.get('style', 'Kịch tính, gay cấn')
+    mood = data.get('mood', 'Căng thẳng')
+    length = data.get('length', '10 phút')
+    audience = data.get('audience', 'Người lớn')
+    extras = data.get('extras', '')
+    model_id = data.get('gemini_model', DEFAULT_MODEL)
+
+    if not idea:
+        return jsonify({'error': 'Vui lòng nhập ý tưởng truyện'}), 400
+
+    system_instruction = (
+        "Bạn là chuyên gia viết prompt cho AI tạo kịch bản truyện audio.\n"
+        "Nhiệm vụ: Từ các thông số người dùng cung cấp, hãy viết MỘT prompt tối ưu bằng tiếng Việt "
+        "để một AI khác có thể dùng prompt đó tạo ra kịch bản truyện audio hoàn chỉnh.\n\n"
+        "Prompt tối ưu cần:\n"
+        "- Mô tả rõ ràng bối cảnh, nhân vật chính, xung đột trung tâm\n"
+        "- Yêu cầu cấu trúc kịch bản: mở đầu hấp dẫn, diễn biến leo thang, cao trào, kết thúc bất ngờ\n"
+        "- Chỉ định tông giọng kể, nhịp độ, cảm xúc\n"
+        "- Yêu cầu viết tối ưu cho đọc thành tiếng (câu ngắn gọn, dùng dấu ... để tạo nhịp)\n"
+        "- Ghi rõ độ dài mong muốn\n\n"
+        "CHỈ trả về prompt tối ưu, không thêm lời giới thiệu hay giải thích.\n"
+    )
+
+    user_input = (
+        f"Ý tưởng: {idea}\n"
+        f"Thể loại: {genre}\n"
+        f"Phong cách kể: {style}\n"
+        f"Tâm trạng/Mood: {mood}\n"
+        f"Độ dài mong muốn: {length}\n"
+        f"Đối tượng khán giả: {audience}\n"
+    )
+    if extras:
+        user_input += f"Yêu cầu thêm: {extras}\n"
+
+    try:
+        response = client.models.generate_content(
+            model=model_id,
+            contents=user_input,
+            config=types.GenerateContentConfig(
+                system_instruction=system_instruction
+            )
+        )
+        increment_usage(model_id)
+        return jsonify({
+            'success': True,
+            'optimized_prompt': response.text.strip()
+        })
+    except Exception as e:
+        return jsonify({'error': f"Lỗi tạo prompt: {_err_msg(str(e))}"}), 500
+
+# ── Step 2: Generate full script from prompt ──
+@app.route('/api/audio-story-studio/create-script', methods=['POST'])
+def audio_story_studio_create_script():
     data = request.json or {}
     prompt = data.get('prompt', '').strip()
     model_id = data.get('gemini_model', DEFAULT_MODEL)
 
     if not prompt:
-        return jsonify({'error': 'Vui lòng cung cấp ý tưởng hoặc prompt truyện'}), 400
+        return jsonify({'error': 'Vui lòng cung cấp prompt'}), 400
 
     system_instruction = (
-        "You are an AI Audiobook and Podcast writer.\n"
-        "Your task is to take a story prompt or idea and output a structured JSON containing:\n"
-        "- 'title': A catchy Vietnamese title for the audio story.\n"
-        "- 'script': A high-quality Vietnamese audio script optimized for narration. Write in a natural, engaging prose style, without channelling roleplay markup or action tags in the speech itself. Max 800 words.\n"
-        "- 'suggested_voice': The recommended voice based on the story type. Use 'vi-VN-HoaiMyNeural' (Female, recommended for emotional, romantic, ghost/horror, or family stories) or 'vi-VN-NamMinhNeural' (Male, recommended for crime, action, detective, or historical stories).\n"
-        "- 'rate': The recommended speaking rate (e.g. '-5%' for spooky/horror stories, '+0%' for standard stories, '-10%' for extremely sad/emotional stories).\n"
-        "- 'reason': A brief explanation in Vietnamese of why this voice and pacing were chosen.\n\n"
-        "You MUST return ONLY a valid JSON object matching this structure. Do not wrap in markdown code blocks."
+        "Bạn là nhà văn chuyên viết kịch bản truyện audio cho YouTube và Podcast.\n"
+        "Nhiệm vụ: Dựa vào prompt được cung cấp, hãy viết kịch bản truyện audio hoàn chỉnh bằng tiếng Việt.\n\n"
+        "Trả về JSON với cấu trúc:\n"
+        "- 'title': Tiêu đề hấp dẫn cho truyện audio (gây tò mò, kích thích click)\n"
+        "- 'script': Kịch bản truyện audio đầy đủ, viết dạng văn xuôi tối ưu cho đọc thành tiếng. "
+        "Không dùng markup, tag, hay ký hiệu đặc biệt. Chỉ dùng dấu ... để tạo nhịp nghỉ. "
+        "Câu ngắn gọn, súc tích, giàu cảm xúc.\n"
+        "- 'suggested_voice': 'vi-VN-HoaiMyNeural' (Nữ, phù hợp drama, tâm linh, tình cảm) "
+        "hoặc 'vi-VN-NamMinhNeural' (Nam, phù hợp hành động, trinh thám, lịch sử)\n"
+        "- 'rate': Tốc độ đọc khuyến nghị ('-10%' chậm rãi buồn, '-5%' rùng rợn, '+0%' bình thường, '+5%' nhanh gay cấn)\n"
+        "- 'reason': Giải thích ngắn gọn bằng tiếng Việt vì sao chọn giọng và tốc độ này\n\n"
+        "CHỈ trả về JSON hợp lệ, không wrap trong markdown code block."
     )
-    
+
     try:
         response = client.models.generate_content(
             model=model_id,
@@ -1617,12 +1678,12 @@ def audio_story_studio_generate():
             )
         )
         increment_usage(model_id)
-        
         result = json.loads(response.text.strip())
         return jsonify({'success': True, **result})
     except Exception as e:
         return jsonify({'error': f"Lỗi tạo kịch bản: {_err_msg(str(e))}"}), 500
 
+# ── Step 3: Synthesize audio from script ──
 @app.route('/api/audio-story-studio/synthesize', methods=['POST'])
 def audio_story_studio_synthesize():
     import asyncio, edge_tts

templates/tools/audio_story_studio/index.html

@@ -4,6 +4,85 @@
 
 {% block style %}
 <style>
+    /* ── Step Progress Bar ── */
+    .step-progress {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0;
+        margin-bottom: 30px;
+        padding: 0 10px;
+    }
+    .step-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 18px;
+        border-radius: 50px;
+        font-weight: 600;
+        font-size: 0.88rem;
+        cursor: default;
+        transition: all 0.3s ease;
+        background: #f1f5f9;
+        color: #94a3b8;
+        border: 2px solid transparent;
+    }
+    .step-item.active {
+        background: var(--color-primary-light);
+        color: var(--color-primary);
+        border-color: var(--color-primary);
+        box-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);
+    }
+    .step-item.done {
+        background: #ecfdf5;
+        color: #059669;
+        border-color: #10b981;
+    }
+    .step-item .step-num {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.82rem;
+        font-weight: 700;
+        background: #e2e8f0;
+        color: #64748b;
+        flex-shrink: 0;
+    }
+    .step-item.active .step-num {
+        background: var(--color-primary);
+        color: #fff;
+    }
+    .step-item.done .step-num {
+        background: #10b981;
+        color: #fff;
+    }
+    .step-connector {
+        width: 40px;
+        height: 2px;
+        background: #e2e8f0;
+        flex-shrink: 0;
+    }
+    .step-connector.done {
+        background: #10b981;
+    }
+
+    /* ── Step Panels ── */
+    .step-panel {
+        display: none;
+        animation: fadeSlideIn 0.35s ease;
+    }
+    .step-panel.active {
+        display: block;
+    }
+    @keyframes fadeSlideIn {
+        from { opacity: 0; transform: translateY(12px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* ── Audio Player Card ── */
     .audio-card {
         background: linear-gradient(135deg, #1e1e2f 0%, #11111d 100%);
         border: 1px solid rgba(255, 255, 255, 0.1);
@@ -19,49 +98,52 @@
         left: -50%;
         width: 200%;
         height: 200%;
-        background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
+        background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 60%);
         pointer-events: none;
     }
+    .audio-player-custom { width: 100%; background: rgba(255,255,255,0.05); border-radius: var(--radius-md); padding: 10px; margin-top: 12px; }
+    .audio-player-custom audio { width: 100%; outline: none; }
+
     .recommendation-badge {
         background-color: var(--color-primary-light);
         color: var(--color-primary);
-        border: 1px solid rgba(99, 102, 241, 0.2);
-        padding: 6px 12px;
+        border: 1px solid rgba(99,102,241,0.2);
+        padding: 5px 10px;
         border-radius: 50px;
-        font-size: 0.82rem;
+        font-size: 0.78rem;
         font-weight: 600;
         display: inline-flex;
         align-items: center;
-        gap: 6px;
+        gap: 5px;
     }
-    .audio-player-custom {
-        width: 100%;
-        background: rgba(255, 255, 255, 0.05);
-        border-radius: var(--radius-md);
-        padding: 10px;
-        margin-top: 15px;
-    }
-    .audio-player-custom audio {
-        width: 100%;
-        outline: none;
+    .voice-badge {
+        background: rgba(255,255,255,0.1);
+        border-radius: var(--radius-sm);
+        padding: 4px 8px;
+        font-size: 0.78rem;
+        font-weight: 500;
     }
-    .result-box-custom {
-        background-color: #f8fafc;
+
+    /* ── Result Prompt Box ── */
+    .prompt-result-box {
+        background: #f8fafc;
         border: 1px solid #e2e8f0;
         border-radius: var(--radius-md);
-        padding: 15px;
-        max-height: 400px;
+        padding: 16px;
+        max-height: 350px;
         overflow-y: auto;
-        font-size: 0.95rem;
-        line-height: 1.6;
+        font-size: 0.92rem;
+        line-height: 1.65;
         white-space: pre-wrap;
     }
-    .voice-badge {
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: var(--radius-sm);
-        padding: 4px 8px;
-        font-size: 0.78rem;
-        font-weight: 500;
+
+    /* ── Nav Button Bar ── */
+    .step-nav-bar {
+        display: flex;
+        gap: 10px;
+        margin-top: 20px;
+        padding-top: 16px;
+        border-top: 1px solid #e2e8f0;
     }
 </style>
 {% endblock %}
@@ -69,138 +151,283 @@
 {% block content %}
 <div id="loaderOverlay" class="loader-overlay" style="display: none;">
     <div class="spinner-pro"></div>
-    <p class="mt-3 fw-bold" style="color: var(--color-primary)" id="loaderText">Đang sáng tác kịch bản và thu âm...</p>
+    <p class="mt-3 fw-bold" style="color: var(--color-primary)" id="loaderText">Đang xử lý...</p>
 </div>
 
 <div class="mb-4">
     <h2 class="fw-bold"><i class="fas fa-headphones text-primary me-2"></i>AI Audio Story Studio</h2>
-    <p class="text-muted">Tự động sáng tác truyện audio ngắn từ ý tưởng, tự động phân tích tông giọng, tốc độ đọc và tạo file âm thanh hoàn chỉnh.</p>
+    <p class="text-muted mb-0">Tạo truyện audio hoàn chỉnh chỉ từ ý tưởng. Quy trình 3 bước: Sinh Prompt → Viết Kịch Bản → Thu Âm.</p>
+</div>
+
+<!-- Step Progress Bar -->
+<div class="step-progress">
+    <div class="step-item active" id="stepIndicator1">
+        <span class="step-num">1</span>
+        <span>Cấu hình & Sinh Prompt</span>
+    </div>
+    <div class="step-connector" id="connector1"></div>
+    <div class="step-item" id="stepIndicator2">
+        <span class="step-num">2</span>
+        <span>Tạo Kịch Bản</span>
+    </div>
+    <div class="step-connector" id="connector2"></div>
+    <div class="step-item" id="stepIndicator3">
+        <span class="step-num">3</span>
+        <span>Thu Âm & Phát</span>
+    </div>
 </div>
 
-<div class="row g-4">
-    <!-- Left Column: Settings -->
-    <div class="col-lg-5">
-        <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 mb-4"><i class="fas fa-sliders-h"></i> Cấu hình ý tưởng</h5>
-                    
+<!-- ═══════════ STEP 1: Config & Generate Prompt ═══════════ -->
+<div class="step-panel active" id="step1Panel">
+    <div class="row g-4">
+        <div class="col-lg-7">
+            <div class="card prompt-card h-100">
+                <div class="card-body p-4">
+                    <h5 class="panel-title mb-4"><i class="fas fa-pen-fancy"></i> Ý tưởng & Cấu hình</h5>
+
                     <div class="mb-3">
-                        <label class="form-label fw-bold">Ý tưởng hoặc Chủ đề truyện audio</label>
-                        <textarea id="storyIdea" class="form-control" rows="6" placeholder="Ví dụ: Một vụ án bí ẩn xảy ra ở một ngôi làng sương mù quanh năm, nhân nhân duy nhất là một cậu bé câm... hoặc một câu chuyện ngoại tình đầy kịch tính của gia đình thượng lưu..."></textarea>
-                        <div class="form-text small">Viết càng chi tiết, cốt truyện và lời văn sẽ càng sống động và kịch tính.</div>
+                        <label class="form-label fw-bold">Ý tưởng hoặc Chủ đề truyện <span class="text-danger">*</span></label>
+                        <textarea id="storyIdea" class="form-control" rows="4" placeholder="Ví dụ: Một cô gái phát hiện người chồng sắp cưới có bí mật kinh hoàng sau khi vô tình đọc được tin nhắn trên điện thoại anh ta lúc nửa đêm..."></textarea>
                     </div>
 
-                    <!-- Model Selection -->
-                    <div class="row g-3 align-items-center mb-4">
+                    <div class="row g-3 mb-3">
                         <div class="col-md-6">
-                            <label class="form-label fw-bold" style="color: var(--color-primary)"><i class="fab fa-google"></i> Mô hình AI</label>
-                            <select id="geminiModel" class="form-select" style="border-color: var(--color-primary)">
-                                <option value="">Đang tải...</option>
+                            <label class="form-label fw-bold">Thể loại</label>
+                            <select id="cfgGenre" class="form-select">
+                                <option value="Drama gia đình / Ngoại tình / Mẹ chồng nàng dâu">Drama gia đình / Ngoại tình</option>
+                                <option value="Kinh dị / Tâm linh / Ma quỷ">Kinh dị / Tâm linh</option>
+                                <option value="Trinh thám / Kỳ án / True Crime">Trinh thám / Kỳ án</option>
+                                <option value="Tình cảm lãng mạn / Ngôn tình">Tình cảm lãng mạn</option>
+                                <option value="Trùng sinh / Xuyên không / Tiên hiệp">Trùng sinh / Xuyên không</option>
+                                <option value="Đời thường / Cảm động / Truyền cảm hứng">Đời thường / Cảm động</option>
+                                <option value="Trả thù / Phục hận">Trả thù / Phục hận</option>
+                                <option value="Hài hước / Giải trí">Hài hước / Giải trí</option>
+                                <option value="Lịch sử / Dã sử">Lịch sử / Dã sử</option>
                             </select>
                         </div>
                         <div class="col-md-6">
-                            <label class="form-label small text-muted">Hạn ngạch request</label>
-                            <div id="modelQuota" class="small text-muted" style="min-height: 24px;"></div>
+                            <label class="form-label fw-bold">Phong cách kể</label>
+                            <select id="cfgStyle" class="form-select">
+                                <option value="Kịch tính, gay cấn, lôi cuốn">Kịch tính, gay cấn</option>
+                                <option value="Nhẹ nhàng, truyền cảm, sâu lắng">Nhẹ nhàng, sâu lắng</option>
+                                <option value="Rùng rợn, ám ảnh, u tối">Rùng rợn, ám ảnh</option>
+                                <option value="Hài hước, châm biếm, dí dỏm">Hài hước, dí dỏm</option>
+                                <option value="Trinh thám, bí ẩn, hồi hộp">Trinh thám, hồi hộp</option>
+                                <option value="Trữ tình, lãng mạn, ngọt ngào">Trữ tình, lãng mạn</option>
+                            </select>
                         </div>
                     </div>
 
-                    <!-- Manual overrides (Optional) -->
-                    <div class="card bg-light border-0 mb-4">
-                        <div class="card-body p-3">
-                            <h6 class="fw-bold small mb-3" style="color: var(--color-text-title)"><i class="fas fa-cog"></i> Tự cấu hình giọng đọc (Nếu muốn bỏ qua AI gợi ý)</h6>
-                            <div class="row g-2">
-                                <div class="col-md-7">
-                                    <label class="form-label small mb-1">Chọn Giọng nói</label>
+                    <div class="row g-3 mb-3">
+                        <div class="col-md-4">
+                            <label class="form-label fw-bold">Tâm trạng chủ đạo</label>
+                            <select id="cfgMood" class="form-select">
+                                <option value="Căng thẳng, nghẹt thở">Căng thẳng</option>
+                                <option value="Buồn bã, xúc động">Buồn bã, xúc động</option>
+                                <option value="Phẫn nộ, bất bình">Phẫn nộ</option>
+                                <option value="Sợ hãi, rùng mình">Sợ hãi</option>
+                                <option value="Vui vẻ, tươi sáng">Vui vẻ</option>
+                                <option value="Tò mò, bất ngờ">Tò mò</option>
+                                <option value="Ấm áp, cảm động">Ấm áp</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label fw-bold">Độ dài</label>
+                            <select id="cfgLength" class="form-select">
+                                <option value="5 phút (khoảng 600-800 từ)">5 phút</option>
+                                <option value="10 phút (khoảng 1200-1500 từ)" selected>10 phút</option>
+                                <option value="15 phút (khoảng 1800-2200 từ)">15 phút</option>
+                                <option value="20 phút (khoảng 2500-3000 từ)">20 phút</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label fw-bold">Đối tượng</label>
+                            <select id="cfgAudience" class="form-select">
+                                <option value="Người lớn (18+)">Người lớn (18+)</option>
+                                <option value="Mọi lứa tuổi">Mọi lứa tuổi</option>
+                                <option value="Thanh thiếu niên (13-18)">Thanh thiếu niên</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label fw-bold">Yêu cầu thêm <span class="text-muted fw-normal">(tuỳ chọn)</span></label>
+                        <input id="cfgExtras" class="form-control" placeholder="Ví dụ: Kết thúc twist bất ngờ, có yếu tố flashback, nhân vật chính là phụ nữ trung niên..." />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-5">
+            <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 mb-4"><i class="fas fa-cog"></i> Cài đặt AI & Giọng đọc</h5>
+
+                        <!-- Model Selection -->
+                        <div class="mb-3">
+                            <label class="form-label fw-bold" 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 id="modelQuota" class="small text-muted mt-1"></div>
+                        </div>
+
+                        <!-- Voice override -->
+                        <div class="card bg-light border-0 mb-3">
+                            <div class="card-body p-3">
+                                <h6 class="fw-bold small mb-3"><i class="fas fa-microphone-alt"></i> Giọng đọc (Tuỳ chọn)</h6>
+                                <div class="mb-2">
                                     <select id="manualVoice" class="form-select form-select-sm">
-                                        <option value="auto" selected>-- Để AI tự động phân tích & chọn --</option>
-                                        <option value="vi-VN-HoaiMyNeural">Hoài My (Giọng Nữ Nam Bộ - Truyền cảm / Kinh dị / Drama)</option>
-                                        <option value="vi-VN-NamMinhNeural">Nam Minh (Giọng Nam Bắc Bộ - Hào hùng / Kỳ án / Đanh thép)</option>
+                                        <option value="auto" selected>Để AI tự phân tích & chọn giọng</option>
+                                        <option value="vi-VN-HoaiMyNeural">Hoài My (Nữ – Drama, Tâm linh, Tình cảm)</option>
+                                        <option value="vi-VN-NamMinhNeural">Nam Minh (Nam – Trinh thám, Hành động, Lịch sử)</option>
                                     </select>
                                 </div>
-                                <div class="col-md-5">
-                                    <label class="form-label small mb-1">Tốc độ (Rate)</label>
+                                <div>
                                     <select id="manualRate" class="form-select form-select-sm">
-                                        <option value="auto" selected>-- Để AI chọn --</option>
+                                        <option value="auto" selected>Để AI chọn tốc độ</option>
                                         <option value="-15%">Rất chậm (-15%)</option>
                                         <option value="-8%">Hơi chậm (-8%)</option>
                                         <option value="+0%">Bình thường (+0%)</option>
-                                        <option value="+10%">Nhanh (+10%)</option>
+                                        <option value="+5%">Nhanh (+5%)</option>
+                                        <option value="+10%">Rất nhanh (+10%)</option>
                                     </select>
                                 </div>
                             </div>
                         </div>
                     </div>
+
+                    <button id="btnStep1" class="btn-primary-custom w-100" style="padding: 12px 20px;">
+                        <i class="fas fa-wand-magic-sparkles me-2"></i>BƯỚC 1: SINH PROMPT TỐI ƯU
+                    </button>
                 </div>
+            </div>
+        </div>
+    </div>
+</div>
 
-                <button id="generateBtn" class="btn-primary-custom w-100" style="padding: 12px 20px;">
-                    <i class="fas fa-play-circle me-2"></i>TẠO KỊCH BẢN & ĐỌC TRUYỆN
-                </button>
+<!-- ═══════════ STEP 2: Review Prompt → Generate Script ═══════════ -->
+<div class="step-panel" id="step2Panel">
+    <div class="row g-4">
+        <div class="col-lg-6">
+            <div class="card prompt-card h-100">
+                <div class="card-body p-4 d-flex flex-column">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h5 class="panel-title m-0"><i class="fas fa-scroll"></i> Prompt tối ưu</h5>
+                        <button id="copyPromptBtn" class="btn btn-outline-primary btn-sm"><i class="fas fa-copy"></i> Sao chép</button>
+                    </div>
+                    <p class="text-muted small mb-3">Đây là prompt được AI tối ưu từ cấu hình của bạn. Bạn có thể chỉnh sửa trước khi tạo kịch bản.</p>
+                    <textarea id="optimizedPrompt" class="form-control flex-grow-1" rows="14" style="font-size: 0.92rem; line-height: 1.6;"></textarea>
+                </div>
+            </div>
+        </div>
+        <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 mb-3"><i class="fas fa-info-circle"></i> Hướng dẫn</h5>
+                        <div class="alert alert-info small mb-3">
+                            <i class="fas fa-lightbulb me-1"></i>
+                            <strong>Mẹo:</strong> Bạn có thể chỉnh sửa prompt bên trái để điều chỉnh nội dung trước khi AI viết kịch bản. Thêm yêu cầu cụ thể sẽ cho ra kịch bản chất lượng hơn.
+                        </div>
+                        <div class="alert alert-warning small mb-3">
+                            <i class="fas fa-arrow-right me-1"></i>
+                            Bấm nút bên dưới, AI sẽ dựa vào prompt này để viết một <strong>kịch bản truyện audio hoàn chỉnh</strong>, đồng thời tự động phân tích giọng đọc và tốc độ phù hợp.
+                        </div>
+                    </div>
+
+                    <div class="step-nav-bar">
+                        <button id="btnBack1" class="btn btn-outline-secondary flex-grow-1">
+                            <i class="fas fa-arrow-left me-1"></i> Quay lại
+                        </button>
+                        <button id="btnStep2" class="btn-primary-custom flex-grow-1" style="padding: 12px 20px;">
+                            <i class="fas fa-pen-nib me-2"></i>BƯỚC 2: TẠO KỊCH BẢN
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
+</div>
 
-    <!-- Right Column: Outputs -->
-    <div class="col-lg-7">
-        <!-- Placeholder when no result -->
-        <div id="resultPlaceholder" class="card prompt-card h-100 border-dashed d-flex align-items-center justify-content-center p-5 text-center text-muted">
-            <div>
-                <i class="fas fa-headphones-simple fa-3x mb-3 text-muted" style="opacity: 0.5;"></i>
-                <h5>Chưa có truyện nào được tạo</h5>
-                <p class="small mb-0">Hãy nhập ý tưởng bên trái và bấm nút để bắt đầu sản xuất truyện audio.</p>
+<!-- ═══════════ STEP 3: Review Script → Synthesize Audio ═══════════ -->
+<div class="step-panel" id="step3Panel">
+    <div class="row g-4">
+        <div class="col-lg-6">
+            <div class="card prompt-card h-100">
+                <div class="card-body p-4 d-flex flex-column">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h5 class="panel-title m-0"><i class="fas fa-file-alt"></i> Kịch bản truyện</h5>
+                        <button id="copyScriptBtn" class="btn btn-outline-primary btn-sm"><i class="fas fa-copy"></i> Sao chép</button>
+                    </div>
+                    <p class="text-muted small mb-2">Chỉnh sửa kịch bản nếu muốn, rồi bấm thu âm.</p>
+                    <textarea id="storyScript" class="form-control flex-grow-1" rows="16" style="font-size: 0.92rem; line-height: 1.6;"></textarea>
+                </div>
             </div>
         </div>
+        <div class="col-lg-6 d-flex flex-column gap-4">
+            <!-- AI Recommendation Card -->
+            <div class="card prompt-card">
+                <div class="card-body p-3">
+                    <h6 class="fw-bold small mb-2"><i class="fas fa-robot text-primary"></i> AI phân tích</h6>
+                    <p class="small mb-2"><strong>Tiêu đề:</strong> <span id="storyTitle" class="text-primary fw-bold">—</span></p>
+                    <p class="small mb-2"><strong>Giọng đọc:</strong> <span id="voiceLabel" class="recommendation-badge">—</span></p>
+                    <p class="small mb-2"><strong>Tốc độ:</strong> <span id="rateBadge" class="voice-badge">—</span></p>
+                    <p class="small mb-0 text-muted" id="voiceReason">—</p>
+                </div>
+            </div>
 
-        <!-- Result Content (Hidden initially) -->
-        <div id="resultContainer" class="d-none d-flex flex-column gap-4">
-            <!-- AI Audio Player Card -->
-            <div class="card audio-card">
-                <div class="card-body p-4">
-                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
-                        <div>
-                            <span class="recommendation-badge mb-2" id="voiceTypeBadge">
-                                <i class="fas fa-microphone-alt"></i> Giọng Nữ (Hoài My)
-                            </span>
-                            <h4 class="fw-bold m-0 text-white" id="storyTitle">Tên câu chuyện</h4>
+            <!-- Manual Override for this step -->
+            <div class="card bg-light border-0">
+                <div class="card-body p-3">
+                    <h6 class="fw-bold small mb-2"><i class="fas fa-sliders-h"></i> Ghi đè giọng đọc (tuỳ chọn)</h6>
+                    <div class="row g-2">
+                        <div class="col-7">
+                            <select id="finalVoice" class="form-select form-select-sm">
+                                <option value="auto" selected>Dùng AI gợi ý</option>
+                                <option value="vi-VN-HoaiMyNeural">Hoài My (Nữ)</option>
+                                <option value="vi-VN-NamMinhNeural">Nam Minh (Nam)</option>
+                            </select>
                         </div>
-                        <div class="small text-white-50 text-end" style="max-width: 300px;">
-                            <span class="voice-badge" id="rateBadge">Tốc độ: Normal</span>
+                        <div class="col-5">
+                            <select id="finalRate" class="form-select form-select-sm">
+                                <option value="auto" selected>AI chọn</option>
+                                <option value="-15%">-15%</option>
+                                <option value="-8%">-8%</option>
+                                <option value="+0%">+0%</option>
+                                <option value="+5%">+5%</option>
+                            </select>
                         </div>
                     </div>
-                    
-                    <p class="small text-white-50 mb-3" id="voiceReason">
-                        Lý do lựa chọn: Câu chuyện mang âm hưởng trầm lắng, thích hợp với chất giọng nữ trầm ấm...
-                    </p>
+                </div>
+            </div>
 
-                    <!-- Player -->
+            <!-- Audio Result (Hidden until synthesized) -->
+            <div id="audioResultCard" class="card audio-card d-none">
+                <div class="card-body p-4">
+                    <h5 class="fw-bold text-white mb-2" id="audioTitle">🎧 Truyện Audio</h5>
                     <div class="audio-player-custom">
                         <audio id="audioPlayer" controls></audio>
                     </div>
-
-                    <!-- Audio Actions -->
                     <div class="d-flex gap-2 mt-3">
                         <a id="downloadAudioBtn" href="#" download class="btn btn-light btn-sm flex-grow-1 fw-bold">
-                            <i class="fas fa-download me-1"></i> Tải về file Audio (MP3)
+                            <i class="fas fa-download me-1"></i> Tải MP3
                         </a>
                         <button id="reSynthesizeBtn" class="btn btn-outline-light btn-sm flex-grow-1 fw-bold">
-                            <i class="fas fa-sync-alt me-1"></i> Đọc lại (Nếu sửa kịch bản dưới)
+                            <i class="fas fa-sync-alt me-1"></i> Đọc lại
                         </button>
                     </div>
                 </div>
             </div>
 
-            <!-- Narration Script Card -->
-            <div class="card prompt-card">
-                <div class="card-body p-4">
-                    <div class="d-flex justify-content-between align-items-center mb-3">
-                        <h5 class="panel-title m-0"><i class="fas fa-file-alt"></i> Kịch bản phát thoại (Bản viết)</h5>
-                        <button id="copyScriptBtn" class="btn btn-outline-primary btn-sm">
-                            <i class="fas fa-copy"></i> Sao chép văn bản
-                        </button>
-                    </div>
-                    <p class="text-muted small mb-3">Bạn có thể chỉnh sửa trực tiếp nội dung dưới đây và nhấn nút <strong>"Đọc lại"</strong> ở trên để thu âm lại theo kịch bản mới.</p>
-                    <textarea id="storyScript" class="form-control" rows="12" style="font-family: var(--font-monospace); font-size: 0.95rem; line-height: 1.6; border-radius: var(--radius-md);"></textarea>
-                </div>
+            <div class="step-nav-bar">
+                <button id="btnBack2" class="btn btn-outline-secondary flex-grow-1">
+                    <i class="fas fa-arrow-left me-1"></i> Quay lại
+                </button>
+                <button id="btnStep3" class="btn-primary-custom flex-grow-1" style="padding: 12px 20px;">
+                    <i class="fas fa-headphones me-2"></i>BƯỚC 3: THU ÂM
+                </button>
             </div>
         </div>
     </div>
@@ -216,10 +443,11 @@
 
 {% block scripts %}
 <script>
+    // ── State ──
     let geminiModelList = [];
-    let activeModel = '';
+    let scriptData = {}; // Holds title, suggested_voice, rate, reason from step 2
 
-    // Load models list
+    // ── Model Loading ──
     async function loadModels() {
         try {
             const res = await fetch('/api/gemini-models');
@@ -229,188 +457,216 @@
             geminiModelList.forEach(m => {
                 const opt = document.createElement('option');
                 opt.value = m.id;
-                const quotaText = m.remaining > 0
-                    ? `✓ Còn ${m.remaining}`
-                    : `✗ Hết (${m.used}/${m.rpd})`;
-                opt.textContent = `${m.name} (${quotaText})`;
+                const q = m.remaining > 0 ? `✓ Còn ${m.remaining}` : `✗ Hết`;
+                opt.textContent = `${m.name} — ${q}`;
                 if (m.remaining === 0) opt.disabled = true;
                 sel.appendChild(opt);
             });
-            updateModelQuota();
-        } catch(e) {
-            console.error('Lỗi tải danh mục model:', e);
-        }
+            updateQuota();
+        } catch(e) { console.error(e); }
     }
-
-    function updateModelQuota() {
-        const sel = document.getElementById('geminiModel');
-        const chosen = geminiModelList.find(m => m.id === sel.value);
+    function updateQuota() {
+        const m = geminiModelList.find(x => x.id === document.getElementById('geminiModel').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}</strong> request</span>`
-                : `<span style="color: #dc3545"><i class="fas fa-exclamation-triangle"></i> Đã hết quota</span>`;
-            el.innerHTML = status;
+        if (m) {
+            el.innerHTML = m.remaining > 0
+                ? `<span style="color:var(--color-primary)"><i class="fas fa-check-circle"></i> Còn <b>${m.remaining}</b> request hôm nay</span>`
+                : `<span style="color:#dc3545"><i class="fas fa-times-circle"></i> Đã hết quota</span>`;
         }
     }
-
-    document.getElementById('geminiModel').addEventListener('change', updateModelQuota);
+    document.getElementById('geminiModel').addEventListener('change', updateQuota);
     loadModels();
 
+    // ── Step Navigation ──
+    let currentStep = 1;
+    function goToStep(n) {
+        // Hide all panels
+        document.querySelectorAll('.step-panel').forEach(p => p.classList.remove('active'));
+        document.getElementById(`step${n}Panel`).classList.add('active');
+
+        // Update indicators
+        for (let i = 1; i <= 3; i++) {
+            const ind = document.getElementById(`stepIndicator${i}`);
+            ind.classList.remove('active', 'done');
+            if (i < n) ind.classList.add('done');
+            else if (i === n) ind.classList.add('active');
+        }
+        // Connectors
+        document.getElementById('connector1').className = 'step-connector' + (n > 1 ? ' done' : '');
+        document.getElementById('connector2').className = 'step-connector' + (n > 2 ? ' done' : '');
+
+        currentStep = n;
+        clearError();
+    }
+
+    // ── Error Handling ──
     function showError(msg) {
-        const area = document.getElementById('errorArea');
         document.getElementById('errorMsg').textContent = msg;
-        area.classList.remove('d-none');
+        document.getElementById('errorArea').classList.remove('d-none');
     }
-
     function clearError() {
         document.getElementById('errorArea').classList.add('d-none');
     }
 
-    let generatedScriptDetails = null;
-
-    // Generate Action
-    document.getElementById('generateBtn').addEventListener('click', async () => {
+    // ── STEP 1: Generate Prompt ──
+    document.getElementById('btnStep1').addEventListener('click', async () => {
         const idea = document.getElementById('storyIdea').value.trim();
-        if (!idea) {
-            showError('Vui lòng nhập ý tưởng/concept truyện của bạn!');
-            return;
-        }
+        if (!idea) { showError('Vui lòng nhập ý tưởng truyện!'); return; }
 
         const loader = document.getElementById('loaderOverlay');
-        const loaderText = document.getElementById('loaderText');
-        loaderText.textContent = 'Đang dùng Gemini viết kịch bản truyện audio...';
+        document.getElementById('loaderText').textContent = 'Bước 1/3 — Đang sinh prompt tối ưu từ ý tưởng...';
         loader.style.display = 'flex';
         clearError();
 
         try {
-            // Step 1: Generate Script and Settings via Gemini
-            const model_id = document.getElementById('geminiModel').value;
-            const res = await fetch('/api/audio-story-studio/generate', {
+            const payload = {
+                idea: idea,
+                genre: document.getElementById('cfgGenre').value,
+                style: document.getElementById('cfgStyle').value,
+                mood: document.getElementById('cfgMood').value,
+                length: document.getElementById('cfgLength').value,
+                audience: document.getElementById('cfgAudience').value,
+                extras: document.getElementById('cfgExtras').value,
+                gemini_model: document.getElementById('geminiModel').value
+            };
+            const res = await fetch('/api/audio-story-studio/create-prompt', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ prompt: idea, gemini_model: model_id })
+                body: JSON.stringify(payload)
             });
             const data = await res.json();
-            
             if (data.error || !data.success) {
-                showError(data.error || 'Lỗi khi tạo kịch bản.');
-                loader.style.display = 'none';
+                showError(data.error || 'Lỗi tạo prompt.');
                 return;
             }
 
-            generatedScriptDetails = data;
-            
-            // Populate fields in UI
-            document.getElementById('storyTitle').textContent = data.title;
-            document.getElementById('storyScript').value = data.script;
-            document.getElementById('voiceReason').textContent = `AI khuyến nghị: ${data.reason}`;
+            document.getElementById('optimizedPrompt').value = data.optimized_prompt;
+            goToStep(2);
+            await loadModels();
+        } catch(e) {
+            showError('Lỗi kết nối. Vui lòng thử lại.');
+        } finally {
+            loader.style.display = 'none';
+        }
+    });
 
-            // Determine voice to use (Auto or manual override)
-            let voiceToUse = document.getElementById('manualVoice').value;
-            if (voiceToUse === 'auto') {
-                voiceToUse = data.suggested_voice || 'vi-VN-HoaiMyNeural';
-            }
-            
-            let rateToUse = document.getElementById('manualRate').value;
-            if (rateToUse === 'auto') {
-                rateToUse = data.rate || '+0%';
+    // ── STEP 2: Generate Script ──
+    document.getElementById('btnStep2').addEventListener('click', async () => {
+        const prompt = document.getElementById('optimizedPrompt').value.trim();
+        if (!prompt) { showError('Prompt đang trống!'); return; }
+
+        const loader = document.getElementById('loaderOverlay');
+        document.getElementById('loaderText').textContent = 'Bước 2/3 — Đang viết kịch bản truyện audio...';
+        loader.style.display = 'flex';
+        clearError();
+
+        try {
+            const res = await fetch('/api/audio-story-studio/create-script', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    prompt: prompt,
+                    gemini_model: document.getElementById('geminiModel').value
+                })
+            });
+            const data = await res.json();
+            if (data.error || !data.success) {
+                showError(data.error || 'Lỗi tạo kịch bản.');
+                return;
             }
 
-            // Update badge info
-            const voiceLabel = voiceToUse === 'vi-VN-HoaiMyNeural' ? 'Giọng Nữ (Hoài My)' : 'Giọng Nam (Nam Minh)';
-            document.getElementById('voiceTypeBadge').innerHTML = `<i class="fas fa-microphone-alt"></i> ${voiceLabel}`;
-            document.getElementById('rateBadge').textContent = `Tốc độ: ${rateToUse}`;
+            scriptData = data;
+            document.getElementById('storyScript').value = data.script;
+            document.getElementById('storyTitle').textContent = data.title;
 
-            // Step 2: Synthesize audio automatically
-            loaderText.textContent = 'Đang chuyển đổi kịch bản thành giọng đọc trí tuệ nhân tạo...';
-            await runSynthesis(data.script, voiceToUse, rateToUse);
+            // Voice label
+            const vl = data.suggested_voice === 'vi-VN-HoaiMyNeural' ? '🎙 Hoài My (Nữ)' : '🎙 Nam Minh (Nam)';
+            document.getElementById('voiceLabel').textContent = vl;
+            document.getElementById('rateBadge').textContent = `Tốc độ: ${data.rate || '+0%'}`;
+            document.getElementById('voiceReason').textContent = data.reason || '';
 
-            // Show results
-            document.getElementById('resultPlaceholder').classList.add('d-none');
-            document.getElementById('resultContainer').classList.remove('d-none');
+            goToStep(3);
             await loadModels();
         } catch(e) {
-            showError('Đã xảy ra lỗi kết nối. Hãy thử lại.');
+            showError('Lỗi kết nối. Vui lòng thử lại.');
         } finally {
             loader.style.display = 'none';
         }
     });
 
-    // Synthesize function
-    async function runSynthesis(script, voice, rate) {
-        const res = await fetch('/api/audio-story-studio/synthesize', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ script: script, voice: voice, rate: rate })
-        });
-        const data = await res.json();
-        
-        if (data.error || !data.success) {
-            throw new Error(data.error || 'Lỗi khi tổng hợp âm thanh.');
+    // ── STEP 3: Synthesize Audio ──
+    async function doSynthesize() {
+        const script = document.getElementById('storyScript').value.trim();
+        if (!script) { showError('Kịch bản đang trống!'); return; }
+
+        // Determine voice
+        let voice = document.getElementById('finalVoice').value;
+        if (voice === 'auto') {
+            voice = document.getElementById('manualVoice').value;
+            if (voice === 'auto') {
+                voice = (scriptData && scriptData.suggested_voice) || 'vi-VN-HoaiMyNeural';
+            }
         }
 
-        const audioUrl = data.audio_url;
-        const player = document.getElementById('audioPlayer');
-        player.src = audioUrl;
-        player.load();
-        
-        const downloadBtn = document.getElementById('downloadAudioBtn');
-        downloadBtn.href = audioUrl;
-    }
-
-    // Re-synthesize button (manual trigger after script edit)
-    document.getElementById('reSynthesizeBtn').addEventListener('click', async () => {
-        const script = document.getElementById('storyScript').value.trim();
-        if (!script) {
-            showError('Kịch bản đang trống!');
-            return;
+        let rate = document.getElementById('finalRate').value;
+        if (rate === 'auto') {
+            rate = document.getElementById('manualRate').value;
+            if (rate === 'auto') {
+                rate = (scriptData && scriptData.rate) || '+0%';
+            }
         }
 
         const loader = document.getElementById('loaderOverlay');
-        const loaderText = document.getElementById('loaderText');
-        loaderText.textContent = 'Đang cập nhật giọng đọc với kịch bản mới...';
+        document.getElementById('loaderText').textContent = 'Bước 3/3 — Đang tổng hợp giọng đọc AI...';
         loader.style.display = 'flex';
         clearError();
 
-        // Get voice & speed
-        let voiceToUse = document.getElementById('manualVoice').value;
-        if (voiceToUse === 'auto') {
-            voiceToUse = (generatedScriptDetails && generatedScriptDetails.suggested_voice) || 'vi-VN-HoaiMyNeural';
-        }
-        
-        let rateToUse = document.getElementById('manualRate').value;
-        if (rateToUse === 'auto') {
-            rateToUse = (generatedScriptDetails && generatedScriptDetails.rate) || '+0%';
-        }
-
         try {
-            await runSynthesis(script, voiceToUse, rateToUse);
-            
-            // Play audio automatically after synthesis
-            document.getElementById('audioPlayer').play();
+            const res = await fetch('/api/audio-story-studio/synthesize', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ script, voice, rate })
+            });
+            const data = await res.json();
+            if (data.error || !data.success) {
+                showError(data.error || 'Lỗi thu âm.');
+                return;
+            }
+
+            const player = document.getElementById('audioPlayer');
+            player.src = data.audio_url;
+            player.load();
+            document.getElementById('downloadAudioBtn').href = data.audio_url;
+            document.getElementById('audioTitle').textContent = `🎧 ${scriptData.title || 'Truyện Audio'}`;
+            document.getElementById('audioResultCard').classList.remove('d-none');
         } catch(e) {
-            showError(e.message || 'Lỗi khi dịch giọng đọc.');
+            showError('Lỗi kết nối khi thu âm.');
         } finally {
             loader.style.display = 'none';
         }
-    });
+    }
 
-    // Copy Script
-    document.getElementById('copyScriptBtn').addEventListener('click', () => {
-        const text = document.getElementById('storyScript').value;
-        if (!text) return;
-        
-        navigator.clipboard.writeText(text).then(() => {
-            const btn = document.getElementById('copyScriptBtn');
-            const originalHTML = btn.innerHTML;
-            btn.innerHTML = '<i class="fas fa-check"></i> Đã sao chép!';
-            setTimeout(() => {
-                btn.innerHTML = originalHTML;
-            }, 2000);
-        }).catch(err => {
-            showError('Không thể copy tự động.');
+    document.getElementById('btnStep3').addEventListener('click', doSynthesize);
+    document.getElementById('reSynthesizeBtn').addEventListener('click', doSynthesize);
+
+    // ── Back Buttons ──
+    document.getElementById('btnBack1').addEventListener('click', () => goToStep(1));
+    document.getElementById('btnBack2').addEventListener('click', () => goToStep(2));
+
+    // ── Copy Buttons ──
+    function copyBtn(textElId, btnElId) {
+        document.getElementById(btnElId).addEventListener('click', () => {
+            const text = document.getElementById(textElId).value;
+            if (!text) return;
+            navigator.clipboard.writeText(text).then(() => {
+                const btn = document.getElementById(btnElId);
+                const orig = btn.innerHTML;
+                btn.innerHTML = '<i class="fas fa-check"></i> Đã sao chép!';
+                setTimeout(() => btn.innerHTML = orig, 2000);
+            });
         });
-    });
+    }
+    copyBtn('optimizedPrompt', 'copyPromptBtn');
+    copyBtn('storyScript', 'copyScriptBtn');
 </script>
 {% endblock %}