Skip to content

README.en.md

Latest commit

 

History

History
167 lines (121 loc) · 6.37 KB

README.en.md

File metadata and controls

167 lines (121 loc) · 6.37 KB
Raw

ProcessFrame Studio

license node local first issues stars link

English README | 中文说明

ProcessFrame Studio is a local-first image and video processing workspace for asset cleanup, transparent export, frame-by-frame watermark cleanup, lightweight video editing, and frame extraction. The app keeps user files on the local machine by default. The backend uses FFmpeg and Sharp, while the frontend provides canvas editing, a timeline, frame preview, and visual control panels.

Features

  • Image editing: zoom, crop, rotate, mirror, lasso/magnetic lasso, chroma key, and backend high-resolution export.
  • Image watermark cleanup: one-click “Remove Gemini Watermark”, using the backend first and falling back to the browser engine when needed.
  • Video editing: multi-asset pool, multi-segment timeline, trim, delete, move, mirror, chroma key, audio preservation, and audio mixing.
  • Gemini video watermark cleanup: extract frames at the configured FPS, run the image cleanup engine on every frame with multiple workers, then reassemble the video.
  • Frame tools: 30fps preview strip, time-based frame extraction, ZIP frame export, and sprite-sheet export.
  • AI assistant: supports OpenAI-compatible APIs, Claude, GLM, DeepSeek, Kimi, MiniMax, Gemini, and third-party Base URL + API Key setups. AI cutout/erase buttons stay disabled until an API Key is entered.
  • Cache management: clear uploads, outputs, and runtime data cache from the web UI.

Demo Video

The project introduction video is available here:

media/processframe-studio-intro.mp4

Quick Start

Requirements:

  • Node.js 18 or newer
  • npm
  • A modern browser, preferably Chrome or Edge

Install dependencies:

npm install

Start the local server:

npm start

Open:

http://127.0.0.1:8717

Windows users can also run start.bat.

Usage

Image Workflow

  1. Drop or select an image in the “Image Asset” area.
  2. Use move, crop, transform, stretch, lasso, magnetic lasso, or color picker tools.
  3. For chroma key, pick a color and tune tolerance, feather, precision, edge cleanup, and spill suppression.
  4. Click “Remove Gemini Watermark” when watermark cleanup is needed.
  5. Use backend export when you need to preserve original resolution.

Video Workflow

  1. Drop or select one or more videos in the “Video Asset” area.
  2. Use the 30fps frame strip to locate frames, or drag the timeline to trim a segment.
  3. Add, delete, duplicate, or move timeline segments; configure track, fade, volume, and mirroring.
  4. Click “Export Video” for the normal processed output.
  5. Click “Gemini Video Watermark Cleanup” to extract frames, clean each frame, and rebuild an MP4.

AI Setup

  1. Select an AI provider in the Agent panel.
  2. Enter an official or third-party Base URL.
  3. Enter an API Key and select or fetch a model list.
  4. After saving locally, AI Selection Cutout and AI Erase Fill become available.

The API Key is not committed to the repository. The “Save locally” action stores it in browser localStorage. Do not put real keys into source files or Git history.

Project Structure

.
├─ src/                         # Node.js backend and watermark engine bridge
│  ├─ server.js                 # Express API, FFmpeg, cache, export, job progress
│  └─ gemini-watermark-node.js  # Loads the browser watermark engine in Node
├─ public/                      # Frontend UI, styles, and browser engine
│  ├─ index.html
│  ├─ app.js
│  ├─ styles.css
│  ├─ assets/
│  └─ vendor/
├─ images/                      # README images and donation QR codes
├─ media/                       # Project introduction video
├─ scripts/                     # Helper scripts
├─ tests/                       # Self-contained verification scripts
├─ data/                        # Runtime uploads and outputs, ignored by Git
├─ logs/                        # Local logs, ignored by Git
├─ package.json
├─ package-lock.json
├─ start.bat
├─ README.md
└─ README.en.md

How It Works

The browser handles interaction and fast previews. The Node backend handles large files, original-resolution image work, and video processing.

Image watermark cleanup:

uploaded image / canvas content
  -> backend or browser watermark engine detects the watermark area
  -> alpha maps, position catalogs, and adaptive scores guide restoration
  -> output PNG or update the canvas

Video watermark cleanup:

uploaded video
  -> FFprobe reads size, duration, FPS, and audio tracks
  -> FFmpeg extracts frames at the target FPS
  -> multiple workers run the image cleanup engine on every frame
  -> missing-frame and residual checks guard the output
  -> FFmpeg reassembles MP4, optionally preserving audio

Progress is tracked by backend jobs. The frontend polls /api/jobs/:id, renders progress, and can cancel long-running jobs.

Commands

# Start
npm start

# Syntax checks
npm run check

# Self-contained watermark smoke test
npm run test:watermark

Privacy And Repository Scope

  • node_modules/, data/, logs/, .env*, temporary outputs, and local large videos are ignored.
  • Uploaded files and exported files stay in the local data/ directory.
  • AI keys are stored only in browser localStorage when the user chooses to save them.
  • Only process images and videos that you are allowed to modify.

Support

If the project saves you time, you can support maintenance with the QR codes below.

WeChat Alipay
WeChat donation QR Alipay donation QR

License

MIT