Spaces:

jfforero
/

Speech2Scene3

Sleeping

App Files Files Community

jfforero commited on Sep 5, 2025

Commit

d3616d7

verified ·

1 Parent(s): 87799cc

Update app.py

Browse files

Files changed (1) hide show

app.py +152 -25

app.py CHANGED Viewed

@@ -426,8 +426,8 @@ def add_360_metadata(img):
-def create_360_viewer_html(image_paths, output_path):
-    """Create an HTML file with a 360 viewer for the given images."""
     # Create a list of image data URIs
     image_data_list = []
     for img_path in image_paths:
@@ -435,6 +435,16 @@ def create_360_viewer_html(image_paths, output_path):
             img_data = base64.b64encode(f.read()).decode("utf-8")
             image_data_list.append(f"data:image/jpeg;base64,{img_data}")
     # Create the HTML content
     html_content = f"""
     <!DOCTYPE html>
@@ -442,16 +452,17 @@ def create_360_viewer_html(image_paths, output_path):
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>360 Panorama Viewer</title>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
         <style>
             body {{
                 margin: 0;
                 overflow: hidden;
             }}
             #panorama {{
                 width: 100vw;
-                height: 100vh;
             }}
             .pnlm-hotspot.pnlm-info-hotspot {{
                 background-color: rgba(0, 150, 255, 0.8);
@@ -468,41 +479,80 @@ def create_360_viewer_html(image_paths, output_path):
                 border-radius: 3px;
                 padding: 5px 10px;
             }}
-            #image-selector {{
                 position: absolute;
                 top: 10px;
                 left: 10px;
                 z-index: 1000;
                 background: rgba(0, 0, 0, 0.7);
                 color: white;
-                padding: 5px 10px;
-                border-radius: 3px;
             }}
-            #open-button {{
-                position: absolute;
-                top: 10px;
-                right: 10px;
                 z-index: 1000;
-                background: rgba(0, 0, 0, 0.7);
                 color: white;
-                padding: 5px 10px;
-                border-radius: 3px;
                 border: none;
                 cursor: pointer;
             }}
         </style>
     </head>
     <body>
-        <select id="image-selector">
-            {"".join([f'<option value="{i}">Chunk {i+1}</option>' for i in range(len(image_data_list))])}
-        </select>
-        <button id="open-button" onclick="openInNewTab()">Open in New Tab</button>
         <div id="panorama"></div>
         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
         <script>
             const images = {json.dumps(image_data_list)};
             let currentViewer = null;
             function loadPanorama(index) {{
                 if (currentViewer) {{
@@ -518,6 +568,26 @@ def create_360_viewer_html(image_paths, output_path):
                     "showFullscreenCtrl": true,
                     "hfov": 100
                 }});
             }}
             // Load the first image initially
@@ -525,13 +595,71 @@ def create_360_viewer_html(image_paths, output_path):
             // Handle image selection changes
             document.getElementById('image-selector').addEventListener('change', function(e) {{
-                loadPanorama(parseInt(e.target.value));
             }});
             // Function to open the viewer in a new tab
             function openInNewTab() {{
                 const newWindow = window.open('', '_blank');
-                newWindow.document.write(`<!DOCTYPE html><html><head><title>360 Panorama Viewer</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/></head><body><div id="panorama"></div><script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"><\/script><script>pannellum.viewer('panorama', {{"type": "equirectangular", "panorama": images[document.getElementById('image-selector').value], "autoLoad": true, "autoRotate": -2, "showZoomCtrl": true, "showFullscreenCtrl": true, "hfov": 100}});<\/script></body></html>`);
             }}
         </script>
     </body>
@@ -612,7 +740,6 @@ def create_fade_transition(images, fade_duration=1.0, fps=24):
-# Update the process_and_display function to handle the fade animation correctly
 # Update the process_and_display function to handle the fade animation correctly
 def process_and_display(audio_input, generate_audio, chunk_duration):
     # Validate chunk duration
@@ -636,6 +763,7 @@ def process_and_display(audio_input, generate_audio, chunk_duration):
     group_visibility = []
     all_images = []  # Collect all generated images for the fade animation
     all_360_images = []  # Collect all 360 images for the viewer
     # Process each result
     for i, result in enumerate(results):
@@ -649,10 +777,11 @@ def process_and_display(audio_input, generate_audio, chunk_duration):
                 result['image_360'],
                 result['music']
             ])
-            # Collect the images
             all_images.append(result['image'])
             if result['image_360']:
                 all_360_images.append(result['image_360'])
         else:
             # If we have more results than containers, just extend with None
             group_visibility.append(gr.Group(visible=False))
@@ -674,14 +803,12 @@ def process_and_display(audio_input, generate_audio, chunk_duration):
     viewer_html_path = None
     if all_360_images:
         with tempfile.NamedTemporaryFile(suffix=".html", delete=False) as tmp_file:
-            viewer_html_path = create_360_viewer_html(all_360_images, tmp_file.name)
     # Hide loading indicator and show results
     yield [gr.HTML("")] + group_visibility + outputs + [fade_preview, fade_animation_path, viewer_html_path, ""]
 # Update the clear_all function to handle the new outputs
 def clear_all():
     # Create a list with None for all outputs

+def create_360_viewer_html(image_paths, audio_paths, output_path):
+    """Create an HTML file with a 360 viewer and audio player for the given images and audio."""
     # Create a list of image data URIs
     image_data_list = []
     for img_path in image_paths:
             img_data = base64.b64encode(f.read()).decode("utf-8")
             image_data_list.append(f"data:image/jpeg;base64,{img_data}")
+    # Create a list of audio data URIs
+    audio_data_list = []
+    for audio_path in audio_paths:
+        if audio_path:  # Only process if audio exists
+            with open(audio_path, "rb") as f:
+                audio_data = base64.b64encode(f.read()).decode("utf-8")
+                audio_data_list.append(f"data:audio/wav;base64,{audio_data}")
+        else:
+            audio_data_list.append(None)  # Placeholder for chunks without audio
     # Create the HTML content
     html_content = f"""
     <!DOCTYPE html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>360 Panorama Viewer with Audio</title>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
         <style>
             body {{
                 margin: 0;
                 overflow: hidden;
+                font-family: Arial, sans-serif;
             }}
             #panorama {{
                 width: 100vw;
