From b400fd9ed9db715ee336618d0f9d39c918c7d14f Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 20 Mar 2026 21:22:17 -0700
Subject: [PATCH] Fix: lucide loading + cleaner header + model size UI

---
 index.html | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)
diff --git a/index.html b/index.html
index 30f3302..2dd88ca 100644
--- a/index.html
+++ b/index.html
@@ -26,21 +26,20 @@
       };
     </script>
 
-    <!-- Alpine -->
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-
-    <!-- Lucide -->
-    <script src="https://unpkg.com/lucide@latest"></script>
+    <!-- Lucide (UMD, reliable global window.lucide) -->
+    <script src="https://cdn.jsdelivr.net/npm/lucide@0.559.0/dist/umd/lucide.min.js"></script>
 
     <!-- gif.js + worker -->
     <script src="https://cdn.jsdelivr.net/npm/gif.js.optimized/dist/gif.js"></script>
 
+    <!-- Alpine -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
     <link rel="stylesheet" href="./assets/css/styles.css" />
   </head>
 
   <body class="h-full bg-ui-bg text-ui-text">
     <div x-data="vibeGifApp()" x-init="init()" class="min-h-full">
-      <!-- Top bar -->
       <header class="sticky top-0 z-20 border-b border-ui-border bg-ui-panel/95 backdrop-blur">
         <div class="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between">
           <div class="flex items-center gap-3">
@@ -56,15 +55,10 @@
               <p class="text-xs text-ui-sub">AI Generated Gifs (BYOK OpenRouter)</p>
             </div>
           </div>
-
-          <div class="text-xs text-ui-sub">
-            Stack: Tailwind · Alpine · Lucide
-          </div>
         </div>
       </header>
 
       <main class="mx-auto max-w-6xl px-4 py-6 grid gap-6 lg:grid-cols-3">
-        <!-- Controls -->
         <section class="lg:col-span-1 rounded-2xl border border-ui-border bg-ui-panel p-4 space-y-4">
           <h2 class="font-semibold">Generate</h2>
 
@@ -102,7 +96,9 @@
               <label class="text-sm text-ui-sub">Image size</label>
               <select x-model="form.imageSize" class="w-full rounded-xl border border-ui-border bg-white px-3 py-2">
                 <option value="1K">1K</option>
-                <option value="0.5K" x-show="form.model === 'google/gemini-3.1-flash-image-preview'">0.5K</option>
+                <template x-if="form.model === 'google/gemini-3.1-flash-image-preview'">
+                  <option value="0.5K">0.5K</option>
+                </template>
               </select>
             </div>
             <div class="space-y-1">
@@ -136,7 +132,6 @@
           </div>
         </section>
 
-        <!-- Output -->
         <section class="lg:col-span-2 rounded-2xl border border-ui-border bg-ui-panel p-4 space-y-4">
           <h2 class="font-semibold">Output</h2>
 
@@ -164,7 +159,6 @@
         </section>
       </main>
 
-      <!-- Settings Modal -->
       <div x-show="settingsOpen" x-cloak class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
         <div @click.outside="settingsOpen=false" class="w-full max-w-md rounded-2xl border border-ui-border bg-white p-4 space-y-3">
           <div class="flex items-center justify-between">
