前端图像生成功能的实现与展示（4）

前端图像生成功能的实现与展示

图像生成功能实现

1. 生成表单设计

<form action="/image" method="post">
    <div class="mb-3">
        <label class="form-label">花艺描述:</label>
        <input type="text" class="form-control" name="prompt" required>
    </div>
    <div class="mb-3">
        <label class="form-label">选择风格:</label>
        <select class="form-select" name="style">
            <option value="chinese">中式风格</option>
            <option value="western">西式风格</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">生成图像</button>
</form>

2. 提交处理逻辑

// 在表单提交处理中
if(generateImageCheckbox.checked) {
    formData.append('generate_image', 'true');
}

fetch('/query', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => {
    if(data.image_url) {
        showGeneratedImage(data.image_url);
    }
});

图像展示实现

1. 基本展示

<div class="card-body text-center">
    <img src="{{ result.image_url }}" 
         alt="Generated floral image" 
         class="img-fluid"
         onerror="this.onerror=null;this.src='/static/images/placeholder.jpg';">
</div>

2. 加载状态处理

function showGeneratedImage(url) {
    const img = new Image();
    img.onload = () => {
        document.getElementById('response-image').src = url;
        document.getElementById('image-container').classList.remove('d-none');
    };
    img.onerror = () => {
        showError('图像加载失败');
    };
    img.src = url;
}

技术难点与优化

1. 生成时间优化

• 添加加载动画
• 实现进度查询接口

2. 质量提升方案

• 前端提示词优化建议
• 多结果选择

3. 错误处理

// 超时处理
const timeout = setTimeout(() => {
    showWarning('图像生成时间较长，请稍候...');
}, 5000);

// 清除超时
clearTimeout(timeout);

用户体验提升

1. 历史记录

• 本地存储生成记录
• 快速重新生成

2. 交互优化

• 图像缩放查看
• 下载功能

总结

图像生成功能极大地丰富了花艺设计的表现形式。通过前后端协作优化和细致的用户体验设计，使这一功能成为系统的亮点。