+                height: 80vh;
             }}
             .pnlm-hotspot.pnlm-info-hotspot {{
                 background-color: rgba(0, 150, 255, 0.8);
                 border-radius: 3px;
                 padding: 5px 10px;
             }}
+            #controls {{
                 position: absolute;
                 top: 10px;
                 left: 10px;
                 z-index: 1000;
                 background: rgba(0, 0, 0, 0.7);
                 color: white;
+                padding: 10px;
+                border-radius: 5px;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
             }}
+            #audio-controls {{
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                background: rgba(0, 0, 0, 0.8);
+                color: white;
+                padding: 15px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
                 z-index: 1000;
+            }}
+            #audio-player {{
+                width: 80%;
+                margin-bottom: 10px;
+            }}
+            #audio-info {{
+                text-align: center;
+                font-size: 14px;
+            }}
+            button {{
+                background: #3498db;
                 color: white;
                 border: none;
+                padding: 8px 15px;
+                border-radius: 3px;
                 cursor: pointer;
+                margin: 5px;
+            }}
+            button:hover {{
+                background: #2980b9;
+            }}
+            select {{
+                padding: 5px;
+                border-radius: 3px;
+                border: 1px solid #ccc;
             }}
         </style>
     </head>
     <body>
+        <div id="controls">
+            <select id="image-selector">
+                {"".join([f'<option value="{i}">Chunk {i+1}</option>' for i in range(len(image_data_list))])}
+            </select>
+            <button id="open-button" onclick="openInNewTab()">Open in New Tab</button>
+        </div>
         <div id="panorama"></div>
+        <div id="audio-controls">
+            <audio id="audio-player" controls></audio>
+            <div id="audio-info">No audio available for this chunk</div>
+        </div>
         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
         <script>
             const images = {json.dumps(image_data_list)};
+            const audioFiles = {json.dumps(audio_data_list)};
             let currentViewer = null;
