# seed-avatar

**Repository Path**: ns2250225/seed-avatar

## Basic Information

- **Project Name**: seed-avatar
- **Description**: 随机头像生成网站
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-22
- **Last Updated**: 2026-08-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Seed Portrait / 数字肖像馆

Seed Portrait 是一个纯前端的随机手绘人脸头像生成器。每一串 Seed 都会对应一个固定人物；在相同算法版本下，无论刷新页面、重新打开浏览器或更换设备，都可以通过同一个 Seed 还原完全一致的头像。

![项目类型](https://img.shields.io/badge/类型-纯前端生成-9b3f31)
![算法版本](https://img.shields.io/badge/算法版本-v1-2f2923)
![构建工具](https://img.shields.io/badge/Vite-8-646cff)
![框架](https://img.shields.io/badge/React-19-61dafb)

## 功能特性

- 使用 Seed 驱动人物生成，相同 Seed 始终得到相同头像
- 使用独立 Seed 分区，避免新增部件影响其他随机属性
- 24 种人物原型以及带权重的配饰偏好
- 参数化脸型、五官、发型、胡子、服装和配饰
- 统一 Anchor 锚点系统，组件会随脸宽、眼距、嘴角和耳朵位置自动适配
- 配饰 Slot、数量预算和冲突处理，避免不合理堆叠
- 复古低饱和配色、手绘线条、轻微不对称和纸张颗粒效果
- 支持随机人物及数字、英文、中文等任意 Seed
- URL 自动保存 `version + seed`，可直接分享人物
- 支持复制 Seed、复制分享链接
- 支持 512、1024、2048 三种尺寸的 PNG 导出
- 支持可无限缩放的 SVG 导出
- 最近生成记录和人物档案
- 支持桌面端、平板和移动端
- 所有生成和导出均在浏览器本地完成，不上传用户数据

## 技术栈

- React
- JavaScript
- SVG
- CSS3
- Vite
- xmur3 + mulberry32 确定性伪随机算法

项目无需数据库、后端服务或 AI 图像生成接口。

## 本地运行

环境要求：Node.js 18 或更高版本。

### 使用国内镜像安装

```bash
npm install --registry=https://registry.npmmirror.com
```

### 启动开发服务器

```bash
npm run dev
```

默认访问地址：<http://localhost:5173/>

局域网内的其他设备也可以通过终端显示的 Network 地址访问。

### 生产构建

```bash
npm run build
```

构建产物位于 `dist/` 目录。

### 预览生产构建

```bash
npm run preview
```

## 使用方式

1. 打开页面时会通过 `crypto.getRandomValues()` 创建初始 Seed。
2. 点击“随机一个人”可以生成新的随机人物。
3. 在输入框中输入任意文字并点击“生成肖像”，或按 Enter 键生成对应人物。
4. 保存 Seed 或复制当前链接，即可再次还原该人物。
5. 根据需要下载 PNG 或 SVG 文件。

分享链接格式：

```text
/?v=1&seed=123456
```

## Seed 生成架构

```text
Seed + Algorithm Version
          ↓
      Character Archetype
          ↓
  Independent Part Seeds
          ↓
 Face / Hair / Features / Accessories
          ↓
 Anchor & Compatibility Resolver
          ↓
 Palette + Hand-drawn SVG Renderer
          ↓
        Portrait
```

头像生成逻辑不会使用 `Math.random()`。不同部件分别使用形如 `seed:eyes`、`seed:hair`、`seed:hat` 的独立随机分区，保证生成结果稳定且方便后续扩展。

## 项目结构

```text
seed-avatar/
├── src/
│   ├── data.js          # 配色、肤色、原型和部件数据
│   ├── generator.js     # Seed、人物配置、兼容规则和 SVG 渲染器
│   ├── main.jsx         # 页面交互、分享与文件导出
│   └── styles.css       # 页面设计与响应式样式
├── index.html
├── package.json
├── prd.md
└── README.md
```

## 隐私说明

Seed、头像和导出文件均只在当前浏览器处理。项目不会上传 Seed、头像或任何个人数据。

## 浏览器支持

- Chrome 最新版
- Edge 最新版
- Firefox 最新版
- Safari 最新版
- iOS Safari
- Android Chrome

## License

当前仓库未声明开源许可证。未经仓库所有者许可，请勿将代码用于再分发或商业用途。