Afilmory
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 ## π Features ### Core Functionality - πΌοΈ **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 ### Image Processing - π **HEIC/HEIF Format Support** - Automatic conversion of Apple device HEIC format - π· **TIFF Format Support** - Automatic conversion of TIFF 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 - βοΈ **HDR Image Support** - Display HDR images ### Advanced Features - ποΈ **Fujifilm Recipe** - 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 - π· **Share Image** - Share image to social media or embed iframe to your website - πΊοΈ **Interactive Map Explorer** - Geographic visualization of photos with GPS coordinates from EXIF data using MapLibre ## ποΈ Technical Architecture ### Frontend Tech Stack - **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 ### Build System - **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 ### Storage Architecture 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 ## π Quick Start ### Docker Deployment [Docker Deployment](https://github.com/Afilmory/docker) ## βοΈ Configuration Options #### Remote Repository Configuration (`repo`) To 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. ```json { "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.** #### Storage Configuration (`storage`) - `provider`: Storage provider (`s3` | `github`) - `bucket`: S3 bucket name - `region`: S3 region - `endpoint`: S3 endpoint (optional) - `prefix`: File prefix - `customDomain`: Custom domain - `excludeRegex`: Regular expression to exclude files (optional) #### Build Options (`options`) - `defaultConcurrency`: Default concurrency - `digestSuffixLength`: The length of the SHA-256 digest appended to the photo ID. - `enableLivePhotoDetection`: Enable Live Photo detection - `showProgress`: Show build progress - `showDetailedStats`: Show detailed statistics #### Performance Configuration (`performance`) - `worker.workerCount`: Number of worker processes - `worker.timeout`: Worker timeout (milliseconds) - `worker.useClusterMode`: Enable cluster mode #### Logging Configuration (`logging`) - `verbose`: Verbose logging - `level`: Log level (`info` | `warn` | `error` | `debug`) - `outputToFile`: Output to file ## π CLI Commands ### Build Commands ```bash # 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 ``` ### Development Commands ```bash # Start development server pnpm dev # Build production version pnpm build ``` ### Notes - Ensure your S3 bucket already contains photo files - If using remote repository, configure `builder.config.ts` first ## π§ Advanced Usage ### Custom Storage Provider Implement the `StorageProvider` interface to support new storage backends: ```typescript import { StorageProvider } from './src/core/storage/interfaces' class MyStorageProvider implements StorageProvider { async getFile(key: string): Promise