Web UI

Web UI

⚠️ Note: The Web UI interface is currently not up to date and may not work properly. It will be updated once the Java desktop application reaches version 1.0. For now, please use the desktop GUI for the best experience.

The Web UI provides a browser-based interface powered by Streamlit, perfect for server deployments and remote access.

Overview

Web UI provides:

• ✅ Browser-based interface
• ✅ Three operation modes (encoder, subtitle, renamer)
• ✅ File upload support
• ✅ Settings management
• ✅ Progress tracking
• ✅ Download results

Current Status

The Web UI interface exists but is outdated and may contain bugs or missing features. Development focus is currently on the desktop GUI application.

Quick Start

Launch Web UI

# Using Python
python EncodeForge/src/main/resources/python/encodeforge_webui.py

# Or using Streamlit directly
streamlit run EncodeForge/src/main/resources/python/encodeforge_webui.py

Access Interface

Open your browser to:

http://localhost:8501

Installation

Prerequisites

pip install streamlit pandas openai-whisper requests numba

Run from Source

git clone https://github.com/yourusername/encodeforge.git
cd encodeforge
pip install -r requirements.txt
streamlit run EncodeForge/src/main/resources/python/encodeforge_webui.py

Interface Overview

Sidebar (Left)

Operation Mode Selection:

• Encoder
• Subtitle
• Metadata

General Settings:

• FFmpeg path
• Check FFmpeg button
• Output directory

Mode-Specific Settings:

• Displayed based on selected mode
• Provider selection
• Quality settings
• API keys

Main Content Area

File Upload:

• Drag and drop files
• Multiple file selection
• Supported formats displayed

Queue Display:

• Shows uploaded files
• File sizes
• Remove buttons

Results:

• Progress bars
• Success/failure indicators
• Download buttons

Encoder Mode

Upload Files

1. Click "Upload video files"
2. Select multiple files
3. Click "Add Files" to add to queue

Configure Settings

In Sidebar:

• Output format (MP4, MKV, AVI, MOV)
• Hardware acceleration (NVENC, AMF, QSV)
• Quality settings
• Audio settings

Start Conversion

1. Click "▶️ Start Conversion"
2. Watch progress bars
3. Download results when complete

Subtitle Mode

Upload Files

1. Click "Upload video files"
2. Select files needing subtitles
3. Configure subtitle settings

Configure Settings

In Sidebar:

• Enable Whisper generation
• Select Whisper model
• Enable OpenSubtitles download
• Enter API keys
• Select languages

Generate/Download

1. Click "🎙️ Generate/Download Subtitles"
2. Wait for processing
3. Download subtitle files

Metadata Mode

Upload Files

1. Click "Upload media files"
2. Select files to rename
3. Ensure TMDB API key is set

Preview Renames

1. Click "👀 Preview Renames"
2. Review suggested names
3. Expand files to see details

Apply Renames

1. Click "✅ Apply Renames"
2. Download renamed files

Server Deployment

Docker

Create Dockerfile:

FROM python:3.11-slim

WORKDIR /app

COPY requirements.txt .
RUN pip install -r requirements.txt

COPY . .

EXPOSE 8501

CMD ["streamlit", "run", "EncodeForge/src/main/resources/python/encodeforge_webui.py", "--server.port=8501", "--server.address=0.0.0.0"]

Build and run:

docker build -t encodeforge-webui .
docker run -p 8501:8501 encodeforge-webui

Nginx Reverse Proxy

Create /etc/nginx/sites-available/encodeforge:

server {
    listen 80;
    server_name encodeforge.example.com;

    location / {
        proxy_pass http://localhost:8501;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 86400;
    }
}

Enable:

sudo ln -s /etc/nginx/sites-available/encodeforge /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

SSL with Let's Encrypt

sudo certbot --nginx -d encodeforge.example.com

Security Considerations

Authentication

Add authentication (recommended for production):

# Add to webui file
import streamlit_authenticator as stauth

names = ['admin']
usernames = ['admin']
passwords = ['password']
hashed_passwords = stauth.Hasher(passwords).generate()

authenticator = stauth.Authenticate(names, usernames, hashed_passwords, 'cookie', 'secret_key', [30])

name, authentication_status, username = authenticator.login('Login', 'main')

if authentication_status == False:
    st.error('Username/password is incorrect')
elif authentication_status == None:
    st.warning('Please enter your username and password')
elif authentication_status:
    # Main app code here
    pass

File Size Limits

Set upload limits:

import streamlit as st

st.set_page_config(
    page_title="EncodeForge",
    page_icon="🎬",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Set max upload size (default 200MB)
# Must be configured in .streamlit/config.toml

Create .streamlit/config.toml:

[server]
maxUploadSize = 1000
maxMessageSize = 1000

Configuration

Settings Persistence

Web UI uses Streamlit session state:

• Settings persist during session
• API keys stored in session
• Files uploaded to temp directory

Environment Variables

Set for production:

export TMDB_API_KEY="your_key"
export OPENSUBTITLES_API_KEY="your_key"
export STREAMLIT_SERVER_PORT=8501
export STREAMLIT_SERVER_ADDRESS=0.0.0.0

Troubleshooting

Common Issues

Issue: "Files not uploading"

• Check: File size limits
• Check: Browser compatibility
• Solution: Use modern browser

Issue: "FFmpeg not found"

• Check: FFmpeg installed on server
• Solution: Set FFmpeg path in sidebar

Issue: "Connection timeout"

• Check: Large file processing
• Solution: Increase timeout settings

Issue: "Port already in use"

• Solution: Change port: streamlit run app.py --server.port=8502

Debug Mode

Run with debug:

streamlit run app.py --logger.level=debug

API Integration

REST API Wrapper

Create API wrapper:

from flask import Flask, request, jsonify
import subprocess

app = Flask(__name__)

@app.route('/api/encode', methods=['POST'])
def encode_video():
    file_path = request.json['file_path']
    
    cmd = [
        'python', 'encodeforge_cli.py', 'encoder',
        file_path,
        '--use-nvenc'
    ]
    
    result = subprocess.run(cmd, capture_output=True, text=True)
    
    return jsonify({
        'status': 'success' if result.returncode == 0 else 'error',
        'output': result.stdout
    })

if __name__ == '__main__':
    app.run(port=5000)

Performance Tips

1. Use Hardware Acceleration - Configure GPU on server
2. Increase Workers - Set --server.numThreads
3. Cache Files - Use SSD storage
4. Monitor Resources - Watch CPU/GPU/RAM usage
5. Queue System - Implement job queue for multiple users

Deployment Examples

Cloud Deployment

Heroku:

heroku create encodeforge-webui
git push heroku main

Railway:

railway init
railway up

Google Cloud Run:

gcloud run deploy encodeforge \
  --source . \
  --platform managed \
  --region us-central1

Docker Compose

Create docker-compose.yml:

version: '3.8'

services:
  webui:
    build: .
    ports:
      - "8501:8501"
    volumes:
      - ./data:/app/data
    environment:
      - TMDB_API_KEY=${TMDB_API_KEY}
      - OPENSUBTITLES_API_KEY=${OPENSUBTITLES_API_KEY}

Run:

docker-compose up -d

Related Pages

• Getting Started
• CLI Interface
• Developer Guide
• Support

---

Need server deployment? The Web UI is perfect for remote access!