Update app.py

app.py

@@ -74,12 +74,13 @@ css = """
     font-size: 36px;
     font-weight: bold;
     margin-bottom: 10px;
+    color: #333333;
 }
 
 #header-subtitle {
     font-size: 18px;
     margin-bottom: 20px;
-    color: #6c757d;
+    color: #555555;
 }
 
 #main-container {
@@ -87,22 +88,37 @@ css = """
     margin: 0 auto;
     padding: 20px;
     border-radius: 12px;
-    background-color: #f9f9f9;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #ffffff, #f0f0f0);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 button.primary-button {
-    background-color: #007bff;
+    background: linear-gradient(90deg, #007bff, #0056b3);
     color: white;
     border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
+    padding: 12px 24px;
+    border-radius: 8px;
     font-size: 16px;
     cursor: pointer;
+    font-weight: bold;
+    transition: transform 0.2s, box-shadow 0.2s;
 }
 
 button.primary-button:hover {
-    background-color: #0056b3;
+    transform: translateY(-3px);
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+}
+
+button.primary-button:active {
+    transform: translateY(0);
+    box-shadow: none;
+}
+
+#footer-container {
+    margin-top: 30px;
+    text-align: center;
+    color: #666666;
+    font-size: 14px;
 }
 """
 
@@ -113,7 +129,7 @@ with gr.Blocks(css=css) as demo:
         <div id="header-subtitle">Transform your images into descriptive captions and immersive soundscapes.</div>
         """)
 
-    with gr.Group(elem_id="main-container"):
+    with gr.Box(elem_id="main-container"):
         gr.Markdown("""
         ### How It Works
         1. **Upload an Image**: Select an image to analyze.
@@ -127,14 +143,11 @@ with gr.Blocks(css=css) as demo:
         generate_sound_button = gr.Button("Generate Sound", elem_classes="primary-button")
         audio_output = gr.Audio(label="Generated Sound Effect", interactive=False)
 
-    with gr.Group():
+    with gr.Box(elem_id="footer-container"):
         gr.Markdown("""
         ## About This App
         This application uses advanced machine learning models to transform images into text captions and generate matching sound effects. It's a unique blend of visual and auditory creativity, powered by state-of-the-art AI technology.
 
-        ### Powered By
-        - [Hugging Face](https://huggingface.co)
-        - [Diffusion Models](https://huggingface.co/models)
 
         For inquiries, contact us at [[email protected]](mailto:[email protected]).
         """)