Files
dsProject/dsLightRag/static/Midjourney/mj.html

407 lines
23 KiB
HTML
Raw Normal View History

2025-08-25 14:30:29 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Midjourney AI 绘图工具</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 Font Awesome -->
2025-08-25 15:36:15 +08:00
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2025-08-25 19:18:40 +08:00
<!-- Tailwind 配置 - 保留在HTML中 -->
2025-08-25 14:30:29 +08:00
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#8b5cf6',
dark: '#1e293b',
light: '#f8fafc',
accent: '#ec4899'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
}
},
}
}
</script>
2025-08-25 19:18:40 +08:00
<!-- 引入外部JS文件 -->
<script src="mj.js"></script>
2025-08-25 14:30:29 +08:00
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
2025-08-25 15:36:15 +08:00
2025-08-25 14:30:29 +08:00
.glass-effect {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.7);
}
2025-08-25 15:36:15 +08:00
2025-08-25 14:30:29 +08:00
.glass-effect-dark {
backdrop-filter: blur(10px);
background-color: rgba(15, 23, 42, 0.7);
}
2025-08-25 15:36:15 +08:00
2025-08-25 14:30:29 +08:00
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
2025-08-25 15:36:15 +08:00
2025-08-25 14:30:29 +08:00
.transition-all-300 {
transition: all 300ms ease-in-out;
}
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-light to-gray-100 dark:from-dark dark:to-gray-900 text-gray-800 dark:text-gray-100 transition-colors duration-300">
2025-08-25 19:18:40 +08:00
2025-08-25 15:36:15 +08:00
<!-- 导航栏 -->
<header class="sticky top-0 z-50 glass-effect dark:glass-effect-dark border-b border-gray-200 dark:border-gray-700 shadow-sm">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-paint-brush text-primary text-2xl"></i>
<h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
Midjourney AI</h1>
2025-08-25 14:30:29 +08:00
</div>
2025-08-25 15:36:15 +08:00
<nav class="hidden md:flex items-center space-x-6">
<a href="#generator"
class="font-medium hover:text-primary dark:hover:text-primary transition-colors">生成器</a>
2025-08-25 19:18:40 +08:00
<a href="#gallery" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">历史</a>
2025-08-25 15:36:15 +08:00
</nav>
<div class="flex items-center space-x-3">
<button id="themeToggle"
class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<i class="fa fa-moon-o dark:hidden"></i>
<i class="fa fa-sun-o hidden dark:inline-block"></i>
</button>
<button class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
id="menuToggle">
<i class="fa fa-bars"></i>
</button>
2025-08-25 14:30:29 +08:00
</div>
2025-08-25 15:36:15 +08:00
</div>
<!-- 移动端菜单 -->
<div id="mobileMenu"
class="hidden md:hidden glass-effect dark:glass-effect-dark border-t border-gray-200 dark:border-gray-700">
<div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
<a href="#generator" class="font-medium hover:text-primary dark:hover:text-primary transition-colors py-2">生成器</a>
<a href="#gallery"
class="font-medium hover:text-primary dark:hover:text-primary transition-colors py-2">画廊</a>
</div>
</div>
</header>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<main class="container mx-auto px-4 py-8">
<!-- 英雄区 -->
<section class="text-center mb-12">
<h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-shadow">
<span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">释放您的创意</span>
</h2>
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8">
使用 Midjourney AI 生成令人惊叹的图像,只需输入文字描述或上传参考图片
</p>
</section>
<!-- 生成器区域 -->
<section id="generator"
class="mb-16 bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
<!-- 选项卡 -->
<div class="flex border-b border-gray-200 dark:border-gray-700">
<button id="textToImageTab"
class="flex-1 py-4 px-6 text-center font-medium text-primary border-b-2 border-primary dark:text-primary dark:border-primary transition-all-300">
<i class="fa fa-file-text-o mr-2"></i>文生图
</button>
<button id="imageToImageTab"
class="flex-1 py-4 px-6 text-center font-medium text-gray-500 dark:text-gray-400 border-b-2 border-transparent hover:text-primary dark:hover:text-primary transition-all-300">
<i class="fa fa-picture-o mr-2"></i>图生图
</button>
</div>
<!-- 文生图面板 -->
<div id="textToImagePanel" class="p-6 md:p-8 space-y-6">
<div class="space-y-4">
<label for="prompt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">提示词 <span
class="text-red-500">*</span></label>
<div class="flex space-x-2">
<textarea id="prompt" rows="4"
class="flex-1 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-300"
placeholder="描述您想要生成的图像..."></textarea>
<button id="randomPromptBtn"
class="p-3 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-all-300"
title="随机示例">
<i class="fa fa-random text-primary mr-1"></i>随机
</button>
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">
提示越详细,生成的图像越符合您的预期。尝试指定风格、细节、光照等。
2025-08-25 14:30:29 +08:00
</div>
2025-08-25 15:36:15 +08:00
</div>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="space-y-2">
<label for="style" class="block text-sm font-medium text-gray-700 dark:text-gray-300">风格</label>
<select id="style"
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
<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>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<div class="space-y-2">
<label for="aspectRatio"
class="block text-sm font-medium text-gray-700 dark:text-gray-300">比例</label>
<select id="aspectRatio"
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
<option value="1:1">1:1 (正方形)</option>
<option value="16:9">16:9 (宽屏)</option>
<option value="9:16">9:16 (竖屏)</option>
<option value="4:3">4:3 (标准)</option>
<option value="3:2">3:2 (照片)</option>
</select>
</div>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<div class="space-y-2">
<label for="quality" class="block text-sm font-medium text-gray-700 dark:text-gray-300">质量</label>
<select id="quality"
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
<option value="standard">标准</option>
<option value="high">高清</option>
<option value="ultra">超高清</option>
</select>
2025-08-25 14:30:29 +08:00
</div>
</div>
2025-08-25 15:36:15 +08:00
</div>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<!-- 图生图面板 -->
<div id="imageToImagePanel" class="p-6 md:p-8 space-y-6 hidden">
<div class="space-y-4">
<label for="imagePrompt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">提示词 <span
class="text-red-500">*</span></label>
<div class="flex space-x-2">
<textarea id="imagePrompt" rows="2"
class="flex-1 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-300"
placeholder="描述您想要生成的图像..."></textarea>
<button id="randomImagePromptBtn"
class="p-3 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-all-300"
title="随机示例">
<i class="fa fa-random text-primary mr-1"></i>随机
</button>
2025-08-25 14:30:29 +08:00
</div>
2025-08-25 15:36:15 +08:00
</div>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<div class="space-y-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">上传参考图片 <span
class="text-red-500">*</span></label>
<div id="imageUploadArea"
class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center hover:border-primary dark:hover:border-primary transition-all-300 cursor-pointer bg-gray-50 dark:bg-gray-900">
<input type="file" id="imageUpload" accept="image/*" class="hidden">
<i class="fa fa-cloud-upload text-4xl text-gray-400 mb-3"></i>
<p class="text-gray-500 dark:text-gray-400 mb-2">拖放图片到此处,或</p>
<button id="browseImage"
class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300">
浏览文件
</button>
</div>
<div id="imagePreview" class="hidden space-y-2">
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">预览:</p>
<img id="previewImage" src="" alt="预览图片"
class="max-h-64 object-contain rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
<button id="removeImage"
class="text-red-500 hover:text-red-600 text-sm flex items-center transition-colors">
<i class="fa fa-times-circle mr-1"></i> 移除图片
</button>
2025-08-25 14:30:29 +08:00
</div>
2025-08-25 15:36:15 +08:00
</div>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="space-y-2">
<label for="imageStyle"
class="block text-sm font-medium text-gray-700 dark:text-gray-300">风格</label>
<select id="imageStyle"
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
<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>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<div class="space-y-2">
<label for="imageAspectRatio"
class="block text-sm font-medium text-gray-700 dark:text-gray-300">比例</label>
<select id="imageAspectRatio"
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
<option value="1:1">1:1 (正方形)</option>
<option value="16:9">16:9 (宽屏)</option>
<option value="9:16">9:16 (竖屏)</option>
<option value="4:3">4:3 (标准)</option>
<option value="3:2">3:2 (照片)</option>
</select>
</div>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<div class="space-y-2">
<label for="imageStrength" class="block text-sm font-medium text-gray-700 dark:text-gray-300">参考强度
(0-100)</label>
<input type="range" id="imageStrength" min="0" max="100" value="70"
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-primary">
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400">
<span>更创意</span>
<span id="strengthValue">70</span>
<span>更相似</span>
2025-08-25 14:30:29 +08:00
</div>
</div>
</div>
2025-08-25 15:36:15 +08:00
</div>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<!-- 生成按钮 -->
<div class="p-6 md:p-8 bg-gray-50 dark:bg-gray-900 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
<i class="fa fa-lightbulb-o text-yellow-500 mr-2"></i>
2025-08-25 19:18:40 +08:00
<span>提示:生成高质量图像可能需要几十秒钟时间</span>
2025-08-25 14:30:29 +08:00
</div>
2025-08-25 15:36:15 +08:00
<button id="generateBtn"
class="px-8 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all-300 font-medium flex items-center">
<i class="fa fa-magic mr-2"></i>生成图像
</button>
</div>
2025-08-25 14:30:29 +08:00
2025-08-25 16:25:12 +08:00
<!-- 新增状态显示区域 -->
<div id="statusSection" class="hidden p-6 bg-gray-50 dark:bg-gray-900 rounded-b-lg">
<div class="progress-container mb-4">
<div id="progress-bar" class="progress-bar h-2 bg-primary rounded-full transition-all duration-300"
style="width: 0%"></div>
<div id="progress-text" class="text-right text-sm mt-1 text-gray-600 dark:text-gray-300">0%</div>
2025-08-25 15:36:15 +08:00
</div>
2025-08-25 16:25:12 +08:00
<div id="status-display" class="text-gray-700 dark:text-gray-300 mb-2"></div>
<div id="error-message" class="error-message text-red-500 hidden"></div>
2025-08-25 15:36:15 +08:00
</div>
</section>
2025-08-25 14:30:29 +08:00
2025-08-25 16:25:12 +08:00
<!-- 生成结果区域 -->
2025-08-25 15:36:15 +08:00
<section id="resultSection" class="mb-16 hidden">
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden">
<div class="p-6 md:p-8 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold mb-2">生成结果</h3>
<p class="text-gray-600 dark:text-gray-300">您的图像已成功生成</p>
</div>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<div class="p-6 md:p-8 flex flex-col items-center">
<div id="resultImageContainer" class="relative mb-8 max-w-3xl mx-auto">
<img id="resultImage" src="" alt="生成的图像"
class="max-w-full h-auto rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg transform transition-all duration-500 hover:shadow-xl">
<div class="absolute top-4 right-4 flex space-x-2">
<button id="downloadBtn"
class="p-2 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-all-300"
title="下载图片">
<i class="fa fa-download"></i>
2025-08-25 14:30:29 +08:00
</button>
2025-08-25 15:36:15 +08:00
<button id="regenerateBtn"
class="p-2 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-all-300"
title="重新生成">
<i class="fa fa-refresh"></i>
2025-08-25 14:30:29 +08:00
</button>
</div>
</div>
2025-08-25 15:36:15 +08:00
<div class="flex flex-wrap justify-center gap-4 w-full max-w-2xl">
<button id="variationBtn"
class="flex-1 px-4 py-2 border border-primary text-primary hover:bg-primary/10 rounded-lg transition-all-300 font-medium flex items-center justify-center">
<i class="fa fa-random mr-2"></i>生成变体
</button>
<button id="upscaleBtn"
class="flex-1 px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300 font-medium flex items-center justify-center">
<i class="fa fa-search-plus mr-2"></i>放大图像
</button>
</div>
2025-08-25 14:30:29 +08:00
</div>
2025-08-25 15:36:15 +08:00
</div>
</section>
2025-08-25 14:30:29 +08:00
2025-08-25 19:18:40 +08:00
<!-- 历史图像 -->
2025-08-25 15:36:15 +08:00
<section id="gallery" class="mb-16">
2025-08-25 19:18:40 +08:00
<h3 class="text-2xl font-bold mb-6">历史图像</h3>
2025-08-25 15:36:15 +08:00
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
2025-08-25 19:18:40 +08:00
<!-- 添加第一张图片 -->
2025-08-25 15:36:15 +08:00
<div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
2025-08-25 19:18:40 +08:00
<img src="https://ylt.oss-cn-hangzhou.aliyuncs.com/HuangHai/fu_gu_80_nian_dai_feng_ge_de_d0936ca1-6a6b-403f-b547-3ec6852411ba.png"
alt="80年代风格的复古汽车"
2025-08-25 15:36:15 +08:00
class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="p-4 bg-white dark:bg-gray-800">
2025-08-25 19:18:40 +08:00
<p class="font-medium truncate">80年代风格的复古汽车</p>
2025-08-25 14:30:29 +08:00
</div>
</div>
2025-08-25 19:18:40 +08:00
<!-- 添加第二张图片 -->
2025-08-25 15:36:15 +08:00
<div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
2025-08-25 19:18:40 +08:00
<img src="https://ylt.oss-cn-hangzhou.aliyuncs.com/HuangHai/ke_ai_de_ka_tong_xiong_mao_yu_c5dc58b6-5db2-4785-ab87-3ffb42e55c43.png"
alt="可爱的卡通熊猫"
2025-08-25 15:36:15 +08:00
class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="p-4 bg-white dark:bg-gray-800">
2025-08-25 19:18:40 +08:00
<p class="font-medium truncate">可爱的卡通熊猫</p>
2025-08-25 14:30:29 +08:00
</div>
</div>
2025-08-25 19:18:40 +08:00
<!-- 添加第三张图片 -->
2025-08-25 15:36:15 +08:00
<div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
2025-08-25 19:18:40 +08:00
<img src="https://ylt.oss-cn-hangzhou.aliyuncs.com/HuangHai/wei_lai_ke_ji_gan_de_pao_che_b3a725a5-d7b1-4cc2-8e27-cfd138aa6fbb.png"
alt="未来科技感的跑车"
2025-08-25 15:36:15 +08:00
class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="p-4 bg-white dark:bg-gray-800">
2025-08-25 19:18:40 +08:00
<p class="font-medium truncate">未来科技感的跑车</p>
2025-08-25 14:30:29 +08:00
</div>
2025-08-25 15:36:15 +08:00
</div>
<div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
2025-08-25 19:18:40 +08:00
<img src="https://ylt.oss-cn-hangzhou.aliyuncs.com/HuangHai/zhong_shi_ji_qi_huan_cheng_bao_zuo_8e6c3267-335d-463c-8320-ba3c649140e1.png" alt="艺术作品"
2025-08-25 15:36:15 +08:00
class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="p-4 bg-white dark:bg-gray-800">
2025-08-25 19:18:40 +08:00
<p class="font-medium truncate">梦幻城堡,超现实主义风格</p>
2025-08-25 14:30:29 +08:00
</div>
</div>
2025-08-25 19:18:40 +08:00
2025-08-25 14:30:29 +08:00
</div>
2025-08-25 15:36:15 +08:00
</section>
</main>
2025-08-25 14:30:29 +08:00
2025-08-25 15:36:15 +08:00
<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-2 mb-4 md:mb-0">
<i class="fa fa-paint-brush text-primary text-xl"></i>
<h2 class="text-lg font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
Midjourney AI</h2>
</div>
<div class="text-sm text-gray-500 dark:text-gray-400 mb-4 md:mb-0">
© 2023 Midjourney AI. 保留所有权利。
</div>
<div class="flex space-x-4">
<a href="#"
class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
<i class="fa fa-github text-xl"></i>
</a>
<a href="#"
class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
<i class="fa fa-twitter text-xl"></i>
</a>
<a href="#"
class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
<i class="fa fa-instagram text-xl"></i>
</a>
</div>
</div>
</div>
</footer>
2025-08-25 14:30:29 +08:00
</body>
</html>