Update app.py

app.py

@@ -64,90 +64,43 @@ def get_audioldm_from_caption(caption):
         print(f"Error generating audio from caption: {e}")
         return None
 
-css = """
-#header-container {
-    text-align: center;
-    margin: 20px 0;
-}
-
-#header-title {
-    font-size: 36px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: #333333;
-}
-
-#header-subtitle {
-    font-size: 18px;
-    margin-bottom: 20px;
-    color: #555555;
-}
-
-#main-container {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 20px;
-    border-radius: 12px;
-    background: linear-gradient(135deg, #ffffff, #f0f0f0);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-button.primary-button {
-    background: linear-gradient(90deg, #007bff, #0056b3);
-    color: white;
-    border: none;
-    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 {
-    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;
-}
-"""
-
-with gr.Blocks(css=css) as demo:
-    with gr.Column(elem_id="header-container"):
-        gr.HTML("""
-        <div id="header-title">🎶 Image-to-Sound Generator</div>
-        <div id="header-subtitle">Transform your images into descriptive captions and immersive soundscapes.</div>
-        """)
-
-    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(elem_id="footer-container"):
+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 [[email protected]](mailto:[email protected]).
         """)