File size: 5,438 Bytes
11f4e50 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | # 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**
|