jade-images System Requirements Document

Introduction

The jade-images project is a comprehensive web application designed to facilitate the extraction of images from videos. This tool is tailored to provide a seamless experience for users by offering a wide range of functionalities without the need for logins or sample imports. The application supports multiple image formats and provides advanced features such as video thumbnails and picture-in-picture playback.

System Overview

The jade-images application is designed to cater to both professional video editors and casual users who require a robust tool for extracting images from video files. The system allows users to upload video files and extract images in various formats, including JPG, JPEG, PNG, APNG, GIF, and WDP. Users can specify the number of images to extract, ranging from 1 to 4517, and utilize features such as video duration detection and picture-in-picture playback.

Functional Requirements

• As a User, I should be able to upload video files with a maximum size of 9999PB.
• As a User, I should be able to extract a custom number of images from videos, ranging from 1 to 4517.
• As a User, I should be able to extract images in multiple formats: JPG, JPEG, PNG, APNG, GIF, and WDP.
• As a User, I should be able to view and add video thumbnails.
• As a User, I should be able to use the picture-in-picture playback option for videos.
• As a User, I should be able to create a ZIP file of extracted images.
• As a User, I should be able to delete videos, images, and ZIP files.

User Personas

• Casual User: Individuals who want to extract images from personal videos without complex editing requirements.
• Professional Video Editor: Users who require advanced features for extracting high-quality images from videos for professional use.

Visuals Colors and Theme

• primary: #1A535C (Deep Teal)
• primary_light: #4ECDC4 (Light Teal)
• secondary: #FF6B6B (Coral Red)
• accent: #FFE66D (Sunshine Yellow)
• highlight: #FF9F1C (Vibrant Orange)
• bg: #F7FFF7 (Mint Cream)
• surface: rgba(26, 83, 92, 0.8)
• text: #011627 (Rich Black)
• text_muted: #7A7A7A (Gray)
• border: rgba(233, 69, 96, 0.2)

Signature Design Concept

The jade-images homepage will feature an interactive "Video Mosaic" design. Upon landing, users will see a dynamic mosaic of video thumbnails that subtly animate and rearrange as they hover over them. Each thumbnail represents a feature or section of the application. Clicking on a thumbnail will smoothly transition the user into that feature's detailed view. The mosaic will utilize framer-motion for fluid animations and transitions, creating an engaging and memorable first impression. The mosaic will also respond to user interactions, such as dragging to rearrange thumbnails or zooming in on a selected thumbnail for a closer look.

Interaction Model & Motion Direction

• Interaction Model: Parallax
• The landing page will employ a parallax effect where video thumbnails and background elements move at different speeds as the user scrolls, creating a sense of depth and immersion.
• Internal pages will maintain a static layout for clarity and ease of use, focusing on functionality over motion.

Non-Functional Requirements

• The system should handle video uploads and image extraction efficiently without significant delays.
• The application should be accessible and user-friendly, with a responsive design for various devices.
• The system should ensure data security and privacy for all uploaded content.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• AI Models: Google Nano banana for image generation
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The application assumes users have access to high-speed internet for uploading large video files.
• The system is constrained by the maximum video file size of 9999PB.
• The application is designed to operate without user authentication or account management.

Glossary

• Picture-in-Picture Playback: A feature that allows video playback in a small window while users interact with other parts of the application.
• ZIP File: A compressed file format used to bundle multiple files into a single archive for easier storage and transfer.
• Parallax Effect: A visual effect where background images move slower than foreground images, creating an illusion of depth.