| # Director.AI | |
| > **Faceless video creation platform powered by real AI CLI integration.** | |
| > Built with React, TypeScript, Express, MongoDB, and Socket.IO. | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
| --- | |
| ## 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** | |