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:51:08 +08:00
parent 612a22c6df
commit 1567cb9c7a
2 changed files with 178 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
dsLightRag/static/QwenImage/qwen-image-edit.html
View File

@@ -7,7 +7,7 @@
<!-- 引入外部资源 -->
<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 = {
@@ -29,30 +29,33 @@
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
'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);
@@ -61,181 +64,176 @@
</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>
<!-- 导航栏 - 从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>
</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 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="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 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>
</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>
</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>
<!-- 示例项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 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>
<!-- 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>
<!-- 移除重复的内联脚本 -->
<!-- 示例区域 -->
<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>
<!-- 示例项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>
<!-- 示例项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>
<!-- 示例项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>
</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>

21
dsLightRag/static/QwenImage/qwen-image-edit.js
View File

@@ -95,6 +95,7 @@ class QwenImageEditor {
{
id: 'bearExamples',
title: '小熊系列',
aspectRatio: '1/1', // 新增：小熊系列方形比例
originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999719.png',
examples: [
{
@@ -132,6 +133,7 @@ class QwenImageEditor {
{
id: 'hanfuExamples',
title: '霓裳汉服社系列',
aspectRatio: '5/7', // 新增：汉服社系列5:7比例
originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000025.png',
examples: [
{
@@ -154,12 +156,14 @@ class QwenImageEditor {
exampleGroups.forEach(group => {
const container = document.getElementById(group.id);
if (!container) return;
container.innerHTML = ''; // 新增：清空容器原有内容
group.examples.forEach(example => {
container.appendChild(this.createExampleCard(
group.originalImage,
example.prompt,
example.resultImage
example.resultImage,
group.aspectRatio // 新增：传递宽高比参数
));
});
});
@@ -170,38 +174,39 @@ class QwenImageEditor {
* @param {string} originalImage - 原始图片URL
* @param {string} prompt - 编辑提示词
* @param {string} resultImage - 结果图片URL
* @param {string} aspectRatio - 宽高比（新增参数）
* @returns {HTMLElement} - 卡片元素
*/
createExampleCard(originalImage, prompt, resultImage) {
createExampleCard(originalImage, prompt, resultImage, aspectRatio) {
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">
<div class="overflow-hidden bg-gray-100 dark:bg-gray-900 aspect-[${aspectRatio}]">
<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;
}
}