Much better styling for page along with discord nudge

app.py

@@ -244,11 +244,11 @@ async def generate_video(input_image, subject, duration, selected_index, progres
                 "dimensions": None,
                 "input_image_url": image_url,
                 "video_length": {"duration": video_duration},
-                "platform": "huggingface"
             },
             "error": None,
             "output_url": None,
-            "batch_id": None
+            "batch_id": None,
+            "platform": "huggingface"
         }
         
         # Remove await - the execute() method returns the response directly
@@ -323,6 +323,90 @@ css = '''
 .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;}
+
+/* Improved Discord styling */
+.discord-banner {
+    background: linear-gradient(135deg, #5865F2 0%, #404EED 100%);
+    color: white;
+    padding: 20px;
+    border-radius: 12px;
+    margin: 15px 0;
+    text-align: center;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+.discord-banner h3 {
+    margin-top: 0;
+    font-size: 1.5em;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.discord-banner a {
+    display: inline-block;
+    background-color: white;
+    color: #5865F2;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 8px 16px;
+    border-radius: 20px;
+    margin-top: 10px;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+.discord-banner a:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+.discord-feature {
+    background-color: #F6F6F6;
+    border-left: 4px solid #5865F2;
+    padding: 12px 15px;
+    margin: 10px 0;
+    border-radius: 0 8px 8px 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+.discord-feature-title {
+    font-weight: bold;
+    color: #5865F2;
+}
+.discord-locked {
+    opacity: 0.7;
+    position: relative;
+    pointer-events: none;
+}
+.discord-locked::after {
+    content: "🔒 Discord members only";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(88,101,242,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);
+}
+.discord-benefits-list {
+    text-align: left;
+    display: inline-block;
+    margin: 10px 0;
+}
+.discord-benefits-list li {
+    margin: 8px 0;
+    position: relative;
+    padding-left: 25px;
+}
+.discord-benefits-list li::before {
+    content: "✨";
+    position: absolute;
+    left: 0;
+    color: #FFD700;
+}
+.locked-option {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
 '''
 
 with gr.Blocks(css=css) as demo:
@@ -330,6 +414,16 @@ with gr.Blocks(css=css) as demo:
     current_generation_id = gr.State(None)
     
     gr.Markdown("# Remade AI - Wan 2.1 I2V effects LoRAs ")
+    
+    # Discord banner at the top
+    discord_banner = gr.HTML(
+        """<div class="discord-banner">
+            <h3>✨ Unlock Premium Features! ✨</h3>
+            <p>Join our Discord community to access longer videos, 100+ LoRAs, audio features, and faster generation times!</p>
+            <a href="https://discord.gg/remade-1" target="_blank">Join Discord Now</a>
+        </div>"""
+    )
+    
     selected_info = gr.HTML("")
     
     with gr.Row():
@@ -344,27 +438,94 @@ with gr.Blocks(css=css) as demo:
                 height="350px",
                 object_fit="contain"
             )
+            
+            # Discord feature callout for LoRAs
+            gr.HTML(
+                """<div class="discord-feature">
+                    <span class="discord-feature-title">✨ Discord Members:</span> Access 100+ additional LoRAs beyond these 3 samples!
+                </div>"""
+            )
+            
             input_image = gr.Image(type="filepath")
             subject = gr.Textbox(label="Describe your subject", placeholder="Cat toy")
-            duration = gr.Radio(["Short (3s)", "Long (5s)"], label="Duration", value="Short (3s)")
-            button = gr.Button("Generate", variant="primary", elem_id="gen_btn")
+            
+            # Modified duration options - only one active option
+            duration = gr.Radio(
+                ["Short (3s)"],
+                label="Duration",
+                value="Short (3s)"
+            )
+            
+            # Add disabled duration option with Discord callout
+            gr.HTML(
+                """<div class="discord-feature">
+                    <span class="discord-feature-title">⏱️ Discord Members:</span> Access longer video durations (up to 10 seconds)!
+                </div>"""
+            )
+            
+            # Add disabled audio button with Discord callout
+            with gr.Row():
+                button = gr.Button("Generate", variant="primary", elem_id="gen_btn")
+                audio_button = gr.Button("Add Audio 🔒", interactive=False)
+            
+            # Discord feature callout for generation speed
+            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,
         outputs=[selected_index, selected_info]
     )
     
-    # Use gr.on for the button click to match the example
-    gr.on(
-        triggers=[button.click],
+    # Add a custom handler to check if inputs are valid
+    def check_inputs(subject, input_image, selected_index):
+        if not selected_index:
+            return gr.Error("You must select a LoRA before proceeding.")
+        if not subject.strip():
+            return gr.Error("Please describe your subject.")
+        if input_image is None:
+            return gr.Error("Please upload an image.")
+        return None
+    
+    # Use gr.on for the button click with validation
+    button.click(
+        fn=check_inputs,
+        inputs=[subject, input_image, selected_index],
+        outputs=None
+    ).success(
         fn=handle_generation,
         inputs=[input_image, subject, duration, selected_index],
         outputs=[output, current_generation_id, progress_bar]
     )
+    
+    # Add a click handler for the disabled audio button
+    audio_button.click(
+        fn=lambda: gr.Info("Join our Discord to unlock audio generation features!"),
+        inputs=None,
+        outputs=None
+    )
 
 if __name__ == "__main__":
     demo.queue()