# Director.AI

> **Faceless video creation platform powered by real AI CLI integration.**
> Built with React, TypeScript, Express, MongoDB, and Socket.IO.

![License](https://img.shields.io/badge/License-MIT-blue)
![Node](https://img.shields.io/badge/Node-20+-green)
![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue)
![React](https://img.shields.io/badge/React-18-blue)
![Express](https://img.shields.io/badge/Express-4.18-lightgrey)
![MongoDB](https://img.shields.io/badge/MongoDB-8-green)

---

## Quick Setup Tutorial

Follow these steps to get Director.AI running on your local machine.

### 1. Clone the Repository
```bash
git clone https://huggingface.co/algorembrant/1st-hackaton
cd 1st-hackaton
```

### 2. Install MongoDB and Compass
- **Download MongoDB Community Server**: Visit the [MongoDB Download Center](https://www.mongodb.com/try/download/community) and download the MSI installer for Windows.
- **Install**: Run the installer and ensure "Install MongoDB as a Service" is checked.
- **MongoDB Compass**: During installation, check the box to install MongoDB Compass (the GUI for managing your data).
- **Verify**: Open MongoDB Compass and connect to `mongodb://localhost:27017`.

### 3. Environment Configuration
- Create a `.env` file in the root directory by copying the example:
  ```bash
  cp .env.example .env
  ```
- Open `.env` and fill in the following:
  - `MONGODB_URI`: `mongodb://localhost:27017/director-ai`
  - `PORT`: `5000`
  - `JWT_SECRET`: Any random long string
  - `REDIS_URL`: `redis://localhost:6379` (If using Redis features)

  or simply just tell you AI agent to configure things for you.

### 4. Install Dependencies
```bash
npm install
```

### 5. Running the Application
- **Server**: `cd server && npm run dev`
- **Client**: `cd client && npm run dev`
- **Both**: From the root, run `npm run dev`.

---

## Overview

Director.AI allows users to input scripts, customize voices, music, visual styles, and assets, then generate optimized faceless videos for social platforms (TikTok, Reels, Shorts, YouTube). 

The application features a novel **real-time AI Terminal** that directly bridges the webapp to the **Google Antigravity CLI**, streaming output via WebSocket—no simulations, no mocks.

### Key Features

- **AI Terminal**: Real-time CLI bridge via WebSocket—type prompts in the webapp, get live output from the Antigravity CLI.
- **5-Step Video Wizard**: Script, Voice, Music, Style, Assets → Generate.
- **Multi-Platform Export**: 9:16 (TikTok/Reels/Shorts), 16:9 (YouTube), 1:1 (Instagram).
- **JWT Authentication**: Secure register/login with bcrypt hashing.
- **Luxury Dark Theme**: Gold accents, Playfair Display + Montserrat, glassmorphism, Framer Motion animations.
- **Style Presets**: Save and reuse brand configurations.
- **File Upload**: Multer with 100MB limit and file type filtering.
- **Admin Dashboard**: Queue monitoring and stats overview.

---

## System Architecture

```mermaid
graph TD
    A["User Browser"] -->|HTTP + WebSocket| B["Express Server :5000"]
    B -->|Mongoose| C[MongoDB]
    B -->|Socket.IO| D["WebSocket Layer"]
    D -->|child_process.spawn| E["Antigravity CLI"]
    E -->|stdout/stderr stream| D
    D -->|Real-time output| A
    B -->|Multer| F["File Storage /uploads"]
    B -->|"Generated"| G["/generated"]
    
    subgraph Frontend [":5173"]
        H["React + TypeScript"]
        I["Redux Toolkit"]
        J["Framer Motion"]
        K["Tailwind CSS"]
        L["AI Terminal Component"]
    end
    
    subgraph Backend [":5000"]
        M["JWT Auth"]
        N["REST API Routes"]
        O["CLI Bridge Service"]
        P["Rate Limiting + Helmet"]
    end
    
    A --> H
    H --> I
    H --> L
    L -->|Socket.IO Client| D
```

---

## Project Structure

```text
1st-hackaton/
├── .env.example
├── .gitignore
├── package.json
├── prompt.md
├── README.md
├── server/
│   ├── src/
│   │   ├── index.ts        # Main Entry
│   │   ├── config/         # Database & App Config
│   │   ├── models/         # Mongoose Schemas
│   │   ├── routes/         # API Endpoints
│   │   ├── services/       # Business Logic
│   │   └── utils/          # Helpers
│   └── tsconfig.json
└── client/
    ├── src/
    │   ├── components/     # UI Building Blocks
    │   ├── pages/          # Main Views
    │   ├── services/       # API Integration
    │   └── store/          # Redux State Management
    ├── vite.config.ts
    └── tailwind.config.js
```

---

## Hugging Face Deployment

This project is optimized for deployment on Hugging Face.

- **Repository**: [https://huggingface.co/algorembrant/1st-hackaton](https://huggingface.co/algorembrant/1st-hackaton)
- **Author Profile**: [https://huggingface.co/algorembrant](https://huggingface.co/algorembrant)

> [!IMPORTANT]
> Large assets or binary files should be handled via **Xet Storage** or **Git LFS** to ensure optimal performance on Hugging Face.

---

## Author

**Rembrant Oyangoren Albeos**
- Hugging Face: [@algorembrant](https://huggingface.co/algorembrant)

---

## License

MIT License | © 2026 **Rembrant Oyangoren Albeos**