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

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

@@ -44,15 +44,18 @@
.content-auto { .content-auto {
content-visibility: auto; content-visibility: auto;
} }
.text-gradient { .text-gradient {
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; color: transparent;
} }
.glass-effect { .glass-effect {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.7);
} }
.glass-effect-dark { .glass-effect-dark {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background-color: rgba(15, 23, 42, 0.7); background-color: rgba(15, 23, 42, 0.7);
@@ -73,11 +76,14 @@
</div> </div>
<div class="hidden md:flex items-center space-x-8"> <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="#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="#edit"
<a href="#history" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">生成历史</a> 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>
<div class="flex items-center space-x-4"> <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"> <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-sun-o dark:hidden"></i>
<i class="fa fa-moon-o hidden dark:block"></i> <i class="fa fa-moon-o hidden dark:block"></i>
</button> </button>
@@ -98,35 +104,45 @@
</section> </section>
<!-- 编辑区域 - 样式参考index.html的生成器区域 --> <!-- 编辑区域 - 样式参考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"> <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> <h2 class="text-2xl md:text-3xl font-bold mb-6">图像编辑器</h2>
<div class="space-y-6"> <div class="space-y-6">
<!-- 图片URL输入 --> <!-- 图片URL输入 -->
<div class="space-y-3"> <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> <label for="imageUrl" class="block text-sm font-medium text-gray-700 dark:text-gray-300">图片URL <span
<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"> 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>
<!-- 编辑提示词 --> <!-- 编辑提示词 -->
<div class="space-y-3"> <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> <label for="editPrompt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">编辑提示词
<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> <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>
<!-- 参数设置 --> <!-- 参数设置 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-3"> <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> <label for="editSize" class="block text-sm font-medium text-gray-700 dark:text-gray-300">图像尺寸
<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"> <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="1328*1328">1328×1328 (正方形)</option>
<option value="1024*1536">1024×1536 (竖版)</option> <option value="1024*1536">1024×1536 (竖版)</option>
<option value="1536*1024">1536×1024 (横版)</option> <option value="1536*1024">1536×1024 (横版)</option>
</select> </select>
</div> </div>
<div class="space-y-3"> <div class="space-y-3">
<label for="editStyle" class="block text-sm font-medium text-gray-700 dark:text-gray-300">艺术风格</label> <label for="editStyle"
<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"> 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="default">默认风格</option>
<option value="realistic">写实风格</option> <option value="realistic">写实风格</option>
<option value="cartoon">卡通风格</option> <option value="cartoon">卡通风格</option>
@@ -139,7 +155,8 @@
<!-- 开始编辑按钮 --> <!-- 开始编辑按钮 -->
<div class="pt-4 flex justify-end"> <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"> <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>开始编辑 <i class="fa fa-magic mr-2"></i>开始编辑
</button> </button>
</div> </div>
@@ -150,7 +167,8 @@
<div class="space-y-3"> <div class="space-y-3">
<h3 class="text-lg font-medium">原始图片</h3> <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]"> <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"> <img id="originalImage" src="" alt="原始图片预览"
class="max-w-full max-h-[300px] object-contain rounded-lg hidden">
<div id="originalImagePlaceholder" class="text-center"> <div id="originalImagePlaceholder" class="text-center">
<i class="fa fa-image text-4xl text-gray-400 mb-2"></i> <i class="fa fa-image text-4xl text-gray-400 mb-2"></i>
<p class="text-gray-500 dark:text-gray-400">原始图片将显示在这里</p> <p class="text-gray-500 dark:text-gray-400">原始图片将显示在这里</p>
@@ -160,7 +178,8 @@
<div class="space-y-3"> <div class="space-y-3">
<h3 class="text-lg font-medium">编辑结果</h3> <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]"> <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"> <img id="editedImage" src="" alt="编辑结果预览"
class="max-w-full max-h-[300px] object-contain rounded-lg hidden">
<div id="editedImagePlaceholder" class="text-center"> <div id="editedImagePlaceholder" class="text-center">
<i class="fa fa-magic text-4xl text-gray-400 mb-2"></i> <i class="fa fa-magic text-4xl text-gray-400 mb-2"></i>
<p class="text-gray-500 dark:text-gray-400">编辑后的图片将显示在这里</p> <p class="text-gray-500 dark:text-gray-400">编辑后的图片将显示在这里</p>
@@ -192,43 +211,22 @@
</div> </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：修改社团名称 --> <!-- 示例项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="example-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer"
<div class="h-48 overflow-hidden bg-gray-100 dark:bg-gray-900"> data-image-url="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000026.png"
<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"> data-prompt="把'霓裳汉服社'改成'通义实验室'">
</div>
<div class="p-4">
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">把'霓裳汉服社'改成'通义实验室'</p>
</div>
</div> </div>
<!-- 示例项2：修改活动信息 --> <!-- 示例项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="example-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer"
<div class="h-48 overflow-hidden bg-gray-100 dark:bg-gray-900"> data-image-url="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000027.png"
<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"> data-prompt="把'活动全程免费'改为'只给学生打折'">
</div>
<div class="p-4">
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">把'活动全程免费'改为'只给学生打折'</p>
</div>
</div> </div>
<!-- 示例项3：修改人物形象 --> <!-- 示例项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="example-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer"
<div class="h-48 overflow-hidden bg-gray-100 dark:bg-gray-900"> data-image-url="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000028.png"
<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"> data-prompt="把女人改成穿汉服的男人">
</div>
<div class="p-4">
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">把女人改成穿汉服的男人</p>
</div>
</div>
</div>
</div> </div>
</section> </section>

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

