8000 GitHub - Yuri-NagaSaki/ImageFlow: Modern Image Service System
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Yuri-NagaSaki/ImageFlow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

ImageFlow - Modern Image Service System

ไธญๆ–‡ๆ–‡ๆกฃ | ้ƒจ็ฝฒ่ฏดๆ˜Ž | ่ดก็ŒฎๆŒ‡ๅ— | Ask DeepWiki

ImageFlow Logo

Efficient and Intelligent Image Management and Distribution System

ImageFlow is an efficient image service system designed for modern websites and applications. It automatically provides the most suitable images based on device type and supports modern image formats like WebP and AVIF, significantly improving website performance and user experience.

โœจ Key Features

  • API Key Authentication: Secure API key verification mechanism to protect your image upload functionality
  • Adaptive Image Service: Automatically provides landscape or portrait images based on device type (desktop/mobile)
  • Modern Format Support: Automatically detects browser compatibility and serves WebP or AVIF format images
  • Image Expiration: Set expiration times for images with automatic deletion when expired (works with both local and S3 storage)
  • Simple API: Get random images through simple API calls with tag filtering support
  • User-Friendly Upload Interface: Drag-and-drop upload interface with dark mode support, real-time preview, and tag management
  • Image Management: View, filter, and delete images with an intuitive management interface
  • Automatic Image Processing: Automatically detects image orientation and converts to multiple formats after upload
  • Asynchronous Processing: Image conversion happens in the background without affecting the main service
  • High Performance: Optimized for network performance to reduce loading time
  • Easy Deployment: Simple configuration and deployment process
  • Multiple Storage Support: Supports local storage and S3-compatible storage (like R2)
  • Redis Support: Optional Redis integration for metadata and tags storage with improved performance

๐Ÿ“ธ Interface Preview

ImageFlow ImageFlow ImageFlow ImageFlow ImageFlow

๐Ÿ”ง Quick Start

Prerequisites

  • Go 1.22 or higher
  • Node.js 18 or higher (for frontend build)
  • WebP tools (libwebp-tools)
  • AVIF tools (libavif-apps)
  • Redis (optional, for metadata and tags storage)
  • Docker and Docker Compose (optional, for containerized deployment)

Installation

Method 1: Direct Installation

  1. Clone the repository
git clone https://github.com/Yuri-NagaSaki/ImageFlow.git
cd ImageFlow
  1. Build frontend
cd frontend
bash build.sh
  1. Build backend
go mod tidy
go build -o imageflow
  1. Configure environment variables
cp .env.example .env
# Edit the .env file with your configuration
  1. Set up system service (example using systemd)
[Unit]
Description=ImageFlow Service
After=network.target

[Service]
ExecStart=/path/to/imageflow
WorkingDirectory=/path/to/imageflow/directory
Restart=always
User=youruser
EnvironmentFile=/path/to/imageflow/.env

[Install]
WantedBy=multi-user.target
  1. Enable the service
sudo systemctl enable imageflow
sudo systemctl start imageflow

Method 2: Docker Deployment

Frontend-Backend Separated Version (Optimized image loading, higher resource usage)
  1. Using pre-built image (recommended)
# 1. Clone the repository
git clone https://github.com/Yuri-NagaSaki/ImageFlow.git
cd ImageFlow

# 2. Configure environment
cp .env.example .env
# Edit the .env file

# 3. Start service
docker compose -f docker-compose-separate.yaml up -d
  1. Local build deployment
# 1. Clone the repository
git clone https://github.com/Yuri-NagaSaki/ImageFlow.git
cd ImageFlow

# 2. Configure environment
cp .env.example .env
# Edit the .env file

# 3. Build and start
docker compose -f docker-compose-separate-build.yaml up --build -d
Backend-Only Deployment (May have slower image loading due to native HTML)
# 1. Clone the repository
git clone https://github.com/Yuri-NagaSaki/ImageFlow.git
cd ImageFlow

# 2. Configure environment
cp .env.example .env
# Edit the .env file

# 3. Start service
docker compose -f docker-compose.yaml up -d

Configuration Guide

Configure the system by creating and editing the .env file. Here are the main configuration options:

# API Key Configuration
API_KEY=your_api_key_here  # Set your API key

# Storage Configuration
STORAGE_TYPE=local  # Storage type: local or s3 (S3-compatible storage)
METADATA_STORE_TYPE=redis  # Type of metadata storage to use (currently only redis is supported)
LOCAL_STORAGE_PATH=static/images  # Local storage path

