Add /create page with pipeline stage polling, /video/<id> route for safe file serving, modernized Tailwind/DaisyUI UI, and pytest regression tests. Consolidate AGENT.md + AGENTS.md into CLAUDE.md. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>pull/2551/head
Hong Phuc
4 weeks ago
parent
5e183d8e2c
commit
faaaa85be8
@ -1,392 +0,0 @@
|
||||
# AGENT.md — Guidance for Agents & AI Working on VideoMakerBot
|
||||
|
||||
This document guides **agents, bots, and AI assistants** on how to work effectively with the VideoMakerBot codebase.
|
||||
|
||||
---
|
||||
|
||||
## Quick Start for Agents
|
||||
|
||||
### Core Principle
|
||||
**VideoMakerBot uses a platform-agnostic factory pattern.** Always respect the abstraction:
|
||||
- Don't import platform-specific modules (reddit/, threads/) directly
|
||||
- Always use `platforms/__init__.py` factory functions
|
||||
- Keep platform-specific logic in `platforms/{platform}/`
|
||||
|
||||
### The "Do This" Checklist
|
||||
1. ✅ Read existing CLAUDE.md for architecture context
|
||||
2. ✅ Use factory: `from platforms import get_content_object, get_screenshot_fn`
|
||||
3. ✅ Return standard `content_object` dict from all fetchers
|
||||
4. ✅ Test both Reddit and Threads modes before declaring completion
|
||||
5. ✅ Use config fallback chains for cross-platform keys
|
||||
6. ✅ Document platform-specific logic in docstrings
|
||||
|
||||
### The "Don't Do This" List
|
||||
1. ❌ Import `reddit.subreddit` directly in main.py or generic modules
|
||||
2. ❌ Hardcode subreddit/platform names in core video pipeline
|
||||
3. ❌ Add platform-specific selectors outside `platforms/{platform}/`
|
||||
4. ❌ Assume config keys exist without `.get()` and fallbacks
|
||||
5. ❌ Modify screenshot_downloader.py for non-Reddit platforms
|
||||
|
||||
---
|
||||
|
||||
## Understanding the Codebase Structure
|
||||
|
||||
### Entry Point
|
||||
**`main.py`** — Single CLI entry point using platform factory
|
||||
- Calls `get_content_object(POST_ID)` from factory
|
||||
- Calls `get_screenshot_fn()` from factory
|
||||
- Everything else is platform-agnostic
|
||||
|
||||
### Platform Layer (`platforms/`)
|
||||
- **`__init__.py`** — Factory dispatch functions (add new platforms here)
|
||||
- **`threads/fetcher.py`** — Threads Graph API client (returns standard dict)
|
||||
- **`threads/screenshot.py`** — Threads.net Playwright screenshotter
|
||||
|
||||
### Legacy Platform (`reddit/`)
|
||||
- **`subreddit.py`** — PRAW API client (returns standard dict)
|
||||
- No changes needed; called via factory
|
||||
|
||||
### Video Pipeline (`video_creation/`)
|
||||
- **`final_video.py`** — FFmpeg composition (platform-aware output folder only)
|
||||
- **`screenshot_downloader.py`** — Reddit Playwright screenshotter (not called for Threads)
|
||||
- **`voices.py`** — TTS orchestration (platform-agnostic)
|
||||
- **`background.py`** — Video/audio download (platform-agnostic)
|
||||
|
||||
### TTS Layer (`TTS/`)
|
||||
- **`engine_wrapper.py`** — Provider abstraction (handles `post_lang` fallback)
|
||||
- **`*.py`** — Individual provider implementations (elevenlabs, aws_polly, etc.)
|
||||
|
||||
### Config & Utils (`utils/`)
|
||||
- **`settings.py`** — TOML config loading & validation
|
||||
- **`videos.py`** — Dedup tracking (`check_done()` + `check_done_by_id()`)
|
||||
- **`.config.template.toml`** — Config schema with `[settings]`, `[reddit.*]`, `[threads.*]`, `[ai]`
|
||||
|
||||
---
|
||||
|
||||
## How to Approach Common Tasks
|
||||
|
||||
### Adding a New Social Platform (e.g., X/Twitter)
|
||||
|
||||
**Steps:**
|
||||
1. Create `platforms/twitter/fetcher.py`:
|
||||
```python
|
||||
def get_twitter_content(POST_ID=None) -> dict:
|
||||
"""Fetch post + replies, return standard content_object."""
|
||||
# Implement API fetching logic here
|
||||
return {
|
||||
"thread_id": ...,
|
||||
"thread_category": "twitter", # NEW: generic field for output folder
|
||||
"thread_title": ...,
|
||||
"thread_url": ...,
|
||||
"comments": [...]
|
||||
}
|
||||
```
|
||||
|
||||
2. Create `platforms/twitter/screenshot.py`:
|
||||
```python
|
||||
def get_screenshots_of_twitter_posts(content_object: dict, screenshot_num: int):
|
||||
"""Use Playwright to screenshot X/Twitter posts."""
|
||||
# Implement Playwright logic here
|
||||
```
|
||||
|
||||
3. Update `platforms/__init__.py`:
|
||||
```python
|
||||
elif platform == "twitter":
|
||||
from platforms.twitter.fetcher import get_twitter_content
|
||||
return get_twitter_content(POST_ID)
|
||||
```
|
||||
|
||||
4. Add config section to `utils/.config.template.toml`:
|
||||
```toml
|
||||
[twitter.creds]
|
||||
api_key = { ... }
|
||||
api_secret = { ... }
|
||||
|
||||
[twitter.thread]
|
||||
post_id = { ... }
|
||||
```
|
||||
|
||||
5. Update `main.py` helper:
|
||||
```python
|
||||
elif platform == "twitter":
|
||||
return config.get("twitter", {}).get("thread", {}).get("post_id", "")
|
||||
```
|
||||
|
||||
6. **Zero changes needed to:** TTS, backgrounds, video composition, utils.
|
||||
|
||||
**Verification:**
|
||||
```bash
|
||||
# Test Reddit (regression check)
|
||||
sed -i 's/platform = "twitter"/platform = "reddit"/' config.toml
|
||||
python3 main.py
|
||||
# Verify results/{subreddit}/ output
|
||||
|
||||
# Test Twitter
|
||||
sed -i 's/platform = "reddit"/platform = "twitter"/' config.toml
|
||||
python3 main.py --post-id <twitter-id>
|
||||
# Verify results/twitter/ output
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Modifying the Video Pipeline
|
||||
|
||||
**Scenario:** You need to change FFmpeg composition or add a new processing step.
|
||||
|
||||
**Approach:**
|
||||
1. Check which data the modified code consumes (`content_object` dict)
|
||||
2. Verify it works with both Reddit and Threads content structures
|
||||
3. If platform-specific: move logic to `platforms/{platform}/`
|
||||
4. If generic: keep in `video_creation/`
|
||||
5. Test both modes before merging
|
||||
|
||||
**Example:** Adding video filters
|
||||
```python
|
||||
# In final_video.py (generic, works for all platforms)
|
||||
def apply_filter(video_clip, filter_type):
|
||||
# No platform-specific logic here
|
||||
return video_clip.filter(...)
|
||||
|
||||
# Test:
|
||||
# - Reddit mode produces filtered video
|
||||
# - Threads mode produces filtered video
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Fixing a Bug in Config Handling
|
||||
|
||||
**Scenario:** `post_lang` is not being applied correctly.
|
||||
|
||||
**Debug Path:**
|
||||
1. Check `utils/settings.py` — how is config loaded?
|
||||
2. Check `TTS/engine_wrapper.py:182` — uses fallback chain:
|
||||
```python
|
||||
lang = (settings.config["settings"].get("post_lang") or
|
||||
settings.config.get("reddit", {}).get("thread", {}).get("post_lang", ""))
|
||||
```
|
||||
3. Check `video_creation/final_video.py:78` — same fallback logic
|
||||
4. If still broken: verify `utils/.config.template.toml` has the key defined
|
||||
5. Test both platforms with `post_lang = "es"` in config
|
||||
|
||||
---
|
||||
|
||||
### Adding Support for a New TTS Provider
|
||||
|
||||
**Scenario:** User wants Whisper TTS support.
|
||||
|
||||
**Steps:**
|
||||
1. Create `TTS/whisper_tts.py`:
|
||||
```python
|
||||
class WhisperTTS:
|
||||
def make_voice(self, text):
|
||||
# Call Whisper API
|
||||
return audio_bytes
|
||||
```
|
||||
|
||||
2. Update `TTS/engine_wrapper.py:make_voice()`:
|
||||
```python
|
||||
elif voice_choice == "whisper":
|
||||
from TTS.whisper_tts import WhisperTTS
|
||||
return WhisperTTS().make_voice(text)
|
||||
```
|
||||
|
||||
3. Add config to `utils/.config.template.toml`:
|
||||
```toml
|
||||
[settings.tts]
|
||||
whisper_api_key = { optional = true, ... }
|
||||
```
|
||||
|
||||
4. Test:
|
||||
```bash
|
||||
# In config.toml:
|
||||
voice_choice = "whisper"
|
||||
# Run: python3 main.py
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common Pitfalls & How to Avoid Them
|
||||
|
||||
### Pitfall 1: Platform-Specific Code in Generic Modules
|
||||
**Problem:**
|
||||
```python
|
||||
# BAD: In video_creation/final_video.py
|
||||
subreddit = settings.config["reddit"]["thread"]["subreddit"]
|
||||
```
|
||||
**Will break** when platform = "threads" (no reddit.thread.subreddit).
|
||||
|
||||
**Solution:**
|
||||
```python
|
||||
# GOOD:
|
||||
platform = settings.config["settings"].get("platform", "reddit")
|
||||
if platform == "reddit":
|
||||
category = settings.config["reddit"]["thread"]["subreddit"]
|
||||
else:
|
||||
category = reddit_obj.get("thread_category", platform)
|
||||
```
|
||||
|
||||
### Pitfall 2: Hardcoding Selectors in Platform-Agnostic Code
|
||||
**Problem:**
|
||||
```python
|
||||
# BAD: In video_creation/voices.py
|
||||
element = page.locator("#t1_{comment_id}") # Reddit-only selector!
|
||||
```
|
||||
**Will fail** when running Threads mode (different DOM).
|
||||
|
||||
**Solution:**
|
||||
- Keep all Playwright logic in `platforms/{platform}/screenshot.py`
|
||||
- Never hardcode selectors in generic modules
|
||||
|
||||
### Pitfall 3: Forgetting to Test Both Modes
|
||||
**Problem:** You change `final_video.py`, test with Reddit, declare done.
|
||||
Threads mode breaks because you didn't test it.
|
||||
|
||||
**Solution:**
|
||||
```bash
|
||||
# Test both before committing:
|
||||
sed -i 's/platform = "threads"/platform = "reddit"/' config.toml
|
||||
python3 main.py
|
||||
# Check results/{subreddit}/
|
||||
|
||||
sed -i 's/platform = "reddit"/platform = "threads"/' config.toml
|
||||
python3 main.py --post-id <id>
|
||||
# Check results/threads/
|
||||
```
|
||||
|
||||
### Pitfall 4: Assuming Config Keys Exist
|
||||
**Problem:**
|
||||
```python
|
||||
# BAD:
|
||||
lang = settings.config["reddit"]["thread"]["post_lang"]
|
||||
```
|
||||
**Will crash** if key doesn't exist.
|
||||
|
||||
**Solution:**
|
||||
```python
|
||||
# GOOD:
|
||||
lang = (settings.config["settings"].get("post_lang") or
|
||||
settings.config.get("reddit", {}).get("thread", {}).get("post_lang", ""))
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Code Review Checklist for Agents
|
||||
|
||||
Before marking work complete, verify:
|
||||
|
||||
- [ ] **No platform imports in main.py** — Uses factory only
|
||||
- [ ] **Standard content_object dict** — All fetchers return same shape
|
||||
- [ ] **Platform-specific logic isolated** — Only in `platforms/{platform}/`
|
||||
- [ ] **Config fallback chains** — No hardcoded section names in generic code
|
||||
- [ ] **Both modes tested** — Reddit AND Threads produce correct output
|
||||
- [ ] **Docstrings updated** — New functions document platform assumptions
|
||||
- [ ] **Error messages clear** — Include platform name + actionable guidance
|
||||
- [ ] **Video dedup works** — No duplicate videos created
|
||||
|
||||
---
|
||||
|
||||
## Understanding Data Flow
|
||||
|
||||
### Happy Path: Fetch → TTS → Screenshot → Compose → Output
|
||||
|
||||
```
|
||||
1. main.py:main()
|
||||
└─→ platforms/__init__.py:get_content_object()
|
||||
└─→ platforms/threads/fetcher.py:get_threads_content()
|
||||
└─→ Returns: {thread_id, thread_title, comments, ...}
|
||||
|
||||
2. video_creation/voices.py:save_text_to_mp3()
|
||||
└─→ TTS/engine_wrapper.py:process_text()
|
||||
└─→ TTS/engine_wrapper.py:make_voice()
|
||||
└─→ TTS/{provider}.py: {elevenlabs,tiktok,etc}
|
||||
└─→ Returns: audio_length, comment_count
|
||||
|
||||
3. platforms/__init__.py:get_screenshot_fn()
|
||||
└─→ platforms/threads/screenshot.py:get_screenshots_of_threads_posts()
|
||||
└─→ Uses Playwright on threads.net
|
||||
└─→ Saves: assets/temp/{thread_id}/png/{title,comment_0,etc}.png
|
||||
|
||||
4. video_creation/background.py
|
||||
└─→ download_background_video() & download_background_audio()
|
||||
└─→ Uses yt-dlp to fetch YouTube videos/audio
|
||||
└─→ Saves to: assets/temp/{thread_id}/{video,audio}
|
||||
|
||||
5. video_creation/final_video.py:make_final_video()
|
||||
└─→ Uses FFmpeg to compose everything
|
||||
└─→ Reads: audio files, screenshot PNGs, background video
|
||||
└─→ Writes: results/{thread_category}/{filename}.mp4
|
||||
|
||||
6. utils/videos.py:save_data()
|
||||
└─→ Records video in videos.json for dedup
|
||||
```
|
||||
|
||||
### Config Flow
|
||||
|
||||
```
|
||||
config.toml (user settings)
|
||||
↓
|
||||
utils/settings.py:check_toml()
|
||||
└─→ Validates against .config.template.toml schema
|
||||
└─→ Returns: settings.config (dict)
|
||||
|
||||
Used by:
|
||||
├─ main.py (platform selection)
|
||||
├─ platforms/reddit/ (subreddit, etc.)
|
||||
├─ platforms/threads/ (Graph API token, etc.)
|
||||
├─ TTS/engine_wrapper.py (post_lang fallback)
|
||||
├─ video_creation/ (theme, resolution, etc.)
|
||||
└─ utils/videos.py (dedup behavior)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Deployment Notes
|
||||
|
||||
### Python Version
|
||||
- **Minimum:** 3.10
|
||||
- **Tested:** 3.10, 3.11, 3.12
|
||||
- **Reason:** F-strings, type hints, modern async patterns
|
||||
|
||||
### Critical Dependencies
|
||||
- **reddit platform:** praw 7.8.1 (requires Reddit OAuth app)
|
||||
- **threads platform:** requests (for Graph API calls)
|
||||
- **screenshots:** playwright 1.49.1 (requires browser installation: `playwright install`)
|
||||
- **video:** moviepy 2.2.1, ffmpeg-python 0.2.0 (requires FFmpeg system binary)
|
||||
- **tts:** varies per provider (elevenlabs, aws_polly, openai, etc.)
|
||||
|
||||
### Versions That Caused Issues
|
||||
- **yt-dlp==2026.3.17** — Doesn't exist (use 2025.10.14 or latest stable)
|
||||
- **playwright without browser install** — Will crash on first screenshot
|
||||
|
||||
---
|
||||
|
||||
## When to Escalate
|
||||
|
||||
### Escalate to User if:
|
||||
- User needs new platform support (only they know requirements)
|
||||
- Config changes affect backward compatibility
|
||||
- Performance optimization needed (only user knows acceptable limits)
|
||||
- Security concern (token handling, credential storage, etc.)
|
||||
|
||||
### Safe to Implement as Agent:
|
||||
- Bug fixes within existing architecture
|
||||
- Adding new TTS providers
|
||||
- Extending config options for existing platforms
|
||||
- Performance optimizations (caching, parallelization)
|
||||
- New filter/processing features that work platform-agnostically
|
||||
- Documentation & refactoring
|
||||
|
||||
---
|
||||
|
||||
## Final Guidance
|
||||
|
||||
**Golden Rule:** The factory pattern is your friend. When in doubt, check if your change breaks the abstraction. If it does, rethink it.
|
||||
|
||||
**Test Obsessively:** Always run both Reddit and Threads modes. The codebase is designed for multi-platform support, and it's easy to break one platform while fixing another.
|
||||
|
||||
**Document Platform Assumptions:** If your code works differently for Reddit vs Threads, say so explicitly in docstrings and comments.
|
||||
|
||||
**Ask Yourself:** "Would this work for X/Twitter?" If no, it probably belongs in `platforms/threads/`, not in generic code.
|
||||
|
||||
Good luck, and happy contributing! 🎥
|
||||
@ -1,457 +0,0 @@
|
||||
# AGENTS.md — VideoMakerBot Development Guide
|
||||
|
||||
## Project Overview
|
||||
|
||||
**VideoMakerBot** — Automated short-form video creator from social media content.
|
||||
|
||||
**Status:** Production-ready, actively maintained (v3.4.0)
|
||||
**Language:** Python 3.10+
|
||||
**Platforms:** Reddit (original), Threads (NEW), X/Twitter (planned)
|
||||
|
||||
### Core Mission
|
||||
Transforms social media threads (post + comments/replies) into complete short-form videos with:
|
||||
- AI-generated speech (7+ TTS providers)
|
||||
- UI screenshots (Playwright)
|
||||
- Background video/audio overlays
|
||||
- FFmpeg composition & output
|
||||
|
||||
---
|
||||
|
||||
## Architecture at a Glance
|
||||
|
||||
```
|
||||
main.py (CLI)
|
||||
↓ [platform factory]
|
||||
├─→ reddit/subreddit.py [PRAW API]
|
||||
└─→ platforms/threads/fetcher.py [Graph API]
|
||||
↓ [standard data dict]
|
||||
├─→ TTS/engine_wrapper.py [7+ providers]
|
||||
├─→ screenshot_downloader.py (Reddit)
|
||||
│ or platforms/threads/screenshot.py (Threads)
|
||||
├─→ video_creation/background.py
|
||||
└─→ video_creation/final_video.py [FFmpeg]
|
||||
↓
|
||||
results/{category}/{video.mp4}
|
||||
```
|
||||
|
||||
### Key Design: Platform Abstraction via Factory Pattern
|
||||
|
||||
**Why:** Single codebase supports multiple platforms without tight coupling.
|
||||
|
||||
**How:** `platforms/__init__.py` exports:
|
||||
- `get_content_object(POST_ID=None)` — routes to right fetcher
|
||||
- `get_screenshot_fn()` — routes to right screenshotter
|
||||
|
||||
**Result:** Adding X/Twitter requires only: new module + config section + two `elif` branches.
|
||||
|
||||
---
|
||||
|
||||
## Data Contract: The "content_object" Dict
|
||||
|
||||
All fetchers return this shape (defined in `platforms/__init__.py`):
|
||||
|
||||
```python
|
||||
{
|
||||
# Unique identifiers
|
||||
"thread_id": str, # Used for temp folder: assets/temp/{id}/
|
||||
"thread_category": str, # "reddit", "threads", etc. → output folder
|
||||
|
||||
# Content
|
||||
"thread_title": str, # TTS as title + output filename
|
||||
"thread_url": str, # Playwright navigates here for screenshot
|
||||
"is_nsfw": bool, # Content filter flag
|
||||
|
||||
# Replies/Comments (mutually exclusive with thread_post)
|
||||
"comments": [
|
||||
{
|
||||
"comment_body": str, # TTS per reply
|
||||
"comment_url": str, # Playwright navigates here
|
||||
"comment_id": str, # CSS selector ID or unique identifier
|
||||
}
|
||||
],
|
||||
|
||||
# OR Story mode:
|
||||
"thread_post": str | list, # Long-form text (no comments)
|
||||
}
|
||||
```
|
||||
|
||||
**Why:** Loose coupling—TTS, backgrounds, and video composition don't need platform-specific logic.
|
||||
|
||||
---
|
||||
|
||||
## File Organization
|
||||
|
||||
```
|
||||
VideoMakerBot/
|
||||
├── platforms/ # Multi-platform abstraction
|
||||
│ ├── __init__.py # Factory: get_content_object(), get_screenshot_fn()
|
||||
│ └── threads/ # Threads (Meta) implementation
|
||||
│ ├── fetcher.py # Graph API → content_object
|
||||
│ └── screenshot.py # Playwright Threads screenshotter
|
||||
│
|
||||
├── reddit/ # Reddit implementation (kept as-is)
|
||||
│ └── subreddit.py # PRAW API → content_object + thread_category
|
||||
│
|
||||
├── video_creation/
|
||||
│ ├── final_video.py # FFmpeg composition (platform-aware folder naming)
|
||||
│ ├── screenshot_downloader.py # Playwright Reddit UI capturer
|
||||
│ ├── voices.py # TTS orchestrator (platform-agnostic)
|
||||
│ ├── background.py # Video/audio downloader (platform-agnostic)
|
||||
│ └── data/
|
||||
│ ├── videos.json # Dedup tracker
|
||||
│ ├── cookie-dark-mode.json # Reddit theme cookie
|
||||
│ └── cookie-threads.json # Threads session cookie (auto-created)
|
||||
│
|
||||
├── TTS/ # Text-to-Speech
|
||||
│ ├── engine_wrapper.py # Provider abstraction + post_lang fallback
|
||||
│ ├── elevenlabs.py, aws_polly.py, etc. # 7+ provider implementations
|
||||
│
|
||||
├── utils/
|
||||
│ ├── settings.py # Config loading + validation
|
||||
│ ├── videos.py # check_done() + check_done_by_id()
|
||||
│ ├── console.py # Rich terminal output
|
||||
│ ├── .config.template.toml # Config schema (platform sections)
|
||||
│ └── ... (id, voice, cleanup, etc.)
|
||||
│
|
||||
├── main.py # CLI entry (platform-routed via factory)
|
||||
├── GUI.py # Flask web UI (localhost:4000 in host mode, 0.0.0.0 in Docker)
|
||||
├── requirements.txt # Dependencies
|
||||
└── AGENTS.md / AGENT.md # This file + agent guidelines
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Configuration
|
||||
|
||||
**File:** `utils/.config.template.toml` (schema) → `config.toml` (user config)
|
||||
|
||||
### Platform Selection
|
||||
```toml
|
||||
[settings]
|
||||
platform = "reddit" # or "threads"
|
||||
post_lang = "es-cr" # Optional: translation language (all platforms)
|
||||
```
|
||||
|
||||
### Reddit Config
|
||||
```toml
|
||||
[reddit.creds]
|
||||
client_id = "..." # OAuth app
|
||||
client_secret = "..."
|
||||
username = "..."
|
||||
password = "..."
|
||||
2fa = true/false
|
||||
|
||||
[reddit.thread]
|
||||
subreddit = "AskReddit"
|
||||
post_id = "" # Leave blank for auto-pick
|
||||
max_comment_length = 500
|
||||
min_comment_length = 1
|
||||
min_comments = 20
|
||||
blocked_words = "..."
|
||||
```
|
||||
|
||||
### Threads Config (NEW)
|
||||
```toml
|
||||
[threads.creds]
|
||||
access_token = "EAABsbCS..." # Meta Graph API token (60-day expiry)
|
||||
user_id = "12345678901234567"
|
||||
username = "your_insta" # For Playwright login
|
||||
password = "your_password"
|
||||
|
||||
[threads.thread]
|
||||
post_id = "" # Leave blank for auto-pick
|
||||
max_reply_length = 500
|
||||
min_reply_length = 1
|
||||
min_replies = 5
|
||||
blocked_words = "..."
|
||||
```
|
||||
|
||||
### Generic Settings
|
||||
```toml
|
||||
[settings]
|
||||
theme = "dark"
|
||||
resolution_w = 1080
|
||||
resolution_h = 1920
|
||||
storymode = false
|
||||
times_to_run = 1
|
||||
|
||||
[settings.tts]
|
||||
voice_choice = "tiktok" # or "elevenlabs", "awspolly", "googletranslate", etc.
|
||||
random_voice = true
|
||||
silence_duration = 0.3
|
||||
|
||||
[settings.background]
|
||||
background_video = "minecraft"
|
||||
background_audio = "lofi"
|
||||
background_audio_volume = 0.15
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Development Guidelines
|
||||
|
||||
### ✅ DO:
|
||||
|
||||
1. **Use platform factory in main.py**
|
||||
```python
|
||||
from platforms import get_content_object, get_screenshot_fn
|
||||
reddit_object = get_content_object(POST_ID)
|
||||
screenshot_fn = get_screenshot_fn()
|
||||
screenshot_fn(reddit_object, number_of_comments)
|
||||
```
|
||||
|
||||
2. **Return standard content dict** from all fetchers
|
||||
```python
|
||||
return {
|
||||
"thread_id": ...,
|
||||
"thread_category": ..., # NEW: replaces hardcoded subreddit
|
||||
"comments": [...]
|
||||
}
|
||||
```
|
||||
|
||||
3. **Use config fallback chains** for cross-platform keys
|
||||
```python
|
||||
lang = (settings.config["settings"].get("post_lang") or
|
||||
settings.config.get("reddit", {}).get("thread", {}).get("post_lang", ""))
|
||||
```
|
||||
|
||||
4. **Read thread_category from dict** instead of config
|
||||
```python
|
||||
# WRONG:
|
||||
subreddit = settings.config["reddit"]["thread"]["subreddit"]
|
||||
|
||||
# RIGHT:
|
||||
platform = settings.config["settings"].get("platform", "reddit")
|
||||
if platform == "reddit":
|
||||
subreddit = settings.config["reddit"]["thread"]["subreddit"]
|
||||
else:
|
||||
subreddit = reddit_obj.get("thread_category", platform)
|
||||
```
|
||||
|
||||
5. **Test both platforms** after core pipeline changes
|
||||
```bash
|
||||
# Test Reddit (must not regress)
|
||||
sed -i 's/platform = "threads"/platform = "reddit"/' config.toml
|
||||
python3 main.py
|
||||
|
||||
# Test Threads
|
||||
sed -i 's/platform = "reddit"/platform = "threads"/' config.toml
|
||||
python3 main.py --post-id <threads-id>
|
||||
```
|
||||
|
||||
### ❌ DON'T:
|
||||
|
||||
1. **Don't import platform modules directly** in main.py/utils
|
||||
```python
|
||||
# WRONG: from reddit.subreddit import get_subreddit_threads
|
||||
# RIGHT: from platforms import get_content_object
|
||||
```
|
||||
|
||||
2. **Don't hardcode platform names** in generic modules
|
||||
```python
|
||||
# WRONG in final_video.py:
|
||||
subreddit = settings.config["reddit"]["thread"]["subreddit"]
|
||||
|
||||
# RIGHT:
|
||||
subreddit = reddit_obj.get("thread_category", "unknown")
|
||||
```
|
||||
|
||||
3. **Don't add platform-specific UI selectors** outside `platforms/{platform}/screenshot.py`
|
||||
- Reddit selectors stay in `video_creation/screenshot_downloader.py`
|
||||
- Threads selectors stay in `platforms/threads/screenshot.py`
|
||||
|
||||
4. **Don't assume config keys exist** without fallback
|
||||
```python
|
||||
# WRONG: lang = settings.config["reddit"]["thread"]["post_lang"]
|
||||
# RIGHT: lang = settings.config.get("settings", {}).get("post_lang", "")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Platform-Specific Knowledge
|
||||
|
||||
### Reddit
|
||||
- **API:** PRAW (Python Reddit API Wrapper)
|
||||
- **Auth:** OAuth app (client_id, secret) + username/password
|
||||
- **Screenshot:** Playwright on reddit.com/new.reddit.com
|
||||
- Login form: `input[name="username"]`, `input[name="password"]`
|
||||
- Post selector: `[data-test-id="post-content"]`
|
||||
- Comment selector: `#t1_{comment_id}`
|
||||
- **NSFW:** `submission.over_18`
|
||||
- **Output folder:** `results/{subreddit}/`
|
||||
|
||||
### Threads
|
||||
- **API:** Meta Graph API (v18.0+)
|
||||
- **Auth:** User access token (60-day lifetime) via https://developers.facebook.com/
|
||||
- **Screenshot:** Playwright on threads.net
|
||||
- Login form: `input[autocomplete="username"]`, `input[autocomplete="current-password"]`
|
||||
- Post selector: `article` (universal, more stable than Reddit)
|
||||
- Cookies saved to: `video_creation/data/cookie-threads.json`
|
||||
- **NSFW:** API doesn't provide; always False
|
||||
- **Output folder:** `results/threads/`
|
||||
|
||||
### Future: X/Twitter
|
||||
Create: `platforms/twitter/fetcher.py` + `platforms/twitter/screenshot.py` + config section
|
||||
Update: `platforms/__init__.py` with `elif platform == "twitter"` branches
|
||||
|
||||
---
|
||||
|
||||
## Extending the Project
|
||||
|
||||
### Adding a New TTS Provider
|
||||
1. Create `TTS/my_provider.py` with a class implementing the TTS interface
|
||||
2. Add config keys to `[settings.tts]` in `.config.template.toml`
|
||||
3. Update `TTS/engine_wrapper.py` to call your provider
|
||||
4. Test with `settings.config["settings"]["tts"]["voice_choice"] = "my_provider"`
|
||||
|
||||
### Adding a New Platform (e.g., X/Twitter)
|
||||
1. **Create fetcher:** `platforms/twitter/fetcher.py`
|
||||
- Implement `get_twitter_content(POST_ID=None)` returning standard dict
|
||||
2. **Create screenshotter:** `platforms/twitter/screenshot.py`
|
||||
- Implement `get_screenshots_of_twitter_posts(content_object, screenshot_num)`
|
||||
3. **Update config:** Add `[twitter.creds]` and `[twitter.thread]` sections
|
||||
4. **Update factory:** Add `elif platform == "twitter"` in `platforms/__init__.py`
|
||||
5. **Update CLI helper:** Add case to `_get_platform_post_id()` in `main.py`
|
||||
6. **Test:** Verify Reddit mode still works, test Twitter mode end-to-end
|
||||
|
||||
**Zero changes needed to:** TTS, backgrounds, video composition, or utils.
|
||||
|
||||
---
|
||||
|
||||
## Debugging Tips
|
||||
|
||||
### "No matching distribution found for yt-dlp==2026.3.17"
|
||||
→ yt-dlp uses date versioning (YYYY.M.DD, no leading zeros). Use `2025.10.14` (latest stable).
|
||||
|
||||
### "Threads API: Invalid or expired access_token"
|
||||
→ Meta tokens expire every 60 days. Refresh at https://developers.facebook.com/tools/explorer/
|
||||
|
||||
### Playwright timeout on Threads screenshot
|
||||
→ Login cookies corrupted or expired. Delete `video_creation/data/cookie-threads.json` to force fresh login next run.
|
||||
|
||||
### "No eligible Threads posts found"
|
||||
→ Configure `[threads.thread].min_replies = 5` (or lower). Ensure your Threads account has public posts with replies.
|
||||
|
||||
### Video dedup not working
|
||||
→ Check `video_creation/data/videos.json` is writable. Ensure `check_done_by_id()` is called before fetching content.
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
- [ ] Reddit mode: `platform = "reddit"` produces video to `results/{subreddit}/`
|
||||
- [ ] Threads mode: `platform = "threads"` produces video to `results/threads/`
|
||||
- [ ] Video dedup: Running same post_id twice skips second run
|
||||
- [ ] Translation: `post_lang = "es"` translates filenames
|
||||
- [ ] TTS providers: Test with different voice_choice values
|
||||
- [ ] Background selection: Custom background video/audio works
|
||||
- [ ] Story mode: storymode=true only uses thread_post, not comments
|
||||
- [ ] Error handling: Invalid credentials show clear messages
|
||||
|
||||
---
|
||||
|
||||
## Key Files to Know
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `main.py` | CLI entry; orchestrates pipeline via factory |
|
||||
| `platforms/__init__.py` | Factory dispatch for multi-platform support |
|
||||
| `platforms/threads/fetcher.py` | Threads Graph API client |
|
||||
| `platforms/threads/screenshot.py` | Threads.net Playwright screenshotter |
|
||||
| `video_creation/final_video.py` | FFmpeg composition; platform-aware output naming |
|
||||
| `TTS/engine_wrapper.py` | TTS provider abstraction; post_lang fallback |
|
||||
| `utils/settings.py` | Config loading & validation |
|
||||
| `utils/videos.py` | Video dedup tracking |
|
||||
| `utils/.config.template.toml` | Config schema |
|
||||
| `requirements.txt` | Dependencies |
|
||||
|
||||
---
|
||||
|
||||
## Useful Commands
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
pip install -r requirements.txt
|
||||
|
||||
# Run CLI
|
||||
python3 main.py
|
||||
|
||||
# Run with specific post
|
||||
python3 main.py <post_id>
|
||||
|
||||
# Run Flask GUI
|
||||
python3 GUI.py
|
||||
|
||||
# Check syntax
|
||||
python3 -m py_compile main.py platforms/threads/fetcher.py
|
||||
|
||||
# Format code
|
||||
black main.py platforms/ utils/
|
||||
|
||||
# Lint
|
||||
pylint main.py
|
||||
```
|
||||
|
||||
## Docker Workflow
|
||||
|
||||
- Use `docker compose build` to build the shared image for both CLI and GUI.
|
||||
- Use `docker compose up gui` to run the Flask app on port `4000`.
|
||||
- Use `docker compose run --rm cli` to run the video generator in a container.
|
||||
- The repo root is bind-mounted in Compose, so `config.toml`, `results/`, `assets/temp/`, `video_creation/data/videos.json`, and `utils/backgrounds.json` should persist across runs.
|
||||
- The GUI must bind to `0.0.0.0` in Docker; do not switch it back to `localhost` for container use.
|
||||
|
||||
---
|
||||
|
||||
## When You Get Stuck
|
||||
|
||||
1. **"What does this module do?"** → Check imports in `main.py` or docstrings
|
||||
2. **"How do I add support for platform X?"** → See "Adding a New Platform" section above
|
||||
3. **"Why is my config not being read?"** → Check `utils/settings.py:check_toml()` and `.config.template.toml` schema
|
||||
4. **"Why isn't my TTS provider being called?"** → Check `TTS/engine_wrapper.py:make_voice()` and config `voice_choice`
|
||||
5. **"How do I debug the Playwright screenshot?"** → Uncomment `page.pause()` in screenshot downloader, run headful browser
|
||||
|
||||
Good luck! 🚀
|
||||
|
||||
<!-- gitnexus:start -->
|
||||
# GitNexus — Code Intelligence
|
||||
|
||||
This project is indexed by GitNexus as **VideoMakerBot** (802 symbols, 1287 relationships, 32 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely.
|
||||
|
||||
> If any GitNexus tool warns the index is stale, run `npx gitnexus analyze` in terminal first.
|
||||
|
||||
## Always Do
|
||||
|
||||
- **MUST run impact analysis before editing any symbol.** Before modifying a function, class, or method, run `gitnexus_impact({target: "symbolName", direction: "upstream"})` and report the blast radius (direct callers, affected processes, risk level) to the user.
|
||||
- **MUST run `gitnexus_detect_changes()` before committing** to verify your changes only affect expected symbols and execution flows.
|
||||
- **MUST warn the user** if impact analysis returns HIGH or CRITICAL risk before proceeding with edits.
|
||||
- When exploring unfamiliar code, use `gitnexus_query({query: "concept"})` to find execution flows instead of grepping. It returns process-grouped results ranked by relevance.
|
||||
- When you need full context on a specific symbol — callers, callees, which execution flows it participates in — use `gitnexus_context({name: "symbolName"})`.
|
||||
|
||||
## Never Do
|
||||
|
||||
- NEVER edit a function, class, or method without first running `gitnexus_impact` on it.
|
||||
- NEVER ignore HIGH or CRITICAL risk warnings from impact analysis.
|
||||
- NEVER rename symbols with find-and-replace — use `gitnexus_rename` which understands the call graph.
|
||||
- NEVER commit changes without running `gitnexus_detect_changes()` to check affected scope.
|
||||
|
||||
## Resources
|
||||
|
||||
| Resource | Use for |
|
||||
|----------|---------|
|
||||
| `gitnexus://repo/VideoMakerBot/context` | Codebase overview, check index freshness |
|
||||
| `gitnexus://repo/VideoMakerBot/clusters` | All functional areas |
|
||||
| `gitnexus://repo/VideoMakerBot/processes` | All execution flows |
|
||||
| `gitnexus://repo/VideoMakerBot/process/{name}` | Step-by-step execution trace |
|
||||
|
||||
## CLI
|
||||
|
||||
| Task | Read this skill file |
|
||||
|------|---------------------|
|
||||
| Understand architecture / "How does X work?" | `.claude/skills/gitnexus/gitnexus-exploring/SKILL.md` |
|
||||
| Blast radius / "What breaks if I change X?" | `.claude/skills/gitnexus/gitnexus-impact-analysis/SKILL.md` |
|
||||
| Trace bugs / "Why is X failing?" | `.claude/skills/gitnexus/gitnexus-debugging/SKILL.md` |
|
||||
| Rename / extract / split / refactor | `.claude/skills/gitnexus/gitnexus-refactoring/SKILL.md` |
|
||||
| Tools, resources, schema reference | `.claude/skills/gitnexus/gitnexus-guide/SKILL.md` |
|
||||
| Index, status, clean, wiki CLI commands | `.claude/skills/gitnexus/gitnexus-cli/SKILL.md` |
|
||||
|
||||
<!-- gitnexus:end -->
|
||||
@ -1,263 +1,235 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block main %}
|
||||
|
||||
<!-- Delete Background Modal -->
|
||||
<div class="modal fade" id="deleteBtnModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Delete background</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you sure you want to delete this background?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<form action="background/delete" method="post">
|
||||
<input type="hidden" id="background-key" name="background-key" value="">
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
</form>
|
||||
<div class="bg-slate-900 min-h-screen py-8">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- Header & Actions -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-8">
|
||||
<h1 class="text-2xl font-bold text-white">Background Manager</h1>
|
||||
<div class="flex w-full md:w-auto gap-2">
|
||||
<div class="relative flex-grow md:w-64">
|
||||
<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
|
||||
<input type="text"
|
||||
class="searchFilter input input-bordered w-full pl-10 bg-slate-800 border-slate-700 text-slate-200 focus:border-indigo-500"
|
||||
placeholder="Search..."
|
||||
onkeyup="searchFilter()">
|
||||
</div>
|
||||
<button onclick="add_modal.showModal()" class="btn btn-indigo bg-indigo-600 hover:bg-indigo-500 border-none text-white">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i>
|
||||
<span class="hidden sm:inline">Add Video</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="backgrounds">
|
||||
<!-- Backgrounds will be injected here -->
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="empty-state" class="hidden flex flex-col items-center justify-center py-20 text-slate-500">
|
||||
<i data-lucide="film" class="w-16 h-16 mb-4 opacity-20"></i>
|
||||
<p class="text-lg">No backgrounds found</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Background Modal -->
|
||||
<dialog id="delete_modal" class="modal modal-bottom sm:modal-middle">
|
||||
<div class="modal-box bg-slate-800 border border-white/10">
|
||||
<h3 class="font-bold text-lg text-white">Delete Background</h3>
|
||||
<p class="py-4 text-slate-400">Are you sure you want to delete this background video? This action cannot be undone.</p>
|
||||
<div class="modal-action">
|
||||
<form action="background/delete" method="post" class="flex gap-2">
|
||||
<input type="hidden" id="background-key" name="background-key" value="">
|
||||
<button type="button" onclick="delete_modal.close()" class="btn btn-ghost text-slate-400">Cancel</button>
|
||||
<button type="submit" class="btn btn-error">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- Add Background Modal -->
|
||||
<div class="modal fade" id="backgroundAddModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Add background video</h5>
|
||||
<dialog id="add_modal" class="modal modal-bottom sm:modal-middle">
|
||||
<div class="modal-box bg-slate-800 border border-white/10 max-w-lg">
|
||||
<h3 class="font-bold text-lg text-white mb-6">Add Background Video</h3>
|
||||
<form id="addBgForm" action="background/add" method="post" novalidate class="space-y-4">
|
||||
<div class="form-control w-full">
|
||||
<label class="label"><span class="label-text text-slate-300">YouTube URI</span></label>
|
||||
<div class="join w-full">
|
||||
<div class="btn join-item no-animation bg-slate-900 border-slate-700 pointer-events-none">
|
||||
<i data-lucide="youtube" class="w-4 h-4 text-red-500"></i>
|
||||
</div>
|
||||
<input name="youtube_uri" type="text" placeholder="https://www.youtube.com/watch?v=..."
|
||||
class="input input-bordered join-item w-full bg-slate-900 border-slate-700 text-slate-200 focus:border-indigo-500">
|
||||
</div>
|
||||
<label class="label h-6"><span id="feedbackYT" class="label-text-alt text-error hidden"></span></label>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<!-- Add video form -->
|
||||
<form id="addBgForm" action="background/add" method="post" novalidate>
|
||||
<div class="form-group row">
|
||||
<label class="col-4 col-form-label" for="youtube_uri">YouTube URI</label>
|
||||
<div class="col-8">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i class="bi bi-youtube"></i>
|
||||
</div>
|
||||
<input name="youtube_uri" placeholder="https://www.youtube.com/watch?v=..." type="text"
|
||||
class="form-control">
|
||||
</div>
|
||||
<span id="feedbackYT" class="form-text feedback-invalid"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="filename" class="col-4 col-form-label">Filename</label>
|
||||
<div class="col-8">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i class="bi bi-file-earmark"></i>
|
||||
</div>
|
||||
<input name="filename" placeholder="Example: cool-background" type="text"
|
||||
class="form-control">
|
||||
</div>
|
||||
<span id="feedbackFilename" class="form-text feedback-invalid"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="citation" class="col-4 col-form-label">Credits (owner of the video)</label>
|
||||
<div class="col-8">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
</div>
|
||||
<input name="citation" placeholder="YouTube Channel" type="text" class="form-control">
|
||||
</div>
|
||||
<span class="form-text text-muted">Include the channel name of the
|
||||
owner of the background video you are adding.</span>
|
||||
</div>
|
||||
<div class="form-control w-full">
|
||||
<label class="label"><span class="label-text text-slate-300">Filename</span></label>
|
||||
<div class="join w-full">
|
||||
<div class="btn join-item no-animation bg-slate-900 border-slate-700 pointer-events-none">
|
||||
<i data-lucide="file-video" class="w-4 h-4 text-indigo-500"></i>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="position" class="col-4 col-form-label">Position of screenshots</label>
|
||||
<div class="col-8">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i class="bi bi-arrows-fullscreen"></i>
|
||||
</div>
|
||||
<input name="position" placeholder="Example: center" type="text" class="form-control">
|
||||
</div>
|
||||
<span class="form-text text-muted">Advanced option (you can leave it
|
||||
empty). Valid options are "center" and decimal numbers</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button name="submit" type="submit" class="btn btn-success">Add background</button>
|
||||
</form>
|
||||
<input name="filename" type="text" placeholder="e.g. minecraft-parkour"
|
||||
class="input input-bordered join-item w-full bg-slate-900 border-slate-700 text-slate-200 focus:border-indigo-500">
|
||||
</div>
|
||||
<label class="label h-6"><span id="feedbackFilename" class="label-text-alt text-error hidden"></span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="album py-2 bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row justify-content-between mt-2">
|
||||
<div class="col-12 col-md-3 mb-3">
|
||||
<input type="text" class="form-control searchFilter" placeholder="Search backgrounds"
|
||||
onkeyup="searchFilter()">
|
||||
</div>
|
||||
<div class="col-12 col-md-2 mb-3">
|
||||
<button type="button" class="btn btn-primary form-control" data-toggle="modal"
|
||||
data-target="#backgroundAddModal">
|
||||
Add background video
|
||||
</button>
|
||||
<div class="form-control w-full">
|
||||
<label class="label"><span class="label-text text-slate-300">Credits</span></label>
|
||||
<div class="join w-full">
|
||||
<div class="btn join-item no-animation bg-slate-900 border-slate-700 pointer-events-none">
|
||||
<i data-lucide="user" class="w-4 h-4 text-slate-400"></i>
|
||||
</div>
|
||||
<input name="citation" type="text" placeholder="YouTube Channel Name"
|
||||
class="input input-bordered join-item w-full bg-slate-900 border-slate-700 text-slate-200 focus:border-indigo-500">
|
||||
</div>
|
||||
<label class="label"><span class="label-text-alt text-slate-500 italic">Name of the video owner.</span></label>
|
||||
</div>
|
||||
|
||||
<div class="grid row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id="backgrounds">
|
||||
<div class="form-control w-full">
|
||||
<label class="label"><span class="label-text text-slate-300 text-xs">Advanced: Position</span></label>
|
||||
<input name="position" type="text" placeholder="center (optional)"
|
||||
class="input input-bordered w-full bg-slate-900 border-slate-700 text-slate-200 focus:border-indigo-500 text-sm h-10">
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" onclick="add_modal.close()" class="btn btn-ghost text-slate-400">Cancel</button>
|
||||
<button type="submit" class="btn btn-indigo bg-indigo-600 hover:bg-indigo-500 border-none text-white">Add Background</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
var keys = [];
|
||||
var youtube_urls = [];
|
||||
|
||||
// Show background videos
|
||||
$(document).ready(function () {
|
||||
$.getJSON("backgrounds.json",
|
||||
function (data) {
|
||||
delete data["__comment"];
|
||||
var background = '';
|
||||
$.each(data, function (key, value) {
|
||||
// Add YT urls and keys (for validation)
|
||||
keys.push(key);
|
||||
youtube_urls.push(value[0]);
|
||||
let keys = [];
|
||||
let youtube_urls = [];
|
||||
|
||||
async function loadBackgrounds() {
|
||||
try {
|
||||
const response = await fetch("backgrounds.json");
|
||||
const data = await response.json();
|
||||
delete data["__comment"];
|
||||
|
||||
const container = document.getElementById('backgrounds');
|
||||
let html = '';
|
||||
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
keys.push(key);
|
||||
youtube_urls.push(value[0]);
|
||||
|
||||
const videoId = value[0].includes('?v=') ? value[0].split('?v=')[1] : value[0].split('/').pop();
|
||||
|
||||
html += `
|
||||
<div class="bg-card group bg-slate-800 rounded-xl overflow-hidden border border-white/5 hover:border-indigo-500/50 transition-all duration-300 shadow-lg">
|
||||
<div class="aspect-video w-full bg-black relative">
|
||||
<iframe class="w-full h-full"
|
||||
src="https://www.youtube-nocookie.com/embed/${videoId}"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-slate-200 font-medium truncate mb-1" title="${key}">${key}</h3>
|
||||
<p class="text-slate-500 text-xs truncate mb-4">${value[2]}</p>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button onclick="confirmDelete('${key}')" class="btn btn-square btn-sm btn-ghost hover:bg-red-500/20 hover:text-red-400">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
background += '<div class="col">';
|
||||
background += '<div class="card shadow-sm">';
|
||||
background += '<iframe class="bd-placeholder-img card-img-top" width="100%" height="225" src="https://www.youtube-nocookie.com/embed/' + value[0].split("?v=")[1] + '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
|
||||
background += '<div class="card-body">';
|
||||
background += '<p class="card-text">' + value[2] + ' • ' + key + '</p>';
|
||||
background += '<div class="d-flex justify-content-between align-items-center">';
|
||||
background += '<div class="btn-group">';
|
||||
background += '<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteBtnModal" data-background-key="' + key + '">Delete</button>';
|
||||
background += '</div>';
|
||||
background += '</div>';
|
||||
background += '</div>';
|
||||
background += '</div>';
|
||||
background += '</div>';
|
||||
});
|
||||
container.innerHTML = html;
|
||||
lucide.createIcons();
|
||||
} catch (error) {
|
||||
console.error("Error loading backgrounds:", error);
|
||||
}
|
||||
}
|
||||
|
||||
$('#backgrounds').append(background);
|
||||
});
|
||||
});
|
||||
function confirmDelete(key) {
|
||||
document.getElementById('background-key').value = key;
|
||||
delete_modal.showModal();
|
||||
}
|
||||
|
||||
// Add background key when deleting
|
||||
$('#deleteBtnModal').on('show.bs.modal', function (event) {
|
||||
var button = $(event.relatedTarget);
|
||||
var key = button.data('background-key');
|
||||
function searchFilter() {
|
||||
const query = document.querySelector(".searchFilter").value.toLowerCase();
|
||||
const cards = document.querySelectorAll(".bg-card");
|
||||
let visibleCount = 0;
|
||||
|
||||
$('#background-key').prop('value', key);
|
||||
});
|
||||
cards.forEach(card => {
|
||||
const text = card.textContent.toLowerCase();
|
||||
const matches = text.includes(query);
|
||||
card.classList.toggle('hidden', !matches);
|
||||
if (matches) visibleCount++;
|
||||
});
|
||||
|
||||
var searchFilter = () => {
|
||||
const input = document.querySelector(".searchFilter");
|
||||
const cards = document.getElementsByClassName("col");
|
||||
console.log(cards[1])
|
||||
let filter = input.value
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
let title = cards[i].querySelector(".card-text");
|
||||
if (title.innerText.toLowerCase().indexOf(filter.toLowerCase()) > -1) {
|
||||
cards[i].classList.remove("d-none")
|
||||
} else {
|
||||
cards[i].classList.add("d-none")
|
||||
}
|
||||
}
|
||||
document.getElementById('empty-state').classList.toggle('hidden', visibleCount > 0);
|
||||
}
|
||||
|
||||
// Validate form
|
||||
$("#addBgForm").submit(function (event) {
|
||||
$("#addBgForm input").each(function () {
|
||||
if (!(validate($(this)))) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
const form = document.getElementById('addBgForm');
|
||||
form.addEventListener('submit', (e) => {
|
||||
let isValid = true;
|
||||
form.querySelectorAll('input').forEach(input => {
|
||||
if (!validate(input)) isValid = false;
|
||||
});
|
||||
if (!isValid) e.preventDefault();
|
||||
});
|
||||
|
||||
$('#addBgForm input[type="text"]').on("keyup", function () {
|
||||
validate($(this));
|
||||
form.querySelectorAll('input').forEach(input => {
|
||||
input.addEventListener('keyup', () => validate(input));
|
||||
});
|
||||
|
||||
function validate(object) {
|
||||
let bool = check(object.prop("name"), object.prop("value"));
|
||||
|
||||
// Change class
|
||||
if (bool) {
|
||||
object.removeClass("is-invalid");
|
||||
object.addClass("is-valid");
|
||||
}
|
||||
else {
|
||||
object.removeClass("is-valid");
|
||||
object.addClass("is-invalid");
|
||||
}
|
||||
|
||||
return bool;
|
||||
|
||||
// Check values (return true/false)
|
||||
function check(name, value) {
|
||||
if (name == "youtube_uri") {
|
||||
// URI validation
|
||||
let regex = /(?:\/|%3D|v=|vi=)([0-9A-z-_]{11})(?:[%#?&]|$)/;
|
||||
if (!(regex.test(value))) {
|
||||
$("#feedbackYT").html("Invalid URI");
|
||||
$("#feedbackYT").show();
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if this background already exists
|
||||
if (youtube_urls.includes(value)) {
|
||||
$("#feedbackYT").html("This background is already added");
|
||||
$("#feedbackYT").show();
|
||||
return false;
|
||||
}
|
||||
|
||||
$("#feedbackYT").hide();
|
||||
return true;
|
||||
}
|
||||
|
||||
if (name == "filename") {
|
||||
// Check if key is already taken
|
||||
if (keys.includes(value)) {
|
||||
$("#feedbackFilename").html("This filename is already taken");
|
||||
$("#feedbackFilename").show();
|
||||
return false;
|
||||
}
|
||||
|
||||
let regex = /^([a-zA-Z0-9\s_-]{1,100})$/;
|
||||
if (!(regex.test(value))) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
function validate(input) {
|
||||
const name = input.name;
|
||||
const value = input.value;
|
||||
let valid = true;
|
||||
let message = "";
|
||||
|
||||
if (name === "youtube_uri") {
|
||||
const regex = /(?:\/|%3D|v=|vi=)([0-9A-z-_]{11})(?:[%#?&]|$)/;
|
||||
if (!regex.test(value)) {
|
||||
message = "Invalid YouTube URI";
|
||||
valid = false;
|
||||
} else if (youtube_urls.includes(value)) {
|
||||
message = "Background already added";
|
||||
valid = false;
|
||||
}
|
||||
const feedback = document.getElementById('feedbackYT');
|
||||
feedback.textContent = message;
|
||||
feedback.classList.toggle('hidden', valid);
|
||||
}
|
||||
|
||||
if (name == "citation") {
|
||||
if (value.trim()) {
|
||||
return true;
|
||||
}
|
||||
if (name === "filename") {
|
||||
if (keys.includes(value)) {
|
||||
message = "Filename already taken";
|
||||
valid = false;
|
||||
} else if (!/^([a-zA-Z0-9\s_-]{1,100})$/.test(value)) {
|
||||
valid = false;
|
||||
}
|
||||
const feedback = document.getElementById('feedbackFilename');
|
||||
feedback.textContent = message;
|
||||
feedback.classList.toggle('hidden', valid);
|
||||
}
|
||||
|
||||
if (name == "position") {
|
||||
if (!(value == "center" || value.length == 0 || value % 1 == 0)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
if (name === "position") {
|
||||
if (value && value !== "center" && isNaN(parseFloat(value))) {
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
|
||||
input.classList.toggle('input-error', !valid);
|
||||
return valid;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadBackgrounds);
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
@ -0,0 +1,245 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block main %}
|
||||
|
||||
<div class="bg-slate-900 min-h-screen py-12">
|
||||
<div class="container mx-auto px-4 max-w-2xl">
|
||||
<div class="card bg-slate-800 border border-white/5 shadow-2xl">
|
||||
<div class="card-body p-8">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="bg-indigo-600/20 p-3 rounded-xl">
|
||||
<i data-lucide="plus-square" class="w-8 h-8 text-indigo-500"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="card-title text-2xl text-white">Create New Short</h2>
|
||||
<p class="text-slate-400 text-sm">Start the automated video creation pipeline.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Action Button -->
|
||||
<button id="create-btn" class="btn btn-indigo btn-lg w-full bg-indigo-600 hover:bg-indigo-500 border-none text-white h-16 text-lg"
|
||||
onclick="startPipeline()" disabled>
|
||||
<span id="btn-text">Start Generation</span>
|
||||
<span id="btn-spinner" class="loading loading-spinner loading-md hidden"></span>
|
||||
</button>
|
||||
|
||||
<!-- Progress Visualization -->
|
||||
<div id="progress-area" class="hidden space-y-4 animate-in fade-in duration-500">
|
||||
<div class="flex justify-between items-end">
|
||||
<div class="space-y-1">
|
||||
<span class="text-xs uppercase tracking-widest text-slate-500 font-bold">Current Stage</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></div>
|
||||
<h3 id="stage-text" class="text-indigo-400 font-semibold text-lg capitalize">Preparing...</h3>
|
||||
</div>
|
||||
</div>
|
||||
<span id="pct-text" class="text-2xl font-black text-slate-700 font-mono">0%</span>
|
||||
</div>
|
||||
|
||||
<progress id="progress-bar" class="progress progress-indigo w-full h-3 bg-slate-900" value="0" max="100"></progress>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 pt-4">
|
||||
<div class="bg-slate-900/50 p-3 rounded-lg border border-white/5 flex items-center gap-3">
|
||||
<i data-lucide="clock" class="w-4 h-4 text-slate-500"></i>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] uppercase text-slate-500 font-bold">Elapsed</span>
|
||||
<span id="elapsed-time" class="text-sm font-mono text-slate-300">00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-900/50 p-3 rounded-lg border border-white/5 flex items-center gap-3">
|
||||
<i data-lucide="layers" class="w-4 h-4 text-slate-500"></i>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] uppercase text-slate-500 font-bold">Status</span>
|
||||
<span class="text-sm text-indigo-400">Processing</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div id="done-area" class="hidden animate-in zoom-in duration-300">
|
||||
<div class="alert bg-emerald-500/10 border-emerald-500/20 text-emerald-400 flex flex-col items-start gap-4 p-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-emerald-500 text-slate-900 p-1 rounded-full">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<span class="font-bold text-lg">Generation Complete!</span>
|
||||
</div>
|
||||
<p id="done-msg" class="text-slate-300 text-sm">Your video has been rendered and saved to the library.</p>
|
||||
<a href="/" class="btn btn-emerald btn-sm bg-emerald-600 hover:bg-emerald-500 border-none text-white px-6">View Video</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div id="error-area" class="hidden">
|
||||
<div class="alert bg-red-500/10 border-red-500/20 text-red-400 p-6">
|
||||
<i data-lucide="alert-triangle" class="w-6 h-6"></i>
|
||||
<div>
|
||||
<h3 class="font-bold">Pipeline Failed</h3>
|
||||
<div id="error-text" class="text-xs mt-2 font-mono bg-black/20 p-3 rounded overflow-x-auto whitespace-pre-wrap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log Output -->
|
||||
<div id="log-area" class="hidden space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="text-xs uppercase tracking-widest text-slate-500 font-bold">Execution Logs</h4>
|
||||
<span class="badge badge-outline border-slate-700 text-slate-500 text-[10px]">Real-time</span>
|
||||
</div>
|
||||
<div id="log-list" class="bg-slate-900 rounded-xl p-4 font-mono text-[11px] leading-relaxed text-slate-400 h-48 overflow-y-auto border border-white/5 shadow-inner">
|
||||
<!-- Logs will appear here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let pollTimer = null;
|
||||
let startTime = null;
|
||||
let elapsedTimer = null;
|
||||
|
||||
const stageWeights = {
|
||||
'configuring': 5,
|
||||
'discovering': 15,
|
||||
'scraping': 20,
|
||||
'fetching': 25,
|
||||
'saving': 35,
|
||||
'tts': 45,
|
||||
'screenshots': 60,
|
||||
'background': 70,
|
||||
'chopping': 75,
|
||||
'creating': 80,
|
||||
'rendering': 90,
|
||||
'done': 100,
|
||||
'error': 0
|
||||
};
|
||||
|
||||
function updateElapsedTime() {
|
||||
if (!startTime) return;
|
||||
const now = new Date();
|
||||
const diff = Math.floor((now - startTime) / 1000);
|
||||
const mins = Math.floor(diff / 60).toString().padStart(2, '0');
|
||||
const secs = (diff % 60).toString().padStart(2, '0');
|
||||
document.getElementById('elapsed-time').textContent = `${mins}:${secs}`;
|
||||
}
|
||||
|
||||
function stageProgress(stage) {
|
||||
let pct = 0;
|
||||
const s = stage.toLowerCase();
|
||||
for (let [key, val] of Object.entries(stageWeights)) {
|
||||
if (s.includes(key)) { pct = val; }
|
||||
}
|
||||
return pct;
|
||||
}
|
||||
|
||||
async function startPipeline() {
|
||||
const btn = document.getElementById('create-btn');
|
||||
const btnText = document.getElementById('btn-text');
|
||||
const spinner = document.getElementById('btn-spinner');
|
||||
|
||||
btn.disabled = true;
|
||||
spinner.classList.remove('hidden');
|
||||
btnText.textContent = 'Initializing...';
|
||||
|
||||
document.getElementById('progress-area').classList.remove('hidden');
|
||||
document.getElementById('log-area').classList.remove('hidden');
|
||||
document.getElementById('done-area').classList.add('hidden');
|
||||
document.getElementById('error-area').classList.add('hidden');
|
||||
|
||||
try {
|
||||
const r = await fetch('/create', { method: 'POST' });
|
||||
const data = await r.json();
|
||||
|
||||
if (data.status === 'started' || data.status === 'already_running') {
|
||||
btnText.textContent = 'Processing...';
|
||||
startTime = new Date();
|
||||
elapsedTimer = setInterval(updateElapsedTime, 1000);
|
||||
pollTimer = setInterval(pollStatus, 2000);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to start pipeline:", err);
|
||||
btn.disabled = false;
|
||||
spinner.classList.add('hidden');
|
||||
btnText.textContent = 'Retry';
|
||||
}
|
||||
}
|
||||
|
||||
async function pollStatus() {
|
||||
try {
|
||||
const r = await fetch('/create/status');
|
||||
const state = await r.json();
|
||||
|
||||
const stageText = document.getElementById('stage-text');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const pctText = document.getElementById('pct-text');
|
||||
const logList = document.getElementById('log-list');
|
||||
|
||||
stageText.textContent = state.stage || 'Running...';
|
||||
const pct = stageProgress(state.stage || '');
|
||||
progressBar.value = pct;
|
||||
pctText.textContent = `${pct}%`;
|
||||
|
||||
if (state.log && state.log.length > 0) {
|
||||
logList.innerHTML = state.log.map(l =>
|
||||
`<div class="py-0.5 border-b border-white/5 last:border-0">${l}</div>`
|
||||
).join('');
|
||||
logList.scrollTop = logList.scrollHeight;
|
||||
}
|
||||
|
||||
if (!state.running) {
|
||||
clearInterval(pollTimer);
|
||||
clearInterval(elapsedTimer);
|
||||
pollTimer = null;
|
||||
|
||||
document.getElementById('btn-spinner').classList.add('hidden');
|
||||
|
||||
if (state.stage === 'done' || state.result) {
|
||||
progressBar.value = 100;
|
||||
progressBar.classList.add('progress-success');
|
||||
document.getElementById('btn-text').textContent = 'Create New';
|
||||
document.getElementById('done-area').classList.remove('hidden');
|
||||
if (state.result) {
|
||||
document.getElementById('done-msg').textContent = state.result.message;
|
||||
}
|
||||
} else if (state.error) {
|
||||
progressBar.classList.add('progress-error');
|
||||
document.getElementById('btn-text').textContent = 'Retry';
|
||||
document.getElementById('error-area').classList.remove('hidden');
|
||||
document.getElementById('error-text').textContent = state.error;
|
||||
}
|
||||
document.getElementById('create-btn').disabled = false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Status poll failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', async function() {
|
||||
lucide.createIcons();
|
||||
try {
|
||||
const r = await fetch('/create/status');
|
||||
const state = await r.json();
|
||||
const btn = document.getElementById('create-btn');
|
||||
|
||||
if (state.running) {
|
||||
document.getElementById('progress-area').classList.remove('hidden');
|
||||
document.getElementById('log-area').classList.remove('hidden');
|
||||
btn.disabled = true;
|
||||
document.getElementById('btn-spinner').classList.remove('hidden');
|
||||
document.getElementById('btn-text').textContent = 'Running...';
|
||||
startTime = new Date(); // Approximate
|
||||
elapsedTimer = setInterval(updateElapsedTime, 1000);
|
||||
pollTimer = setInterval(pollStatus, 2000);
|
||||
} else {
|
||||
btn.disabled = false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Initial status check failed:", err);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -1,155 +1,128 @@
|
||||
<html lang="en">
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cache-control" content="no-cache" />
|
||||
<title>RedditVideoMakerBot</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<link href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
|
||||
<title>VideoMakerBot</title>
|
||||
|
||||
<!-- Modern Tech Stack -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #0f172a; /* Slate 900 */
|
||||
}
|
||||
|
||||
.feedback-invalid {
|
||||
color: #dc3545;
|
||||
.glass-nav {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
/* Custom scrollbar for a modern look */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.bi {
|
||||
vertical-align: -.125em;
|
||||
fill: currentColor;
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #334155;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
max-width: 500px !important;
|
||||
}
|
||||
#hard-reload {
|
||||
cursor: pointer;
|
||||
color: darkblue;
|
||||
}
|
||||
#hard-reload:hover {
|
||||
color: blue;
|
||||
/* Dotted path inputs shouldn't show default browser validation UI */
|
||||
input:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
|
||||
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
|
||||
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
{% if get_flashed_messages() %}
|
||||
{% for category, message in get_flashed_messages(with_categories=true) %}
|
||||
|
||||
{% if category == "error" %}
|
||||
<div class="alert alert-danger mb-0 text-center" role="alert">
|
||||
{{ message }}
|
||||
<body class="min-h-screen flex flex-col">
|
||||
|
||||
<header class="sticky top-0 z-50 glass-nav">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="navbar px-0">
|
||||
<div class="flex-1">
|
||||
<a href="/" class="flex items-center gap-2 group">
|
||||
<div class="bg-indigo-600 p-2 rounded-lg group-hover:bg-indigo-500 transition-colors">
|
||||
<i data-lucide="video" class="w-5 h-5 text-white"></i>
|
||||
</div>
|
||||
<span class="text-xl font-bold tracking-tight text-white">VideoMakerBot</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none gap-2">
|
||||
<ul class="menu menu-horizontal px-1 gap-1">
|
||||
<li><a href="/" class="rounded-lg hover:bg-white/10 text-slate-300">Library</a></li>
|
||||
<li><a href="/backgrounds" class="rounded-lg hover:bg-white/10 text-slate-300">Backgrounds</a></li>
|
||||
<li><a href="/settings" class="rounded-lg hover:bg-white/10 text-slate-300">Settings</a></li>
|
||||
</ul>
|
||||
<a href="/create" class="btn btn-indigo btn-sm ml-2 rounded-lg capitalize border-none bg-indigo-600 hover:bg-indigo-500 text-white">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i>
|
||||
Create
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% else %}
|
||||
<div class="alert alert-success mb-0 text-center" role="alert">
|
||||
{{ message }}
|
||||
{% if get_flashed_messages() %}
|
||||
<div class="container mx-auto px-4 mt-4">
|
||||
{% for category, message in get_flashed_messages(with_categories=true) %}
|
||||
<div class="alert {{ 'alert-error' if category == 'error' else 'alert-success' }} shadow-lg mb-2">
|
||||
<i data-lucide="{{ 'alert-circle' if category == 'error' else 'check-circle' }}" class="w-5 h-5"></i>
|
||||
<span>{{ message }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
|
||||
<circle cx="12" cy="13" r="4" />
|
||||
</svg>
|
||||
<strong>RedditVideoMakerBot</strong>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<main class="flex-grow">
|
||||
{% block main %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="bg-slate-900 border-t border-white/5 py-12 mt-12">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i data-lucide="video" class="w-5 h-5 text-indigo-500"></i>
|
||||
<span class="text-lg font-semibold text-white">VideoMakerBot</span>
|
||||
</div>
|
||||
<p class="text-slate-400 text-sm">Automated short-form video creator.</p>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="backgrounds">Background Manager</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="settings">Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Future feature
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<button class="btn btn-outline-success mr-auto mt-2 mt-lg-0">Create new short</button>
|
||||
</li>
|
||||
</ul>
|
||||
-->
|
||||
<div class="flex gap-6 text-sm text-slate-400">
|
||||
<a href="https://github.com/elebumm/RedditVideoMakerBot" target="_blank" class="hover:text-white transition-colors">GitHub</a>
|
||||
<a href="#" class="hover:text-white transition-colors" id="hard-reload">Hard Reload</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{% block main %}{% endblock %}
|
||||
|
||||
<footer class="text-muted py-5">
|
||||
<div class="container">
|
||||
<p class="float-end mb-1">
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
<p class="mb-1"><a href="https://getbootstrap.com/docs/5.2/examples/album/" target="_blank">Album</a>
|
||||
Example
|
||||
Theme by © Bootstrap. <a
|
||||
href="https://github.com/elebumm/RedditVideoMakerBot/blob/master/README.md#developers-and-maintainers"
|
||||
target="_blank">Developers and Maintainers</a></p>
|
||||
<p class="mb-0">If your data is not refreshing, try to hard reload(Ctrl + F5) or click <a id="hard-reload">this</a> and visit your local
|
||||
|
||||
<strong>{{ file }}</strong> file.
|
||||
</p>
|
||||
<div class="mt-8 pt-8 border-t border-white/5 text-center text-xs text-slate-500">
|
||||
© 2026 VideoMakerBot. Built for speed and creativity.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById("hard-reload").addEventListener("click", function () {
|
||||
// Initialize Lucide icons
|
||||
lucide.createIcons();
|
||||
|
||||
document.getElementById("hard-reload").addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
window.location.reload(true);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,72 @@
|
||||
import json
|
||||
import os
|
||||
import pytest
|
||||
from unittest.mock import patch, MagicMock
|
||||
from pathlib import Path
|
||||
from utils import gui_utils
|
||||
|
||||
@pytest.fixture
|
||||
def mock_background_json(tmp_path):
|
||||
bg_file = tmp_path / "background_videos.json"
|
||||
initial_data = {
|
||||
"__comment": "test",
|
||||
"minecraft": ["https://www.youtube.com/watch?v=n_Dv4JMiwK8", "parkour.mp4", "bbswitzer", "center"]
|
||||
}
|
||||
bg_file.write_text(json.dumps(initial_data))
|
||||
return bg_file
|
||||
|
||||
@pytest.fixture
|
||||
def mock_template_toml(tmp_path):
|
||||
template_file = tmp_path / ".config.template.toml"
|
||||
template_content = """
|
||||
[settings.background]
|
||||
background_video = { optional = true, default = "minecraft", options = ["minecraft"] }
|
||||
"""
|
||||
template_file.write_text(template_content)
|
||||
return template_file
|
||||
|
||||
@patch("utils.gui_utils.flash")
|
||||
def test_delete_background(mock_flash, mock_background_json, mock_template_toml):
|
||||
# We need to patch the paths used in gui_utils
|
||||
with patch("utils.gui_utils.open", MagicMock(side_effect=lambda path, *args, **kwargs: open(mock_background_json if "background_videos.json" in str(path) else path, *args, **kwargs))), \
|
||||
patch("utils.gui_utils.Path", MagicMock(side_effect=lambda path: Path(mock_template_toml) if ".config.template.toml" in str(path) else Path(path))):
|
||||
|
||||
gui_utils.delete_background("minecraft")
|
||||
|
||||
# Verify background_videos.json
|
||||
with open(mock_background_json, "r") as f:
|
||||
data = json.load(f)
|
||||
assert "minecraft" not in data
|
||||
|
||||
# Verify .config.template.toml
|
||||
import tomlkit
|
||||
template_data = tomlkit.loads(mock_template_toml.read_text())
|
||||
assert "minecraft" not in template_data["settings"]["background"]["background_video"]["options"]
|
||||
|
||||
mock_flash.assert_called_with('Successfully removed "minecraft" background!')
|
||||
|
||||
@patch("utils.gui_utils.flash")
|
||||
def test_add_background(mock_flash, mock_background_json, mock_template_toml):
|
||||
with patch("utils.gui_utils.open", MagicMock(side_effect=lambda path, *args, **kwargs: open(mock_background_json if "background_videos.json" in str(path) else path, *args, **kwargs))), \
|
||||
patch("utils.gui_utils.Path", MagicMock(side_effect=lambda path: Path(mock_template_toml) if ".config.template.toml" in str(path) else Path(path))):
|
||||
|
||||
# Test adding a new background
|
||||
gui_utils.add_background(
|
||||
youtube_uri="https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
||||
filename="test_new",
|
||||
citation="Rick",
|
||||
position="center"
|
||||
)
|
||||
|
||||
# Verify background_videos.json
|
||||
with open(mock_background_json, "r") as f:
|
||||
data = json.load(f)
|
||||
assert "test_new" in data
|
||||
assert data["test_new"][0] == "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
|
||||
# Verify .config.template.toml
|
||||
import tomlkit
|
||||
template_data = tomlkit.loads(mock_template_toml.read_text())
|
||||
assert "test_new" in template_data["settings"]["background"]["background_video"]["options"]
|
||||
|
||||
mock_flash.assert_called_with('Added "Rick-test_new.mp4" as a new background video!')
|
||||
Loading…
Reference in new issue