Spaces:

hyungonryu
/

GoeStationaryVFI

Sleeping

File size: 9,468 Bytes

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>
  <center>
    <h1>Geostationary Satellite Time Interpolation</h1>
    <h4>Hyun Gon Ryu | NVIDIA AI Technology Center Korea</h4>
  </center>
  <table>
    <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>
  </table>

  <!-- Video set selection -->
  <table id="videoSetTable">
    <tr>
      <td>
        Select Video Set:
        <select id="videoSetSelect">
          <option value="">No</option>
          <option value="0">TongA Case | 20220116 | ir105</option>
          <option value="1">SouthAsia | 20240820 | ir105</option>
          <option value="2">EastAsia | 20240820 | ir105</option>
          <option value="3">SouthWestAsia | 20240820 | ir105</option>
        </select>
      </td>
    </tr>
  </table>

  <table id="controlTable">
    <!-- 1st Row: Play button, Speed, Screen Size -->
    <tr>
      <td>
        <button id="playPauseBtn">PLAY</button>
      </td>
      <td>
        Screen Size:
        <select id="scaleSelect">
          <option value="0.5">0.5</option>
          <option value="1" selected>1</option>
          <option value="1.5">1.5</option>
          <option value="2">2</option>
        </select>
      </td>
      <td>
        Speed:
        <select id="speedSelect">
          <option value="0.1">0.1</option>
          <option value="0.2">0.2</option>
          <option value="0.3">0.3</option>
          <option value="0.4">0.4</option>
          <option value="0.5">0.5</option>
          <option value="0.6">0.6</option>
          <option value="0.7">0.7</option>
          <option value="0.8">0.8</option>
          <option value="0.9">0.9</option>
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="4">4</option>
        </select>
      </td>
    </tr>

    <!-- 2nd Row: Wipe Slider -->
    <tr>
      <td colspan="3">
        <input type="range" id="wipeRange" class="slider" min="0" max="1" step="0.01" value="0.5">
      </td>
    </tr>

    <!-- 3rd Row: Timeline Slider -->
    <tr>
      <td colspan="3">
        <input type="range" id="timelineRange" class="timeline-slider" min="0" max="100" step="0.1" value="0">
      </td>
    </tr>

    <!-- 4th Row: Video Area -->
    <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>
      </td>
    </tr>
  </table>

  <script>
    // 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.
    const video1 = document.getElementById("video1");
    const video2 = document.getElementById("video2");
    const playPauseBtn = document.getElementById("playPauseBtn");
    const wipeRange = document.getElementById("wipeRange");
    const timelineRange = document.getElementById("timelineRange");
    const scaleSelect = document.getElementById("scaleSelect");
    const speedSelect = document.getElementById("speedSelect");
    const videoContainer = document.getElementById("videoContainer");
    const wipeLine = document.getElementById("wipeLine");
    const controlTable = document.getElementById("controlTable");
    const videoSetSelect = document.getElementById("videoSetSelect");

    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;
      wipeRange.style.width = effectiveWidth + "px";
      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);
    wipeRange.addEventListener("input", updateWipe);
    timelineRange.addEventListener("input", seekTimeline);
    scaleSelect.addEventListener("change", updateScale);
    speedSelect.addEventListener("change", updateSpeed);
    videoSetSelect.addEventListener("change", updateVideoSet);

    // Initial setup.
    updateWipe();
    updateScale();
    updateSpeed();
  </script>
</body>
</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()