# Redis Configuration
REDIS_ENABLED=true  # Enable Redis for metadata and tags storage
REDIS_HOST=localhost  # Redis server host
REDIS_PORT=6379  # Redis server port
REDIS_PASSWORD=  # Redis password
REDIS_DB=0  # Redis database number
REDIS_TLS_ENABLED=false  # Enable TLS for Redis connection

# S3 Storage Configuration (required when STORAGE_TYPE=s3)
S3_ENDPOINT=  # S3 endpoint address
S3_REGION=    # S3 region
S3_ACCESS_KEY=  # Access key
S3_SECRET_KEY=  # Secret key
S3_BUCKET=      # Bucket name
CUSTOM_DOMAIN=  # Custom domain

# Image Processing Configuration
MAX_UPLOAD_COUNT=20    # Maximum upload count per request
IMAGE_QUALITY=80      # Image quality (1-100)
WORKER_THREADS=4      # Number of parallel processing threads
SPEED=5              # Encoding speed (0-8)

# Parameters needed only for frontend-backend separation
#NEXT_PUBLIC_API_URL=http://localhost:8686 # Backend URL
NEXT_PUBLIC_API_URL=
# Backend URL and image domain (not needed if using local storage)
NEXT_PUBLIC_REMOTE_PATTERNS=

Metadata Migration

If you enable Redis after previously using file-based metadata storage, you can migrate your metadata to Redis:

# Run the migration tool
bash migrate.sh

# Force migration even if it was already completed
bash migrate.sh --force

# Specify a custom .env file
bash migrate.sh --env /path/to/.env

๐Ÿ“ Usage

Getting Random Images

Get random images through the API (no API key required):

GET http://localhost:8686/api/random
GET http://localhost:8686/api/random?tag=nature

The system returns the most suitable image based on the device type and browser support in request headers. You can also filter random images by tags.

API Reference

Not required
Endpoint Method Description Parameters Authentication
/api/random GET Get a random image tag: Optional, filter by tag
Not required
/api/upload POST Upload new images Form data, field name "images[]"
Optional: expiryMinutes (expiration time in minutes)
Optional: tags (array of tags)
API key required
/api/delete-image POST Delete an image and all its formats JSON with id and storageType API key required
/api/validate-api-key POST Validate API key API key in request header
/api/images GET List all uploaded images Optional: tag (filter by tag) API key required
/api/config GET Get system configuration None API key required
/api/trigger-cleanup POST Manually trigger cleanup of expired images None API key required
/api/tags GET Get all available tags None API key required
/api/debug/tags GET Get detailed tag information None API key required

Project Structure

