Video to GIFs Project

This project allows you to upload videos, transcribe them using Whisper, and generate GIFs with synchronized text.

Table of Contents

• Prerequisites
• Installation
  • Backend
  • Frontend
• Configuration
• Running the Project
• Summary of Commands
• API Documentation
  • Upload Video
  • Get Video Processing Status
  • Get GIF Generation Status
  • Get Processed Text
  • Generate GIFs
  • Get GIFs
• Contributing
• License

Prerequisites

• Python 3.7+: Ensure Python is installed.
• Redis: Required for Celery task queue. Install Redis.
• Node.js and npm: Required for the frontend. Install Node.js and npm.
• ImageMagick: Required for text rendering in GIFs by MoviePy. Install ImageMagick.

Installation

Backend

1. Clone the Repository

   Clone the repository and navigate to the backend directory:

   git clone https://github.com/anjalilaishram/video-to-gifs.git
   cd video-to-gifs/backend

2. Create and Activate Virtual Environment

   Create a virtual environment and activate it:

   python3 -m venv venv
   source venv/bin/activate  # On Windows, use `venv\Scripts\activate`

3. Install Python Dependencies

   Install the required Python packages:

   pip install -r requirements.txt

4. Install ImageMagick

   Install ImageMagick, needed by MoviePy for text rendering in GIFs:

   • macOS: Use Homebrew:

     brew install imagemagick

   • Ubuntu/Debian: Use apt:

     sudo apt update
     sudo apt install imagemagick

   • Windows: Download and install ImageMagick from the official website. During installation, make sure to check the option to add ImageMagick to your system PATH.

5. Install Redis

   Install Redis, required for Celery task queue:

   • macOS: Use Homebrew:

     brew install redis

     Start Redis:

     brew services start redis

   • Ubuntu/Debian:

     sudo apt update
     sudo apt install redis-server

     Start Redis:

     sudo systemctl start redis-server

   • Windows: Download Redis from the official website. Extract the downloaded ZIP file, navigate to the directory, and run:

     redis-server.exe

6. Configure Environment Variables

   Create a .env file in the backend directory with the following content:

   MONGO_URI=mongodb://localhost:27017/video_processing_db
   CELERY_BROKER_URL=redis://localhost:6379/0
   CELERY_RESULT_BACKEND=redis://localhost:6379/0
   

7. Run MongoDB

   Ensure MongoDB is running. Start MongoDB with:

   • macOS:

     brew services start mongodb/brew/mongodb-community

   • Ubuntu/Debian:

     sudo systemctl start mongod

   • Windows: Run MongoDB from the installation directory or use the MongoDB Compass GUI.

8. Run Flask Application

   Run the Flask application:

   python app.py

9. Run Celery Worker

   In a new terminal, navigate to the backend directory and start the Celery worker:

   celery -A celery_worker.celery worker --loglevel=info

Frontend

1. Navigate to the Frontend Directory

   Navigate to the frontend directory:

   cd ../frontend

2. Install Node.js Dependencies

   Install the required Node.js packages:

   npm install

3. Start the React Development Server

   Start the React development server:

   npm start

   The frontend will be running at http://localhost:3000.

Configuration

Configure the backend using the .env file located in the backend directory. Set the appropriate environment variables for MongoDB, Redis, and other settings.

Running the Project

1. Backend: Follow the backend installation steps to run the Flask server and Celery worker.
2. Frontend: Follow the frontend installation steps to run the React development server.

Summary of Commands

Backend Commands

• Clone the repository and navigate to backend directory:

  git clone https://github.com/anjalilaishram/video-to-gifs.git
  cd video-to-gifs/backend

• Create and activate a virtual environment:

  python3 -m venv venv
  source venv/bin/activate

• Install dependencies:

  pip install -r requirements.txt

• Start Redis:

  redis-server

• Start MongoDB:

  sudo systemctl start mongod
  # For macOS:
  brew services start mongodb/brew/mongodb-community

• Run the Flask app:

  python app.py

• Run the Celery worker:

  celery -A celery_worker.celery worker --loglevel=info

Frontend Commands

• Navigate to the frontend directory:

  cd ../frontend

• Install dependencies:

  npm install

• Start the React development server:

  npm start

API Documentation

Upload Video

Endpoint: POST /upload

• Description: Uploads a video file for processing.

• Request:

  • Headers: Content-Type: multipart/form-data
  • Body: Form-data containing the video file.

  Key	Type	Description
  file	File	The video file to upload

