huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-08-27 13:43:55 +08:00
parent 25e4176ed3
commit 612a22c6df
2 changed files with 451 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
dsLightRag/static/QwenImage/qwen-image-edit.html Normal file
View File

@@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QWenImage - 图像编辑工具</title>
<!-- 引入外部资源 -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Tailwind配置 - 从index.html复制 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4338ca',
secondary: '#8b5cf6',
accent: '#ec4899',
dark: '#1e293b',
light: '#f8fafc'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
},
}
}
</script>
<!-- 自定义工具类 - 从index.html复制 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.glass-effect {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.7);
}
.glass-effect-dark {
backdrop-filter: blur(10px);
background-color: rgba(15, 23, 42, 0.7);
}
}
</style>
</head>
<body class="font-inter bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen text-gray-800 dark:text-gray-100 transition-colors duration-300">
<!-- 导航栏 - 从index.html复制 -->
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<nav class="glass-effect dark:glass-effect-dark border-b border-gray-200 dark:border-gray-700 py-4 px-6 md:px-12">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
<i class="fa fa-paint-brush text-white text-xl"></i>
</div>
<h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient">QWenImage</h1>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#generator" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">图像生成</a>
<a href="#edit" class="font-medium text-primary dark:text-primary border-b-2 border-primary pb-1">图像编辑</a>
<a href="#history" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">生成历史</a>
</div>
<div class="flex items-center space-x-4">
<button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<i class="fa fa-sun-o dark:hidden"></i>
<i class="fa fa-moon-o hidden dark:block"></i>
</button>
</div>
</div>
</nav>
</header>
<main class="container mx-auto pt-28 pb-16 px-6 md:px-12">
<!-- 英雄区域 -->
<section class="text-center mb-16 max-w-4xl mx-auto">
<h1 class="text-[clamp(2rem,4vw,3rem)] font-bold mb-6 leading-tight">
<span class="bg-gradient-to-r from-primary via-secondary to-accent text-gradient">AI图像编辑工具</span>
</h1>
<p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
上传图片并输入编辑指令，AI将智能修改您的图像
</p>
</section>
<!-- 编辑区域 - 样式参考index.html的生成器区域 -->
<section id="edit" class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 mb-16 transform transition-all duration-500 hover:shadow-2xl">
<h2 class="text-2xl md:text-3xl font-bold mb-6">图像编辑器</h2>
<div class="space-y-6">
<!-- 图片URL输入 -->
<div class="space-y-3">
<label for="imageUrl" class="block text-sm font-medium text-gray-700 dark:text-gray-300">图片URL <span class="text-red-500">*</span></label>
<input type="text" id="imageUrl" placeholder="请输入图片URL地址" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-primary transition-all">
</div>
<!-- 编辑提示词 -->
<div class="space-y-3">
<label for="editPrompt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">编辑提示词 <span class="text-red-500">*</span></label>
<textarea id="editPrompt" rows="4" placeholder="请输入编辑提示词，例如：将背景改为草原，添加红色帽子和黑色墨镜" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-primary resize-none transition-all"></textarea>
</div>
<!-- 参数设置 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-3">
<label for="editSize" class="block text-sm font-medium text-gray-700 dark:text-gray-300">图像尺寸 <span class="text-red-500">*</span></label>
<select id="editSize" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-primary transition-all">
<option value="1328*1328">1328×1328 (正方形)</option>
<option value="1024*1536">1024×1536 (竖版)</option>
<option value="1536*1024">1536×1024 (横版)</option>
</select>
</div>
<div class="space-y-3">
<label for="editStyle" class="block text-sm font-medium text-gray-700 dark:text-gray-300">艺术风格</label>
<select id="editStyle" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-primary transition-all">
<option value="default">默认风格</option>
<option value="realistic">写实风格</option>
<option value="cartoon">卡通风格</option>
<option value="anime">动漫风格</option>
<option value="watercolor">水彩风格</option>
<option value="oil">油画风格</option>
</select>
</div>
</div>
<!-- 开始编辑按钮 -->
<div class="pt-4 flex justify-end">
<button id="startEditBtn" class="px-8 py-4 bg-gradient-to-r from-primary to-secondary text-white font-medium rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center">
<i class="fa fa-magic mr-2"></i>开始编辑
</button>
</div>
</div>
<!-- 图片预览区域 -->
<div class="mt-10 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="space-y-3">
<h3 class="text-lg font-medium">原始图片</h3>
<div class="bg-gray-100 dark:bg-gray-900 rounded-xl p-4 flex items-center justify-center min-h-[300px]">
<img id="originalImage" src="" alt="原始图片预览" class="max-w-full max-h-[300px] object-contain rounded-lg hidden">
<div id="originalImagePlaceholder" class="text-center">
<i class="fa fa-image text-4xl text-gray-400 mb-2"></i>
<p class="text-gray-500 dark:text-gray-400">原始图片将显示在这里</p>
</div>
</div>
</div>
<div class="space-y-3">
<h3 class="text-lg font-medium">编辑结果</h3>
<div class="bg-gray-100 dark:bg-gray-900 rounded-xl p-4 flex items-center justify-center min-h-[300px]">
<img id="editedImage" src="" alt="编辑结果预览" class="max-w-full max-h-[300px] object-contain rounded-lg hidden">
<div id="editedImagePlaceholder" class="text-center">
<i class="fa fa-magic text-4xl text-gray-400 mb-2"></i>
<p class="text-gray-500 dark:text-gray-400">编辑后的图片将显示在这里</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 示例区域 -->
<section id="examples" class="container mx-auto px-6 md:px-12 mb-16">
<h2 class="text-2xl md:text-3xl font-bold mb-8 text-center">编辑示例</h2>
<!-- 小熊系列 -->
<div class="example-section">
<h3 class="text-xl font-semibold mb-4">示例区域</h3>
<!-- 小熊系列容器 -->
<div class="example-group mb-8">
<h4 class="text-lg font-medium mb-3">小熊系列</h4>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="bearExamples"></div>
</div>
<!-- 霓裳汉服社系列容器 -->
<div class="example-group">
<h4 class="text-lg font-medium mb-3">霓裳汉服社系列</h4>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="hanfuExamples"></div>
</div>
</div>
<!-- 移除以下重复的霓裳汉服社HTML结构 -->
<!-- 霓裳汉服社系列 -->
<!-- <div>
<h3 class="text-xl font-semibold mb-6 flex items-center">
<i class="fa fa-users text-primary mr-2"></i>霓裳汉服社系列
</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 示例项1：修改社团名称 -->
<div class="example-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer" data-image-url="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000026.png" data-prompt="把'霓裳汉服社'改成'通义实验室'">
<div class="h-48 overflow-hidden bg-gray-100 dark:bg-gray-900">
<img src="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000026.png" alt="修改社团名称示例" 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">把'霓裳汉服社'改成'通义实验室'</p>
</div>
</div>
<!-- 示例项2：修改活动信息 -->
<div class="example-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer" data-image-url="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000027.png" data-prompt="把'活动全程免费'改为'只给学生打折'">
<div class="h-48 overflow-hidden bg-gray-100 dark:bg-gray-900">
<img src="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000027.png" alt="修改活动信息示例" 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">把'活动全程免费'改为'只给学生打折'</p>
</div>
</div>
<!-- 示例项3：修改人物形象 -->
<div class="example-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer" data-image-url="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000028.png" data-prompt="把女人改成穿汉服的男人">
<div class="h-48 overflow-hidden bg-gray-100 dark:bg-gray-900">
<img src="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000028.png" alt="修改人物形象示例" 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">把女人改成穿汉服的男人</p>
</div>
</div>
</div>
</div>
</section>
<!-- JavaScript -->
<!-- 使用国内bootcdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.min.js"></script>
<script src="qwen-image-edit.js"></script>
<!-- 移除重复的内联脚本 -->
</body>
</html>

210
dsLightRag/static/QwenImage/qwen-image-edit.js Normal file
View File

@@ -0,0 +1,210 @@
/**
* 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());