Update app.py

app.py

@@ -65,57 +65,79 @@ def get_audioldm_from_caption(caption):
         return None
 
 css = """
-#col-container{
+#header-container {
+    text-align: center;
+    margin: 20px 0;
+}
+
+#header-title {
+    font-size: 36px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+#header-subtitle {
+    font-size: 18px;
+    margin-bottom: 20px;
+    color: #6c757d;
+}
+
+#main-container {
+    max-width: 900px;
     margin: 0 auto;
-    max-width: 800px;
-    }
+    padding: 20px;
+    border-radius: 12px;
+    background-color: #f9f9f9;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+button.primary-button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button.primary-button:hover {
+    background-color: #0056b3;
+}
 """
 
 with gr.Blocks(css=css) as demo:
-    with gr.Column(elem_id="col-container"):
+    with gr.Column(elem_id="header-container"):
         gr.HTML("""
-    <h1 style="text-align: center;">🎶 Generate Sound Effects from Image</h1>
-    <p style="text-align: center;">
-        ⚡ Powered by <a href="https://bilsimaging.com" target="_blank">Bilsimaging</a>
-    </p>
+        <div id="header-title">🎶 Image-to-Sound Generator</div>
+        <div id="header-subtitle">Transform your images into descriptive captions and immersive soundscapes.</div>
         """)
 
-    gr.Markdown("""
-    Welcome to this unique sound effect generator! This tool allows you to upload an image and generate a 
-    descriptive caption and a corresponding sound effect, all using free, open-source models on Hugging Face.
-    
-    **💡 How it works:**
-    1. **Upload an image**: Choose an image that you'd like to analyze.
-    2. **Generate Description**: Click on 'Generate Description' to get a textual description of your uploaded image.
-    3. **Generate Sound Effect**: Based on the image description, click on 'Generate Sound Effect' to create a 
-       sound effect that matches the image context.
-    
-    Enjoy the journey from visual to auditory sensation with just a few clicks!
-    """)
-
-    image_upload = gr.File(label="Upload Image", type="binary")
-    generate_description_button = gr.Button("Generate Description")
-    caption_display = gr.Textbox(label="Image Description", interactive=False)
-    generate_sound_button = gr.Button("Generate Sound Effect")
-    audio_output = gr.Audio(label="Generated Sound Effect")
-
-    gr.Markdown("""
-    ## 👥 How You Can Contribute
-    We welcome contributions and suggestions for improvements. Your feedback is invaluable 
-    to the continuous enhancement of this application. 
-    
-    For support, questions, or to contribute, please contact us at 
-    [[email protected]](mailto:[email protected]).
-    
-    Support our work and get involved by donating through 
-    [Ko-fi](https://ko-fi.com/bilsimaging). - Bilel Aroua
-    """)
-
-    gr.Markdown("""
-    ## 📢 Stay Connected
-    This app is a testament to the creative possibilities that emerge when technology meets art. 
-    Enjoy exploring the auditory landscape of your images!
-    """)
+    with gr.Box(elem_id="main-container"):
+        gr.Markdown("""
+        ### How It Works
+        1. **Upload an Image**: Select an image to analyze.
+        2. **Generate Description**: Get a detailed caption describing your image.
+        3. **Generate Sound**: Create an audio representation based on the caption.
+        """)
+
+        image_upload = gr.File(label="Upload Image", type="binary")
+        generate_description_button = gr.Button("Generate Description", elem_classes="primary-button")
+        caption_display = gr.Textbox(label="Generated Caption", interactive=False, placeholder="Your image caption will appear here.")
+        generate_sound_button = gr.Button("Generate Sound", elem_classes="primary-button")
+        audio_output = gr.Audio(label="Generated Sound Effect", interactive=False)
+
+    with gr.Box():
+        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]).
+        """)
 
     def update_caption(image_file):
         description, _ = analyze_image_with_free_model(image_file)