Spaces:

hyungonryu
/

GoeStationaryVFI

Sleeping

App Files Files Community

hyungonryu commited on 9 days ago

Commit

0ea4d28

verified ·

1 Parent(s): c8c41f3

Update app.py

Browse files

Files changed (1) hide show

app.py +80 -52

app.py CHANGED Viewed

@@ -1,40 +1,47 @@
 import gradio as gr
-html_code = """
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Video Sync with Custom UI</title>
   <style>
-    body { font-family: sans-serif; margin: 20px; }
-    table { margin: 0 auto; }
-    td { padding: 5px; vertical-align: middle; }
-    .slider, .timeline-slider { }
-    .video-container-wrapper { position: relative; display: inline-block; }
-    .video-container {
       position: relative;
       width: 640px;
       height: 480px;
       background: #000;
       overflow: hidden;
-    }
-    .video {
       position: absolute;
       top: 0;
       left: 0;
       width: 640px;
       height: 480px;
       object-fit: cover;
-    }
-    .wipe-line {
       position: absolute;
       top: 0;
       width: 2px;
       height: 100%;
       background: blue;
       pointer-events: none;
-    }
   </style>
 </head>
 <body>
@@ -46,7 +53,11 @@ html_code = """
     <tr>
       <td width="700">
         <font size="1">
-          This demo video consists of images generated at one-minute intervals from the KMA GK2A satellite's full-disk images, originally captured at ten-minute intervals, using the VFI technique. By using the wipe scrollbar, you can compare the original video (delineated by a blue line) with the enhanced version. You can adjust the zoom and playback speed, and when played at 0.3x speed, the differences between the two videos become distinctly apparent.
         </font>
       </td>
     </tr>
@@ -121,8 +132,9 @@ html_code = """
       <td colspan="3">
         <div class="video-container-wrapper">
           <div class="video-container" id="videoContainer">
-            <video id="video1" class="video" src="video1.mp4" preload="auto" muted></video>
-            <video id="video2" class="video" src="video2.mp4" preload="auto" muted></video>
             <div id="wipeLine" class="wipe-line"></div>
           </div>
         </div>
@@ -134,12 +146,15 @@ html_code = """
     // Base width remains constant.
     const baseWidth = 640;
     // Predefined video sets.
     const videoSets = [
-      { label: "TongA Case",    area: "TongaArea", date: "20220116", sensor: "ir105" },
-      { label: "SouthAsia",     area: "SouthAsia", date: "20240820", sensor: "ir105" },
-      { label: "EastAsia",      area: "EastAsia",  date: "20240820", sensor: "ir105" },
-      { label: "SouthWestAsia", area: "WestAsia",  date: "20240820", sensor: "ir105" },
     ];
     // Get DOM elements.
@@ -158,60 +173,60 @@ html_code = """
     let isPlaying = false;
     // Update playback speed.
-    function updateSpeed() {
       const speedValue = parseFloat(speedSelect.value);
       video1.playbackRate = speedValue;
       video2.playbackRate = speedValue;
-    }
     // Update the wipe effect.
-    function updateWipe() {
       const wipeValue = parseFloat(wipeRange.value);
       const rightPercent = (1 - wipeValue) * 100;
-      video2.style.clipPath = `inset(0 ${rightPercent}% 0 0)`;
       // Calculate position using the base width.
       const lineX = baseWidth * wipeValue - (wipeLine.clientWidth / 2);
-      wipeLine.style.left = `${lineX}px`;
-    }
     // Update timeline slider based on video progress.
-    function updateTimeline() {
-      if (video1.duration) {
         const percent = (video1.currentTime / video1.duration) * 100;
         timelineRange.value = percent;
-      }
-    }
     video1.addEventListener("timeupdate", updateTimeline);
     // Toggle play/pause.
-    function togglePlayPause() {
-      if (!isPlaying) {
         video1.play();
         video2.play();
         playPauseBtn.textContent = "Pause";
         isPlaying = true;
-      } else {
         video1.pause();
         video2.pause();
         playPauseBtn.textContent = "Play";
         isPlaying = false;
-      }
-    }
     // Seek both videos.
-    function seekTimeline() {
-      if (video1.duration) {
         const percent = timelineRange.value / 100;
         const newTime = video1.duration * percent;
         video1.currentTime = newTime;
         video2.currentTime = newTime;
-      }
-    }
     // Update scale and adjust related elements.
-    function updateScale() {
       const scaleValue = parseFloat(scaleSelect.value);
-      videoContainer.style.transform = `scale(${scaleValue})`;
       videoContainer.style.transformOrigin = "top left";
       // Update slider and table widths to the visually scaled size.
       const effectiveWidth = baseWidth * scaleValue;
@@ -219,29 +234,36 @@ html_code = """
       timelineRange.style.width = effectiveWidth + "px";
       controlTable.style.width = effectiveWidth + "px";
       updateWipe();
