Update app.py

app.py

@@ -10,11 +10,6 @@ from huggingface_hub import hf_hub_download
 from safetensors.torch import load_file
 from PIL import Image
 
-MORE = """ ## TRY Other Models
-        ### JARVIS: Your VOICE Assistant -> https://huggingface.co/spaces/KingNish/JARVIS
-        ### Instant Image: 4k images in 5 Second -> https://huggingface.co/spaces/KingNish/Instant-Image
-        """
-
 # Constants
 bases = {
     "Cartoon": "frankjoshua/toonyou_beta6",
@@ -76,32 +71,31 @@ def generate_image(prompt, base="Realistic", motion="", step=8, progress=gr.Prog
     export_to_video(output.frames[0], path, fps=10)
     return path
 
-
 # Gradio Interface
-with gr.Blocks(css="style.css") as demo:
-    gr.HTML(
-        "<h1><center>Instant⚡Video</center></h1>" +
-        "<p><center><span style='color: red;'>You may change the steps from 4 to 8, if you didn't get satisfied results.</center></p>" +
-        "<p><center><strong>First Video Generating takes time then Videos generate faster.</p>" +
-        "<p><center>To get best results Make Sure to Write prompts in style as Given in Examples/p>" +
-        "<p><a href='https://huggingface.co/spaces/KingNish/Instant-Video/discussions/1' >Must Share you Best Results with Community - Click HERE<a></p>"
-    )
+css = """
+    body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f9; color: #333;}
+    h1 {color: #333; text-align: center; margin-bottom: 20px;}
+    .gradio-container {max-width: 800px; margin: auto; padding: 20px; background: #fff; box-shadow: 0px 0px 20px rgba(0,0,0,0.1); border-radius: 10px;}
+    .gr-input {margin-bottom: 15px;}
+    .gr-button {width: 100%; background-color: #4CAF50; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s;}
+    .gr-button:hover {background-color: #45a049;}
+    .gr-video {margin-top: 20px;}
+    .gr-examples {margin-top: 30px;}
+    .gr-examples .gr-example {display: inline-block; width: 100%; text-align: center; padding: 10px; background: #eaeaea; border-radius: 5px; margin-bottom: 10px;}
+"""
+
+with gr.Blocks(css=css) as demo:
+    gr.HTML("<h1>Instant⚡ Text to Video</h1>")
     with gr.Group():
         with gr.Row():
-            prompt = gr.Textbox(
-                label='Prompt'
-            )
+            prompt = gr.Textbox(label='Prompt', elem_id="gr-input", placeholder="Enter text to generate video...")
         with gr.Row():
             select_base = gr.Dropdown(
                 label='Base model',
-                choices=[
-                    "Cartoon", 
-                    "Realistic",
-                    "3d",
-                    "Anime",
-                ],
+                choices=["Cartoon", "Realistic", "3d", "Anime"],
                 value=base_loaded,
-                interactive=True
+                interactive=True,
+                elem_id="gr-input"
             )
             select_motion = gr.Dropdown(
                 label='Motion',
@@ -117,58 +111,38 @@ with gr.Blocks(css="style.css") as demo:
                     ("Roll right", "guoyww/animatediff-motion-lora-rolling-clockwise"),
                 ],
                 value="guoyww/animatediff-motion-lora-zoom-in",
-                interactive=True
+                interactive=True,
+                elem_id="gr-input"
             )
             select_step = gr.Dropdown(
                 label='Inference steps',
-                choices=[
-                    ('1-Step', 1), 
-                    ('2-Step', 2),
-                    ('4-Step', 4),
-                    ('8-Step', 8),
-                ],
+                choices=[('1-Step', 1), ('2-Step', 2), ('4-Step', 4), ('8-Step', 8)],
                 value=4,
-                interactive=True
-            )
-            submit = gr.Button(
-                scale=1,
-                variant='primary'
+                interactive=True,
+                elem_id="gr-input"
             )
-    video = gr.Video(
-        label='AnimateDiff-Lightning',
-        autoplay=True,
-        height=512,
-        width=512,
-        elem_id="video_output"
-    )
+        submit = gr.Button("Generate Video", variant='primary', elem_id="gr-button")
+    video = gr.Video(label='AnimateDiff-Lightning', autoplay=True, height=512, width=512, elem_id="gr-video")
 
-    prompt.submit(
-        fn=generate_image,
-        inputs=[prompt, select_base, select_motion, select_step],
-        outputs=video,
-    )
-    submit.click(
-        fn=generate_image,
-        inputs=[prompt, select_base, select_motion, select_step],
-        outputs=video,
-        api_name = "instant_video"
-    )
+    prompt.submit(fn=generate_image, inputs=[prompt, select_base, select_motion, select_step], outputs=video)
+    submit.click(fn=generate_image, inputs=[prompt, select_base, select_motion, select_step], outputs=video, api_name="instant_video")
 
     gr.Examples(
         examples=[
-        ["Focus: Eiffel Tower (Animate: Clouds moving)"], #Atmosphere Movement Example
-        ["Focus: Trees In forest (Animate: Lion running)"], #Object Movement Example
-        ["Focus: Astronaut in Space"], #Normal
-        ["Focus: Group of Birds in sky (Animate:  Birds Moving) (Shot From distance)"], #Camera distance
-        ["Focus:  Statue of liberty (Shot from Drone) (Animate: Drone coming toward statue)"], #Camera Movement
-        ["Focus: Panda in Forest (Animate: Drinking Tea)"], #Doing Something
-        ["Focus: Kids Playing (Season: Winter)"], #Atmosphere or Season
-        {"Focus: Cars in Street (Season: Rain, Daytime) (Shot from Distance) (Movement: Cars running)"} #Mixture
-    ], 
+            ["Focus: Eiffel Tower (Animate: Clouds moving)"],
+            ["Focus: Trees In forest (Animate: Lion running)"],
+            ["Focus: Astronaut in Space"],
+            ["Focus: Group of Birds in sky (Animate:  Birds Moving) (Shot From distance)"],
+            ["Focus:  Statue of liberty (Shot from Drone) (Animate: Drone coming toward statue)"],
+            ["Focus: Panda in Forest (Animate: Drinking Tea)"],
+            ["Focus: Kids Playing (Season: Winter)"],
+            ["Focus: Cars in Street (Season: Rain, Daytime) (Shot from Distance) (Movement: Cars running)"]
+        ],
         fn=generate_image,
         inputs=[prompt],
         outputs=video,
         cache_examples=True,
-)
+        elem_id="gr-examples"
+    )
 
-demo.queue().launch()
+demo.queue().launch()