# g3image

**Repository Path**: hackyin/g3image

## Basic Information

- **Project Name**: g3image
- **Description**: No description available
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-31
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI 图片生成器

基于 Gemini 3 Pro Image 模型的现代化 AI 图片生成工具，提供直观的用户界面和强大的功能。

## ✨ 特性

- 🎨 **现代化设计** - Aurora UI 渐变效果 + 深色主题
- 🚀 **快速生成** - 支持多种尺寸比例（1:1, 16:9, 9:16, 4:3）
- 📱 **响应式布局** - 完美适配桌面端和移动端
- 💾 **历史记录** - 自动保存最近生成的图片
- ⬇️ **便捷下载** - 一键下载生成的图片
- ♿ **无障碍支持** - 遵循 WCAG 标准，支持键盘导航

## 🎯 支持的图片尺寸

| 尺寸   | 比例 | 分辨率    | 适用场景           |
| ------ | ---- | --------- | ------------------ |
| 正方形 | 1:1  | 1024×1024 | 社交媒体头像、图标 |
| 横向   | 16:9 | 1280×720  | 横幅、封面图       |
| 纵向   | 9:16 | 720×1280  | 手机壁纸、故事     |
| 宽屏   | 4:3  | 1216×896  | 演示文稿、桌面壁纸 |

## 🚀 快速开始

### 1. 配置 API

在 `script.js` 中修改配置：

```javascript
const CONFIG = {
  apiUrl: "http://127.0.0.1:8045/v1", // 你的 API 地址
  apiKey: "sk-your-api-key-here", // 你的 API 密钥
  model: "gemini-3-pro-image",
  maxHistoryItems: 12,
};
```

### 2. 启动服务

使用任意 HTTP 服务器运行：

```bash
# 使用 Python
python3 -m http.server 8000

# 使用 Node.js (http-server)
npx http-server -p 8000

# 使用 PHP
php -S localhost:8000
```

### 3. 访问应用

打开浏览器访问：`http://localhost:8000`

## 🐳 Docker 部署

如果你更喜欢使用 Docker，我们也提供了开箱即用的支持。

### 1. 启动服务

```bash
# 构建并启动容器
docker-compose up -d
```

### 2. 访问应用

打开浏览器访问：`http://localhost:8080`

> **注意**: `script.js` 已被映射到容器中，你可以直接在本地修改配置，刷新页面即可生效，无需重启容器。

## 📖 使用方法

1. **输入描述** - 在文本框中详细描述你想要的图片
2. **选择尺寸** - 点击选择合适的图片比例
3. **生成图片** - 点击"生成图片"按钮
4. **查看结果** - 等待几秒钟，AI 将生成你的图片
5. **下载或分享** - 鼠标悬停在图片上，可以下载或复制链接

## 🎨 设计系统

### 配色方案

- **主色调**: `#2563EB` (蓝色) - 信任感、专业性
- **次要色**: `#8B5CF6` (紫色) - 创意、科技感
- **强调色**: `#F97316` (橙色) - 行动号召
- **背景色**: `#0A0E27` (深蓝黑) - 现代、优雅

### 字体

- **标题**: Space Grotesk - 现代、科技感
- **正文**: DM Sans - 清晰、易读

### 视觉效果

- Aurora 渐变背景动画
- 流畅的过渡动画（200-300ms）
- 玻璃态效果（Glassmorphism）
- 微交互反馈

## 🛠️ 技术栈

- **HTML5** - 语义化标签
- **CSS3** - 现代布局、动画
- **Vanilla JavaScript** - 无框架依赖
- **OpenAI API** - 兼容接口

## 📁 项目结构

```
g3image/
├── index.html      # 主页面结构
├── style.css       # 样式文件
├── script.js       # 功能逻辑
└── README.md       # 项目文档
```

## ⚙️ API 配置说明

### 方式 1: 使用 size 参数（推荐）

```javascript
extra_body: {
  size: "1024x1024"; // 支持: 1024x1024, 1280x720, 720x1280, 1216x896
}
```

### 方式 2: 使用模型后缀

```javascript
model: "gemini-3-pro-image-16-9"; // 或 gemini-3-pro-image-4-3
```

### API 响应格式支持

本工具支持以下几种 API 响应格式，会自动识别并正确处理：

1. **Markdown 格式** (推荐)

   ```json
   {
     "choices": [
       {
         "message": {
           "content": "![image](data:image/jpeg;base64,/9j/4AAQ...)"
         }
       }
     ]
   }
   ```

2. **直接 Data URL**

   ```json
   {
     "choices": [
       {
         "message": {
           "content": "data:image/jpeg;base64,/9j/4AAQ..."
         }
       }
     ]
   }
   ```

3. **HTTP(S) URL**
   ```json
   {
     "choices": [
       {
         "message": {
           "content": "https://example.com/image.jpg"
         }
       }
     ]
   }
   ```

## 🎯 提示词技巧

为了获得更好的生成效果，建议：

1. **详细描述** - 包含主题、风格、色彩、氛围等
2. **使用形容词** - 如"未来主义的"、"梦幻的"、"写实的"
3. **指定风格** - 如"赛博朋克风格"、"水彩画风格"
4. **添加细节** - 光线、构图、视角等

### 示例提示词

```
一座未来主义城市，霓虹灯闪烁，赛博朋克风格，夜景，高楼林立，
飞行汽车穿梭，紫色和蓝色主色调，电影级光影效果
```

## 🔒 隐私与安全

- 所有数据存储在浏览器本地（localStorage）
- 不会上传任何个人信息到第三方服务器
- API 密钥仅用于与配置的服务器通信

## 🐛 常见问题

### 生成失败怎么办？

1. 检查 API 地址和密钥是否正确
2. 确认 API 服务正在运行
3. 查看浏览器控制台的错误信息
4. 尝试简化提示词重新生成

### 图片无法显示？

1. 检查网络连接
2. 确认图片 URL 可访问
3. 尝试清除浏览器缓存

### 历史记录丢失？

历史记录保存在浏览器 localStorage 中，清除浏览器数据会导致丢失。
建议及时下载重要的图片。

## 📝 更新日志

### v1.0.0 (2025-12-30)

- ✨ 初始版本发布
- 🎨 Aurora UI 设计系统
- 🚀 支持 4 种图片尺寸
- 💾 本地历史记录功能
- ⬇️ 图片下载功能
- 📱 响应式设计

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

**Made with ❤️ using Gemini 3 Pro Image**