Update app.py

app.py

@@ -64,47 +64,59 @@ def get_audioldm_from_caption(caption):
         print(f"Error generating audio from caption: {e}")
         return None
 
-with gr.Blocks() as demo:
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Image(value="https://via.placeholder.com/150", interactive=False, label="App Logo", elem_id="app-logo")
-        with gr.Column(scale=5):
-            gr.HTML("""
-            <div style="text-align: center; font-size: 32px; font-weight: bold; margin-bottom: 10px;">🎶 Image-to-Sound Generator</div>
-            <div style="text-align: center; font-size: 16px; color: #6c757d;">Transform your images into descriptive captions and immersive soundscapes.</div>
-            """)
-
-    with gr.Row():
-        with gr.Column():
-            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.
-            """)
-
-    with gr.Row():
-        with gr.Column(scale=1):
-            image_upload = gr.File(label="Upload Image", type="binary")
-            generate_description_button = gr.Button("Generate Description", variant="primary")
-        with gr.Column(scale=2):
-            caption_display = gr.Textbox(label="Generated Caption", interactive=False, placeholder="Your image caption will appear here.")
-            generate_sound_button = gr.Button("Generate Sound", variant="primary")
-        with gr.Column(scale=1):
-            audio_output = gr.Audio(label="Generated Sound Effect", interactive=False)
-
-    with gr.Row():
-        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 [contact@bilsimaging.com](mailto:contact@bilsimaging.com).
+css = """
+#col-container{
+    margin: 0 auto;
+    max-width: 800px;
+    }
+"""
+
+with gr.Blocks(css=css) as demo:
+    with gr.Column(elem_id="col-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>
         """)
 
+    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 
+    [contact@bilsimaging.com](mailto:contact@bilsimaging.com).
+    
+    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!
+    """)
+
     def update_caption(image_file):
         description, _ = analyze_image_with_free_model(image_file)
         return description
@@ -127,4 +139,4 @@ with gr.Blocks() as demo:
         outputs=audio_output
     )
 
-demo.launch(debug=True, share=True)
+demo.launch(debug=True, share=True)