Add Web UI frontend

.env.sample

@@ -0,0 +1,16 @@
+# AI Keys
+# LLMs
+OPENAI_API_KEY="key here"
+GOOGLE_AI_API_KEY="key here"
+ANTHROPIC_API_KEY="key here"
+# TTS
+ELEVENLABS_API_KEY="key here"
+NEETS_API_KEY="key here"
+# Image
+PEXELS_API_KEY="key here"
+
+# Server Config
+SERVER_RES_PATH="res"
+SERVER_TEMP_PATH="video_temp"
+SERVER_IP="localhost"
+SERVER_PORT=3001

.gitignore

@@ -132,7 +132,6 @@ dist
 # Old code
 old/
 python/
-ui/
 
 # Video/audio output
 *.mp4

CHANGELOG.md

@@ -0,0 +1,17 @@
+# v0.2.0
+- TODO: Add description
+- Inital release of local web UI (Frontend uses Next.js, backend uses Express.js)
+- Server API support (--server) (gets API keys from environment variables)
+- Reworked AI script generation by giving each video type its own prompt to build its data object
+- Support for getting API keys from environment variables
+- OpenAI API support
+- Google Gemini AI API support
+- Anthropic (Claude) API support
+- Added video orientation support (vertical, horizontal)
+- Forked `ffcreator` and `inkpaint` as internal dependencies in `packages` directory
+
+# v0.1.1
+- Fixed bug that prevented the program from running
+
+# v0.1.0
+- Initial release

README.md

@@ -4,9 +4,9 @@ AutoShorts is a fully fledged package that generates shorts videos with the help
 
 If you want to support the development of this package, consider buying me a coffee:
 
-[![ko-fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/shafilalam)
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/I2I6SYOFB)
 
-Your support will help me to continue the development of this package. Thank you!
+![AutoShorts UI](example/images/ui.png)
 
 > [!WARNING]
 > The package author is not responsible for any misuse of the package, any content generated by the package, and any loss arising from the use of the package. Use at your own risk. Package is subject to change and may have breaking changes in the future. Not meant for production usage.
@@ -17,8 +17,6 @@ The package is built with a flexible abstraction layer which allows you to quick
 
 This repo includes a CLI interface and JS interface. The CLI interface is built on top of the JS interface. The JS interface is the core of the package and can be used to generate videos programmatically.
 
-**GUI interface is coming soon.**
-
 > [!NOTE]
 > This package is in the early stages of development and may have bugs - especially when interacting with AI to generate scripts. This package is not meant to be used in production environments yet. Since AI output is unpredictable, work is being done to make the output more predictable and controllable. If the AI generates an incorrect JSON output, then you can manually edit the JSON output to fix the issue. This package is subject to change and may have breaking changes in the future. Use at your own risk.
 
@@ -45,26 +43,67 @@ You can request new video types and tools to be added to the package by creating
 
 # Installation
 
-Note: By default, the package use Ollama to generate scripts. Therefore a working Ollama installation is required. It is recommended to use the `llama3.1` model for best results. You can install this model by running the following command: `ollama pull llama3.1`. Using other local models may result in incorrect output. You can use other AI APIs such as OpenAI ChatGPT 4o, Google Gemini AI, and Anthropic Claude by providing the necessary API keys.
+Note: By default, the package use Ollama to generate scripts. Therefore a working Ollama installation is required. It is recommended to use the `llama3.2` model for best results. 
+
+You can install this model by running the following command: `ollama pull llama3.2`. 
+
+Using other local models may result in incorrect output.
+
+You can use other AI APIs such as OpenAI ChatGPT 4o, Google Gemini AI, and Anthropic Claude by providing the necessary API keys and setting the `aiType` parameter to the appropriate value.
+
+# Example (Web UI)
+
+AutoShorts comes with a web UI that allows you to generate videos with a simple interface. The UI is built with Next.js and Express.js. The web UI relies on the backend server. 
+
+> [!NOTE]
+> The web UI is in the early stages of development and may have bugs. The UI is not meant to be used in production environments yet. If you encounter any issues, please create an issue on the GitHub repo. Feel free to contribute to the UI by creating a pull request.
+
+This example will clone the repository and start the backend server and frontend server.
+
+## Clone the repository
 
-## For JS Interface
 ```bash
-# Install the package
-npm install auto-shorts
+git clone
+cd auto-shorts
+npm install
+```
 
-# Download the necessary resources (to './res' folder by default)
-npx auto-shorts --download
+## Setup backend server
+
+First, create a `.env` file with the following content:
+
+```bash
+# Server Config
+SERVER_RES_PATH="[path to res folder]" # Download from "npx auto-shorts --download [path]"
+SERVER_TEMP_PATH="[path to temp folder]" # Can be any path like "video_temp"
+SERVER_IP="localhost"
+SERVER_PORT="[port number]" # Can be any port number like 3001
 ```
 
-## For CLI Interface (global installation)
+Then, run the following commands to start the backend server:
+
 ```bash
-# Install the package globally
-npm install -g auto-shorts
+npm run start-server
+```
 
-# Download the necessary resources (to './res' folder by default)
-npx auto-shorts --download
+## Setup frontend server
+
+First, create a `.env` file in the `ui` folder with the following content:
+
+```bash
+# Server Config
+NEXT_PUBLIC_BACKEND_URL="http://localhost:[port number]" # Use the same port number as the backend server (ex: http://localhost:3001)
+```
+
+Then, run the following commands to start the frontend server:
+
+```bash
+npm run install-ui-deps
+npm run start-ui-dev
 ```
 