-    }
     // Update video sources based on selected video set.
-    function updateVideoSet() {
       const selectedIndex = videoSetSelect.value;
-      if (selectedIndex === "") {
-        // "No" selected, you could reset the video sources if desired.
         return;
-      }
       const videoSet = videoSets[parseInt(selectedIndex)];
       const area = videoSet.area;
       const date = videoSet.date;
       const sensor = videoSet.sensor;
-      // Construct filenames.
-      const originalFile = `${area}/video_${area}_${sensor}um_${date}_10min_010fps.mp4`;
-      const enhancedFile = `${area}/video_${area}_${sensor}um_${date}_01min_100fps.mp4`;
       // Update video sources.
       video1.setAttribute("src", originalFile);
       video2.setAttribute("src", enhancedFile);
       // Reload the videos.
       video1.load();
       video2.load();
-    }
     // Event listeners.
     playPauseBtn.addEventListener("click", togglePlayPause);
@@ -260,7 +282,13 @@ html_code = """
 </html>
 """
-with gr.Blocks() as demo:
-    gr.HTML(html_code)
-demo.launch()

 import gradio as gr
+# 1) Your Hugging Face Space name:
+SPACE_USERNAME = "hyungonryu"
+SPACE_NAME = "GoeStationaryVFI"
+# 2) Base URL for raw MP4 files via "resolve/main":
+BASE_URL = f"https://huggingface.co/spaces/{SPACE_USERNAME}/{SPACE_NAME}/resolve/main"
+html_code = f"""
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Video Sync with Custom UI</title>
   <style>
+    body {{ font-family: sans-serif; margin: 20px; }}
+    table {{ margin: 0 auto; }}
+    td {{ padding: 5px; vertical-align: middle; }}
+    .slider, .timeline-slider {{ }}
+    .video-container-wrapper {{ position: relative; display: inline-block; }}
+    .video-container {{
       position: relative;
       width: 640px;
       height: 480px;
       background: #000;
       overflow: hidden;
+    }}
+    .video {{
       position: absolute;
       top: 0;
       left: 0;
       width: 640px;
       height: 480px;
       object-fit: cover;
+    }}
+    .wipe-line {{
       position: absolute;
       top: 0;
       width: 2px;
       height: 100%;
       background: blue;
       pointer-events: none;
+    }}
   </style>
 </head>
 <body>
     <tr>
       <td width="700">
         <font size="1">
+          This demo video consists of images generated at one-minute intervals from the KMA GK2A satellite's full-disk images,
+          originally captured at ten-minute intervals, using the VFI technique.
+          By using the wipe scrollbar, you can compare the original video (delineated by a blue line) with the enhanced version.
+          You can adjust the zoom and playback speed, and when played at 0.3x speed, the differences between the two videos
+          become distinctly apparent.
         </font>
       </td>
     </tr>
       <td colspan="3">
         <div class="video-container-wrapper">
           <div class="video-container" id="videoContainer">
+            <!-- Default placeholders -->
+            <video id="video1" class="video" src="" preload="auto" muted></video>
+            <video id="video2" class="video" src="" preload="auto" muted></video>
             <div id="wipeLine" class="wipe-line"></div>
           </div>
         </div>
     // Base width remains constant.
     const baseWidth = 640;
+    // We'll store the base "resolve/main" URL from Python as a JS var:
+    const BASE_URL = "{BASE_URL}";
     // Predefined video sets.
     const videoSets = [
+      {{ label: "TongA Case",    area: "TongaArea", date: "20220116", sensor: "ir105" }},
+      {{ label: "SouthAsia",     area: "SouthAsia", date: "20240820", sensor: "ir105" }},
+      {{ label: "EastAsia",      area: "EastAsia",  date: "20240820", sensor: "ir105" }},
+      {{ label: "SouthWestAsia", area: "WestAsia",  date: "20240820", sensor: "ir105" }},
     ];
     // Get DOM elements.
     let isPlaying = false;
     // Update playback speed.
+    function updateSpeed() {{
       const speedValue = parseFloat(speedSelect.value);
       video1.playbackRate = speedValue;
       video2.playbackRate = speedValue;
+    }}
     // Update the wipe effect.
+    function updateWipe() {{
       const wipeValue = parseFloat(wipeRange.value);
       const rightPercent = (1 - wipeValue) * 100;
+      video2.style.clipPath = `inset(0 ${{rightPercent}}% 0 0)`;
       // Calculate position using the base width.
       const lineX = baseWidth * wipeValue - (wipeLine.clientWidth / 2);
+      wipeLine.style.left = `${{lineX}}px`;
+    }}
     // Update timeline slider based on video progress.
+    function updateTimeline() {{
+      if (video1.duration) {{
         const percent = (video1.currentTime / video1.duration) * 100;
         timelineRange.value = percent;
+      }}
+    }}
     video1.addEventListener("timeupdate", updateTimeline);
     // Toggle play/pause.
+    function togglePlayPause() {{
+      if (!isPlaying) {{
         video1.play();
         video2.play();
         playPauseBtn.textContent = "Pause";
         isPlaying = true;
+      }} else {{
         video1.pause();
         video2.pause();
         playPauseBtn.textContent = "Play";
         isPlaying = false;
+      }}
+    }}
     // Seek both videos.
+    function seekTimeline() {{
+      if (video1.duration) {{
         const percent = timelineRange.value / 100;
         const newTime = video1.duration * percent;
         video1.currentTime = newTime;
         video2.currentTime = newTime;
+      }}
+    }}
     // Update scale and adjust related elements.
+    function updateScale() {{
       const scaleValue = parseFloat(scaleSelect.value);
+      videoContainer.style.transform = `scale(${{scaleValue}})`;
       videoContainer.style.transformOrigin = "top left";
       // Update slider and table widths to the visually scaled size.
       const effectiveWidth = baseWidth * scaleValue;
       timelineRange.style.width = effectiveWidth + "px";
       controlTable.style.width = effectiveWidth + "px";
       updateWipe();
+    }}
     // Update video sources based on selected video set.
+    function updateVideoSet() {{
       const selectedIndex = videoSetSelect.value;
+      if (selectedIndex === "") {{
+        // "No" selected: clear sources or do nothing.
+        video1.removeAttribute("src");
+        video2.removeAttribute("src");
+        video1.load();
+        video2.load();
         return;
+      }}
       const videoSet = videoSets[parseInt(selectedIndex)];
       const area = videoSet.area;
       const date = videoSet.date;
       const sensor = videoSet.sensor;
+      // Use "resolve/main" URLs:
+      const originalFile = `${{BASE_URL}}/${{area}}/video_${{area}}_${{sensor}}um_${{date}}_10min_010fps.mp4`;
+      const enhancedFile = `${{BASE_URL}}/${{area}}/video_${{area}}_${{sensor}}um_${{date}}_01min_100fps.mp4`;
       // Update video sources.
       video1.setAttribute("src", originalFile);
       video2.setAttribute("src", enhancedFile);
       // Reload the videos.
       video1.load();
       video2.load();
+    }}
     // Event listeners.
     playPauseBtn.addEventListener("click", togglePlayPause);
 </html>
 """
+# Build the Gradio app with just an HTML component.
+def build_app():
+    with gr.Blocks() as demo:
+        gr.HTML(html_code)
+    return demo
+demo = build_app()
+if __name__ == "__main__":
+    demo.launch()