feat: add AI Audio Story Studio tool for prompt-based audiobook synthesis

app.py

@@ -1583,5 +1583,73 @@ def api_prompt_execute():
             'error': _err_msg(str(e))
         }), 500
 
+@app.route('/audio-story-studio')
+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():
+    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
+
+    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."
+    )
+    
+    try:
+        response = client.models.generate_content(
+            model=model_id,
+            contents=prompt,
+            config=types.GenerateContentConfig(
+                system_instruction=system_instruction,
+                response_mime_type="application/json"
+            )
+        )
+        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
+
+@app.route('/api/audio-story-studio/synthesize', methods=['POST'])
+def audio_story_studio_synthesize():
+    import asyncio, edge_tts
+    data = request.json or {}
+    text = data.get('script', '').strip()
+    voice = data.get('voice', 'vi-VN-HoaiMyNeural')
+    rate = data.get('rate', '+0%')
+
+    if not text:
+        return jsonify({'error': 'Vui lòng cung cấp nội dung kịch bản'}), 400
+
+    out_filename = f"audio_story_{os.urandom(4).hex()}.mp3"
+    out_path = os.path.join(app.config['UPLOAD_FOLDER'], out_filename)
+
+    async def _generate():
+        communicate = edge_tts.Communicate(text, voice, rate=rate)
+        await communicate.save(out_path)
+
+    try:
+        asyncio.run(_generate())
+        return jsonify({
+            'success': True,
+            'audio_url': f'/download/{out_filename}',
+            'filename': out_filename
+        })
+    except Exception as e:
+        return jsonify({'error': f"Lỗi chuyển giọng đọc: {str(e)}"}), 500
+
 if __name__ == '__main__':
     app.run(debug=True, port=5000)

requirements.txt

@@ -11,3 +11,6 @@ werkzeug
 gtts
 edge-tts
 vieneu
+moviepy
+replicate
+gradio-client

templates/layout.html

@@ -146,6 +146,9 @@
                 <i class="fas fa-wand-magic-sparkles"></i> Tối ưu Prompt thô
             </a>
         </div>
+        <a class="nav-link {% if request.path.startswith('/audio-story-studio') %}active{% endif %}" href="/audio-story-studio">
+            <i class="fas fa-podcast"></i> AI Audio Story Studio
+        </a>
     </nav>
 </div>
 

templates/tools/audio_story_studio/index.html

@@ -0,0 +1,416 @@
+{% extends "layout.html" %}
+
+{% block title %}AI Audio Story Studio - Pum's Toolkit{% endblock %}
+
+{% block style %}
+<style>
+    .audio-card {
+        background: linear-gradient(135deg, #1e1e2f 0%, #11111d 100%);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: var(--radius-lg);
+        color: #ffffff;
+        position: relative;
+        overflow: hidden;
+    }
+    .audio-card::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
+        pointer-events: 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-radius: 50px;
+        font-size: 0.82rem;
+        font-weight: 600;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+    }
+    .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;
+    }
+    .result-box-custom {
+        background-color: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: var(--radius-md);
+        padding: 15px;
+        max-height: 400px;
+        overflow-y: auto;
+        font-size: 0.95rem;
+        line-height: 1.6;
+        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;
+    }
+</style>
+{% endblock %}
+
+{% 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>
+</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>
+</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>
+                    
+                    <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>
+                    </div>
+
+                    <!-- Model Selection -->
+                    <div class="row g-3 align-items-center mb-4">
+                        <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>
+                            </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>
+                        </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>
+                                    <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>
+                                    </select>
+                                </div>
+                                <div class="col-md-5">
+                                    <label class="form-label small mb-1">Tốc độ (Rate)</label>
+                                    <select id="manualRate" class="form-select form-select-sm">
+                                        <option value="auto" selected>-- Để AI chọn --</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>
+                                    </select>
+                                </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>
+            </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>
+            </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>
+                        </div>
+                        <div class="small text-white-50 text-end" style="max-width: 300px;">
+                            <span class="voice-badge" id="rateBadge">Tốc độ: Normal</span>
+                        </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>
+
+                    <!-- Player -->
+                    <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)
+                        </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)
+                        </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>
+        </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 geminiModelList = [];
+    let activeModel = '';
+
+    // Load models list
+    async function loadModels() {
+        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}`
+                    : `✗ 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('Lỗi tải danh mục 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}</strong> request</span>`
+                : `<span style="color: #dc3545"><i class="fas fa-exclamation-triangle"></i> Đã hết quota</span>`;
+            el.innerHTML = status;
+        }
+    }
+
+    document.getElementById('geminiModel').addEventListener('change', updateModelQuota);
+    loadModels();
+
+    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');
+    }
+
+    let generatedScriptDetails = null;
+
+    // Generate Action
+    document.getElementById('generateBtn').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;
+        }
+
+        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...';
+        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', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt: idea, gemini_model: model_id })
+            });
+            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';
+                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}`;
+
+            // 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%';
+            }
+
+            // 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}`;
+
+            // 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);
+
+            // Show results
+            document.getElementById('resultPlaceholder').classList.add('d-none');
+            document.getElementById('resultContainer').classList.remove('d-none');
+            await loadModels();
+        } catch(e) {
+            showError('Đã xảy ra lỗi kết nối. Hãy 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.');
+        }
+
+        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;
+        }
+
+        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...';
+        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();
+        } catch(e) {
+            showError(e.message || 'Lỗi khi dịch giọng đọc.');
+        } 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.');
+        });
+    });
+</script>
+{% endblock %}