Update app.py

app.py

@@ -1232,10 +1232,15 @@ CSS = """
 .gradio-container .dr-hint { font-size: 13px !important; color: var(--dr-faint) !important; margin: 4px 0 0 !important; }
 .gradio-container .dr-media video, .gradio-container .dr-media .wrap { border-radius: 10px !important; }
 /* Let the upload box grow while Gradio's trim tool (filmstrip + Trim/Cancel) is open */
-.gradio-container #dr-in { height: auto !important; min-height: 320px !important; overflow: visible !important; }
-.gradio-container #dr-in .video-container { height: auto !important; min-height: 318px !important; }
+.gradio-container #dr-in { height: auto !important; min-height: 360px !important; overflow: visible !important; }
+.gradio-container #dr-in .video-container { height: auto !important; min-height: 358px !important; }
+/* same visible size as the result player: fit the clip inside the same 360px box */
+.gradio-container #dr-in video, .gradio-container .dr-out video { height: 358px !important; max-height: 358px !important;
+  width: 100% !important; object-fit: contain !important; background: #000; }
 .gradio-container #dr-in .video-container:has(.edit-buttons) { min-height: 0 !important; }
-.gradio-container #dr-in .video-container:has(.edit-buttons) video { max-height: 300px !important; }
+.gradio-container #dr-in .video-container:has(.edit-buttons) video { height: 300px !important; max-height: 300px !important; }
+/* card headers take the same height, so both boxes start on the same line */
+.gradio-container .dr-head { min-height: 64px; }
 .gradio-container #dr-in .controls { height: auto !important; overflow: visible !important; padding: 8px 0 4px !important; }
 .gradio-container #dr-in .opaque-layer { cursor: grab !important; }
 body.dr-sliding, body.dr-sliding * { cursor: grabbing !important; user-select: none !important; }
@@ -1423,6 +1428,7 @@ body.dr-sliding, body.dr-sliding * { cursor: grabbing !important; user-select: n
   .gradio-container .dr-meta { gap: 4px 14px; }
   .gradio-container .dr-meta span + span::before { content: none; }
   .gradio-container .dr-hero-actions a.dr-btn { flex: 1 1 100%; text-align: center; }
+  .gradio-container .dr-head { min-height: 0; }
   .gradio-container .dr-card { padding: 16px !important; }
   .gradio-container .dr-mark { height: 28px !important; } .dr-word { height: 17px !important; }
   #dr-login button { font-size: 12px !important; padding: 6px 10px !important; }
@@ -1635,6 +1641,8 @@ def generate(video, mood, excited, angry, updates, preset_name, profile: gr.OAut
         raise
 
 
+PLAYER_H = 360  # both players use the same box so original and result are the same size
+
 with gr.Blocks(title=PAGE_TITLE) as demo:
     gr.HTML('<div class="dr-glow"></div>')
     with gr.Row(elem_id="dr-top"):
@@ -1659,11 +1667,11 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
 
     with gr.Row(elem_id="dr-main", equal_height=True):
         with gr.Column(scale=1, elem_classes="dr-card"):
-            gr.HTML('<div class="dr-label"><b>01</b>Upload a video</div>'
+            gr.HTML('<div class="dr-head"><div class="dr-label"><b>01</b>Upload a video</div>'
                     f'<div class="dr-hint">Upload an MP4 video up to {int(MAX_SECONDS)} seconds. Use a clip with '
                     'one clearly visible, front-facing person. For a longer video, select a segment with the '
-                    'trim tool.</div>')
-            video_in = gr.Video(show_label=False, sources=["upload"], height=320, elem_classes="dr-media",
+                    'trim tool.</div></div>')
+            video_in = gr.Video(show_label=False, sources=["upload"], height=PLAYER_H, elem_classes="dr-media",
                                 elem_id="dr-in")
             trim_info = gr.HTML(visible=False, elem_classes="dr-trim")
             samples = [[p] for p in sorted(glob.glob("examples/*.mp4")) if "_after." not in p]
@@ -1694,8 +1702,10 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
                     'data.</div>')
 
         with gr.Column(scale=1, elem_classes="dr-card"):
-            gr.HTML('<div class="dr-label"><b>03</b>Edited video</div>')
-            video_out = gr.Video(show_label=False, interactive=False, height=320, elem_classes="dr-media")
+            gr.HTML('<div class="dr-head"><div class="dr-label"><b>03</b>Edited video</div>'
+                    '<div class="dr-hint">Shown at the same size as your original, so you can compare them '
+                    'side by side.</div></div>')
+            video_out = gr.Video(show_label=False, interactive=False, height=PLAYER_H, elem_classes=["dr-media", "dr-out"])
             dl_btn = gr.DownloadButton("Download edited MP4", visible=False, variant="primary",
                                          elem_id="dr-dl")
             status_out = gr.HTML(IDLE)