Refactor code for improved readability and consistency across templates and frontend logic

Co-authored-by: Copilot <copilot@github.com>

frontend/app/main.py

@@ -70,7 +70,8 @@ def login():
     if request.method == "POST":
         email = request.form["email"]
         password = request.form["password"]
-        resp = _api("POST", "/auth/login", json={"email": email, "password": password})
+        resp = _api("POST", "/auth/login",
+                    json={"email": email, "password": password})
         if resp.status_code == 200:
             data = resp.json()
             session["access_token"] = data["access_token"]
@@ -90,7 +91,8 @@ def register():
     if request.method == "POST":
         email = request.form["email"]
         password = request.form["password"]
-        resp = _api("POST", "/auth/register", json={"email": email, "password": password})
+        resp = _api("POST", "/auth/register",
+                    json={"email": email, "password": password})
         if resp.status_code == 201:
             flash("Account created. Please log in.", "success")
             return redirect(url_for("login"))
@@ -207,7 +209,8 @@ def admin():
 @admin_required
 def admin_set_role(user_id: str):
     role = request.form.get("role", "user")
-    _api("PUT", f"/users/{user_id}/role", token=session["access_token"], json={"role": role})
+    _api("PUT", f"/users/{user_id}/role",
+         token=session["access_token"], json={"role": role})
     flash(f"Role updated to '{role}'.", "success")
     return redirect(url_for("admin"))
 
@@ -238,7 +241,8 @@ def profile():
             resp = _api("PUT", "/users/me", token=token, json=payload)
             if resp.status_code == 200:
                 updated = resp.json()
-                session["user_email"] = updated.get("email", session.get("user_email", ""))
+                session["user_email"] = updated.get(
+                    "email", session.get("user_email", ""))
                 flash("Profile updated.", "success")
             else:
                 flash(resp.json().get("detail", "Update failed."), "error")
@@ -246,4 +250,3 @@ def profile():
     resp = _api("GET", "/users/me", token=token)
     user = resp.json() if resp.status_code == 200 else {}
     return render_template("profile.html", user=user)
-

frontend/app/static/app.js

@@ -1,36 +1,40 @@
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
   // ── Loading overlay ────────────────────────────────────
-  const overlay = document.getElementById('loading-overlay');
+  const overlay = document.getElementById("loading-overlay");
 
