Spaces:

jfforero
/

Speech2Scene3

Build error

App Files Files Community

jfforero commited on Sep 6, 2025

Commit

9b34f1a

verified ·

1 Parent(s): f469004

Update app.py

Browse files

Files changed (1) hide show

app.py +45 -59

app.py CHANGED Viewed

@@ -514,7 +514,7 @@ def create_360_viewer_html(image_paths, audio_paths, output_path):
         else:
             audio_data_list.append(None)  # Placeholder for chunks without audio
-    # Create the HTML content with a more prominent download button
     html_content = f"""
     <!DOCTYPE html>
     <html lang="en">
@@ -599,42 +599,6 @@ def create_360_viewer_html(image_paths, audio_paths, output_path):
                 border-radius: 3px;
                 border: 1px solid #ccc;
             }}
-            /* Custom styles for the download button */
-            .download-container {{
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                z-index: 1000;
-                background: rgba(0, 0, 0, 0.7);
-                padding: 15px;
-                border-radius: 5px;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-            }}
-            .download-button {{
-                background: #27ae60;
-                color: white;
-                border: none;
-                padding: 15px 25px;
-                border-radius: 5px;
-                cursor: pointer;
-                font-size: 18px;
-                font-weight: bold;
-                display: flex;
-                align-items: center;
-                gap: 10px;
-                text-decoration: none;
-                transition: all 0.3s ease;
-            }}
-            .download-button:hover {{
-                background: #219653;
-                transform: scale(1.05);
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            }}
-            .download-icon {{
-                font-size: 24px;
-            }}
         </style>
     </head>
     <body>
@@ -644,14 +608,6 @@ def create_360_viewer_html(image_paths, audio_paths, output_path):
             </select>
         </div>
-        <!-- Download button container -->
-        <div class="download-container">
-            <a id="download-link" class="download-button" href="#" download="360_viewer.html">
-                <span class="download-icon">⬇️</span>
-                <span>Download Viewer</span>
-            </a>
-        </div>
         <div id="panorama"></div>
         <div id="audio-controls">
@@ -701,14 +657,6 @@ def create_360_viewer_html(image_paths, audio_paths, output_path):
                 }}
             }}
-            // Set up download link
-            document.getElementById('download-link').addEventListener('click', function() {{
-                // Create a Blob with the HTML content
-                const blob = new Blob([document.documentElement.outerHTML], {{ type: 'text/html' }});
-                const url = URL.createObjectURL(blob);
-                this.href = url;
-            }});
             // Load the first image initially
             loadPanorama(0);
@@ -728,6 +676,7 @@ def create_360_viewer_html(image_paths, audio_paths, output_path):
     return output_path
 # Update the process_and_display function
 def process_and_display(audio_input, generate_audio, chunk_duration):
     # Validate chunk duration
@@ -822,6 +771,8 @@ def load_example_audio(example_name):
     return None
 # Create the Gradio interface with proper output handling
 with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") 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.")
@@ -899,12 +850,47 @@ 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
-    )
     # Add a hidden HTML component for JavaScript execution
     js_output = gr.HTML(visible=False)

         else:
             audio_data_list.append(None)  # Placeholder for chunks without audio
+        # Create the HTML content
     html_content = f"""
     <!DOCTYPE html>
     <html lang="en">
                 border-radius: 3px;
                 border: 1px solid #ccc;
             }}
         </style>
     </head>
     <body>
             </select>
         </div>
         <div id="panorama"></div>
         <div id="audio-controls">
                 }}
             }}
             // Load the first image initially
             loadPanorama(0);
     return output_path
 # Update the process_and_display function
 def process_and_display(audio_input, generate_audio, chunk_duration):
     # Validate chunk duration
     return None
 # Create the Gradio interface with proper output handling
+# Update the Gradio interface with a more prominent download button
 with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") 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.")
             'music': audio_output
         })
+    # Add component for 360 viewer with a more prominent download button
+    with gr.Group(visible=False) as viewer_group:
+        gr.Markdown("### 🎯 360 Viewer Results")
+        gr.Markdown("Your interactive 360 viewer is ready! Download the HTML file to view your generated environments in a web browser.")
+        # Create a row with a prominent download button
+        with gr.Row():
+            viewer_html_output = gr.File(
+                label="360 Viewer HTML File",
+                type="filepath",
+                interactive=False,
+                elem_classes=["prominent-download"]
+            )
+            # Add a custom CSS class to make the download button more prominent
+            gr.HTML("""
+                <style>
+                    .prominent-download .gr-button {
+                        background: linear-gradient(45deg, #FF3366, #FF9933) !important;
+                        color: white !important;
+                        font-size: 18px !important;
+                        font-weight: bold !important;
+                        padding: 15px 25px !important;
+                        border-radius: 8px !important;
+                        border: none !important;
+                        box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
+                        transition: all 0.3s ease !important;
+                    }
+                    .prominent-download .gr-button:hover {
+                        transform: scale(1.05) !important;
+                        box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
+                    }
+                    .prominent-download .gr-button:before {
+                        content: "⬇️ " !important;
+                        margin-right: 8px !important;
+                    }
+                </style>
+            """)
+    # Add the viewer group to the group components
+    group_components.append(viewer_group)
     # Add a hidden HTML component for JavaScript execution
     js_output = gr.HTML(visible=False)