https://github.com/besscroft/picimpact

自部署的摄影作品网站，支持多种功能特性。PicImpact，分享你和世界！
https://github.com/besscroft/picimpact

exif gallery image image-gallery image-sharing live-photo map photo-gallery photos picimpact polaroid polaroid-image-gallery self-hosted

Last synced: 4 days ago
JSON representation

自部署的摄影作品网站，支持多种功能特性。PicImpact，分享你和世界！

Host: GitHub
URL: https://github.com/besscroft/picimpact
Owner: besscroft
License: mit
Created: 2024-04-03T03:43:47.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2026-03-01T05:15:29.000Z (about 1 month ago)
Last Synced: 2026-03-01T07:32:11.742Z (about 1 month ago)
Topics: exif, gallery, image, image-gallery, image-sharing, live-photo, map, photo-gallery, photos, picimpact, polaroid, polaroid-image-gallery, self-hosted
Language: TypeScript
Homepage: https://pic-docs.ziyume.com
Size: 6.93 MB
Stars: 1,223
Watchers: 4
Forks: 207
Open Issues: 36
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

          




PicImpact





  

  

  

  





  简体中文 | English | 日本語



---

## 简体中文

PicImpact 是一个支持自部署的摄影作品展示网站，基于 Next.js + Hono.js 开发。

### 功能特性