+            let currentAudioIndex = 0;
             function loadPanorama(index) {{
                 if (currentViewer) {{
                     "showFullscreenCtrl": true,
                     "hfov": 100
                 }});
+                // Update audio player
+                updateAudioPlayer(index);
+            }}
+            function updateAudioPlayer(index) {{
+                const audioPlayer = document.getElementById('audio-player');
+                const audioInfo = document.getElementById('audio-info');
+                if (audioFiles[index]) {{
+                    audioPlayer.src = audioFiles[index];
+                    audioInfo.textContent = `Playing audio for Chunk {index + 1}`;
+                    // Try to play automatically (may be blocked by browser policies)
+                    audioPlayer.play().catch(e => {{
+                        audioInfo.textContent = `Click play to listen to audio for Chunk {index + 1}`;
+                    }});
+                }} else {{
+                    audioPlayer.src = '';
+                    audioInfo.textContent = 'No audio available for this chunk';
+                }}
             }}
             // Load the first image initially
             // Handle image selection changes
             document.getElementById('image-selector').addEventListener('change', function(e) {{
+                const selectedIndex = parseInt(e.target.value);
+                loadPanorama(selectedIndex);
             }});
             // Function to open the viewer in a new tab
             function openInNewTab() {{
                 const newWindow = window.open('', '_blank');
+                const selectedIndex = document.getElementById('image-selector').value;
+                newWindow.document.write(`
+                    <!DOCTYPE html>
+                    <html>
+                    <head>
+                        <title>360 Panorama Viewer with Audio</title>
+                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
+                        <style>
+                            body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; }}
+                            #panorama {{ width: 100vw; height: 80vh; }}
+                            #audio-controls {{
+                                position: fixed;
+                                bottom: 0;
+                                left: 0;
+                                width: 100%;
+                                background: rgba(0, 0, 0, 0.8);
+                                color: white;
+                                padding: 15px;
+                                display: flex;
+                                flex-direction: column;
+                                align-items: center;
+                                z-index: 1000;
+                            }}
+                            #audio-player {{ width: 80%; margin-bottom: 10px; }}
+                            #audio-info {{ text-align: center; font-size: 14px; }}
+                        </style>
+                    </head>
+                    <body>
+                        <div id="panorama"></div>
+                        <div id="audio-controls">
+                            <audio id="audio-player" controls></audio>
+                            <div id="audio-info">Audio for Chunk {parseInt(selectedIndex) + 1}</div>
+                        </div>
+                        <script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"><\/script>
+                        <script>
+                            pannellum.viewer('panorama', {{
+                                "type": "equirectangular",
+                                "panorama": "{images[selectedIndex]}",
+                                "autoLoad": true,
+                                "autoRotate": -2,
+                                "showZoomCtrl": true,
+                                "showFullscreenCtrl": true,
+                                "hfov": 100
+                            }});
+                            const audioPlayer = document.getElementById('audio-player');
+                            if ("{audioFiles[selectedIndex]}") {{
+                                audioPlayer.src = "{audioFiles[selectedIndex]}";
+                                audioPlayer.play().catch(e => {{
+                                    document.getElementById('audio-info').textContent = 'Click play to listen to audio';
+                                }});
+                            }} else {{
+                                document.getElementById('audio-info').textContent = 'No audio available for this chunk';
+                            }}
+                        <\/script>
+                    </body>
+                    </html>
+                `);
             }}
         </script>
     </body>
 # Update the process_and_display function to handle the fade animation correctly
 def process_and_display(audio_input, generate_audio, chunk_duration):
     # Validate chunk duration
     group_visibility = []
     all_images = []  # Collect all generated images for the fade animation
     all_360_images = []  # Collect all 360 images for the viewer
+    all_music_paths = []  # Collect all music paths for the viewer
     # Process each result
     for i, result in enumerate(results):
                 result['image_360'],
                 result['music']
             ])
+            # Collect the images and music
             all_images.append(result['image'])
             if result['image_360']:
                 all_360_images.append(result['image_360'])
+            all_music_paths.append(result['music'])  # Can be None if no music generated
         else:
             # If we have more results than containers, just extend with None
             group_visibility.append(gr.Group(visible=False))
     viewer_html_path = None
     if all_360_images:
         with tempfile.NamedTemporaryFile(suffix=".html", delete=False) as tmp_file:
+            viewer_html_path = create_360_viewer_html(all_360_images, all_music_paths, tmp_file.name)
     # Hide loading indicator and show results
     yield [gr.HTML("")] + group_visibility + outputs + [fade_preview, fade_animation_path, viewer_html_path, ""]
 # Update the clear_all function to handle the new outputs
 def clear_all():
     # Create a list with None for all outputs