Fix syntax errors in web.py

- Resolved f-string and Jinja2 template conflicts by using proper string concatenation - Separated dynamic content from template literals to avoid syntax errors - Ensured all HTML templates render correctly with render_template_string - Maintained all authentication and UI functionality while fixing import issues The web interface now imports and runs without syntax errors.

Fix syntax errors in web.py
- Resolved f-string and Jinja2 template conflicts by using proper string concatenation - Separated dynamic content from template literals to avoid syntax errors - Ensured all HTML templates render correctly with render_template_string - Maintained all authentication and UI functionality while fixing import issues The web interface now imports and runs without syntax errors.
ed15c748 · Stefy Lanza (nextime / spora ) · 12598ec5 · ed15c748
Commit ed15c748 authored Oct 05, 2025 by Stefy Lanza (nextime / spora )
Show whitespace changes
Inline Side-by-side

Showing with 57 additions and 57 deletions

web.py vidai/web.py +57 -57

No files found.
--- a/vidai/web.py
+++ b/vidai/web.py
@@ -425,7 +425,7 @@ def analyze():
            else:
                result = result_data.get('error', 'Error')

-    html = f'''
+    template = '''
    <!DOCTYPE html>
    <html>
    <head>
@@ -433,29 +433,29 @@ def analyze():
        <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; }}
-            .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; }}
+            * { 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; }
+            .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>
    </head>
    <body>
@@ -470,7 +470,7 @@ def analyze():
                    <a href="/settings">Settings</a>
                </nav>
                <div class="user-menu">
-                    <span>{get_user_tokens(user["id"])} tokens</span>
+                    <span>''' + str(get_user_tokens(user["id"])) + ''' tokens</span>
                    <a href="/logout" style="color: #dc2626;">Logout</a>
                </div>
            </div>
@@ -478,7 +478,7 @@ def analyze():

        <div class="container">
            <div class="tokens">
-                <strong>Available Tokens:</strong> {get_user_tokens(user["id"])} (Analysis costs ~10 tokens)
+                <strong>Available Tokens:</strong> ''' + str(get_user_tokens(user["id"])) + ''' (Analysis costs ~10 tokens)
            </div>

            <div class="analysis-form">
@@ -525,7 +525,7 @@ def analyze():
    </body>
    </html>
    '''
-    return render_template_string(html, result=result)
+    return render_template_string(template, result=result)

 @app.route('/train', methods=['GET', 'POST'])
 @login_required
@@ -727,7 +727,7 @@ def settings():
    """User settings page."""
    user = get_current_user_session()

-    html = f'''
+    template = '''
    <!DOCTYPE html>
    <html>
    <head>
@@ -735,29 +735,29 @@ def settings():
        <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; }}
+            * { 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>
@@ -772,7 +772,7 @@ def settings():
                    <a href="/settings" class="active">Settings</a>
                </nav>
                <div class="user-menu">
-                    <span>{get_user_tokens(user["id"])} tokens</span>
+                    <span>''' + str(get_user_tokens(user["id"])) + ''' tokens</span>
                    <a href="/logout" style="color: #dc2626;">Logout</a>
                </div>
            </div>
@@ -781,10 +781,10 @@ def settings():
        <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>
+                <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">
@@ -829,7 +829,7 @@ def settings():
    </body>
    </html>
    '''
-    return render_template_string(html)
+    return render_template_string(template)

 @app.route('/update_settings', methods=['POST'])
 @login_required