-  document.querySelectorAll('form').forEach((form) => {
-    form.addEventListener('submit', () => {
-      if (overlay) overlay.classList.add('active');
+  document.querySelectorAll("form").forEach((form) => {
+    form.addEventListener("submit", () => {
+      if (overlay) overlay.classList.add("active");
     });
   });
 
   // ── Hamburger menu ─────────────────────────────────────
-  const hamburger = document.querySelector('.hamburger');
-  const navLinks = document.querySelector('.nav-links');
+  const hamburger = document.querySelector(".hamburger");
+  const navLinks = document.querySelector(".nav-links");
 
   if (hamburger && navLinks) {
-    hamburger.addEventListener('click', () => {
-      navLinks.classList.toggle('open');
+    hamburger.addEventListener("click", () => {
+      navLinks.classList.toggle("open");
     });
   }
 
   // ── Generate dropdown tabs ─────────────────────────────
-  document.querySelectorAll('.tab-btn').forEach((btn) => {
-    btn.addEventListener('click', () => {
+  document.querySelectorAll(".tab-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
       const target = btn.dataset.tab;
-      const container = btn.closest('.tabs-container');
+      const container = btn.closest(".tabs-container");
       if (!container) return;
 
-      container.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'));
-      container.querySelectorAll('.tab-panel').forEach((p) => p.classList.remove('active'));
+      container
+        .querySelectorAll(".tab-btn")
+        .forEach((b) => b.classList.remove("active"));
+      container
+        .querySelectorAll(".tab-panel")
+        .forEach((p) => p.classList.remove("active"));
 
-      btn.classList.add('active');
+      btn.classList.add("active");
       const panel = container.querySelector(`#tab-${target}`);
-      if (panel) panel.classList.add('active');
+      if (panel) panel.classList.add("active");
     });
   });
 });

frontend/app/templates/admin.html

@@ -1,5 +1,4 @@
-{% extends "base.html" %}
-{% block title %}Admin — AI Allucanget{% endblock %}
+{% extends "base.html" %} {% block title %}Admin — AI Allucanget{% endblock %}
 {% block content %}
 <div class="card">
   <h1>Admin Dashboard</h1>
@@ -41,25 +40,38 @@
           <td>
             <div class="table-actions">
               <!-- Role toggle -->
-              <form method="post" action="{{ url_for('admin_set_role', user_id=u.id) }}">
-                <input type="hidden" name="role"
-                       value="{{ 'user' if u.role == 'admin' else 'admin' }}">
+              <form
+                method="post"
+                action="{{ url_for('admin_set_role', user_id=u.id) }}"
+              >
+                <input
+                  type="hidden"
+                  name="role"
+                  value="{{ 'user' if u.role == 'admin' else 'admin' }}"
+                />
                 <button type="submit" class="btn btn-sm">
                   Make {{ 'user' if u.role == 'admin' else 'admin' }}
                 </button>
               </form>
               <!-- Delete -->
               {% if u.id != session.get('user_id') %}
-              <form method="post" action="{{ url_for('admin_delete_user', user_id=u.id) }}"
-                    onsubmit="return confirm('Delete {{ u.email }}?')">
-                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
+              <form
+                method="post"
+                action="{{ url_for('admin_delete_user', user_id=u.id) }}"
+                onsubmit="return confirm('Delete {{ u.email }}?')"
+              >
+                <button type="submit" class="btn btn-sm btn-danger">
+                  Delete
+                </button>
               </form>
               {% endif %}
             </div>
           </td>
         </tr>
         {% else %}
-        <tr><td colspan="3" class="text-muted">No users found.</td></tr>
+        <tr>
+          <td colspan="3" class="text-muted">No users found.</td>
+        </tr>
         {% endfor %}
       </tbody>
     </table>

frontend/app/templates/generate_text.html

@@ -1,35 +1,44 @@
-{% extends "base.html" %}
-{% block title %}Text Generation — AI Allucanget{% endblock %}
-{% block content %}
+{% extends "base.html" %} {% block title %}Text Generation — AI Allucanget{%
+endblock %} {% block content %}
 <div class="card">
   <h1>Text Generation</h1>
   <form method="post">
     <label for="model">Model</label>
-    <input id="model" name="model" type="text" required
-           placeholder="e.g. openai/gpt-4o"
-           value="{{ request.form.get('model', '') }}">
+    <input
+      id="model"
+      name="model"
+      type="text"
+      required
+      placeholder="e.g. openai/gpt-4o"
+      value="{{ request.form.get('model', '') }}"
+    />
 
     <label for="prompt">Prompt</label>
-    <textarea id="prompt" name="prompt" rows="5" required
-              placeholder="Describe what you want…">{{ request.form.get('prompt', '') }}</textarea>
+    <textarea
+      id="prompt"
+      name="prompt"
+      rows="5"
+      required
+      placeholder="Describe what you want…"
+    >
+{{ request.form.get('prompt', '') }}</textarea
+    >
 
     <button type="submit">Generate text</button>
   </form>
 
   {% if error %}
-    <div class="alert alert-error mt-2">{{ error }}</div>
-  {% endif %}
-
-  {% if result %}
-    <div class="result">
-      <h2>Result</h2>
-      <pre>{{ result.content }}</pre>
-      {% if result.usage %}
-        <p class="text-muted mt-1" style="font-size:0.8rem;">
-          Tokens: {{ result.usage.get('total_tokens', '—') }}
-        </p>
-      {% endif %}
-    </div>
+  <div class="alert alert-error mt-2">{{ error }}</div>
+  {% endif %} {% if result %}
+  <div class="result">
+    <h2>Result</h2>
+    <pre>{{ result.content }}</pre>
+    {% if result.usage %}
+    <p class="text-muted mt-1" style="font-size: 0.8rem">
+      Tokens: {{ result.usage.get('total_tokens', '—') }}
+    </p>
+    {% endif %}
+  </div>
   {% endif %}
 </div>
 {% endblock %}

frontend/app/templates/generate_video.html

@@ -1,28 +1,43 @@
-{% extends "base.html" %}
-{% block title %}Video Generation — AI Allucanget{% endblock %}
-{% block content %}
+{% extends "base.html" %} {% block title %}Video Generation — AI Allucanget{%
+endblock %} {% block content %}
 <div class="card">
   <h1>Video Generation</h1>
 
   <div class="tabs-container">
     <div class="tabs">
-      <button class="tab-btn active" data-tab="text-to-video" type="button">Text to video</button>
-      <button class="tab-btn" data-tab="image-to-video" type="button">Image to video</button>
+      <button class="tab-btn active" data-tab="text-to-video" type="button">
+        Text to video
+      </button>
+      <button class="tab-btn" data-tab="image-to-video" type="button">
+        Image to video
+      </button>
     </div>
 
     <!-- Text-to-video -->
     <div class="tab-panel active" id="tab-text-to-video">
       <form method="post">
-        <input type="hidden" name="mode" value="text">
+        <input type="hidden" name="mode" value="text" />
 
         <label for="model-t">Model</label>
-        <input id="model-t" name="model" type="text" required
-               placeholder="e.g. openai/sora-2-pro"
-               value="{{ request.form.get('model', '') if request.form.get('mode','text')=='text' else '' }}">
+        <input
+          id="model-t"
+          name="model"
+          type="text"
+          required
+          placeholder="e.g. openai/sora-2-pro"
+          value="{{ request.form.get('model', '') if request.form.get('mode','text')=='text' else '' }}"
+        />
 
         <label for="prompt-t">Prompt</label>
-        <textarea id="prompt-t" name="prompt" rows="4" required
-                  placeholder="Describe the video you want…">{{ request.form.get('prompt', '') if request.form.get('mode','text')=='text' else '' }}</textarea>
+        <textarea
+          id="prompt-t"
+          name="prompt"
+          rows="4"
+          required
+          placeholder="Describe the video you want…"
+        >
+{{ request.form.get('prompt', '') if request.form.get('mode','text')=='text' else '' }}</textarea
+        >
 
         <label for="aspect-t">Aspect ratio</label>
         <select id="aspect-t" name="aspect_ratio">
@@ -38,21 +53,38 @@
     <!-- Image-to-video -->
     <div class="tab-panel" id="tab-image-to-video">
       <form method="post">
-        <input type="hidden" name="mode" value="image">
+        <input type="hidden" name="mode" value="image" />
 
         <label for="model-i">Model</label>
-        <input id="model-i" name="model" type="text" required
-               placeholder="e.g. openai/sora-2-pro"
-               value="{{ request.form.get('model', '') if request.form.get('mode')=='image' else '' }}">
+        <input
+          id="model-i"
+          name="model"
+          type="text"
+          required
+          placeholder="e.g. openai/sora-2-pro"
+          value="{{ request.form.get('model', '') if request.form.get('mode')=='image' else '' }}"
+        />
 
         <label for="image_url">Source image URL</label>
-        <input id="image_url" name="image_url" type="url" required
-               placeholder="https://example.com/photo.jpg"
-               value="{{ request.form.get('image_url', '') }}">
+        <input
+          id="image_url"
+          name="image_url"
+          type="url"
+          required
+          placeholder="https://example.com/photo.jpg"
+          value="{{ request.form.get('image_url', '') }}"
+        />
 
         <label for="prompt-i">Motion prompt</label>
-        <textarea id="prompt-i" name="prompt" rows="3" required
-                  placeholder="Describe the motion or transformation…">{{ request.form.get('prompt', '') if request.form.get('mode')=='image' else '' }}</textarea>
+        <textarea
+          id="prompt-i"
+          name="prompt"
+          rows="3"
+          required
+          placeholder="Describe the motion or transformation…"
+        >
+{{ request.form.get('prompt', '') if request.form.get('mode')=='image' else '' }}</textarea
+        >
 
         <label for="aspect-i">Aspect ratio</label>
         <select id="aspect-i" name="aspect_ratio">
@@ -67,21 +99,23 @@
   </div>
 
   {% if error %}
-    <div class="alert alert-error mt-2">{{ error }}</div>
-  {% endif %}
-
-  {% if result %}
-    <div class="result">
-      <h2>Video job</h2>
-      <p>Status: <strong>{{ result.status }}</strong></p>
-      {% if result.get('video_url') %}
-        <video src="{{ result.video_url }}" controls class="generated-video"></video>
-      {% else %}
-        <p class="text-muted mt-1" style="font-size:0.875rem;">
-          Video is being processed. Check back later.
-        </p>
-      {% endif %}
-    </div>
+  <div class="alert alert-error mt-2">{{ error }}</div>
+  {% endif %} {% if result %}
+  <div class="result">
+    <h2>Video job</h2>
+    <p>Status: <strong>{{ result.status }}</strong></p>
+    {% if result.get('video_url') %}
+    <video
+      src="{{ result.video_url }}"
+      controls
+      class="generated-video"
+    ></video>
+    {% else %}
+    <p class="text-muted mt-1" style="font-size: 0.875rem">
+      Video is being processed. Check back later.
+    </p>
+    {% endif %}
+  </div>
   {% endif %}
 </div>
 {% endblock %}