working

app.py

@@ -23,7 +23,7 @@ WORKFLOW_PATH = SCRIPT_DIR / "wani2v.json"
 loras = [
   {
       #I suggest it to be a gif instead of an mp4!
-      "image": "https://huggingface.co/Remade-AI/Squish/resolve/main/example_videos/tank_squish.mp4",
+      "image": "https://huggingface.co/Remade-AI/Squish/resolve/main/example_gifs/person_squish.gif",
       #This is an id you can send to your backend, obviously you can change it
       "id": "06ce6840-f976-4963-9644-b6cf7f323f90",
       #This is the title that is shown on the front end
@@ -32,13 +32,13 @@ loras = [
       "example_prompt": "In the video, a miniature rodent is presented. The rodent is held in a person's hands. The person then presses on the rodent, causing a sq41sh squish effect. The person keeps pressing down on the rodent, further showing the sq41sh squish effect.",
   },  
   {
-      "image": "https://huggingface.co/Remade-AI/Rotate/resolve/main/example_videos/man_rotate.mp4",
+      "image": "https://huggingface.co/Remade-AI/Rotate/resolve/main/example_videos/chair-rotate.gif",
       "id": "4ac08cfa-841e-4aa9-9022-c3fc80fb6ef4",
       "title": "Rotate",
       "example_prompt": "The video shows an elderly Asian man's head and shoulders with blurred background, performing a r0t4tion 360 degrees rotation.",
     },
     {
-      "image": "https://huggingface.co/Remade-AI/Cakeify/resolve/main/example_videos/timberland_cakeify.mp4",
+      "image": "https://huggingface.co/Remade-AI/Cakeify/resolve/main/example_gifs/timberland_cakeify.gif",
       "id": "b05c1dc7-a71c-4d24-b512-4877a12dea7e",
       "title": "Cakeify",
       "example_prompt": "The video opens on a woman. A knife, held by a hand, is coming into frame and hovering over the woman. The knife then begins cutting into the woman to c4k3 cakeify it. As the knife slices the woman open, the inside of the woman is revealed to be cake with chocolate layers. The knife cuts through and the contents of the woman are revealed."
@@ -49,6 +49,7 @@ loras = [
     
     
     
+    
 ]
 
 # Initialize Supabase client with async support
@@ -319,53 +320,61 @@ css = '''
 .styler{--form-gap-width: 0px !important}
 #progress{height:30px}
 #progress .generating{display:none}
-.progress-container {width: 100%;height: 30px;background-color: #f0f0f0;border-radius: 15px;overflow: hidden;margin-bottom: 20px;position: relative;}
-.progress-bar {height: 100%;background-color: #90EE90;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
-.progress-text {position: absolute;width: 100%;text-align: center;top: 50%;left: 0;transform: translateY(-50%);color: #000;font-weight: bold;}
-.refresh-warning {color: #e74c3c;font-weight: bold;text-align: center;margin-top: 5px;}
+.progress-container {width: 100%;height: 30px;background-color: #2a2a2a;border-radius: 15px;overflow: hidden;margin-bottom: 20px;position: relative;}
+.progress-bar {height: 100%;background-color: #7289DA;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
+.progress-text {position: absolute;width: 100%;text-align: center;top: 50%;left: 0;transform: translateY(-50%);color: #ffffff;font-weight: bold;}
+.refresh-warning {color: #ff7675;font-weight: bold;text-align: center;margin-top: 5px;}
 
-/* Improved Discord styling */
+/* Dark mode Discord styling */
 .discord-banner {
-    background: linear-gradient(135deg, #5865F2 0%, #404EED 100%);
-    color: white;
+    background: linear-gradient(135deg, #7289DA 0%, #5865F2 100%);
+    color: #ffffff;
     padding: 20px;
     border-radius: 12px;
     margin: 15px 0;
     text-align: center;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
 }
 .discord-banner h3 {
     margin-top: 0;
     font-size: 1.5em;
-    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    color: #ffffff;
+}
+.discord-banner p {
+    color: #ffffff;
+    margin-bottom: 15px;
 }
 .discord-banner a {
     display: inline-block;
-    background-color: white;
+    background-color: #ffffff;
     color: #5865F2;
     text-decoration: none;
     font-weight: bold;
-    padding: 8px 16px;
-    border-radius: 20px;
+    padding: 10px 20px;
+    border-radius: 24px;
     margin-top: 10px;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    border: none;
 }
 .discord-banner a:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    transform: translateY(-3px);
+    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
+    background-color: #f2f2f2;
 }
 .discord-feature {
-    background-color: #F6F6F6;
-    border-left: 4px solid #5865F2;
+    background-color: #2a2a2a;
+    border-left: 4px solid #7289DA;
     padding: 12px 15px;
     margin: 10px 0;
     border-radius: 0 8px 8px 0;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    color: #e0e0e0;
 }
 .discord-feature-title {
     font-weight: bold;
-    color: #5865F2;
+    color: #7289DA;
 }
 .discord-locked {
     opacity: 0.7;
@@ -378,24 +387,28 @@ css = '''
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: rgba(88,101,242,0.9);
+    background: rgba(114,137,218,0.9);
     color: white;
     padding: 5px 10px;
     border-radius: 20px;
     white-space: nowrap;
     font-size: 0.9em;
     font-weight: bold;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
 }
 .discord-benefits-list {
     text-align: left;
     display: inline-block;
     margin: 10px 0;
+    color: #ffffff;
 }
 .discord-benefits-list li {
-    margin: 8px 0;
+    margin: 10px 0;
     position: relative;
-    padding-left: 25px;
+    padding-left: 28px;
+    color: #ffffff;
+    font-weight: 500;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
 }
 .discord-benefits-list li::before {
     content: "✨";
@@ -407,15 +420,27 @@ css = '''
     opacity: 0.6;
     cursor: not-allowed;
 }
+
+/* Warning message styling */
+.warning-message {
+    background-color: #2a2a2a;
+    border-left: 4px solid #ff7675;
+    padding: 12px 15px;
+    margin: 10px 0;
+    border-radius: 0 8px 8px 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    color: #e0e0e0;
+    font-weight: bold;
+}
 '''
 
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate", text_size="lg")) as demo:
     selected_index = gr.State(None)
     current_generation_id = gr.State(None)
     
     gr.Markdown("# Remade AI - Wan 2.1 I2V effects LoRAs ")
     
-    # Discord banner at the top
+    # Discord banner at the top with improved contrast
     discord_banner = gr.HTML(
         """<div class="discord-banner">
             <h3>✨ Unlock Premium Features! ✨</h3>
@@ -439,7 +464,7 @@ with gr.Blocks(css=css) as demo:
                 object_fit="contain"
             )
             
-            # Discord feature callout for LoRAs
+            # Discord feature callout for LoRAs with better contrast
             gr.HTML(
                 """<div class="discord-feature">
                     <span class="discord-feature-title">✨ Discord Members:</span> Access 100+ additional LoRAs beyond these 3 samples!
@@ -468,31 +493,26 @@ with gr.Blocks(css=css) as demo:
                 button = gr.Button("Generate", variant="primary", elem_id="gen_btn")
                 audio_button = gr.Button("Add Audio 🔒", interactive=False)
             
-            # Discord feature callout for generation speed
+        with gr.Column(scale=1):
+            # Warning message about not refreshing
+            warning_message = gr.HTML(
+                """<div class="warning-message">
+                    ⚠️ Please DO NOT refresh the page during generation. GPUs may need to warm up and there is a queue. Please be patient. Thank you!
+                </div>""",
+                visible=True
+            )
+            
+            # Discord feature callout for generation speed - moved above progress bar
             gr.HTML(
                 """<div class="discord-feature">
                     <span class="discord-feature-title">⚡ Discord Members:</span> Enjoy priority queue with faster generation times!
                 </div>"""
             )
             
-        with gr.Column(scale=1):
             progress_bar = gr.Markdown(elem_id="progress", visible=False)
             output = gr.Video(interactive=False, label="Output video")
             
-            # Discord feature summary at the bottom
-            gr.HTML(
-                """<div class="discord-banner" style="margin-top: 20px;">
-                    <h3>Join our Discord to unlock:</h3>
-                    <ul class="discord-benefits-list">
-                        <li>Longer video durations (up to 10 seconds)</li>
-                        <li>100+ creative LoRAs to choose from</li>
-                        <li>Audio generation features</li>
-                        <li>Priority queue with faster generation</li>
-                        <li>Community support and inspiration</li>
-                    </ul>
-                    <a href="https://discord.gg/remade" target="_blank">Join Discord Now</a>
-                </div>"""
-            )
+           
     
     gallery.select(
         update_selection,