210 lines
9.7 KiB
JavaScript
210 lines
9.7 KiB
JavaScript
/**
|
||
* 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());
|
||
}
|
||
|
||
/**
|
||
* 处理编辑表单提交
|
||
*/
|
||
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 = '<i class="fa fa-spinner fa-spin text-white text-4xl"></i>';
|
||
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<Object>} - 编辑结果
|
||
*/
|
||
async editImage(imageUrl, prompt, size, style) {
|
||
try {
|
||
const response = await axios.post(this.editUrl, {
|
||
image_url: imageUrl,
|
||
prompt: prompt,
|
||
size: size,
|
||
style: style
|
||
});
|
||
|
||
if (response.data.code !== 200) {
|
||
throw new Error(response.data.message || '编辑接口返回错误');
|
||
}
|
||
|
||
return response.data.data;
|
||
} catch (error) {
|
||
console.error('图片编辑失败:', error);
|
||
throw error.response?.data || { message: '网络请求失败，请重试' };
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 渲染示例区域
|
||
*/
|
||
renderExamples() {
|
||
// 统一示例数据结构
|
||
const exampleGroups = [
|
||
{
|
||
id: 'bearExamples',
|
||
title: '小熊系列',
|
||
originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999719.png',
|
||
examples: [
|
||
{
|
||
prompt: '这只熊拿着五彩画板和画笔，站在画板前画画',
|
||
resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999625.png'
|
||
},
|
||
{
|
||
prompt: '这只熊站在白色背景前，手里拿着锅铲，旁边有蔬菜和调料',
|
||
resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999626.png'
|
||
},
|
||
{
|
||
prompt: '这只熊坐在地上，怀里抱着一把吉他，手指拨动琴弦',
|
||
resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999628.png'
|
||
},
|
||
{
|
||
prompt: '这只熊穿着燕尾服，戴着魔术帽，手里拿着魔术棒，做出表演魔术的动作',
|
||
resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999629.png'
|
||
},
|
||
{
|
||
prompt: '这只熊穿着运动服，手里拿着篮球，单腿弯曲',
|
||
resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999630.png'
|
||
},
|
||
{
|
||
prompt: '这只熊戴着草帽，手里拿着花洒和小铲子，正在浇水或种植植物',
|
||
resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999631.png'
|
||
},
|
||
// 添加缺失的5个示例
|
||
{prompt: '这只熊穿着宇航服，伸出手指向远方', resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999632.png'},
|
||
{prompt: '这只熊穿着华丽的舞裙，双臂展开，做出优雅的舞蹈动作', resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999633.png'},
|
||
{prompt: '把背景改成草原', resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000045.png'},
|
||
{prompt: '给它戴上红色帽子和黑色墨镜', resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000051.png'},
|
||
{prompt: '改成梵高油画风格', resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000061.png'}
|
||
]
|
||
},
|
||
{
|
||
id: 'hanfuExamples',
|
||
title: '霓裳汉服社系列',
|
||
originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000025.png',
|
||
examples: [
|
||
{
|
||
prompt: '把“霓裳汉服社”改成“通义实验室”',
|
||
resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000026.png'
|
||
},
|
||
{
|
||
prompt: '把“活动全程免费”改为“只给学生打折”',
|
||
resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000027.png'
|
||
},
|
||
{
|
||
prompt: '把女人改成穿汉服的男人',
|
||
resultImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000028.png'
|
||
}
|
||
]
|
||
}
|
||
];
|
||
|
||
// 渲染每个系列的示例
|
||
exampleGroups.forEach(group => {
|
||
const container = document.getElementById(group.id);
|
||
if (!container) return;
|
||
|
||
group.examples.forEach(example => {
|
||
container.appendChild(this.createExampleCard(
|
||
group.originalImage,
|
||
example.prompt,
|
||
example.resultImage
|
||
));
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 创建示例卡片
|
||
* @param {string} originalImage - 原始图片URL
|
||
* @param {string} prompt - 编辑提示词
|
||
* @param {string} resultImage - 结果图片URL
|
||
* @returns {HTMLElement} - 卡片元素
|
||
*/
|
||
createExampleCard(originalImage, prompt, resultImage) {
|
||
const card = document.createElement('div');
|
||
card.className = 'example-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer';
|
||
card.innerHTML = `
|
||
<div class="aspect-square overflow-hidden bg-gray-100 dark:bg-gray-900">
|
||
<img src="${resultImage}" alt="${prompt.substring(0, 20)}..." class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
||
</div>
|
||
<div class="p-4">
|
||
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">${prompt}</p>
|
||
</div>
|
||
`;
|
||
|
||
// 点击事件 - 加载原图和填充表单
|
||
card.addEventListener('click', () => {
|
||
// 填充表单
|
||
document.getElementById('imageUrl').value = originalImage;
|
||
document.getElementById('editPrompt').value = prompt;
|
||
|
||
// 更新原始图片预览
|
||
const originalImageElement = document.getElementById('originalImage');
|
||
const originalImagePlaceholder = document.getElementById('originalImagePlaceholder');
|
||
originalImageElement.src = originalImage;
|
||
originalImageElement.classList.remove('hidden');
|
||
originalImagePlaceholder.classList.add('hidden');
|
||
|
||
// 添加选中效果
|
||
document.querySelectorAll('.example-card').forEach(c => c.classList.remove('ring-2', 'ring-primary'));
|
||
card.classList.add('ring-2', 'ring-primary');
|
||
});
|
||
|
||
return card;
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', () => new QwenImageEditor()); |