243 lines
12 KiB
HTML
243 lines
12 KiB
HTML
<!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">QWenImageEdit</h1>
|
||
</div>
|
||
<div class="hidden md:flex items-center space-x-8">
|
||
<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="randomExampleBtn"
|
||
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"
|
||
title="随机选择一个示例填充表单">
|
||
<i class="fa fa-random mr-2"></i>随机示例
|
||
</button>
|
||
<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>
|
||
|
||
<!-- 示例项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> |