<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🎨 AI 图片生成器 - 智能图像创作平台</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #6a11cb;
--secondary: #2575fc;
--accent: #ff6f61;
--light: rgba(255, 255, 255, 0.9);
--dark-bg: #1a1a2e;
--card-bg: rgba(255, 255, 255, 0.12);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
--transition: all 0.3s ease;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
min-height: 100vh;
position: relative;
}
/* 渐变背景粒子效果 */
body::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: url('https://particles.js.org/images/background.png');
opacity: 0.05;
pointer-events: none;
z-index: -1;
}
header {
background: rgba(0, 0, 0, 0.4);
padding: 1.2rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
}
h1 {
margin: 0;
font-size: 2.2rem;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
nav a {
color: white;
margin: 0 18px;
text-decoration: none;
font-weight: 500;
font-size: 1.1rem;
transition: var(--transition);
}
nav a:hover {
text-decoration: underline;
text-shadow: 0 1px 6px rgba(255,255,255,0.5);
}
main {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding: 0 1rem;
justify-content: center;
}
.input-section {
flex: 1 1 400px;
max-width: 500px;
}
.gallery-section {
flex: 2 1 600px;
max-width: 800px;
}
.container {
background: var(--card-bg);
border-radius: 16px;
padding: 2rem;
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
h2 {
font-size: 1.5rem;
margin-top: 0;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
p.example {
font-size: 0.95rem;
opacity: 0.8;
margin-bottom: 1.2rem;
}
label {
display: block;
margin-top: 1rem;
font-size: 1.1rem;
font-weight: 500;
}
input[type="text"], select {
width: 100%;
padding: 14px;
margin: 0.5rem 0;
border: none;
border-radius: 8px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.2);
color: white;
outline: none;
transition: var(--transition);
}
input[type="text"]::placeholder {
color: rgba(255,255,255,0.6);
}
input[type="text"]:focus {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
button {
margin-top: 1.5rem;
padding: 14px 28px;
background: var(--accent);
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
cursor: pointer;
transition: var(--transition);
font-weight: 600;
width: 100%;
}
button:hover {
background: #e05a4f;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(255,111,97,0.4);
}
button:active {
transform: translateY(0);
}
#result {
margin-top: 1.5rem;
text-align: center;
min-height: 200px;
}
#result.loading {
color: rgba(255,255,255,0.8);
font-style: italic;
}
#result img {
max-width: 100%;
max-height: 400px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
border: 4px solid rgba(255,255,255,0.2);
margin: 1rem auto;
display: block;
cursor: zoom-in;
}
.img-caption {
margin-top: 0.5rem;
font-size: 0.9rem;
opacity: 0.9;
}
.thumbnail-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px;
margin-top: 1.5rem;
}
.thumb-item {
position: relative;
height: 100px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: var(--transition);
cursor: zoom-in;
}
.thumb-item:hover {
transform: scale(1.08);
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.thumb-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.clear-btn {
background: #aaa !important;
margin-top: 1rem !important;
font-size: 0.9rem !important;
}
.clear-btn:hover {
background: #888 !important;
}
footer {
text-align: center;
padding: 1.5rem;
margin-top: 3rem;
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
}
/* === 全屏图片预览模态框样式 === */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 1000;
justify-content: center;
align-items: center;
flex-direction: column;
animation: fadeIn 0.3s ease;
}
.modal.active {
display: flex;
}
.modal-content {
max-width: 90vw;
max-height: 80vh;
border-radius: 10px;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
overflow: hidden;
position: relative;
}
.modal-content img {
max-width: 100%;
max-height: 80vh;
display: block;
}
.modal-caption {
margin-top: 1rem;
font-size: 1rem;
color: white;
text-align: center;
max-width: 90vw;
}
.close-modal {
position: absolute;
top: 15px;
right: 20px;
font-size: 2rem;
color: white;
background: none;
border: none;
cursor: pointer;
opacity: 0.8;
}
.close-modal:hover {
opacity: 1;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 768px) {
main {
flex-direction: column;
padding: 0.5rem;
}
.container {
padding: 1.5rem;
}
h1 {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<!-- 头部导航 -->
<header>
<h1>🎨 AI 图片生成器</h1>
<nav>
<a href="index.html">首页</a>
<a href="guide.html">使用说明</a>
</nav>
</header>
<main>
<!-- 左侧输入区 -->
<section class="input-section">
<div class="container">
<h2>描述你的创意</h2>
<p class="example">例如:一只穿宇航服的猫在火星上钓鱼,赛博朋克风格</p>
<label for="prompt">文字提示 (Prompt)</label>
<input type="text" id="prompt" placeholder="输入你想要的画面描述..." />
<label for="style">艺术风格</label>
<select id="style">
<option value="">无特定风格</option>
<option value="anime">动漫风格</option>
<option value="realistic">写实风格</option>
<option value="oil painting">油画风格</option>
<option value="cyberpunk">赛博朋克</option>
<option value="watercolor">水彩画</option>
<option value="surrealism">超现实主义</option>
</select>
<button onclick="generateImage()">✨ 生成图片</button>
<div id="result">
<!-- 生成结果将显示在这里 -->
</div>
</div>
</section>
<!-- 右侧图库区 -->
<section class="gallery-section">
<div class="container">
<h2>🖼️ 生成历史</h2>
<p class="example">点击缩略图可查看大图</p>
<div class="thumbnail-wall" id="history"></div>
<button class="clear-btn" onclick="clearHistory()">🗑️ 清除历史</button>
</div>
</section>
</main>
<footer>
© 2025 AI Image Generator Tool | 使用 Unsplash 模拟数据 | 学习演示用途
</footer>
<!-- === 全屏图片预览模态框 === -->
<div id="imageModal" class="modal">
<button class="close-modal" onclick="closeModal()">×</button>
<div class="modal-content">
<img id="modalImage" src="" alt="Preview">
</div>
<div class="modal-caption" id="modalCaption"></div>
</div>
<script>
// 历史记录存储
let history = JSON.parse(localStorage.getItem('aiImageHistory')) || [];
// 获取模态框元素
const modal = document.getElementById("imageModal");
const modalImg = document.getElementById("modalImage");
const modalCaption = document.getElementById("modalCaption");
// 打开模态框函数
function viewImage(src, caption) {
modalImg.src = src;
modalCaption.textContent = caption || "";
modal.classList.add("active");
document.body.style.overflow = "hidden"; // 防止滚动
}
// 关闭模态框
function closeModal() {
modal.classList.remove("active");
document.body.style.overflow = ""; // 恢复滚动
}
// 点击遮罩外部关闭
modal.onclick = function(e) {
if (e.target === modal) {
closeModal();
}
};
// 支持 ESC 键关闭(可选)
document.onkeydown = function(e) {
if (e.key === "Escape" && modal.classList.contains("active")) {
closeModal();
}
};
// 更新历史记录到页面
function updateHistory() {
const historyContainer = document.getElementById('history');
historyContainer.innerHTML = '';
if (history.length === 0) {
historyContainer.innerHTML = '<p style="opacity:0.6; font-size:0.9rem;">暂无历史记录</p>';
return;
}
// 显示最新的6条
const recent = history.slice(-6).reverse();
recent.forEach(item => {
const div = document.createElement('div');
div.className = 'thumb-item';
div.onclick = () => viewImage(item.imageUrl, `Prompt: ${item.prompt} | 风格: ${item.style}`);
div.innerHTML = `
<img src="${item.imageUrl}" alt="history" onerror="this.onerror=null;this.src='https://via.placeholder.com/120x100?text=Error';">
`;
historyContainer.appendChild(div);
});
}
// 从历史中点击查看详情(也支持大图)
function showFromHistory(item) {
document.getElementById('result').innerHTML = `
<h3>历史记录</h3>
<img src="${item.imageUrl}" alt="Historical Image" onclick="viewImage('${item.imageUrl}', 'Prompt: ${item.prompt} | 风格: ${item.style}')">
<p class="img-caption"><strong>Prompt:</strong> ${item.prompt}</p>
${item.style ? `<p class="img-caption"><strong>风格:</strong> ${item.style}</p>` : ''}
`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// 清除所有历史
function clearHistory() {
if (confirm("确定要清除所有生成的历史记录吗?")) {
localStorage.removeItem('aiImageHistory');
history = [];
updateHistory();
alert("历史记录已清除!");
}
}
// 图片模拟池(可按风格分类)
const imagePool = {
default: ['abstract', 'art', 'creative'],
anime: ['anime', 'manga', 'cartoon'],
realistic: ['realistic', 'photo', 'highly detailed'],
'oil painting': ['oil painting', 'brush strokes', 'classic art'],
cyberpunk: ['cyberpunk', 'neon', 'futuristic'],
watercolor: ['watercolor', 'painting', 'soft colors'],
surrealism: ['surreal', 'dreamlike', 'melting']
};
function getRandomImageUrl(prompt, style) {
const tags = imagePool[style] || imagePool.default;
const tag = tags[Math.floor(Math.random() * tags.length)];
return `https://source.unsplash.com/random/800x600/?${encodeURIComponent(tag)}`;
}
// 生成图片主函数
function generateImage() {
const promptInput = document.getElementById("prompt").value.trim();
const styleSelect = document.getElementById("style").value;
const resultDiv = document.getElementById("result");
if (!promptInput) {
alert("请输入你的创意描述!");
return;
}
resultDiv.className = "loading";
resultDiv.innerHTML = "<p>🧠 正在通过 AI 创作中,请稍候...</p>";
// 模拟网络请求延迟
setTimeout(() => {
const imageUrl = getRandomImageUrl(promptInput, styleSelect);
const displayStyle = document.getElementById("style").options[document.getElementById("style").selectedIndex].text;
resultDiv.className = "";
resultDiv.innerHTML = `
<h3>✅ 生成成功!</h3>
<img src="${imageUrl}" alt="AI Generated"
onclick="viewImage('${imageUrl}', 'Prompt: ${promptInput} | 风格: ${displayStyle}')"
onerror="this.src='https://via.placeholder.com/800x600?text=生成失败';">
<p class="img-caption"><strong>Prompt:</strong> ${promptInput}</p>
${styleSelect ? `<p class="img-caption"><strong>风格:</strong> ${displayStyle}</p>` : ''}
`;
// 添加到历史
const record = {
prompt: promptInput,
style: displayStyle,
imageUrl,
timestamp: new Date().toLocaleString()
};
history.push(record);
localStorage.setItem('aiImageHistory', JSON.stringify(history));
updateHistory(); // 刷新缩略图墙
}, 1800);
}
// 页面加载时初始化历史记录
window.onload = function () {
updateHistory();
};
</script>
</body>
</html>
添加更多功能,我需要完整代码