PicImpact

简体中文 | English | 日本語

---

简体中文

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

功能特性

• 瀑布流相册展示图片，支持实况照片(Live Photos)，基于 LivePhotosKit JS 开发。
• 基于 WebGL 的高性能图片查看器，支持流畅的缩放和平移，采用图片分块（Tiling）和 LOD 技术优化大图加载性能。
• 支持地图模组标记图片，根据图片经纬度标记在地图上。
• 点击图片查看原图，浏览图片信息和 EXIF 信息，支持直链访问。
• 响应式设计，在 PC 和移动端都有不错的体验，支持暗黑模式。
• 图片存储兼容 S3 API、Cloudflare R2、Open List API。
• 图片支持绑定标签，并且可通过标签进行交互，筛选标签下所有图片。
• 支持输出 RSS，可以使用 Follow 订阅，并支持订阅源所有权验证。
• 支持批量自动化上传，上传图片时会生成 0.3 倍率的压缩图片，以提供加载优化。
• 后台有图片数据统计、图片上传、图片维护、相册管理、系统设置和存储配置功能。
• 双因素认证功能，基于 TOTP 算法 RFC 6238，支持 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）。

更多详细配置请查阅文档。

本地开发

git clone https://github.com/besscroft/PicImpact.git
pnpm i
pnpm run dev

技术栈

类别	技术
Web 框架	Next.js + Hono.js
UI	Radix + shadcn/ui
数据库	PostgreSQL + Prisma
认证	better-auth (Email/Password, TOTP, WebAuthn)
图片渲染	WebGL 查看器（基于 Afilmory）

---

English

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

Features

• Masonry gallery layout with Live Photos support via LivePhotosKit JS.
• 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 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), 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.

Local Development

git clone https://github.com/besscroft/PicImpact.git
pnpm i
pnpm run dev

Tech Stack

Category	Technology
Web Framework	Next.js + Hono.js
UI	Radix + shadcn/ui
Database	PostgreSQL + Prisma
Auth	better-auth (Email/Password, TOTP, WebAuthn)
Image Rendering	WebGL Viewer (based on Afilmory)

---

日本語

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

機能

• マソンリーレイアウトのギャラリー。ライブフォト(Live Photos) に対応（LivePhotosKit JS ベース）。
• WebGL ベースの高性能画像ビューア。スムーズなズーム・パン操作、タイリングと LOD による大画像の最適化。
• 地図モジュールで EXIF の座標情報に基づいて写真をマッピング。
• 画像クリックで原寸表示、EXIF メタデータの閲覧、ダイレクトリンクに対応。
• レスポンシブデザイン、ダークモード対応（PC・モバイル両対応）。
• S3 API、Cloudflare R2、Open List API に対応したストレージ。
• タグベースの画像整理とインタラクティブなタグフィルタリング。
• RSS フィード出力、Follow による購読と所有権検証に対応。
• バッチアップロード、0.3 倍率の圧縮プレビュー自動生成。
• 管理画面：統計、アップロード、画像管理、アルバム管理、設定、ストレージ設定。
• TOTP 二要素認証（RFC 6238）、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）

詳細はドキュメントをご覧ください。

ローカル開発

git clone https://github.com/besscroft/PicImpact.git
pnpm i
pnpm run dev

技術スタック

カテゴリ	技術
Web フレームワーク	Next.js + Hono.js
UI	Radix + shadcn/ui
データベース	PostgreSQL + Prisma
認証	better-auth (Email/Password, TOTP, WebAuthn)
画像レンダリング	WebGL ビューア（Afilmory ベース）

---

Contributing

New Ideas & Bug Reports | Fork & Pull Request

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 standards.

Acknowledgements

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

WebGL image viewer based on Afilmory webgl-viewer module (MIT License).

License

PicImpact is open source software licensed as MIT.