Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,110 +1,76 @@
 import streamlit as st
 import os
 
+# Video directory
 VIDEO_FOLDER = "./src/synthda_falling_realreal/"
 
-# Page layout settings
-st.set_page_config(layout="wide", initial_sidebar_state="collapsed")
+# Set page layout
+st.set_page_config(layout="wide")
 
-# Custom styles for centering and reducing video size
+# Title and description (centered)
 st.markdown("""
-    <style>
-    html, body, [class*="css"] {
-        padding: 0;
-        margin: 0;
-        font-size: 14px;
-    }
-    .block-container {
-        padding-top: 1rem;
-        padding-bottom: 0rem;
-    }
-    .video-wrapper {
-        display: flex;
-        justify-content: center;
-    }
-    video {
-        width: 100%;
-        max-width: 300px;  /* Shrink video */
-        height: auto;
-        border-radius: 6px;
-    }
-    .video-caption {
-        text-align: center;
-        font-weight: bold;
-        margin-bottom: 0.2rem;
-    }
-    </style>
+    <h1 style="text-align: center;">Project SynthDa</h1>
+    <h3 style="text-align: center;">SynthDa Interpolation Demo Viewer</h3>
+    <p style="text-align: center;">
+        AutoSynthDa blends two input motion videos to <strong>generate kinematically coherent, synthetic action videos</strong>.<br>
+        Use the slider below to explore how the system interpolates motion from one video to another.<br>
+        Source: <a href="https://github.com/nvidia/synthda" target="_blank">github.com/nvidia/synthda</a>
+    </p>
 """, unsafe_allow_html=True)
 
-# Title and description
-st.markdown("""
-<h2 style='text-align: center;'>Project SynthDa</h2>
-<h4 style='text-align: center;'>SynthDa Interpolation Demo Viewer</h4>
-<p style='text-align: center;'>
-AutoSynthDa blends two input motion videos to <strong>generate kinematically coherent, synthetic action videos</strong>.<br>
-Use the slider below to explore how the system interpolates motion from one video to another.<br>
-<a href="https://github.com/nvidia/synthda" target="_blank">github.com/nvidia/synthda</a>
-</p>
-""", unsafe_allow_html=True)
+# Slider instruction (centered)
+st.markdown(
+    '<p style="text-align: center;"><strong>Use the slider to control the interpolation between Input Video 1 (left) and Input Video 2 (right).</strong></p>',
+    unsafe_allow_html=True
+)
 
-# Slider
-weight = st.slider("Interpolation Weight (0 = Left Video, 1 = Right Video)", 0.1, 0.9, 0.5, step=0.1)
+# Slider (starts at 0.5)
+weight = st.slider("Interpolation Weight", 0.1, 0.9, 0.5, step=0.1)
 
-# Interpolation status
+# Interpolation explanation (centered)
 if weight == 0.0:
     interp_text = "Showing Input Video 1 (no interpolation)"
 elif weight == 1.0:
     interp_text = "Showing Input Video 2 (no interpolation)"
 else:
     w2 = round(1.0 - weight, 1)
-    interp_text = f"{weight:.1f} from Input 1 + {w2:.1f} from Input 2"
+    interp_text = f"Generated motion: {weight:.1f} from Input Video 1 + {w2:.1f} from Input Video 2"
 
-st.markdown(f"<p style='text-align:center;'><strong>{interp_text}</strong></p>", unsafe_allow_html=True)
+st.markdown(f'<p style="text-align: center; color: #444;"><strong>{interp_text}</strong></p>', unsafe_allow_html=True)
 
-# Video paths
+# Filepaths
 filename_interp = f"videos_generated_{weight:.1f}.mp4"
+filename_input1 = "videos_generated_0.0.mp4"
+filename_input2 = "videos_generated_1.0.mp4"
+
 video_interp = os.path.join(VIDEO_FOLDER, filename_interp)
-video_input1 = os.path.join(VIDEO_FOLDER, "videos_generated_0.0.mp4")
-video_input2 = os.path.join(VIDEO_FOLDER, "videos_generated_1.0.mp4")
+video_input1 = os.path.join(VIDEO_FOLDER, filename_input1)
+video_input2 = os.path.join(VIDEO_FOLDER, filename_input2)
+
+exists_interp = os.path.exists(video_interp)
+exists_1 = os.path.exists(video_input1)
+exists_2 = os.path.exists(video_input2)
 
-# 3 videos in row
-col1, col2, col3 = st.columns([1, 1, 1])
+# Layout: 3 columns for video display
+col1, col2, col3 = st.columns(3)
 
 with col1:
-    st.markdown("<div class='video-caption'>Input Video 1</div>", unsafe_allow_html=True)
-    if os.path.exists(video_input1):
-        st.markdown(f"""
-            <div class='video-wrapper'>
-                <video controls>
-                    <source src="{video_input1}" type="video/mp4">
-                </video>
-            </div>
-        """, unsafe_allow_html=True)
+    st.markdown("<div style='text-align: center; font-weight: bold;'>Input Video 1</div>", unsafe_allow_html=True)
+    if exists_1:
+        st.video(video_input1)
     else:
         st.error("Video 1 not found")
 
 with col2:
-    st.markdown("<div class='video-caption'>Interpolated Video</div>", unsafe_allow_html=True)
-    if os.path.exists(video_interp):
-        st.markdown(f"""
-            <div class='video-wrapper'>
-                <video controls>
-                    <source src="{video_interp}" type="video/mp4">
-                </video>
-            </div>
-        """, unsafe_allow_html=True)
+    st.markdown("<div style='text-align: center; font-weight: bold;'>Interpolated Video</div>", unsafe_allow_html=True)
+    if exists_interp:
+        st.video(video_interp)
     else:
         st.error("Interpolated video not found")
 
 with col3:
-    st.markdown("<div class='video-caption'>Input Video 2</div>", unsafe_allow_html=True)
-    if os.path.exists(video_input2):
-        st.markdown(f"""
-            <div class='video-wrapper'>
-                <video controls>
-                    <source src="{video_input2}" type="video/mp4">
-                </video>
-            </div>
-        """, unsafe_allow_html=True)
+    st.markdown("<div style='text-align: center; font-weight: bold;'>Input Video 2</div>", unsafe_allow_html=True)
+    if exists_2:
+        st.video(video_input2)
     else:
         st.error("Video 2 not found")