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 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 and pull a model (e.g., ollama pull llama3).

📦 Installation & Setup

1. Backend

Navigate to the backend directory:

cd backend
npm install

Create a .env file in backend/ (optional, defaults provided in code):

PORT=5000
ASSETS_PATH=../../assets
DATA_PATH=../data

2. Frontend

Navigate to the frontend directory:

cd frontend
npm install

🚀 Running the Project

You need to run both the backend and frontend servers.

Terminal 1 (Backend):

cd backend
npm run dev
# Server runs on http://localhost:5000

Terminal 2 (Frontend):

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.

  npm run script:thumb
  

• Auto-Tag Videos: process untagged videos using the active LLM.

  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!