/**
* Qwen Image Editor API 封装
* 参考 qwen-image.js 的实现风格
*/
class QwenImageEditor {
constructor() {
this.baseUrl = '/api/qwenImage';
this.editUrl = `${this.baseUrl}/edit`;
this.initEventListeners();
// 初始化时渲染示例
this.renderExamples();
}
/**
* 初始化事件监听
*/
initEventListeners() {
// 移除Layui依赖，使用原生JS实现
document.getElementById('startEditBtn').addEventListener('click', () => this.handleEditSubmit());
// 删除JS动态创建按钮的代码
// 直接绑定静态按钮事件
document.getElementById('randomExampleBtn').addEventListener('click', () => this.handleRandomExample());
}
/**
* 处理编辑表单提交
*/
handleEditSubmit() {
const imageUrl = document.getElementById('imageUrl').value;
const prompt = document.getElementById('editPrompt').value;
const size = document.getElementById('editSize').value;
const style = document.getElementById('editStyle').value;
if (!imageUrl || !prompt) {
alert('图片URL和编辑提示词不能为空');
return;
}
const loadingIndicator = document.createElement('div');
loadingIndicator.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
loadingIndicator.innerHTML = '';
document.body.appendChild(loadingIndicator);
// 显示原始图片
document.getElementById('originalImage').src = imageUrl;
document.getElementById('originalImage').classList.remove('hidden');
document.getElementById('originalImagePlaceholder').classList.add('hidden');
// 调用编辑接口
this.editImage(imageUrl, prompt, size, style)
.then(result => {
document.body.removeChild(loadingIndicator);
document.getElementById('editedImage').src = result.edited_image;
document.getElementById('editedImage').classList.remove('hidden');
document.getElementById('editedImagePlaceholder').classList.add('hidden');
alert('编辑成功');
})
.catch(error => {
document.body.removeChild(loadingIndicator);
alert(`编辑失败: ${error.message || '网络请求错误'}`);
});
}
/**
* 调用图片编辑接口
* @param {string} imageUrl - 原始图片URL
* @param {string} prompt - 编辑提示词
* @param {string} size - 图像尺寸
* @param {string} style - 艺术风格
* @returns {Promise