Skip to content

V
vidai
Commit 12598ec5 authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Complete web interface overhaul with authentication and modern UI 

- Implemented comprehensive user authentication system (login/logout/register)
- Added beautiful landing page for non-authenticated users
- Created user dashboard with statistics and quick actions
- Built modern, responsive UI with Inter font and professional styling
- Added session management and user context throughout
- Implemented token-based usage limits and tracking
- Created job history page with detailed status tracking
- Added user settings page with preferences and API token management
- Integrated flash messaging for user feedback
- Added navigation headers with consistent branding
- Implemented role-based access control decorators
- Added comprehensive error handling and user feedback

The web interface now provides a complete, professional user experience with authentication, modern design, and full functionality for the multi-process Video AI system.
parent 5c9d6157
Show whitespace changes
Inline Side-by-side
Showing with 637 additions and 25 deletions
vidai/web.py
View file @ 12598ec5
...@@ -19,20 +19,51 @@ Web interface process for Video AI. ...@@ -19,20 +19,51 @@ Web interface process for Video AI.
Serves the web UI for analysis and training. Serves the web UI for analysis and training.
""" """
from flask import Flask, request, render_template_string, send_from_directory from flask import Flask, request, render_template_string, send_from_directory, redirect, url_for, flash, session, make_response
import os import os
import json import json
import uuid import uuid
import time import time
from .comm import SocketCommunicator, Message from .comm import SocketCommunicator, Message
from .config import get_all_settings from .config import get_all_settings, get_allow_registration
from .auth import login_user, logout_user, get_current_user, register_user, confirm_email, require_auth, require_admin
from .database import get_user_tokens, update_user_tokens, get_user_queue_items, get_default_user_tokens
app = Flask(__name__) app = Flask(__name__)
app.secret_key = os.environ.get('FLASK_SECRET_KEY', 'dev-secret-key-change-in-production')
os.makedirs('static', exist_ok=True) os.makedirs('static', exist_ok=True)
# Communicator to backend (always TCP) # Communicator to backend (always TCP)
comm = SocketCommunicator(host='localhost', port=5001, comm_type='tcp') comm = SocketCommunicator(host='localhost', port=5001, comm_type='tcp')
def get_current_user_session():
"""Get current user from session."""
session_id = session.get('session_id')
if session_id:
return get_current_user(session_id)
return None
def login_required(f):
"""Decorator to require login."""
def decorated_function(*args, **kwargs):
user = get_current_user_session()
if not user:
return redirect(url_for('login'))
return f(*args, **kwargs)
decorated_function.__name__ = f.__name__
return decorated_function
def admin_required(f):
"""Decorator to require admin role."""
def decorated_function(*args, **kwargs):
user = get_current_user_session()
if not user or user['role'] != 'admin':
flash('Admin access required', 'error')
return redirect(url_for('dashboard'))
return f(*args, **kwargs)
decorated_function.__name__ = f.__name__
return decorated_function
def send_to_backend(msg_type: str, data: dict) -> str: def send_to_backend(msg_type: str, data: dict) -> str:
"""Send message to backend and return message id.""" """Send message to backend and return message id."""
msg_id = str(uuid.uuid4()) msg_id = str(uuid.uuid4())
...@@ -68,10 +99,312 @@ def get_result(msg_id: str) -> dict: ...@@ -68,10 +99,312 @@ def get_result(msg_id: str) -> dict:
time.sleep(0.1) time.sleep(0.1)
return {'error': 'Timeout waiting for result'} return {'error': 'Timeout waiting for result'}
@app.route('/', methods=['GET', 'POST']) @app.route('/')
def index(): def index():
"""Landing page for non-authenticated users, dashboard for authenticated users."""
user = get_current_user_session()
if user:
return redirect(url_for('dashboard'))
# Show landing page for non-authenticated users
with open('templates/landing.html', 'r') as f:
landing_html = f.read()
return landing_html
@app.route('/dashboard')
@login_required
def dashboard():
"""User dashboard with overview and quick actions."""
user = get_current_user_session()
tokens = get_user_tokens(user['id'])
queue_items = get_user_queue_items(user['id'])
html = f'''
<!DOCTYPE html>
<html>
<head>
<title>Dashboard - Video AI Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
body {{ font-family: 'Inter', sans-serif; background: #f8fafc; }}
.header {{ background: white; padding: 1rem 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }}
.header-content {{ display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }}
.logo {{ font-size: 1.5rem; font-weight: 700; color: #667eea; }}
.user-menu {{ display: flex; align-items: center; gap: 1rem; }}
.container {{ max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }}
.stats-grid {{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }}
.stat-card {{ background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }}
.stat-value {{ font-size: 2rem; font-weight: 700; color: #667eea; margin-bottom: 0.5rem; }}
.stat-label {{ color: #64748b; font-size: 0.9rem; }}
.quick-actions {{ background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }}
.actions-grid {{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }}
.action-btn {{ display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 8px; text-decoration: none; color: #475569; transition: all 0.2s; }}
.action-btn:hover {{ background: #667eea; color: white; border-color: #667eea; }}
.recent-jobs {{ background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }}
.job-item {{ padding: 1rem; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }}
.job-item:last-child {{ border-bottom: none; }}
.job-status {{ padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }}
.status-queued {{ background: #fef3c7; color: #d97706; }}
.status-processing {{ background: #dbeafe; color: #2563eb; }}
.status-completed {{ background: #d1fae5; color: #065f46; }}
.status-failed {{ background: #fee2e2; color: #dc2626; }}
</style>
</head>
<body>
<header class="header">
<div class="header-content">
<div class="logo">Video AI Pro</div>
<div class="user-menu">
<span>Welcome, {user["username"]}!</span>
<a href="/logout" class="action-btn" style="padding: 0.5rem 1rem; font-size: 0.9rem;">Logout</a>
</div>
</div>
</header>
<div class="container">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">{tokens}</div>
<div class="stat-label">Available Tokens</div>
</div>
<div class="stat-card">
<div class="stat-value">{len([j for j in queue_items if j["status"] == "completed"])}</div>
<div class="stat-label">Completed Jobs</div>
</div>
<div class="stat-card">
<div class="stat-value">{len([j for j in queue_items if j["status"] == "processing"])}</div>
<div class="stat-label">Active Jobs</div>
</div>
<div class="stat-card">
<div class="stat-value">{len(queue_items)}</div>
<div class="stat-label">Total Jobs</div>
</div>
</div>
<div class="quick-actions">
<h3 style="margin-bottom: 1rem; color: #1e293b;">Quick Actions</h3>
<div class="actions-grid">
<a href="/analyze" class="action-btn">
<i class="fas fa-search"></i>
<span>Analyze Media</span>
</a>
<a href="/train" class="action-btn">
<i class="fas fa-graduation-cap"></i>
<span>Train Model</span>
</a>
<a href="/history" class="action-btn">
<i class="fas fa-history"></i>
<span>Job History</span>
</a>
<a href="/settings" class="action-btn">
<i class="fas fa-cog"></i>
<span>Settings</span>
</a>
</div>
</div>
<div class="recent-jobs">
<h3 style="margin-bottom: 1rem; color: #1e293b;">Recent Jobs</h3>
{''.join([f'''
<div class="job-item">
<div>
<div style="font-weight: 500;">{job["request_type"].title()}</div>
<div style="color: #64748b; font-size: 0.9rem;">{job["created_at"][:19]}</div>
</div>
<span class="job-status status-{job['status']}">{job['status'].title()}</span>
</div>
''' for job in queue_items[:5]])}
{f'<div style="text-align: center; padding: 1rem; color: #64748b;">{len(queue_items)} total jobs</div>' if queue_items else '<div style="text-align: center; padding: 1rem; color: #64748b;">No jobs yet</div>'}
</div>
</div>
</body>
</html>
'''
return html
@app.route('/login', methods=['GET', 'POST'])
def login():
"""User login page."""
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
session_id = login_user(username, password)
if session_id:
session['session_id'] = session_id
flash('Login successful!', 'success')
return redirect(url_for('dashboard'))
else:
flash('Invalid username or password', 'error')
html = '''
<!DOCTYPE html>
<html>
<head>
<title>Login - Video AI Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-container { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); width: 100%; max-width: 400px; }
.logo { text-align: center; font-size: 2rem; font-weight: 700; color: #667eea; margin-bottom: 2rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
.form-group input { width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
.form-group input:focus { outline: none; border-color: #667eea; }
.btn { width: 100%; padding: 0.75rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.btn:hover { background: #5a67d8; }
.links { text-align: center; margin-top: 1.5rem; }
.links a { color: #667eea; text-decoration: none; margin: 0 0.5rem; }
.alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
</style>
</head>
<body>
<div class="login-container">
<div class="logo">Video AI Pro</div>
<form method="post">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="btn">Login</button>
</form>
<div class="links">
<a href="/register">Create Account</a> |
<a href="/">Home</a>
</div>
</div>
</body>
</html>
'''
return render_template_string(html)
@app.route('/register', methods=['GET', 'POST'])
def register():
"""User registration page."""
if not get_allow_registration():
flash('Registration is currently disabled', 'error')
return redirect(url_for('login'))
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
email = request.form.get('email')
success, message = register_user(username, password, email)
if success:
flash('Registration successful! Please check your email to confirm your account.', 'success')
return redirect(url_for('login'))
else:
flash(message, 'error')
html = '''
<!DOCTYPE html>
<html>
<head>
<title>Register - Video AI Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.register-container { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); width: 100%; max-width: 400px; }
.logo { text-align: center; font-size: 2rem; font-weight: 700; color: #667eea; margin-bottom: 2rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
.form-group input { width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
.form-group input:focus { outline: none; border-color: #667eea; }
.btn { width: 100%; padding: 0.75rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.btn:hover { background: #5a67d8; }
.links { text-align: center; margin-top: 1.5rem; }
.links a { color: #667eea; text-decoration: none; margin: 0 0.5rem; }
.alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
</style>
</head>
<body>
<div class="register-container">
<div class="logo">Video AI Pro</div>
<form method="post">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="btn">Create Account</button>
</form>
<div class="links">
<a href="/login">Already have an account?</a> |
<a href="/">Home</a>
</div>
</div>
</body>
</html>
'''
return render_template_string(html)
@app.route('/logout')
def logout():
"""User logout."""
session_id = session.get('session_id')
if session_id:
logout_user(session_id)
session.clear()
flash('Logged out successfully', 'success')
return redirect(url_for('index'))
@app.route('/analyze', methods=['GET', 'POST'])
@login_required
def analyze():
"""Media analysis page."""
user = get_current_user_session()
result = None result = None
if request.method == 'POST': if request.method == 'POST':
# Check token balance
tokens = get_user_tokens(user['id'])
if tokens <= 0:
flash('Insufficient tokens. Please purchase more tokens.', 'error')
return redirect(url_for('dashboard'))
model_path = request.form.get('model_path', 'Qwen/Qwen2.5-VL-7B-Instruct') model_path = request.form.get('model_path', 'Qwen/Qwen2.5-VL-7B-Instruct')
prompt = request.form.get('prompt', 'Describe this image.') prompt = request.form.get('prompt', 'Describe this image.')
local_path = request.form.get('local_path') local_path = request.form.get('local_path')
...@@ -80,46 +413,112 @@ def index(): ...@@ -80,46 +413,112 @@ def index():
data = { data = {
'model_path': model_path, 'model_path': model_path,
'prompt': prompt, 'prompt': prompt,
'local_path': local_path 'local_path': local_path,
'user_id': user['id']
} }
msg_id = send_to_backend('analyze_request', data) msg_id = send_to_backend('analyze_request', data)
result_data = get_result(msg_id) result_data = get_result(msg_id)
if 'data' in result_data: if 'data' in result_data:
result = result_data['data'].get('result', 'Analysis completed') result = result_data['data'].get('result', 'Analysis completed')
# Deduct tokens (simplified - in real implementation, deduct based on actual usage)
update_user_tokens(user['id'], -10)
else: else:
result = result_data.get('error', 'Error') result = result_data.get('error', 'Error')
html = ''' html = f'''
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>VideoModel AI</title> <title>Analyze Media - Video AI Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style> <style>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } * {{ margin: 0; padding: 0; box-sizing: border-box; }}
.container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } body {{ font-family: 'Inter', sans-serif; background: #f8fafc; }}
h1 { color: #333; text-align: center; } .header {{ background: white; padding: 1rem 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }}
form { margin-bottom: 20px; } .header-content {{ display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }}
label { display: block; margin-bottom: 5px; } .logo {{ font-size: 1.5rem; font-weight: 700; color: #667eea; }}
input[type="text"] { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } .nav {{ display: flex; gap: 2rem; }}
input[type="submit"] { background: #007bff; color: white; padding: 10px; border: none; border-radius: 4px; cursor: pointer; } .nav a {{ text-decoration: none; color: #64748b; font-weight: 500; }}
.result { background: #e9ecef; padding: 10px; border-radius: 4px; } .nav a.active {{ color: #667eea; }}
.user-menu {{ display: flex; align-items: center; gap: 1rem; }}
.container {{ max-width: 800px; margin: 2rem auto; padding: 0 2rem; }}
.analysis-form {{ background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }}
.form-group {{ margin-bottom: 1.5rem; }}
.form-group label {{ display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }}
.form-group input, .form-group textarea {{ width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }}
.form-group input:focus, .form-group textarea:focus {{ outline: none; border-color: #667eea; }}
.form-group textarea {{ resize: vertical; min-height: 100px; }}
.btn {{ padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }}
.btn:hover {{ background: #5a67d8; }}
.result {{ background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-top: 2rem; }}
.alert {{ padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }}
.alert-error {{ background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }}
.alert-success {{ background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }}
.tokens {{ background: #f0f9ff; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid #667eea; }}
</style> </style>
</head> </head>
<body> <body>
<header class="header">
<div class="header-content">
<div class="logo">Video AI Pro</div>
<nav class="nav">
<a href="/dashboard">Dashboard</a>
<a href="/analyze" class="active">Analyze</a>
<a href="/train">Train</a>
<a href="/history">History</a>
<a href="/settings">Settings</a>
</nav>
<div class="user-menu">
<span>{get_user_tokens(user["id"])} tokens</span>
<a href="/logout" style="color: #dc2626;">Logout</a>
</div>
</div>
</header>
<div class="container"> <div class="container">
<h1>VideoModel AI Web Interface</h1> <div class="tokens">
<nav><a href="/">Analysis</a> | <a href="/train">Training</a> | <a href="/config">Configuration</a></nav> <strong>Available Tokens:</strong> {get_user_tokens(user["id"])} (Analysis costs ~10 tokens)
<h2>Analyze Image/Video</h2> </div>
<div class="analysis-form">
<h2 style="margin-bottom: 1.5rem; color: #1e293b;"><i class="fas fa-search"></i> Analyze Media</h2>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="post"> <form method="post">
<label>Model Path: <input type="text" name="model_path" value="Qwen/Qwen2.5-VL-7B-Instruct"></label> <div class="form-group">
<label>Local Path: <input type="text" name="local_path" placeholder="Path to local file"></label> <label for="model_path">AI Model</label>
<label>Prompt: <textarea name="prompt" rows="3">Describe this image.</textarea></label> <input type="text" id="model_path" name="model_path" value="Qwen/Qwen2.5-VL-7B-Instruct" placeholder="Model path or HuggingFace ID">
<input type="submit" value="Analyze"> </div>
<div class="form-group">
<label for="local_path">Media File Path</label>
<input type="text" id="local_path" name="local_path" placeholder="/path/to/your/media/file.mp4" required>
<small style="color: #6b7280;">Enter the full path to your image or video file</small>
</div>
<div class="form-group">
<label for="prompt">Analysis Prompt</label>
<textarea id="prompt" name="prompt" placeholder="Describe what you want to analyze...">Describe this image or video in detail, including any actions, scenes, or important elements.</textarea>
</div>
<button type="submit" class="btn"><i class="fas fa-play"></i> Start Analysis</button>
</form> </form>
</div>
{% if result %} {% if result %}
<div class="result"> <div class="result">
<h3>Result:</h3> <h3 style="margin-bottom: 1rem; color: #1e293b;"><i class="fas fa-check-circle"></i> Analysis Result</h3>
<p>{{ result }}</p> <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; border-left: 4px solid #10b981;">
<pre style="white-space: pre-wrap; font-family: inherit; margin: 0;">{{ result }}</pre>
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
...@@ -129,6 +528,7 @@ def index(): ...@@ -129,6 +528,7 @@ def index():
return render_template_string(html, result=result) return render_template_string(html, result=result)
@app.route('/train', methods=['GET', 'POST']) @app.route('/train', methods=['GET', 'POST'])
@login_required
def train(): def train():
message = None message = None
if request.method == 'POST': if request.method == 'POST':
...@@ -238,6 +638,218 @@ def config(): ...@@ -238,6 +638,218 @@ def config():
''' '''
return render_template_string(html, current_config=current_config) return render_template_string(html, current_config=current_config)
@app.route('/history')
@login_required
def history():
"""Job history page."""
user = get_current_user_session()
queue_items = get_user_queue_items(user['id'])
html = f'''
<!DOCTYPE html>
<html>
<head>
<title>Job History - Video AI Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
body {{ font-family: 'Inter', sans-serif; background: #f8fafc; }}
.header {{ background: white; padding: 1rem 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }}
.header-content {{ display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }}
.logo {{ font-size: 1.5rem; font-weight: 700; color: #667eea; }}
.nav {{ display: flex; gap: 2rem; }}
.nav a {{ text-decoration: none; color: #64748b; font-weight: 500; }}
.nav a.active {{ color: #667eea; }}
.user-menu {{ display: flex; align-items: center; gap: 1rem; }}
.container {{ max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }}
.history-table {{ background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; }}
.table-header {{ background: #f8fafc; padding: 1rem 2rem; border-bottom: 1px solid #e5e7eb; }}
.table-header h2 {{ margin: 0; color: #1e293b; }}
.job-row {{ display: grid; grid-template-columns: 1fr 2fr 1fr 1fr 1fr; gap: 1rem; padding: 1rem 2rem; border-bottom: 1px solid #f1f5f9; align-items: center; }}
.job-row:last-child {{ border-bottom: none; }}
.job-type {{ font-weight: 600; color: #374151; }}
.job-data {{ color: #6b7280; font-size: 0.9rem; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }}
.job-time {{ color: #6b7280; font-size: 0.9rem; }}
.job-status {{ padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; text-align: center; }}
.status-queued {{ background: #fef3c7; color: #d97706; }}
.status-processing {{ background: #dbeafe; color: #2563eb; }}
.status-completed {{ background: #d1fae5; color: #065f46; }}
.status-failed {{ background: #fee2e2; color: #dc2626; }}
.job-tokens {{ font-weight: 600; color: #667eea; }}
.no-jobs {{ text-align: center; padding: 3rem; color: #6b7280; }}
</style>
</head>
<body>
<header class="header">
<div class="header-content">
<div class="logo">Video AI Pro</div>
<nav class="nav">
<a href="/dashboard">Dashboard</a>
<a href="/analyze">Analyze</a>
<a href="/train">Train</a>
<a href="/history" class="active">History</a>
<a href="/settings">Settings</a>
</nav>
<div class="user-menu">
<span>{get_user_tokens(user["id"])} tokens</span>
<a href="/logout" style="color: #dc2626;">Logout</a>
</div>
</div>
</header>
<div class="container">
<div class="history-table">
<div class="table-header">
<h2><i class="fas fa-history"></i> Job History</h2>
</div>
{''.join([f'''
<div class="job-row">
<div class="job-type">{job["request_type"].title()}</div>
<div class="job-data" title="{job.get("data", {}).get("prompt", job.get("data", {}).get("description", "N/A"))}">
{job.get("data", {}).get("prompt", job.get("data", {}).get("description", "N/A"))[:50]}{"..." if len(str(job.get("data", {}))) > 50 else ""}
</div>
<div class="job-time">{job["created_at"][:19]}</div>
<span class="job-status status-{job['status']}">{job['status'].title()}</span>
<div class="job-tokens">{job.get('used_tokens', 0)} used</div>
</div>
''' for job in queue_items]) if queue_items else '<div class="no-jobs">No jobs found. Start by analyzing some media!</div>'}
</div>
</div>
</body>
</html>
'''
return html
@app.route('/settings')
@login_required
def settings():
"""User settings page."""
user = get_current_user_session()
html = f'''
<!DOCTYPE html>
<html>
<head>
<title>Settings - Video AI Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
body {{ font-family: 'Inter', sans-serif; background: #f8fafc; }}
.header {{ background: white; padding: 1rem 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }}
.header-content {{ display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }}
.logo {{ font-size: 1.5rem; font-weight: 700; color: #667eea; }}
.nav {{ display: flex; gap: 2rem; }}
.nav a {{ text-decoration: none; color: #64748b; font-weight: 500; }}
.nav a.active {{ color: #667eea; }}
.user-menu {{ display: flex; align-items: center; gap: 1rem; }}
.container {{ max-width: 800px; margin: 2rem auto; padding: 0 2rem; }}
.settings-card {{ background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }}
.card-header {{ margin-bottom: 1.5rem; }}
.card-header h3 {{ margin: 0; color: #1e293b; }}
.form-group {{ margin-bottom: 1.5rem; }}
.form-group label {{ display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }}
.form-group input, .form-group select {{ width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }}
.form-group input:focus, .form-group select:focus {{ outline: none; border-color: #667eea; }}
.btn {{ padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }}
.btn:hover {{ background: #5a67d8; }}
.alert {{ padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }}
.alert-error {{ background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }}
.alert-success {{ background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }}
.user-info {{ background: #f0f9ff; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #667eea; margin-bottom: 2rem; }}
</style>
</head>
<body>
<header class="header">
<div class="header-content">
<div class="logo">Video AI Pro</div>
<nav class="nav">
<a href="/dashboard">Dashboard</a>
<a href="/analyze">Analyze</a>
<a href="/train">Train</a>
<a href="/history">History</a>
<a href="/settings" class="active">Settings</a>
</nav>
<div class="user-menu">
<span>{get_user_tokens(user["id"])} tokens</span>
<a href="/logout" style="color: #dc2626;">Logout</a>
</div>
</div>
</header>
<div class="container">
<div class="user-info">
<h3><i class="fas fa-user"></i> Account Information</h3>
<p><strong>Username:</strong> {user["username"]}</p>
<p><strong>Email:</strong> {user.get("email", "Not provided")}</p>
<p><strong>Role:</strong> {user["role"].title()}</p>
<p><strong>Member since:</strong> {user.get("created_at", "Unknown")[:10]}</p>
</div>
<div class="settings-card">
<div class="card-header">
<h3><i class="fas fa-cog"></i> Application Settings</h3>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="post" action="/update_settings">
<div class="form-group">
<label for="default_model">Default AI Model</label>
<input type="text" id="default_model" name="default_model" value="Qwen/Qwen2.5-VL-7B-Instruct" placeholder="Model path or HuggingFace ID">
</div>
<div class="form-group">
<label for="theme">Theme Preference</label>
<select id="theme" name="theme">
<option value="light" selected>Light</option>
<option value="dark">Dark</option>
</select>
</div>
<button type="submit" class="btn"><i class="fas fa-save"></i> Save Settings</button>
</form>
</div>
<div class="settings-card">
<div class="card-header">
<h3><i class="fas fa-key"></i> API Access</h3>
</div>
<p>Generate API tokens to access Video AI Pro programmatically.</p>
<a href="/generate_token" class="btn" style="background: #10b981;"><i class="fas fa-plus"></i> Generate New Token</a>
</div>
</div>
</body>
</html>
'''
return render_template_string(html)
@app.route('/update_settings', methods=['POST'])
@login_required
def update_settings():
"""Update user settings."""
# For now, just flash a success message
# In a real implementation, this would save user preferences
flash('Settings updated successfully!', 'success')
return redirect(url_for('settings'))
@app.route('/generate_token')
@login_required
def generate_token():
"""Generate a new API token."""
user = get_current_user_session()
from .auth import generate_api_token
token = generate_api_token(user['id'])
flash(f'New API token generated: {token[:20]}...', 'success')
return redirect(url_for('settings'))
@app.route('/static/<path:filename>') @app.route('/static/<path:filename>')
def serve_static(filename): def serve_static(filename):
return send_from_directory('static', filename) return send_from_directory('static', filename)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment