mirror of
https://ghproxy.net/https://github.com/skylarGW/ai-image-generator.git
synced 2025-08-17 19:21:11 +08:00
133 lines
6.9 KiB
HTML
133 lines
6.9 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>AI图片生成器 - 跨境电商专用</title>
|
||
<meta name="description" content="专为跨境电商商家打造的智能图片生成平台，支持Amazon、TikTok、Temu等多平台优化">
|
||
<meta name="keywords" content="AI图片生成,跨境电商,Amazon,TikTok,Temu,商品图片,AI设计">
|
||
<meta name="author" content="AI图片生成器">
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="">
|
||
<meta property="og:title" content="AI图片生成器 - 跨境电商专用">
|
||
<meta property="og:description" content="专为跨境电商商家打造的智能图片生成平台">
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image">
|
||
<meta property="twitter:title" content="AI图片生成器 - 跨境电商专用">
|
||
<meta property="twitter:description" content="专为跨境电商商家打造的智能图片生成平台">
|
||
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>🎨 AI图片生成器</h1>
|
||
<p>专为跨境电商商家打造的智能图片生成平台</p>
|
||
</header>
|
||
|
||
<main>
|
||
<form id="imageRequestForm" class="form-container">
|
||
<section class="form-section">
|
||
<h2>📏 图片规格需求</h2>
|
||
<div class="input-group">
|
||
<label for="width">宽度 (px):</label>
|
||
<input type="number" id="width" name="width" value="1080" min="100" max="4000">
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="height">高度 (px):</label>
|
||
<input type="number" id="height" name="height" value="1080" min="100" max="4000">
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="format">图片格式:</label>
|
||
<select id="format" name="format">
|
||
<option value="jpg">JPG</option>
|
||
<option value="png">PNG</option>
|
||
<option value="webp">WebP</option>
|
||
</select>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="form-section">
|
||
<h2>🎭 风格偏好</h2>
|
||
<div class="input-group">
|
||
<label for="style">图片风格:</label>
|
||
<select id="style" name="style">
|
||
<option value="">请选择风格</option>
|
||
<option value="minimalist">简约现代</option>
|
||
<option value="luxury">奢华高端</option>
|
||
<option value="lifestyle">生活方式</option>
|
||
<option value="product-focus">产品聚焦</option>
|
||
<option value="seasonal">季节主题</option>
|
||
</select>
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="color-scheme">色彩方案:</label>
|
||
<select id="color-scheme" name="colorScheme">
|
||
<option value="">请选择色彩</option>
|
||
<option value="warm">暖色调</option>
|
||
<option value="cool">冷色调</option>
|
||
<option value="neutral">中性色</option>
|
||
<option value="vibrant">鲜艳色彩</option>
|
||
<option value="monochrome">单色调</option>
|
||
</select>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="form-section">
|
||
<h2>🛍️ 应用场景</h2>
|
||
<div class="checkbox-group">
|
||
<label><input type="checkbox" name="platform" value="amazon"> Amazon</label>
|
||
<label><input type="checkbox" name="platform" value="shopify"> Shopify</label>
|
||
<label><input type="checkbox" name="platform" value="tiktok"> TikTok</label>
|
||
<label><input type="checkbox" name="platform" value="temu"> Temu</label>
|
||
<label><input type="checkbox" name="platform" value="facebook"> Facebook广告</label>
|
||
<label><input type="checkbox" name="platform" value="instagram"> Instagram</label>
|
||
<label><input type="checkbox" name="platform" value="google"> Google广告</label>
|
||
<label><input type="checkbox" name="platform" value="other"> 其他</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="form-section">
|
||
<h2>📤 素材上传</h2>
|
||
<div class="upload-group">
|
||
<label for="product-images">产品图片:</label>
|
||
<input type="file" id="product-images" name="productImages" multiple accept="image/*">
|
||
<small>支持多张图片上传，格式：JPG, PNG, WebP</small>
|
||
</div>
|
||
<div class="upload-group">
|
||
<label for="reference-images">风格参考图:</label>
|
||
<input type="file" id="reference-images" name="referenceImages" multiple accept="image/*">
|
||
<small>上传你喜欢的风格参考图</small>
|
||
</div>
|
||
<div class="upload-group">
|
||
<label for="brand-guide">品牌视觉指南:</label>
|
||
<input type="file" id="brand-guide" name="brandGuide" accept=".pdf,.doc,.docx,.jpg,.png">
|
||
<small>品牌logo、色彩指南等文件</small>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="form-section">
|
||
<h2>📝 详细描述</h2>
|
||
<div class="input-group">
|
||
<label for="description">图片描述需求:</label>
|
||
<textarea id="description" name="description" rows="4"
|
||
placeholder="请详细描述你想要的图片内容、场景、氛围等..."></textarea>
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="target-audience">目标受众:</label>
|
||
<input type="text" id="target-audience" name="targetAudience"
|
||
placeholder="例如：25-35岁女性，注重生活品质">
|
||
</div>
|
||
</section>
|
||
|
||
<button type="submit" class="submit-btn">🚀 生成AI图片</button>
|
||
</form>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|
