'commit'
This commit is contained in:
@@ -13,7 +13,7 @@ from Config import Config
|
||||
import asyncio
|
||||
import threading
|
||||
from fastapi.responses import StreamingResponse
|
||||
|
||||
from fastapi import APIRouter, Request, HTTPException, BackgroundTasks
|
||||
# 创建路由路由器
|
||||
router = APIRouter(prefix="/api/mj", tags=["文生图"])
|
||||
|
||||
@@ -144,24 +144,21 @@ async def submit_imagine(request: ImagineRequest, background_tasks: BackgroundTa
|
||||
raise HTTPException(status_code=500, detail=f"提交文生图请求失败: {str(e)}")
|
||||
|
||||
|
||||
@router.get("/task_status", response_model=TaskStatusResponse)
|
||||
async def get_task_status(task_id: str = Query(..., description="任务ID")):
|
||||
"""
|
||||
查询文生图任务状态
|
||||
# 在文件顶部确保已定义任务状态缓存
|
||||
task_status_cache = {}
|
||||
@router.get("/task_status")
|
||||
async def get_task_status(task_id: str):
|
||||
if not task_id:
|
||||
raise HTTPException(status_code=400, detail="task_id 参数缺失")
|
||||
|
||||
Args:
|
||||
task_id: 任务ID
|
||||
|
||||
Returns:
|
||||
任务状态信息
|
||||
"""
|
||||
if task_id not in TASK_STATUS:
|
||||
# 将所有 task_status_store 替换为 task_status_cache
|
||||
if task_id not in task_status_cache:
|
||||
raise HTTPException(status_code=404, detail="任务ID不存在")
|
||||
|
||||
return TaskStatusResponse(
|
||||
task_id=task_id,
|
||||
status=TASK_STATUS[task_id]["status"],
|
||||
image_url=TASK_STATUS[task_id]["image_url"],
|
||||
progress=TASK_STATUS[task_id]["progress"],
|
||||
error=TASK_STATUS[task_id]["error"]
|
||||
)
|
||||
return {
|
||||
"task_id": task_id,
|
||||
"status": task_status_cache[task_id]["status"],
|
||||
"progress": task_status_cache[task_id]["progress"] ,
|
||||
"result": task_status_cache[task_id]["result"],
|
||||
"error": task_status_cache[task_id]["error"]
|
||||
}
|
||||
|
Binary file not shown.
@@ -7,7 +7,7 @@
|
||||
<!-- 引入 Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- 引入 Font Awesome -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<!-- Tailwind 配置 -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
@@ -35,17 +35,21 @@
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.transition-all-300 {
|
||||
transition: all 300ms ease-in-out;
|
||||
}
|
||||
@@ -58,29 +62,36 @@
|
||||
<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>
|
||||
<h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
||||
Midjourney AI</h1>
|
||||
</div>
|
||||
<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>
|
||||
<a href="#history" 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="#history"
|
||||
class="font-medium hover:text-primary dark:hover:text-primary transition-colors">历史记录</a>
|
||||
<a href="#gallery" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">画廊</a>
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移动端菜单 -->
|
||||
<div id="mobileMenu" class="hidden md:hidden glass-effect dark:glass-effect-dark border-t border-gray-200 dark:border-gray-700">
|
||||
<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="#history" 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>
|
||||
<a href="#gallery"
|
||||
class="font-medium hover:text-primary dark:hover:text-primary transition-colors py-2">画廊</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -97,13 +108,16 @@
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
@@ -111,8 +125,18 @@
|
||||
<!-- 文生图面板 -->
|
||||
<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>
|
||||
<textarea id="prompt" rows="4" 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-300" placeholder="描述您想要生成的图像..."></textarea>
|
||||
<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">
|
||||
提示越详细,生成的图像越符合您的预期。尝试指定风格、细节、光照等。
|
||||
</div>
|
||||
@@ -121,7 +145,8 @@
|
||||
<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">
|
||||
<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>
|
||||
@@ -132,8 +157,10 @@
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
@@ -144,7 +171,8 @@
|
||||
|
||||
<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">
|
||||
<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>
|
||||
@@ -156,22 +184,39 @@
|
||||
<!-- 图生图面板 -->
|
||||
<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>
|
||||
<textarea id="imagePrompt" rows="2" 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-300" placeholder="描述您想要生成的图像..."></textarea>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
@@ -179,8 +224,10 @@
|
||||
|
||||
<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">
|
||||
<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>
|
||||
@@ -191,8 +238,10 @@
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
@@ -202,8 +251,10 @@
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
@@ -219,7 +270,8 @@
|
||||
<i class="fa fa-lightbulb-o text-yellow-500 mr-2"></i>
|
||||
<span>提示:生成高质量图像可能需要几秒钟时间</span>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
@@ -239,8 +291,10 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="progressBarContainer" class="w-full max-w-2xl bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
|
||||
<div id="progressBar" class="bg-gradient-to-r from-primary to-secondary h-full w-0 transition-all duration-300"></div>
|
||||
<div id="progressBarContainer"
|
||||
class="w-full max-w-2xl bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
|
||||
<div id="progressBar"
|
||||
class="bg-gradient-to-r from-primary to-secondary h-full w-0 transition-all duration-300"></div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
@@ -260,22 +314,29 @@
|
||||
|
||||
<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">
|
||||
<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="下载图片">
|
||||
<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>
|
||||
</button>
|
||||
<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="重新生成">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
@@ -287,7 +348,8 @@
|
||||
<section id="history" class="mb-16">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-2xl font-bold">历史记录</h3>
|
||||
<button id="clearHistoryBtn" class="text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 transition-colors">
|
||||
<button id="clearHistoryBtn"
|
||||
class="text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 transition-colors">
|
||||
清除全部
|
||||
</button>
|
||||
</div>
|
||||
@@ -307,25 +369,29 @@
|
||||
<h3 class="text-2xl font-bold mb-6">精选画廊</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
<div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
|
||||
<img src="https://picsum.photos/seed/art1/600/400" alt="艺术作品" class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<img src="https://picsum.photos/seed/art1/600/400" alt="艺术作品"
|
||||
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">
|
||||
<p class="font-medium truncate">梦幻城堡,超现实主义风格</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
|
||||
<img src="https://picsum.photos/seed/art2/600/400" alt="艺术作品" class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<img src="https://picsum.photos/seed/art2/600/400" alt="艺术作品"
|
||||
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">
|
||||
<p class="font-medium truncate">未来城市,赛博朋克风格</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
|
||||
<img src="https://picsum.photos/seed/art3/600/400" alt="艺术作品" class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<img src="https://picsum.photos/seed/art3/600/400" alt="艺术作品"
|
||||
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">
|
||||
<p class="font-medium truncate">奇幻森林,童话风格</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
|
||||
<img src="https://picsum.photos/seed/art4/600/400" alt="艺术作品" class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<img src="https://picsum.photos/seed/art4/600/400" alt="艺术作品"
|
||||
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">
|
||||
<p class="font-medium truncate">抽象艺术,色彩斑斓</p>
|
||||
</div>
|
||||
@@ -339,27 +405,75 @@
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<script>
|
||||
// ==============================================
|
||||
// 全局函数 - 必须放在所有事件监听和调用之前
|
||||
// ==============================================
|
||||
function checkTaskStatus(taskId) {
|
||||
if (!taskId) {
|
||||
console.error('任务ID不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/api/mj/task_status?task_id=${encodeURIComponent(taskId)}`)
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error('网络响应不正常');
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const statusDisplay = document.getElementById('status-display');
|
||||
|
||||
if (progressBar && progressText) {
|
||||
const progress = data.progress || 0;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
progressText.textContent = `${progress}%`;
|
||||
}
|
||||
|
||||
if (statusDisplay) {
|
||||
statusDisplay.textContent = `状态: ${data.status || '未知'}`;
|
||||
}
|
||||
|
||||
if (data.status === 'completed') {
|
||||
stopPolling();
|
||||
displayResult(data.result);
|
||||
addToHistory(data);
|
||||
} else if (data.status === 'failed') {
|
||||
stopPolling();
|
||||
showError(data.error || '生成失败,请重试');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取任务状态时出错:', error);
|
||||
stopPolling();
|
||||
showError('获取状态失败: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 主题切换功能
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
@@ -597,7 +711,6 @@
|
||||
const startTime = new Date().getTime(); // 开始时间
|
||||
let timerId = null; // 用于存储setTimeout的ID
|
||||
|
||||
function checkTaskStatus() {
|
||||
if (queryCount >= maxQueries) {
|
||||
const elapsedTime = Math.round((new Date().getTime() - startTime) / 1000);
|
||||
document.getElementById('statusMessage').innerHTML = `<i class="fa fa-exclamation-circle"></i> 图像生成超时(已等待${elapsedTime}秒),您可以稍后在历史记录中查看,或重新生成。`;
|
||||
@@ -684,7 +797,7 @@
|
||||
|
||||
// 立即检查一次
|
||||
checkTaskStatus();
|
||||
}
|
||||
})
|
||||
|
||||
// 显示结果函数
|
||||
function showResult(imageUrl, taskId, prompt) {
|
||||
@@ -778,10 +891,73 @@
|
||||
resultImage.src = imageUrl;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化历史记录网格
|
||||
updateHistoryGrid();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 添加随机示例功能的JavaScript -->
|
||||
<script>
|
||||
// 文生图示例提示词库
|
||||
const textPromptExamples = [
|
||||
"一只穿着太空服的柯基犬在火星表面行走,背景是红色星球和远处的地球,科幻风格,高清细节",
|
||||
"中国传统水墨画风格的山间小屋,雾气缭绕,远处有瀑布,意境悠远,留白艺术",
|
||||
"蒸汽朋克风格的城市景观,空中漂浮着飞艇,机械结构细节丰富,黄昏光影,8K分辨率",
|
||||
"可爱的卡通熊猫宇航员在太空中吃竹子,周围有星星和行星,迪士尼风格,明亮色彩",
|
||||
"赛博朋克风格的东京雨夜,霓虹灯闪烁,全息广告,湿润的街道反射, Blade Runner 氛围",
|
||||
"中世纪奇幻城堡坐落在山顶,周围有龙和魔法光芒,日落时分,史诗电影场景",
|
||||
"极简主义风格的室内设计,白色为主色调,原木家具,大窗户,自然光,北欧风格",
|
||||
"未来科技感的跑车设计,流线型车身,透明车顶,悬浮效果,银色金属质感,未来城市背景",
|
||||
"水彩风格的森林动物聚会,兔子、狐狸和松鼠围坐在蘑菇旁,童话风格,柔和色彩",
|
||||
"复古80年代风格的街机游戏厅,霓虹灯光,老式游戏机,像素艺术,怀旧氛围"
|
||||
];
|
||||
|
||||
// 图生图示例提示词库
|
||||
const imagePromptExamples = [
|
||||
"将图片转换为梵高风格的油画,星月夜笔触,鲜艳色彩",
|
||||
"变成卡通风格,线条简洁,色彩明亮,适合儿童绘本",
|
||||
"转换为赛博朋克风格,添加霓虹灯效果和未来科技元素",
|
||||
"模拟水墨画效果,黑白灰三色,强调意境和笔触",
|
||||
"变成3D渲染风格,添加立体效果和真实光影",
|
||||
"转换为像素艺术,8-bit风格,适合复古游戏场景",
|
||||
"模拟水彩画效果,柔和的色彩过渡和纹理",
|
||||
"变成低多边形风格,几何图形构成,简约美学",
|
||||
"转换为蒸汽朋克风格,添加齿轮、铜制元素和机械结构",
|
||||
"模拟素描效果,铅笔线条,强调轮廓和阴影"
|
||||
];
|
||||
|
||||
// 页面加载完成后绑定事件
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 文生图随机按钮
|
||||
const randomPromptBtn = document.getElementById('randomPromptBtn');
|
||||
const promptInput = document.getElementById('prompt');
|
||||
|
||||
// 图生图随机按钮
|
||||
const randomImagePromptBtn = document.getElementById('randomImagePromptBtn');
|
||||
const imagePromptInput = document.getElementById('imagePrompt');
|
||||
|
||||
// 文生图随机功能
|
||||
if (randomPromptBtn && promptInput) {
|
||||
randomPromptBtn.addEventListener('click', function () {
|
||||
const randomIndex = Math.floor(Math.random() * textPromptExamples.length);
|
||||
promptInput.value = textPromptExamples[randomIndex];
|
||||
// 添加输入框焦点效果
|
||||
promptInput.focus();
|
||||
setTimeout(() => promptInput.blur(), 100);
|
||||
});
|
||||
}
|
||||
|
||||
// 图生图随机功能
|
||||
if (randomImagePromptBtn && imagePromptInput) {
|
||||
randomImagePromptBtn.addEventListener('click', function () {
|
||||
const randomIndex = Math.floor(Math.random() * imagePromptExamples.length);
|
||||
imagePromptInput.value = imagePromptExamples[randomIndex];
|
||||
// 添加输入框焦点效果
|
||||
imagePromptInput.focus();
|
||||
setTimeout(() => imagePromptInput.blur(), 100);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
Reference in New Issue
Block a user