2025.10.16故事生成系统（Web界面与集成测试）

第6天：Web界面与集成测试

📋 第6天概述

构建完整的Web界面，实现三大功能模块集成，并进行系统集成测试。

🎯 第6天目标

主要任务：开发用户友好的Web界面，实现功能集成和测试
核心需求：响应式设计、功能整合、用户体验优化

🔧 核心代码实现

主界面布局

<!DOCTYPE html>
<html>
<head>
    <title>儿童故事生成平台</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <header>
        <h1>🧚‍♀️ 儿童故事魔法工厂</h1>
    </header>
    
    <main>
        <!-- 故事生成区域 -->
        <section class="story-section">
            <h2>📖 故事生成</h2>
            <textarea id="prompt" placeholder="输入故事主题..."></textarea>
            <button onclick="generateStory()">生成故事</button>
            <div id="storyResult"></div>
        </section>
        
        <!-- 图片生成区域 -->
        <section class="image-section">
            <h2>🎨 插图生成</h2>
            <button onclick="generateImage()">生成插图</button>
            <div id="imageResult"></div>
        </section>
        
        <!-- 语音合成区域 -->
        <section class="voice-section">
            <h2>🔊 语音合成</h2>
            <select id="voiceStyle">
                <option value="甜美女声">甜美女声</option>
            </select>
            <button onclick="synthesizeVoice()">合成语音</button>
            <audio id="audioPlayer" controls></audio>
        </section>
    </main>
    
    <script src="/static/js/main.js"></script>
</body>
</html>

JavaScript集成逻辑

// 故事生成
async function generateStory() {
    const prompt = document.getElementById('prompt').value;
    const response = await fetch('/api/story/generate', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({prompt})
    });
    
    const result = await response.json();
    document.getElementById('storyResult').innerHTML = result.story;
}

// 图片生成
async function generateImage() {
    const story = document.getElementById('storyResult').innerText;
    const response = await fetch('/api/image/generate', {
        method: 'POST',
        body: JSON.stringify({text: story})
    });
    
    const result = await response.json();
    document.getElementById('imageResult').innerHTML = 
        `<img src="/uploads/${result.filename}" alt="故事插图">`;
}

// 语音合成
async function synthesizeVoice() {
    const story = document.getElementById('storyResult').innerText;
    const voiceStyle = document.getElementById('voiceStyle').value;
    
    const response = await fetch('/api/voice/synthesize', {
        method: 'POST',
        body: JSON.stringify({text: story, voice_style: voiceStyle})
    });
    
    const result = await response.json();
    document.getElementById('audioPlayer').src = 
        `/uploads/${result.filename}`;
}

集成测试脚本

import requests
import json

def test_integration():
    """集成测试：完整工作流测试"""
    base_url = "http://localhost:5000"
    
    # 1. 故事生成测试
    story_response = requests.post(f"{base_url}/api/story/generate", 
        json={"prompt": "小兔子找胡萝卜"})
    
    # 2. 图片生成测试
    image_response = requests.post(f"{base_url}/api/image/generate",
        json={"text": story_response.json()['story']})
    
    # 3. 语音合成测试
    voice_response = requests.post(f"{base_url}/api/voice/synthesize",
        json={"text": story_response.json()['story']})
    
    # 验证所有服务正常
    assert story_response.status_code == 200
    assert image_response.status_code == 200
    assert voice_response.status_code == 200
    
    print("✅ 集成测试通过！")

if __name__ == "__main__":
    test_integration()

📊 第6天成果

✅ 完整的Web界面开发
✅ 三大功能模块集成
✅ 集成测试脚本编写
✅ 用户体验优化

预计耗时：5-7小时
关键文件：templates/index.html, static/js/main.js, test_integration.py

posted @ 2025-12-28 23:14  ysd666  阅读(7)  评论(0)    收藏  举报