Afilmory (/ΙΛfΙͺlmΙri/, "uh-FIL-muh-ree") is a term created for personal photography websites, blending Auto Focus (AF), aperture (light control), film (vintage medium), and memory (captured moments).
A modern photo gallery website built with React + TypeScript, supporting automatic photo synchronization from multiple storage sources (S3, GitHub), featuring high-performance WebGL rendering, masonry layout, EXIF information display, thumbnail generation, and more.
Live Photo Galleries:
- https://afilmory.innei.in
- https://gallery.mxte.cc
- https://photography.pseudoyu.com
- https://afilmory.magren.cc
- πΌοΈ High-Performance WebGL Image Renderer - Custom WebGL component with smooth zoom and pan operations
- π± Responsive Masonry Layout - Powered by Masonic, adapts to different screen sizes
- π¨ Modern UI Design - Built with Tailwind CSS and Radix UI component library
- β‘ Incremental Sync - Smart change detection, processes only new or modified photos
- π i18n - Multi-language support
- π OpenGraph - OpenGraph metadata for social media sharing
- π HEIC/HEIF Format Support - Automatic conversion of Apple device HEIC format
- πΌοΈ Smart Thumbnail Generation - Multi-size thumbnails for optimized loading performance
- π EXIF Information Display - Complete shooting parameters including camera model, focal length, aperture, etc.
- π Blurhash Placeholders - Elegant image loading experience
- π± Live Photo Support - Detection and display of iPhone Live Photos
- ποΈ Fujifilm Simulation - Read and display Fujifilm camera film simulation settings
- π Fullscreen Viewer - Image viewer with gesture support
- π·οΈ File System Tags - Auto-generated tags based on file system
- β‘ Concurrent Processing - Multi-process/multi-thread concurrent processing support
- ποΈ Multi-Storage Support - S3, GitHub, and other storage backends
- React 19 - Latest React version with Compiler
- TypeScript - Complete type safety
- Vite - Modern build tool
- Tailwind CSS - Atomic CSS framework
- Radix UI - Accessible component library
- Jotai - State management
- TanStack Query - Data fetching and caching
- React Router 7 - Routing management
- i18next - Internationalization
- Node.js - Server-side runtime
- Sharp - High-performance image processing
- AWS SDK - S3 storage operations
- Worker Threads/Cluster - Concurrent processing
- EXIF-Reader - EXIF data extraction
Designed with adapter pattern, supporting multiple storage backends:
- S3-Compatible Storage - AWS S3, MinIO, Alibaba Cloud OSS, etc.
- GitHub Storage - Using GitHub repository as image storage
- Node.js 18+
- At least 4GB RAM (for image processing)
git clone https://github.com/Afilmory/Afilmory.git
cd photo-gallery-sitepnpm installCreate .env file:
# S3 Storage Keys
S3_ACCESS_KEY_ID=your_access_key_id
S3_SECRET_ACCESS_KEY=your_secret_access_keyCreate builder.config.json file for storage configuration and other options:
{
"storage": {
"provider": "s3",
"bucket": "my-photos",
"region": "us-east-1",
"prefix": "photos/",
"customDomain": "https://cdn.example.com",
"endpoint": "https://s3.amazonaws.com"
}
}Copy and edit the configuration file:
cp config.example.json config.jsonEdit config.json:
{
"name": "My Afilmory",
"title": "My Afilmory",
"description": "Capturing beautiful moments in life",
"url": "https://afilmory.example.com",
"accentColor": "#007bff", // Optional, set theme color
"author": {
"name": "Your Name", // Required, set author name
"url": "https://example.com", // Required, set author homepage
"avatar": "https://example.com/avatar.png" // Required, set author avatar
},
"social": {
// Optional, set social accounts
"twitter": "@yourusername"
},
"feed": {
"folo": { // Optional, set Folo RSS claim
"challenge": {
"feedId": "155982289762921472",
"userId": "41312624216137728"
}
}
}
}# Initial build
pnpm run build:manifest
# Incremental update
pnpm run build:manifest
# Force full update
pnpm run build:manifest -- --forcepnpm devTo achieve incremental builds in CI, it is necessary to configure a cache repository, which will pull the cache before each build and upload the build results after the build.
{
"repo": {
"enable": true,
"url": "https://github.com/username/gallery-assets"
}
}This will automatically pull resources from the remote repository, avoiding rebuilds each time.
In order to achieve uploading to the git repository, you need to provide a GIT_TOKEN and write it in the .env file.
provider: Storage provider (s3|github)bucket: S3 bucket nameregion: S3 regionendpoint: S3 endpoint (optional)prefix: File prefixcustomDomain: Custom domainexcludeRegex: Regular express 8000 ion to exclude files (optional)
defaultConcurrency: Default concurrencyenableLivePhotoDetection: Enable Live Photo detectionshowProgress: Show build progressshowDetailedStats: Show detailed statistics
worker.workerCount: Number of worker processesworker.timeout: Worker timeout (milliseconds)worker.useClusterMode: Enable cluster mode
verbose: Verbose logginglevel: Log level (info|warn|error|debug)outputToFile: Output to file
# View help
pnpm run build:manifest -- --help
# Incremental update (default)
pnpm run build:manifest
# Force full update
pnpm run build:manifest -- --force
# Only regenerate thumbnails
pnpm run build:manifest -- --force-thumbnails
# Only regenerate manifest
pnpm run build:manifest -- --force-manifest# Start development server
pnpm dev
# Build production version
pnpm build- Ensure your S3 bucket already contains photo files
- If using remote repository, configure
builder.config.jsonfirst
Implement the StorageProvider interface to support new storage backends:
import { StorageProvider } from './src/core/storage/interfaces'
class MyStorageProvider implements StorageProvider {
async getFile(key: string): Promise<Buffer | null> {
// Implement file retrieval logic
}
async listImages(): Promise<StorageObject[]> {
// Implement image list retrieval logic
}
// ... other methods
}Add custom processors in the src/core/image/ directory:
export async function customImageProcessor(buffer: Buffer) {
// Custom image processing logic
return processedBuffer
}MIT License Β© 2025 Innei
If this project helps you, please give it a βοΈ Star for support!