- 瀑布流相册展示图片，支持[实况照片(Live Photos)](https://support.apple.com/zh-cn/104966)，基于 [LivePhotosKit JS](https://developer.apple.com/documentation/livephotoskitjs) 开发。

- 基于 WebGL 的高性能图片查看器，支持流畅的缩放和平移，采用图片分块（Tiling）和 LOD 技术优化大图加载性能。

- 支持地图模组标记图片，根据图片经纬度标记在地图上。

- 点击图片查看原图，浏览图片信息和 EXIF 信息，支持直链访问。

- 响应式设计，在 PC 和移动端都有不错的体验，支持暗黑模式。

- 图片存储兼容 S3 API、Cloudflare R2、Open List API。

- 图片支持绑定标签，并且可通过标签进行交互，筛选标签下所有图片。

- 支持输出 RSS，可以使用 [Follow](https://github.com/RSSNext/Follow) 订阅，并支持订阅源所有权验证。

- 支持批量自动化上传，上传图片时会生成 0.3 倍率的压缩图片，以提供加载优化。

- 后台有图片数据统计、图片上传、图片维护、相册管理、系统设置和存储配置功能。

- 双因素认证功能，基于 TOTP 算法 [RFC 6238](https://www.rfc-editor.org/rfc/rfc6238)，支持 Google Authenticator、Microsoft Authenticator 和 1Password 等。

- Passkey 无密码登录功能，基于 WebAuthn 标准，支持生物识别（指纹、面容等）和硬件安全密钥登录。

- 基于 SSR 的混合渲染，采用状态机制，提供良好的使用体验。

- 基于 Prisma 的自动初始化数据库和数据迁移，简化部署流程。

- 支持 Vercel 部署、Node.js 部署、Docker 等容器化部署，当然 k8s 也支持。

### 如何部署

你可以点击下面的按钮来一键部署到 Vercel，**然后将 `Build Command` 设置为 `pnpm run build:vercel`**，也可以 Fork 项目后手动部署到任何支持的平台。

> 我们推荐当新版本发布时您再进行版本更新！



| Key | 备注 |

|-----|------|

| DATABASE_URL | PostgreSQL 连接字符串，如使用 Supabase：`postgres://postgres.[project]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres?pgbouncer=true` |

| DIRECT_URL | 用于 `prisma migrate` 的直连地址，非 serverless 数据库与 `DATABASE_URL` 保持一致即可 |

| BETTER_AUTH_SECRET | 权限机密，执行 `npx auth secret` 生成随机字符串 |

| BETTER_AUTH_URL | 访问地址，如：`https://example.com` |

| BETTER_AUTH_PASSKEY_RP_ID | Passkey 依赖方标识符，填写您的域名，如：`example.com` |

| BETTER_AUTH_PASSKEY_RP_NAME | Passkey 依赖方名称，如：`PicImpact` |

> Vercel 部署将 `Build Command` 设置为 `pnpm run build:vercel`，Node.js 自行部署使用 `pnpm run build:node`。

>

> Passkey 功能依赖 HTTPS 环境（本地开发可使用 localhost）。

更多详细配置请查阅[文档](https://pic-docs.ziyume.com)。

### 本地开发

```shell

git clone https://github.com/besscroft/PicImpact.git

pnpm i

pnpm run dev

```

### 技术栈

| 类别 | 技术 |

|------|------|

| Web 框架 | [Next.js](https://github.com/vercel/next.js) + [Hono.js](https://github.com/honojs/hono) |

| UI | [Radix](https://www.radix-ui.com/) + [shadcn/ui](https://ui.shadcn.com/) |

| 数据库 | PostgreSQL + [Prisma](https://www.prisma.io/) |

| 认证 | [better-auth](https://www.better-auth.com/) (Email/Password, TOTP, WebAuthn) |

| 图片渲染 | WebGL 查看器（基于 [Afilmory](https://github.com/Afilmory/afilmory)） |

---

## English

PicImpact is a self-deployable photography portfolio website built with Next.js + Hono.js.

### Features

- Masonry gallery layout with [Live Photos](https://support.apple.com/en-us/104966) support via [LivePhotosKit JS](https://developer.apple.com/documentation/livephotoskitjs).

- High-performance WebGL image viewer with smooth zoom/pan, tiling, and LOD optimization.

- Map module for geotagging photos based on EXIF coordinates.

- Full-resolution image preview with EXIF metadata and direct link access.

- Responsive design with dark mode support for both desktop and mobile.

- Storage compatible with S3 API, Cloudflare R2, and Open List API.

- Tag-based image organization with interactive tag filtering.

- RSS feed output with [Follow](https://github.com/RSSNext/Follow) subscription and ownership verification.

- Batch upload with automatic 0.3x compressed preview generation.

- Admin dashboard: statistics, upload, image management, album management, settings, and storage config.

- Two-factor authentication via TOTP ([RFC 6238](https://www.rfc-editor.org/rfc/rfc6238)), supporting Google Authenticator, Microsoft Authenticator, 1Password, etc.

- Passkey passwordless login via WebAuthn standard (biometrics, hardware keys).

- SSR-based hybrid rendering with state management for optimal UX.

- Automatic database initialization and migration via Prisma.

- Deployable on Vercel, Node.js, Docker, and Kubernetes.

### Deployment

Click the button below to deploy to Vercel. **Set `Build Command` to `pnpm run build:vercel`**.



| Key | Description |

|-----|-------------|

| DATABASE_URL | PostgreSQL connection string |

| DIRECT_URL | Direct connection for `prisma migrate` (same as DATABASE_URL for non-serverless) |

| BETTER_AUTH_SECRET | Auth secret, generate with `npx auth secret` |

| BETTER_AUTH_URL | App URL, e.g., `https://example.com` |

| BETTER_AUTH_PASSKEY_RP_ID | Passkey relying party ID (your domain, e.g., `example.com`) |

| BETTER_AUTH_PASSKEY_RP_NAME | Passkey relying party name (e.g., `PicImpact`) |

For more details, see the [documentation](https://pic-docs.ziyume.com).

### Local Development

```shell

git clone https://github.com/besscroft/PicImpact.git

pnpm i

pnpm run dev

```

### Tech Stack

| Category | Technology |

|----------|------------|

| Web Framework | [Next.js](https://github.com/vercel/next.js) + [Hono.js](https://github.com/honojs/hono) |

| UI | [Radix](https://www.radix-ui.com/) + [shadcn/ui](https://ui.shadcn.com/) |

| Database | PostgreSQL + [Prisma](https://www.prisma.io/) |

| Auth | [better-auth](https://www.better-auth.com/) (Email/Password, TOTP, WebAuthn) |

| Image Rendering | WebGL Viewer (based on [Afilmory](https://github.com/Afilmory/afilmory)) |

---

## 日本語

PicImpact は、Next.js + Hono.js で構築されたセルフデプロイ可能な写真ポートフォリオサイトです。

### 機能

- マソンリーレイアウトのギャラリー。[ライブフォト(Live Photos)](https://support.apple.com/ja-jp/104966) に対応（[LivePhotosKit JS](https://developer.apple.com/documentation/livephotoskitjs) ベース）。

- WebGL ベースの高性能画像ビューア。スムーズなズーム・パン操作、タイリングと LOD による大画像の最適化。

- 地図モジュールで EXIF の座標情報に基づいて写真をマッピング。

- 画像クリックで原寸表示、EXIF メタデータの閲覧、ダイレクトリンクに対応。

- レスポンシブデザイン、ダークモード対応（PC・モバイル両対応）。

- S3 API、Cloudflare R2、Open List API に対応したストレージ。

- タグベースの画像整理とインタラクティブなタグフィルタリング。

- RSS フィード出力、[Follow](https://github.com/RSSNext/Follow) による購読と所有権検証に対応。

- バッチアップロード、0.3 倍率の圧縮プレビュー自動生成。

- 管理画面：統計、アップロード、画像管理、アルバム管理、設定、ストレージ設定。

- TOTP 二要素認証（[RFC 6238](https://www.rfc-editor.org/rfc/rfc6238)）、Google Authenticator / Microsoft Authenticator / 1Password 等に対応。

- WebAuthn 標準による Passkey パスワードレスログイン（生体認証、ハードウェアキー）。

- SSR ベースのハイブリッドレンダリング。

- Prisma によるデータベースの自動初期化とマイグレーション。

- Vercel、Node.js、Docker、Kubernetes でのデプロイに対応。

### デプロイ

以下のボタンで Vercel にデプロイできます。**`Build Command` を `pnpm run build:vercel` に設定してください。**



| Key | 説明 |

|-----|------|

| DATABASE_URL | PostgreSQL 接続文字列 |

| DIRECT_URL | `prisma migrate` 用の直接接続（サーバーレスでなければ DATABASE_URL と同じ） |

| BETTER_AUTH_SECRET | 認証シークレット、`npx auth secret` で生成 |

| BETTER_AUTH_URL | アプリの URL、例：`https://example.com` |

| BETTER_AUTH_PASSKEY_RP_ID | Passkey の RP ID（ドメイン名、例：`example.com`） |

| BETTER_AUTH_PASSKEY_RP_NAME | Passkey の RP 名（例：`PicImpact`） |

詳細は[ドキュメント](https://pic-docs.ziyume.com)をご覧ください。

### ローカル開発

```shell

git clone https://github.com/besscroft/PicImpact.git

pnpm i

pnpm run dev

```

### 技術スタック

| カテゴリ | 技術 |

|----------|------|

| Web フレームワーク | [Next.js](https://github.com/vercel/next.js) + [Hono.js](https://github.com/honojs/hono) |

| UI | [Radix](https://www.radix-ui.com/) + [shadcn/ui](https://ui.shadcn.com/) |

| データベース | PostgreSQL + [Prisma](https://www.prisma.io/) |

| 認証 | [better-auth](https://www.better-auth.com/) (Email/Password, TOTP, WebAuthn) |

| 画像レンダリング | WebGL ビューア（[Afilmory](https://github.com/Afilmory/afilmory) ベース） |

---

## Contributing

[New Ideas & Bug Reports](https://github.com/besscroft/PicImpact/issues/new) | [Fork & Pull Request](https://github.com/besscroft/PicImpact/fork)

PicImpact welcomes all contributions including improvements, new features, documentation, and bug reports.

## Browser Support

- Last 2 versions of Chrome, Firefox, Safari and Edge

- Firefox ESR

## Accessibility

Based on [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics) standards.

## Acknowledgements

This project uses JetBrains open source license, developed with IntelliJ IDEA.

![JetBrains logo](https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg)

WebGL image viewer based on [Afilmory](https://github.com/Afilmory/afilmory) `webgl-viewer` module (MIT License).

## License

PicImpact is open source software licensed as [MIT](https://github.com/besscroft/PicImpact/blob/main/LICENSE).

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/besscroft/picimpact

Awesome Lists containing this project

README

PicImpact