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

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

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 %}