+The web UI should now be accessible at `http://localhost:3000`.
+
 # Example (CLI Interface)
 
 Note: Since LLMs can hallucinate and are not deterministic, the videos may not generate the expected output. You can manually edit the JSON output to fix the issue.
@@ -82,7 +121,7 @@ npx auto-shorts --download
 # Use OpenAI gpt-4o-mini to generate the script, ElevenLabs to generate the voice, and Pexels to generate the image
 npx auto-shorts -p "make a news short about TypeScript" --aiType OpenAIGen --ttsType ElevenLabs --imageType PexelsImageGen --elevenLabsAPIKey YOUR_ELEVENLABS_API_KEY --pexelsAPIKey YOUR_PEXELS_API_KEY --openaiAPIKey YOUR_OPENAI_API_KEY
 
-# Use local Ollama llama3.1 to generate the script, Built-in TTS to generate the voice, and Google Scraper to generate the image (default, no need to provide API keys)
+# Use local Ollama llama3.2 to generate the script, Built-in TTS to generate the voice, and Google Scraper to generate the image (default, no need to provide API keys)
 npx auto-shorts -p "make a news short about TypeScript"
 ```
 
@@ -98,7 +137,18 @@ npx auto-shorts --help
 
 # Example (JS Interface)
 
-Note: You will need to download the necessary resources before running the code. You can do this by running the following command:
+First, make sure to install the package and download the necessary resources.
+
+```bash
+# Install the package
+npm install auto-shorts
+
+# Download the necessary resources (to './res' folder by default)
+npx auto-shorts --download
+```
+
+You will need to download the necessary resources before running the code. You can do this by running the following command:
+
 ```bash
 npx auto-shorts --download [path]
 ```
@@ -178,7 +228,7 @@ task.on('done', (output) => {
 - OpenAI (and compatible endpoints like Ollama, Groq, etc.) (e.g., GPT-4o)
 - Google Gemini AI (e.g., Gemini 1.5 Pro/Flash)
 - Anthropic (e.g, Claude)
-- Ollama local LLMs (e.g., llama3.1)
+- Ollama local LLMs (e.g., llama3.2)
 
 # API Keys
 
@@ -208,23 +258,29 @@ If this package is missing any video types or AI tools that you would like to se
 
 The package is structured as follows:
 - `src`: Contains the source code for the package
+- `ui`: Contains the GUI code for the package
 - `example`: Contains example code to use the package
 - `test`: Contains test code for the package
 - `packages`: Contains the internal dependencies for the package (forked versions of `ffcreator` and `inkpaint`)
 
 # Todo
-- [ ] Add GUI
+- [*] Add GUI
 - [ ] Fix logging
-- [ ] Make AI output structured for local LLMs (gpt4, gemini, claude are fine)
-- [ ] Add more video types (Twitter/X posts, Reddit posts, etc.)
 - [ ] Add Docker support
-- [ ] Add more AI tools (e.g., OpenAI, Neets.ai, AI Image Generators, etc.)
+- [ ] Get GUI production-ready
 - [ ] Add more customization options (custom fonts, colors, images, etc.)
+- [ ] Allow custom images and background music via GUI
+- [ ] Work on a more general 'AI-powered' video editor instead of automatic video generation
+- [ ] Add support for more general video generation (e.g., long-form videos)
+- [ ] Option to convert long video to short video
+- [ ] Add more video types (Twitter/X posts, Reddit posts, etc.)
+- [ ] Add more AI tools (e.g., OpenAI, Neets.ai, AI Image Generators, etc.)
+- [*] Make AI output structured for LLMs
 - [ ] Add more error handling
 - [ ] Add more tests
 - [ ] Add more documentation
-- [ ] Add support for more general video generation (e.g., long-form videos)
 - [ ] Fix external dependencies vulnerabilities (only on dev dependencies)
+- [ ] Expose more options for video customization (ElevenLabs voice customization, LLM temperature, etc.)
 
 ## Star History
 

package.json

@@ -22,6 +22,9 @@
   ],
   "scripts": {
     "start": "tsc && node dist/cli.js",
+    "start-server": "tsc && node dist/cli.js --server",
+    "start-ui-dev": "cd ui && npm run dev",
+    "install-ui-deps": "cd ui && npm install",
     "build": "tsc",
     "build-all": "npm -w packages/inkpaint run build",
     "lint": "eslint .",
@@ -40,7 +43,9 @@
     "cli-progress": "^3.12.0",
     "command-line-args": "^6.0.0",
     "command-line-usage": "^7.0.3",
+    "console-error": "^0.0.4",
     "console-info": "^0.0.5",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "elevenlabs": "^0.16.0",
     "express": "^4.21.0",
@@ -65,6 +70,7 @@
     "@types/cli-progress": "^3.11.6",
     "@types/command-line-args": "^5.2.3",
     "@types/command-line-usage": "^5.0.4",
+    "@types/cors": "^2.8.17",
     "@types/eslint__js": "^8.42.3",
     "@types/express": "^4.17.21",
     "@types/fluent-ffmpeg": "^2.1.24",

ui/.env.sample

@@ -0,0 +1,2 @@
+# The URL of the backend server
+NEXT_PUBLIC_BACKEND_URL=http://localhost:3001

ui/.eslintignore

@@ -0,0 +1,20 @@
+.now/*
+*.css
+.changeset
+dist
+esm/*
+public/*
+tests/*
+scripts/*
+*.config.js
+.DS_Store
+node_modules
+coverage
+.next
+build
+!.commitlintrc.cjs
+!.lintstagedrc.cjs
+!jest.config.js
+!plopfile.js
+!react-shim.js
+!tsup.config.ts