@@ -95,6 +95,7 @@ class QwenImageEditor {
{ {
id: 'bearExamples', id: 'bearExamples',
title: '小熊系列', title: '小熊系列',
aspectRatio: '1/1', // 新增：小熊系列方形比例
originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999719.png', originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999719.png',
examples: [ examples: [
{ {
@@ -132,6 +133,7 @@ class QwenImageEditor {
{ {
id: 'hanfuExamples', id: 'hanfuExamples',
title: '霓裳汉服社系列', title: '霓裳汉服社系列',
aspectRatio: '5/7', // 新增：汉服社系列5:7比例
originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000025.png', originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000025.png',
examples: [ examples: [
{ {
@@ -154,12 +156,14 @@ class QwenImageEditor {
exampleGroups.forEach(group => { exampleGroups.forEach(group => {
const container = document.getElementById(group.id); const container = document.getElementById(group.id);
if (!container) return; if (!container) return;
container.innerHTML = ''; // 新增：清空容器原有内容
group.examples.forEach(example => { group.examples.forEach(example => {
container.appendChild(this.createExampleCard( container.appendChild(this.createExampleCard(
group.originalImage, group.originalImage,
example.prompt, example.prompt,
example.resultImage example.resultImage,
group.aspectRatio // 新增：传递宽高比参数
)); ));
}); });
}); });
@@ -170,13 +174,14 @@ class QwenImageEditor {
* @param {string} originalImage - 原始图片URL * @param {string} originalImage - 原始图片URL
* @param {string} prompt - 编辑提示词 * @param {string} prompt - 编辑提示词
* @param {string} resultImage - 结果图片URL * @param {string} resultImage - 结果图片URL
* @param {string} aspectRatio - 宽高比（新增参数）
* @returns {HTMLElement} - 卡片元素 * @returns {HTMLElement} - 卡片元素
*/ */
createExampleCard(originalImage, prompt, resultImage) { createExampleCard(originalImage, prompt, resultImage, aspectRatio) {
const card = document.createElement('div'); 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.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 = ` 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"> <img src="${resultImage}" alt="${prompt.substring(0, 20)}..." class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div> </div>
<div class="p-4"> <div class="p-4">