Update app.py

app.py

@@ -769,8 +769,145 @@ def load_example_audio(example_name):
     # Return the path to the example audio file based on the example_name
     return None
 
+# Custom CSS for enhanced styling
+custom_css = """
+.download-section {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 25px;
+    border-radius: 15px;
+    border: 3px solid #764ba2;
+    text-align: center;
+    margin: 25px 0;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+    position: relative;
+    overflow: hidden;
+}
+
+.download-section::before {
+    content: "";
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+    animation: shimmer 3s infinite linear;
+    pointer-events: none;
+}
+
+@keyframes shimmer {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.download-section h2 {
+    color: white;
+    font-size: 24px;
+    margin-bottom: 15px;
+    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+}
+
+.download-section p {
+    color: rgba(255,255,255,0.9);
+    font-size: 16px;
+    margin-bottom: 20px;
+    line-height: 1.5;
+}
+
+.download-button {
+    background: linear-gradient(45deg, #ff7e5f, #feb47b) !important;
+    color: white !important;
+    border: none !important;
+    padding: 12px 30px !important;
+    border-radius: 50px !important;
+    font-weight: bold !important;
+    font-size: 16px !important;
+    margin-top: 15px !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 5px 15px rgba(255,126,95,0.4) !important;
+    cursor: pointer !important;
+    display: inline-block !important;
+}
+
+.download-button:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 8px 20px rgba(255,126,95,0.6) !important;
+}
+
+.download-button:active {
+    transform: translateY(1px) !important;
+}
+
+.download-icon {
+    margin-right: 8px;
+    font-size: 18px;
+}
+
+.feature-list {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 15px;
+    margin: 20px 0;
+}
+
+.feature-item {
+    background: rgba(255,255,255,0.15);
+    padding: 10px 15px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: white;
+    font-size: 14px;
+}
+
+.feature-icon {
+    font-size: 16px;
+}
+
+.viewer-preview {
+    margin-top: 20px;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.viewer-preview img {
+    width: 100%;
+    display: block;
+}
+
+.instructions {
+    background: rgba(255,255,255,0.1);
+    padding: 15px;
+    border-radius: 8px;
+    margin-top: 20px;
+    text-align: left;
+}
+
+.instructions h3 {
+    color: white;
+    margin-top: 0;
+    font-size: 16px;
+}
+
+.instructions ol {
+    color: rgba(255,255,255,0.9);
+    padding-left: 20px;
+    margin-bottom: 0;
+}
+
+.instructions li {
+    margin-bottom: 8px;
+}
+"""
+
 # Create the Gradio interface with proper output handling
-with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as interface:
+with gr.Blocks(title="Affective Virtual Environments - Chunked Processing", css=custom_css) as interface:
     gr.Markdown("# Affective Virtual Environments")
     gr.Markdown("Create an AVE using your voice. Audio is split into chunks, with separate predictions and generations for each segment.")
     
@@ -847,12 +984,70 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
             'music': audio_output
         })
     
-    # Add component for 360 viewer
-    viewer_html_output = gr.File(
-        label="Download 360 Viewer", 
-        type="filepath",
-        interactive=False
-    )
+    # Enhanced Download 360 Viewer Section
+    with gr.Group(visible=True, elem_classes="download-section") as download_group:
+        gr.Markdown("""
+        # 🌟 Immersive 360 Experience Ready! 🌟
+        
+        Your personalized virtual environment has been generated. Download the interactive 360° viewer to explore your creation!
+        """)
+        
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("""
+                ### 🎯 Features:
+                """)
+                
+                with gr.Row(elem_classes="feature-list"):
+                    with gr.Column(scale=1, min_width=150):
+                        gr.Markdown("""
+                        <div class="feature-item">
+                            <span class="feature-icon">🌎</span> 360° Panoramic View
+                        </div>
+                        """)
+                    
+                    with gr.Column(scale=1, min_width=150):
+                        gr.Markdown("""
+                        <div class="feature-item">
+                            <span class="feature-icon">🎵</span> Synchronized Audio
+                        </div>
+                        """)
+                    
+                    with gr.Column(scale=1, min_width=150):
+                        gr.Markdown("""
+                        <div class="feature-item">
+                            <span class="feature-icon">🔄</span> Interactive Navigation
+                        </div>
+                        """)
+                
+                gr.Markdown("""
+                <div class="instructions">
+                    <h3>📋 How to use:</h3>
+                    <ol>
+                        <li>Download the HTML file using the button below</li>
+                        <li>Open the file in your web browser (Chrome, Firefox, Edge)</li>
+                        <li>Use your mouse to drag and explore the 360° environment</li>
+                        <li>Switch between different chunks using the dropdown menu</li>
+                        <li>Enjoy the synchronized audio experience!</li>
+                    </ol>
+                </div>
+                """)
+            
+            with gr.Column(scale=1, min_width=300):
+                # Preview image (placeholder - you could add a function to generate a preview)
+                gr.Markdown("""
+                <div class="viewer-preview">
+                    <img src="https://img.freepik.com/free-vector/abstract-360-degree-panorama-virtual-reality-background_1048-14629.jpg" alt="360 Viewer Preview">
+                </div>
+                """)
+        
+        # Enhanced download button
+        viewer_html_output = gr.File(
+            label="🚀 Download Immersive 360 Viewer 🚀", 
+            type="filepath",
+            interactive=False,
+            elem_classes="download-button"
+        )
     
     # Add a hidden HTML component for JavaScript execution
     js_output = gr.HTML(visible=False)
@@ -905,5 +1100,4 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
     is_spaces = os.getenv('SPACE_ID') is not None
     
     # Launch with appropriate settings
-    interface.launch(share=True)  # Only share when not on Spaces
-
+    interface.launch(share=True)  # Only share when not on Spaces