{% extends "base.html" %}

{% block title %}图片生成测试{% endblock %}

{% block content %}
<div style="max-width: 800px; margin: 0 auto; padding: 20px;">
    <h2 style="text-align: center; color: #2c3e50; margin-bottom: 30px;">🎨 AI图片生成测试</h2>
    
    <!-- 提供者状态 -->
    <div id="provider-status" style="margin-bottom: 30px;">
        <h3>提供者状态</h3>
        <div id="status-cards" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
            <!-- 状态卡片将通过JavaScript动态生成 -->
        </div>
    </div>
    
    <!-- 图片生成表单 -->
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px;">
        <h3 style="margin-bottom: 20px;">生成图片</h3>
        
        <form id="generation-form">
            <!-- 提示词输入 -->
            <div style="margin-bottom: 20px;">
                <label for="prompt" style="display: block; margin-bottom: 8px; font-weight: bold;">提示词：</label>
                <textarea id="prompt" name="prompt" rows="3" 
                         style="width: 100%; padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 14px;"
                         placeholder="描述您想要生成的图片..."></textarea>
            </div>
            
            <!-- 提供者选择 -->
            <div style="margin-bottom: 20px;">
                <label for="provider" style="display: block; margin-bottom: 8px; font-weight: bold;">AI提供者：</label>
                <select id="provider" name="provider" 
                        style="width: 100%; padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 14px;">
                    <option value="">选择提供者...</option>
                    <option value="dalle">DALL-E</option>
                    <option value="stable_diffusion">Stable Diffusion</option>
                    <option value="siliconflow">SiliconFlow (Kolors)</option>
                </select>
            </div>
            
            <!-- 尺寸选择 -->
            <div style="margin-bottom: 20px;">
                <label for="size" style="display: block; margin-bottom: 8px; font-weight: bold;">图片尺寸：</label>
                <select id="size" name="size" 
                        style="width: 100%; padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 14px;">
                    <option value="1024x1024">1024x1024 (正方形)</option>
                    <option value="1792x1024">1792x1024 (16:9横向)</option>
                    <option value="1024x1792">1024x1792 (9:16竖向)</option>
                </select>
            </div>
            
            <!-- 生成按钮 -->
            <button type="submit" id="generate-btn"
                    style="width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                           color: white; border: none; padding: 15px; border-radius: 8px; 
                           font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease;">
                🎨 生成图片
            </button>
        </form>
    </div>
    
    <!-- 生成进度 -->
    <div id="generation-progress" style="display: none; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px;">
        <div style="text-align: center;">
            <div style="font-size: 2em; margin-bottom: 15px;">⏳</div>
            <div id="progress-text">正在生成图片，请稍候...</div>
            <div style="width: 100%; background: #f0f0f0; border-radius: 10px; margin-top: 15px; overflow: hidden;">
                <div id="progress-bar" style="width: 0%; height: 8px; background: linear-gradient(90deg, #667eea, #764ba2); transition: width 0.3s ease;"></div>
            </div>
        </div>
    </div>
    
    <!-- 生成结果 -->
    <div id="generation-result" style="display: none; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <h3 style="margin-bottom: 20px;">生成结果</h3>
        <div id="result-content">
            <!-- 结果内容将通过JavaScript动态生成 -->
        </div>
    </div>
</div>

<script>
// 页面加载时获取提供者状态
document.addEventListener('DOMContentLoaded', function() {
    loadProviderStatus();
});