ImageFlow/
โ”œโ”€โ”€ .github/        # GitHub related configurations
โ”œโ”€โ”€ cmd/            # Command-line tools
โ”‚   โ””โ”€โ”€ migrate/    # Metadata migration tool
โ”œโ”€โ”€ config/         # Configuration related code
โ”‚   โ””โ”€โ”€ config.go   # Main configuration definitions
โ”œโ”€โ”€ docs/           # Documentation and images
โ”‚   โ””โ”€โ”€ img/        # Documentation images
โ”œโ”€โ”€ favicon/        # Favicon assets
โ”œโ”€โ”€ frontend/       # Next.js frontend application
โ”‚   โ”œโ”€โ”€ app/        # Next.js app directory
โ”‚   โ”‚   โ”œโ”€โ”€ components/  # React components
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ ImageDetail/  # Image detail components
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ ui/     # UI common components
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ upload/ # Upload related components
โ”‚   โ”‚   โ”œโ”€โ”€ hooks/     # React hooks
โ”‚   โ”‚   โ”œโ”€โ”€ manage/    # Management page
โ”‚   โ”‚   โ”œโ”€โ”€ types/     # TypeScript type definitions
โ”‚   โ”‚   โ””โ”€โ”€ utils/     # Frontend utility functions
โ”‚   โ”œโ”€โ”€ public/     # Public assets
โ”‚   โ”œโ”€โ”€ next.config.mjs  # Next.js configuration file
โ”‚   โ”œโ”€โ”€ package.json    # Frontend dependencies
โ”‚   โ”œโ”€โ”€ build.sh        # Unix build script
โ”‚   โ””โ”€โ”€ build.bat       # Windows build script
โ”œโ”€โ”€ handlers/       # HTTP request handlers
โ”‚   โ”œโ”€โ”€ auth.go     # Authentication handlers
โ”‚   โ”œโ”€โ”€ config_handler.go # Configuration API handlers
โ”‚   โ”œโ”€โ”€ debug.go    # Debug information handlers
โ”‚   โ”œโ”€โ”€ delete.go   # Image deletion handlers
โ”‚   โ”œโ”€โ”€ image.go    # Image handlers
โ”‚   โ”œโ”€โ”€ list.go     # Listing handlers
โ”‚   โ”œโ”€โ”€ random.go   # Random image handlers
โ”‚   โ”œโ”€โ”€ tags.go     # Tag handlers
โ”‚   โ””โ”€โ”€ upload.go   # Upload handlers
โ”œโ”€โ”€ logs/           # Application logs directory
โ”œโ”€โ”€ scripts/        # Utility scripts
โ”œโ”€โ”€ static/         # Static files and image storage
โ”‚   โ”œโ”€โ”€ _next/      # Next.js static assets
โ”‚   โ””โ”€โ”€ images/     # Image storage directory
โ”‚       โ”œโ”€โ”€ landscape/  # Landscape images
โ”‚       โ”‚   โ”œโ”€โ”€ avif/   # AVIF format
โ”‚       โ”‚   โ””โ”€โ”€ webp/   # WebP format
โ”‚       โ”œโ”€โ”€ portrait/   # Portrait images
โ”‚       โ”‚   โ”œโ”€โ”€ avif/   # AVIF format
โ”‚   โ”‚   โ””โ”€โ”€ webp/   # WebP format
โ”‚       โ”œโ”€โ”€ original/   # Original images
โ”‚       โ”‚   โ”œโ”€โ”€ landscape/  # Original landscape
โ”‚       โ”‚   โ””โ”€โ”€ portrait/   # Original portrait
โ”‚       โ”œโ”€โ”€ gif/       # GIF format images
โ”‚       โ””โ”€โ”€ metadata/  # Image metadata (including expiration information)
โ”œโ”€โ”€ utils/          # Backend utility functions
โ”‚   โ”œโ”€โ”€ cleaner.go  # Expired image cleanup
โ”‚   โ”œโ”€โ”€ converter_bimg.go # Image conversion
โ”‚   โ”œโ”€โ”€ device.go   # Device detection
โ”‚   โ”œโ”€โ”€ helpers.go  # Helper functions
โ”‚   โ”œโ”€โ”€ image.go    # Image processing
โ”‚   โ”œโ”€โ”€ metadata.go # Metadata handling
โ”‚   โ”œโ”€โ”€ redis.go    # Redis client and operations
โ”‚   โ”œโ”€โ”€ s3client.go # S3 storage client
โ”‚   โ”œโ”€โ”€ storage.go  # Storage interface
โ”‚   โ”œโ”€โ”€ worker_pool.go # Asynchronous worker pool
โ”‚   โ”œโ”€โ”€ errors/     # Error handling
โ”‚   โ””โ”€โ”€ logger/     # Logging system
โ”œโ”€โ”€ .cursor/        # Cursor editor rules and configurations
โ”œโ”€โ”€ .env            # Environment variables
โ”œโ”€โ”€ .env.example    # Example environment configuration
โ”œโ”€โ”€ Dockerfile      # Main Docker configuration
โ”œโ”€โ”€ Dockerfile.backend # Backend Docker configuration
โ”œโ”€โ”€ Dockerfile.frontend # Frontend Docker configuration
โ”œโ”€โ”€ docker-compose.yaml      # Docker Compose configuration
โ”œโ”€โ”€ docker-compose-build.yml # Docker Compose build configuration
โ”œโ”€โ”€ docker-compose-separate.yaml # Frontend-Backend separated configuration
โ”œโ”€โ”€ docker-compose-separate-build.yaml # Frontend-Backend separated build
โ”œโ”€โ”€ migrate.sh     # Metadata migration script
โ”œโ”€โ”€ go.mod          # Go module file
โ”œโ”€โ”€ go.sum          # Go module checksum
โ”œโ”€โ”€ main.go         # Main application entry
โ”œโ”€โ”€ README.md       # English project documentation
โ”œโ”€โ”€ README_zh.md    # Chinese project documentation
โ”œโ”€โ”€ contributing.md # Contribution guidelines
โ””โ”€โ”€ LICENSE         # License information

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ“ž Contact

Blog - ็Œซ็Œซๅšๅฎข

Project Link: https://github.com/Yuri-NagaSaki/ImageFlow


โค๏ธ Thanks

YXVM sponsored this project

NodeSupport sponsored this project

โญ If you like this project, please give it a star! โญ

Made with โค๏ธ by Yuri NagaSaki

About

Modern Image Service System

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •  
0