• Response:

  • Success (200 OK)

    {
      "video_id": "string",
      "task_id": "string"
    }

    Key	Type	Description
    video_id	string	The unique ID for the uploaded video
    task_id	string	The Celery task ID for processing the video

  • Error (400 Bad Request)

    {
      "error": "No file part" | "No selected file"
    }

Get Video Processing Status

Endpoint: GET /status/video/{task_id}

• Description: Gets the processing status of the uploaded video.

• Request:

  • Path Parameters:

    Parameter	Type	Description
    task_id	string	The Celery task ID for video processing

• Response:

  • Success (200 OK)

    {
      "status": "queued" | "processing" | "processed" | "failed",
      "queue_position": integer | null,
      "task_status": "PENDING" | "STARTED" | "SUCCESS" | "FAILURE" | "REVOKED",
      "video_id": "string"
    }

    Key	Type	Description
    status	string	The current processing status of the video
    queue_position	integer	Position in the processing queue, or null
    task_status	string	The Celery task status
    video_id	string	The unique ID of the video

  • Error (404 Not Found)

    {
      "error": "Task not found"
    }

Get GIF Generation Status

Endpoint: GET /status/gif/{task_id}

• Description: Gets the status of GIF generation for the video.

• Request:

  • Path Parameters:

    Parameter	Type	Description
    task_id	string	The Celery task ID for GIF generation

• Response:

  • Success (200 OK)

    {
      "status": "queued" | "processing" | "complete" | "failed",
      "queue_position": integer | null,
      "task_status": "PENDING" | "STARTED" | "SUCCESS" | "FAILURE" | "REVOKED",
      "video_id": "string"
    }

    Key	Type	Description
    status	string	The current status of the GIF generation
    queue_position	integer	Position in the generation queue, or null
    task_status	string	The Celery task status
    video_id	string	The unique ID of the video

  • Error (404 Not Found)

    {
      "error": "Task not found"
    }

Get Processed Text

Endpoint: GET /result/{video_id}

• Description: Gets the transcribed text segments from the video.

• Request:

  • Path Parameters:

    Parameter	Type	Description
    video_id	string	The unique ID of the video

• Response:

  • Success (200 OK)

    [
      {
        "segment_start": float,
        "segment_end": float,
        "text": "string",
        "words": [
          {
            "start_time": float,
            "end_time": float,
            "word": "string"
          }
        ]
      }
    ]

    Key	Type	Description
    segment_start	float	Start time of the segment in seconds
    segment_end	float	End time of the segment in seconds
    text	string	Full text of the segment
    words	array	List of words with individual timestamps

  • Error (404 Not Found)

    {
      "text_segments": []
    }

Generate GIFs

Endpoint: POST /generate_gifs

• Description: Generates GIFs based on the processed text segments of the video.

• Request:

  • Headers: Content-Type: application/json

  • Body:

    {
      "video_id": "string",
      "segments_list": [
        {
          "segment_start": float,
          "segment_end": float,
          "text": "string",
          "words": [
            {
              "start_time": float,
              "end_time": float,
              "word": "string"
            }
          ]
        }
      ],
      "template": {
        "font_color": "string",
        "font_size": integer,
        "position": "string",
        "max_words_per_text_frame": integer,
        "fps": integer
      }
    }

    Key	Type	Description
    video_id	string	The unique ID of the video
    segments_list	array	List of segments with text
    segment_start	float	Start time of the segment in seconds
    segment_end	float	End time of the segment in seconds
    text	string	Full text of the segment
    words	array	List of words with individual timestamps
    template	object	Template settings for GIF generation
    font_color	string	Font color of the text
    font_size	integer	Font size of the text
    position	string	Position of the text ('top_left', 'top_center', 'top_right', 'center_left', 'center', 'center_right', 'bottom_left', 'bottom_center', 'bottom_right')
    max_words_per_text_frame	integer	Maximum words to show at once
    fps	integer	Frames per second for the GIF

• Response:

  • Success (200 OK)

    {
      "status": "queued",
      "task_id": "string"
    }

    Key	Type	Description
    status	string	Indicates the task is queued for GIF generation
    task_id	string	The Celery task ID for GIF generation

  • Error (400 Bad Request)

    {
      "error": "Segments list not provided and not found in the database"
    }

Get GIFs

Endpoint: GET /gifs/{video_id}

• Description: Downloads the generated GIFs as a ZIP file.

• Request:

  • Path Parameters:

    Parameter	Type	Description
    video_id	string	The unique ID of the video

• Response:

  • Success (200 OK)

    The response will be a ZIP file containing the generated GIFs.

  • Error (404 Not Found)

    {
      "error": "GIFs not ready or failed"
    }

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the MIT License.