// 加载提供者状态
async function loadProviderStatus() {
    try {
        const response = await fetch('/api/image/status');
        const data = await response.json();
        
        const statusCards = document.getElementById('status-cards');
        statusCards.innerHTML = '';
        
        // 创建状态卡片
        const providers = [
            { key: 'dalle', name: 'DALL-E', icon: '🎨' },
            { key: 'stable_diffusion', name: 'Stable Diffusion', icon: '🖼️' },
            { key: 'siliconflow', name: 'SiliconFlow', icon: '⚡' }
        ];
        
        providers.forEach(provider => {
            const isAvailable = data.available_providers.includes(provider.key);
            const card = document.createElement('div');
            card.style.cssText = `
                background: ${isAvailable ? '#d4edda' : '#f8d7da'};
                border: 2px solid ${isAvailable ? '#c3e6cb' : '#f5c6cb'};
                border-radius: 8px;
                padding: 15px;
                text-align: center;
            `;
            
            card.innerHTML = `
                <div style="font-size: 2em; margin-bottom: 10px;">${provider.icon}</div>
                <div style="font-weight: bold; margin-bottom: 5px;">${provider.name}</div>
                <div style="color: ${isAvailable ? '#155724' : '#721c24'}; font-size: 0.9em;">
                    ${isAvailable ? '✅ 可用' : '❌ 未配置'}
                </div>
            `;
            
            statusCards.appendChild(card);
        });
        
    } catch (error) {
        console.error('Failed to load provider status:', error);
    }
}

// 处理表单提交
document.getElementById('generation-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const prompt = formData.get('prompt');
    const provider = formData.get('provider');
    const size = formData.get('size');
    
    if (!prompt.trim()) {
        alert('请输入提示词');
        return;
    }
    
    if (!provider) {
        alert('请选择AI提供者');
        return;
    }
    
    // 显示进度
    showProgress();
    
    try {
        const response = await fetch('/api/image/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                prompt: prompt,
                provider: provider,
                size: size
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showResult(data, prompt, provider);
        } else {
            showError(data.message || '生成失败');
        }
        
    } catch (error) {
        console.error('Generation failed:', error);
        showError('生成失败: ' + error.message);
    } finally {
        hideProgress();
    }
});

// 显示进度
function showProgress() {
    document.getElementById('generation-progress').style.display = 'block';
    document.getElementById('generation-result').style.display = 'none';
    document.getElementById('generate-btn').disabled = true;
    document.getElementById('generate-btn').textContent = '生成中...';
    
    // 模拟进度条动画
    let progress = 0;
    const progressBar = document.getElementById('progress-bar');
    const interval = setInterval(() => {
        progress += Math.random() * 10;
        if (progress > 90) progress = 90;
        progressBar.style.width = progress + '%';
    }, 500);
    
    // 存储interval以便后续清理
    window.progressInterval = interval;
}

// 隐藏进度
function hideProgress() {
    document.getElementById('generation-progress').style.display = 'none';
    document.getElementById('generate-btn').disabled = false;
    document.getElementById('generate-btn').textContent = '🎨 生成图片';
    
    if (window.progressInterval) {
        clearInterval(window.progressInterval);
    }
}

// 显示结果
function showResult(data, prompt, provider) {
    const resultDiv = document.getElementById('generation-result');
    const resultContent = document.getElementById('result-content');
    
    resultContent.innerHTML = `
        <div style="margin-bottom: 20px;">
            <strong>提示词：</strong> ${prompt}<br>
            <strong>提供者：</strong> ${provider}<br>
            <strong>状态：</strong> <span style="color: #28a745;">✅ 生成成功</span>
        </div>
        <div style="text-align: center;">
            <img src="${data.image_path}" alt="Generated Image" 
                 style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
        </div>
        <div style="margin-top: 20px; text-align: center;">
            <a href="${data.image_path}" download style="background: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">
                📥 下载图片
            </a>
        </div>
    `;
    
    resultDiv.style.display = 'block';
}

// 显示错误
function showError(message) {
    const resultDiv = document.getElementById('generation-result');
    const resultContent = document.getElementById('result-content');
    
    resultContent.innerHTML = `
        <div style="background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 15px; border-radius: 5px; text-align: center;">
            <strong>❌ 生成失败</strong><br>
            ${message}
        </div>
    `;
    
    resultDiv.style.display = 'block';
}
</script>
{% endblock %}