Update app.py

app.py

@@ -592,86 +592,115 @@ def process_video(video_file):
 
 # Custom CSS styling for the interface
 css = """
-#title-container {
+body {
     font-family: 'Arial', sans-serif;
+    background-color: #f5f5f5;
     color: #4a4a4a;
+}
+#title-container {
+    font-family: 'Arial', sans-serif;
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 }
 #title-container h1 {
-    font-size: 2.5em;
+    font-size: 3em;
     font-weight: bold;
-    color: #ff9900;
+    color: #ff6f61;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 }
 #title-container h2 {
-    font-size: 1.2em;
+    font-size: 1.5em;
     color: #6c757d;
+    margin-top: 10px;
+}
+.gr-tab {
+    background-color: #ffffff;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
 }
 #intro-text {
-    font-size: 1em;
+    font-size: 1.1em;
     color: #6c757d;
-    margin: 50px;
     text-align: center;
     font-style: italic;
+    margin: 20px 0 40px;
 }
-#prompt-output {
-    font-family: 'Courier New', monospace;
-    color: #5a5a5a;
-    font-size: 1.1em;
-    padding: 10px;
-    background-color: #f9f9f9;
-    border: 1px solid #ddd;
+button {
+    background-color: #ff6f61;
+    color: white;
+    font-size: 1em;
+    font-weight: bold;
+    padding: 10px 20px;
+    border: none;
     border-radius: 5px;
-    margin-top: 10px;
+    cursor: pointer;
+}
+button:hover {
+    background-color: #e55b4d;
+}
+.gr-row {
+    margin-top: 20px;
 }
 """
 
 # Title and description
 title_html = """
 <div id="title-container">
-    <h1>Spirit Animal Generator</h1>
-    <h2>Create your unique spirit animal with AI-assisted image generation.</h2>
+    <h1>🦋 Spirit Animal Generator</h1>
+    <h2>Discover and visualize your unique spirit animal through AI!</h2>
 </div>
 """
 
 description_text = """
-### Project Overview
-Welcome to the Spirit Animal Generator! This tool leverages advanced AI technologies to create unique visualizations of spirit animals from both videos and images.
-#### Key Features:
-1. **Video Transformation**: Upload a driving video to generate a creative spirit animal animation.
-2. **Image Creation**: Upload an image and customize the spirit animal type and background options.
-3. **AI-Powered Prompting**: OpenAI's GPT generates descriptive prompts for each input.
-4. **High-Quality Outputs**: Generated using Stable Diffusion and ControlNet for stunning visuals.
----
-### How It Works:
-1. **Upload Your Media**:
-   - Videos: Ensure the file is in MP4 format.
-   - Images: Use clear, high-resolution photos for better results.
+### 🌟 Welcome to the Spirit Animal Generator!
+This tool helps you transform videos and images into imaginative spirit animal creations using AI-powered technologies.
+
+#### 🛠 Key Features:
+1. **Video Transformation**: Convert driving videos into animated spirit animal visuals.
+2. **Image Customization**: Generate artistic images of your spirit animal with customization options.
+3. **AI-Powered Descriptions**: Descriptive prompts generated by OpenAI's GPT.
+4. **High-Quality Outputs**: Stunning visuals powered by Stable Diffusion and ControlNet.
+
+#### 🚀 How to Use:
+1. **Upload Media**:
+   - Videos: MP4 format for animations.
+   - Images: Clear, high-resolution photos for better results.
 2. **Customize Options**:
-   - For images, select the type of animal and background settings.
-3. **View Your Results**:
-   - Videos will be transformed into animations.
-   - Images will produce customized visual art along with a generated prompt.
-Discover your spirit animal and let your imagination run wild!
+   - Choose animal type and background preferences.
+3. **Enjoy the Results**:
+   - Videos: Transformed animations.
+   - Images: Customized artwork with descriptive prompts.
+
+✨ Let your imagination soar and find your spirit animal today! ✨
 ---
 """
 
-with gr.Blocks() as demo:
+with gr.Blocks(css=css) as demo:
     gr.HTML(title_html)
-    gr.Markdown(description_text)
+    gr.Markdown(description_text, elem_id="intro-text")
 
     with gr.Tabs():
-        with gr.Tab("Generate Spirit Animal Image"):
-            gr.Markdown("Upload an image to generate a spirit animal.")
+        with gr.Tab("🎨 Generate Spirit Animal Image"):
+            gr.Markdown("Upload an image to generate a spirit animal representation.")
             with gr.Row():
                 with gr.Column(scale=1):
-                    image_input = gr.Image(type="filepath", label="Upload an image")
-                    animal_type = gr.Radio(choices=["Single Animal", "Multiple Animals"], label="Animal Type", value="Single Animal")
-                    background_option = gr.Radio(choices=["Preserve Background", "Don't Preserve Background"], label="Background Option", value="Preserve Background")
-                    generate_image_button = gr.Button("Generate Image")
+                    image_input = gr.Image(type="filepath", label="📷 Upload an Image")
+                    animal_type = gr.Radio(
+                        choices=["Single Animal", "Multiple Animals"],
+                        label="🐾 Animal Type",
+                        value="Single Animal"
+                    )
+                    background_option = gr.Radio(
+                        choices=["Preserve Background", "Don't Preserve Background"],
+                        label="🌄 Background Option",
+                        value="Preserve Background"
+                    )
+                    generate_image_button = gr.Button("🖌 Generate Image")
                 with gr.Column(scale=1):
-                    generated_prompt = gr.Textbox(label="Generated Prompt")
-                    generated_gallery = gr.Gallery(label="Generated Images")
+                    generated_prompt = gr.Textbox(label="✏️ Generated Prompt")
+                    generated_gallery = gr.Gallery(label="🖼 Generated Images")
 
             generate_image_button.click(
                 fn=generate_spirit_animal,
@@ -679,14 +708,14 @@ with gr.Blocks() as demo:
                 outputs=[generated_prompt, generated_gallery],
             )
 
-        with gr.Tab("Generate Spirit Animal Video"):
-            gr.Markdown("Upload a driving video to generate a spirit animal video.")
+        with gr.Tab("🎥 Generate Spirit Animal Video"):
+            gr.Markdown("Upload a driving video to generate a spirit animal animation.")
             with gr.Row():
                 with gr.Column(scale=1):
-                    video_input = gr.Video(label="Upload a driving video (MP4 format)")
-                    generate_video_button = gr.Button("Generate Video")
+                    video_input = gr.Video(label="🎥 Upload a Driving Video (MP4)")
+                    generate_video_button = gr.Button("🚀 Generate Video")
                 with gr.Column(scale=1):
-                    video_output = gr.Video(label="Generated Spirit Animal Video")
+                    video_output = gr.Video(label="🎞 Generated Spirit Animal Video")
 
             generate_video_button.click(
                 fn=process_video,
@@ -694,4 +723,4 @@ with gr.Blocks() as demo:
                 outputs=video_output,
             )
 
-demo.launch()
+demo.launch()