https://github.com/mmar58/video-gallery
A modern video gallery written with node js backend and svelte frontend. Which features auto tagging using ollama and auto thumbnail and spreedsheet animation generation using ffmpeg.
https://github.com/mmar58/video-gallery
automation express ffmpeg nodejs ollama socket-io tag thumbnail-generator video-gallery
Last synced: 4 months ago
JSON representation
A modern video gallery written with node js backend and svelte frontend. Which features auto tagging using ollama and auto thumbnail and spreedsheet animation generation using ffmpeg.
- Host: GitHub
- URL: https://github.com/mmar58/video-gallery
- Owner: mmar58
- Created: 2024-08-25T01:31:08.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-12-30T23:12:16.000Z (6 months ago)
- Last Synced: 2026-01-03T14:16:40.151Z (6 months ago)
- Topics: automation, express, ffmpeg, nodejs, ollama, socket-io, tag, thumbnail-generator, video-gallery
- Language: Svelte
- Homepage:
- Size: 931 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- License: license.txt
Awesome Lists containing this project
README
# Intelligent Video Gallery
A modern, self-hosted video gallery application featuring AI-powered tagging, timeline views, and advanced video management. Built with SvelteKit and Node.js.
## 🚀 Features
### Core Experience
* **Infinite Scroll Gallery**: Seamlessly browse thousands of videos with high performance.
* **Timeline View**: Browse videos chronologically with a "Google Photos" style layout, grouped by date.
* **Smart Video Player**: Floating, draggable, and resizable video player that persists navigation.
* **Rich Previews**:
* Auto-generated thumbnails.
* Sprite-sheet based animated hover previews.
### 🧠 AI & Automation
* **Auto-Tagging**: Integrates with [Ollama](https://ollama.com/) to automatically analyze video filenames and generate descriptive tags using local LLMs (Llama 3, Mistral, etc.).
* **Auto-Thumbnails**: background generation of optimized thumbnails and animated previews using FFmpeg.
### 🏷️ Organization & Management
* **Advanced Tagging**:
* Manual tag addition/removal.
* **Tag Manager**: centralized UI to rename, delete, or merge tags globally.
* **Blacklist**: Prevent specific unwanted tags from being generated by the AI.
* **Video Management**: Rename or delete videos directly from the UI.
* **Search & Filters**:
* Full-text search.
* Filter by Date Range (Quick jump presets, Month/Year buckets).
* Filter by Tags.
* Sort by Name, Date, Likes, or **Random**.
## 🛠️ Tech Stack
* **Frontend**: SvelteKit, TailwindCSS, Lucide Icons.
* **Backend**: Node.js, Express, Socket.IO (for real-time progress updates).
* **Data Persistence**: JSON-based local storage (no heavy database required for personal use).
* **Media Processing**: `ffmpeg-static`, `fluent-ffmpeg`.
## ⚙️ Prerequisites
1. **Node.js**: v18+ recommended.
2. **FFmpeg**: Required on the system path or handled via `ffmpeg-static`.
3. **Ollama**: (Optional) For AI auto-tagging features. Install from [ollama.com](https://ollama.com/) and pull a model (e.g., `ollama pull llama3`).
## 📦 Installation & Setup
### 1. Backend
Navigate to the `backend` directory:
```bash
cd backend
npm install
```
Create a `.env` file in `backend/` (optional, defaults provided in code):
```env
PORT=5000
ASSETS_PATH=../../assets
DATA_PATH=../data
```
### 2. Frontend
Navigate to the `frontend` directory:
```bash
cd frontend
npm install
```
## 🚀 Running the Project
You need to run both the backend and frontend servers.
**Terminal 1 (Backend):**
```bash
cd backend
npm run dev
# Server runs on http://localhost:5000
```
**Terminal 2 (Frontend):**
```bash
cd frontend
npm run dev
# Client runs on http://localhost:5173
```
## 📜 Scripts (Backend)
The backend includes utility scripts for bulk processing:
* **Generate Thumbnails**: process all videos without thumbnails.
```bash
npm run script:thumb
```
* **Auto-Tag Videos**: process untagged videos using the active LLM.
```bash
npm run script:tag
```
## 📂 Project Structure
```
├── assets/ # Storage for images/videos (shared)
├── backend/ # Express Server
│ ├── data/ # JSON data store (videos.json, blacklist.json)
│ ├── src/
│ │ ├── services/ # Business logic (ffmpeg, ollama)
│ │ └── routes/ # API Endpoints
├── frontend/ # SvelteKit App
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── routes/ # Pages (Gallery, Timeline, Tags)
│ │ └── stores/ # State management
```
## 🤝 Contributing
Feel free to open issues or submit PRs for improvements!