Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Multi-frame Fusion for Video Stabilization - CVPR 2024</title> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet"> | |
| <!-- FontAwesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #2563eb; | |
| --secondary-color: #1e40af; | |
| --text-color: #1f2937; | |
| --text-light: #4b5563; | |
| --bg-color: #ffffff; | |
| --bg-alt: #f3f4f6; | |
| --border-radius: 12px; | |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| --max-width: 1000px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| background-color: var(--bg-color); | |
| overflow-x: hidden; | |
| } | |
| /* Header / AnyCoder Link */ | |
| .top-bar { | |
| background: #111827; | |
| color: white; | |
| text-align: center; | |
| padding: 0.5rem; | |
| font-size: 0.875rem; | |
| } | |
| .top-bar a { | |
| color: #60a5fa; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .top-bar a:hover { | |
| color: #93c5fd; | |
| text-decoration: underline; | |
| } | |
| /* Layout Container */ | |
| .container { | |
| max-width: var(--max-width); | |
| margin: 0 auto; | |
| padding: 2rem 1.5rem; | |
| } | |
| /* Hero Section */ | |
| header { | |
| text-align: center; | |
| padding: 3rem 0; | |
| animation: fadeIn 0.8s ease-out; | |
| } | |
| h1 { | |
| font-size: clamp(2rem, 5vw, 3rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(to right, #111827, #374151); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .conference { | |
| display: inline-block; | |
| background: #dbeafe; | |
| color: #1e40af; | |
| font-weight: 600; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.1rem; | |
| } | |
| .authors { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.1rem; | |
| } | |
| .author a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .author a:hover { | |
| color: var(--secondary-color); | |
| text-decoration: underline; | |
| } | |
| .affiliations { | |
| color: var(--text-light); | |
| font-size: 0.95rem; | |
| margin-bottom: 2rem; | |
| } | |
| /* Action Buttons */ | |
| .actions { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| margin-bottom: 3rem; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background-color: #111827; | |
| color: white; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 9999px; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| box-shadow: var(--shadow); | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| background-color: #1f2937; | |
| } | |
| .btn.secondary { | |
| background-color: white; | |
| color: var(--text-color); | |
| border: 1px solid #e5e7eb; | |
| } | |
| .btn.secondary:hover { | |
| background-color: #f9fafb; | |
| } | |
| /* Teaser Video */ | |
| .teaser { | |
| width: 100%; | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| background: #000; | |
| aspect-ratio: 16/9; | |
| position: relative; | |
| margin-bottom: 3rem; | |
| } | |
| .teaser-placeholder { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(45deg, #1f2937, #111827); | |
| color: white; | |
| flex-direction: column; | |
| } | |
| /* Abstract */ | |
| .abstract-section { | |
| background: var(--bg-alt); | |
| padding: 2.5rem; | |
| border-radius: var(--border-radius); | |
| margin-bottom: 3rem; | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| display: inline-block; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .section-title::after { | |
| content: ''; | |
| display: block; | |
| width: 60%; | |
| height: 3px; | |
| background: var(--primary-color); | |
| margin: 0.5rem auto 0; | |
| border-radius: 2px; | |
| } | |
| .abstract-text { | |
| text-align: justify; | |
| font-size: 1.05rem; | |
| color: var(--text-light); | |
| } | |
| /* Method Section */ | |
| .method-section { | |
| margin-bottom: 4rem; | |
| } | |
| .method-image { | |
| width: 100%; | |
| height: auto; | |
| border-radius: var(--border-radius); | |
| margin: 1.5rem 0; | |
| border: 1px solid #e5e7eb; | |
| box-shadow: var(--shadow); | |
| } | |
| /* Comparison Slider */ | |
| .comparison-section { | |
| margin-bottom: 4rem; | |
| } | |
| .comparison-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 800px; | |
| aspect-ratio: 16/9; | |
| margin: 0 auto; | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| cursor: ew-resize; | |
| } | |
| .img-comp-img { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .img-comp-img img { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .img-comp-overlay { | |
| width: 50%; /* Initial position */ | |
| z-index: 2; | |
| border-right: 3px solid white; | |
| } | |
| .slider-handle { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; /* Should match overlay width */ | |
| transform: translate(-50%, -50%); | |
| width: 40px; | |
| height: 40px; | |
| background: white; | |
| border-radius: 50%; | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.5); | |
| pointer-events: none; /* Let clicks pass to container */ | |
| } | |
| .slider-labels { | |
| position: absolute; | |
| bottom: 1rem; | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0 1.5rem; | |
| z-index: 20; | |
| pointer-events: none; | |
| color: white; | |
| font-weight: 700; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.8); | |
| } | |
| /* Results Grid */ | |
| .results-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 3rem; | |
| } | |
| .result-item { | |
| background: white; | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .result-video-placeholder { | |
| width: 100%; | |
| aspect-ratio: 16/9; | |
| background: #eee; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #999; | |
| position: relative; | |
| } | |
| .result-video-placeholder::before { | |
| content: '\f04b'; | |
| font-family: "Font Awesome 6 Free"; | |
| font-weight: 900; | |
| font-size: 2rem; | |
| opacity: 0.5; | |
| } | |
| .result-caption { | |
| padding: 1rem; | |
| text-align: center; | |
| font-weight: 500; | |
| font-size: 0.9rem; | |
| } | |
| /* BibTeX */ | |
| .bibtex-section { | |
| background: #f8fafc; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| border: 1px solid #e2e8f0; | |
| } | |
| pre { | |
| background: #1e293b; | |
| color: #e2e8f0; | |
| padding: 1.5rem; | |
| border-radius: 8px; | |
| overflow-x: auto; | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 0.85rem; | |
| position: relative; | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| top: 0.5rem; | |
| right: 0.5rem; | |
| background: rgba(255,255,255,0.1); | |
| border: none; | |
| color: white; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 0.75rem; | |
| } | |
| .copy-btn:hover { | |
| background: rgba(255,255,255,0.2); | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| padding: 3rem 0; | |
| color: var(--text-light); | |
| font-size: 0.9rem; | |
| border-top: 1px solid #e5e7eb; | |
| margin-top: 3rem; | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| h1 { font-size: 2rem; } | |
| .authors { flex-direction: column; gap: 0.5rem; align-items: center; } | |
| .slider-labels { font-size: 0.8rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="top-bar"> | |
| Built with anycoder — <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">View on Hugging Face</a> | |
| </div> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header> | |
| <div class="conference">CVPR 2024</div> | |
| <h1>3D Multi-frame Fusion for<br>Video Stabilization</h1> | |
| <div class="authors"> | |
| <div class="author"><a href="#">Alex Johnson*</a></div> | |
| <div class="author"><a href="#">Sarah Chen*</a></div> | |
| <div class="author"><a href="#">Michael Roberts</a></div> | |
| <div class="author"><a href="#">Emily Davis</a></div> | |
| <div class="author"><a href="#">David Zhang</a></div> | |
| </div> | |
| <div class="affiliations"> | |
| University of Computer Vision, Tech Institute AI Lab<br> | |
| *Equal Contribution | |
| </div> | |
| <div class="actions"> | |
| <a href="#" class="btn"><i class="fa-regular fa-file-pdf"></i> Paper</a> | |
| <a href="#" class="btn"><i class="fa-brands fa-arxiv"></i> arXiv</a> | |
| <a href="#" class="btn secondary"><i class="fa-brands fa-github"></i> Code</a> | |
| <a href="#" class="btn secondary"><i class="fa-solid fa-database"></i> Dataset</a> | |
| </div> | |
| </header> | |
| <!-- Teaser Video --> | |
| <div class="teaser"> | |
| <!-- In a real scenario, this would be a <video> tag --> | |
| <div class="teaser-placeholder"> | |
| <i class="fa-solid fa-film fa-3x" style="margin-bottom: 1rem;"></i> | |
| <h2>Teaser Video</h2> | |
| <p>Demonstrating robust 3D stabilization across dynamic scenes</p> | |
| <div style="margin-top: 1rem; font-size: 0.8rem; opacity: 0.7;">(Video playback simulated)</div> | |
| </div> | |
| </div> | |
| <!-- Abstract --> | |
| <section class="abstract-section"> | |
| <h2 class="section-title">Abstract</h2> | |
| <p class="abstract-text"> | |
| Video stabilization remains a challenging problem, particularly for handheld footage with large motion and dynamic content. Traditional 2D methods often suffer from distortion and cropping, while existing 3D methods struggle with robustness in complex environments. We present a novel <strong>3D Multi-frame Fusion</strong> framework that leverages scene geometry and temporal consistency to generate high-quality stabilized video. By integrating a dense depth prior with a multi-frame optimization strategy, our method effectively decouples camera motion from scene dynamics. We introduce a differentiable warping module that synthesizes full-frame stabilized views by fusing information from adjacent frames, significantly reducing the need for cropping. Extensive experiments on public benchmarks demonstrate that our approach outperforms state-of-the-art methods in both stability and visual quality metrics. | |
| </p> | |
| </section> | |
| <!-- Method --> | |
| <section class="method-section"> | |
| <h2 class="section-title">Methodology</h2> | |
| <div style="text-align: center; margin-bottom: 1rem;"> | |
| <svg width="100%" height="300" viewBox="0 0 800 300" style="background: white; border-radius: 12px; border: 1px solid #eee;"> | |
| <!-- Simplified SVG representation of a pipeline --> | |
| <rect x="50" y="100" width="100" height="100" rx="10" fill="#dbeafe" stroke="#2563eb" stroke-width="2"/> | |
| <text x="100" y="155" text-anchor="middle" font-size="14" fill="#1e40af">Input Frames</text> | |
| <path d="M160 150 L200 150" stroke="#9ca3af" stroke-width="2" marker-end="url(#arrow)"/> | |
| <rect x="210" y="80" width="120" height="140" rx="10" fill="#fef3c7" stroke="#d97706" stroke-width="2"/> | |
| <text x="270" y="145" text-anchor="middle" font-size="14" fill="#92400e">3D Motion</text> | |
| <text x="270" y="165" text-anchor="middle" font-size="14" fill="#92400e">Estimation</text> | |
| <path d="M340 150 L380 150" stroke="#9ca3af" stroke-width="2" marker-end="url(#arrow)"/> | |
| <rect x="390" y="80" width="140" height="140" rx="10" fill="#d1fae5" stroke="#059669" stroke-width="2"/> | |
| <text x="460" y="145" text-anchor="middle" font-size="14" fill="#065f46">Multi-frame</text> | |
| <text x="460" y="165" text-anchor="middle" font-size="14" fill="#065f46">Fusion Module</text> | |
| <path d="M540 150 L580 150" stroke="#9ca3af" stroke-width="2" marker-end="url(#arrow)"/> | |
| <rect x="590" y="100" width="120" height="100" rx="10" fill="#f3e8ff" stroke="#7c3aed" stroke-width="2"/> | |
| <text x="650" y="155" text-anchor="middle" font-size="14" fill="#5b21b6">Stabilized Output</text> | |
| <defs> | |
| <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth"> | |
| <path d="M0,0 L0,6 L9,3 z" fill="#9ca3af" /> | |
| </marker> | |
| </defs> | |
| </svg> | |
| </div> | |
| <p class="abstract-text"> | |
| Our pipeline consists of three main stages: (1) <strong>Robust 3D Trajectory Estimation</strong> using a learned depth prior to handle dynamic objects; (2) <strong>Optimal Path Planning</strong> that smooths the camera trajectory while respecting field-of-view constraints; and (3) <strong>Neural Multi-frame Rendering</strong>, which fuses pixels from temporal neighbors to fill in missing regions caused by stabilization warping, ensuring full-frame output without cropping. | |
| </p> | |
| </section> | |
| <!-- Interactive Comparison --> | |
| <section class="comparison-section"> | |
| <h2 class="section-title">Visual Comparison</h2> | |
| <p style="text-align: center; margin-bottom: 2rem; color: var(--text-light);">Drag the slider to compare Input vs. Our Stabilized Result.</p> | |
| <div class="comparison-container" id="comparison1"> | |
| <div class="img-comp-img"> | |
| <!-- Placeholder for Stabilized Result (Right side reveals this) --> | |
| <div style="width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover;"> | |
| <div style="position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: #4ade80; padding: 5px 10px; border-radius: 4px; font-weight: bold;">Ours (Stabilized)</div> | |
| </div> | |
| </div> | |
| <div class="img-comp-img img-comp-overlay"> | |
| <!-- Placeholder for Input (Left side) --> | |
| <div style="width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover; filter: blur(4px) hue-rotate(15deg);"> | |
| <div style="position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 4px; font-weight: bold;">Input (Shaky)</div> | |
| </div> | |
| </div> | |
| <div class="slider-handle"> | |
| <i class="fa-solid fa-arrows-left-right" style="color: #333;"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Qualitative Results --> | |
| <section> | |
| <h2 class="section-title">Qualitative Results</h2> | |
| <div class="results-grid"> | |
| <div class="result-item"> | |
| <div class="result-video-placeholder"></div> | |
| <div class="result-caption">Walking Scene (Low Light)</div> | |
| </div> | |
| <div class="result-item"> | |
| <div class="result-video-placeholder"></div> | |
| <div class="result-caption">Running Scene (Dynamic Objects)</div> | |
| </div> | |
| <div class="result-item"> | |
| <div class="result-video-placeholder"></div> | |
| <div class="result-caption">Panning Shot (Parallax)</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- BibTeX --> | |
| <section class="bibtex-section"> | |
| <h2 class="section-title" style="margin-bottom: 1rem;">Citation</h2> | |
| <pre><button class="copy-btn" onclick="copyBibtex()">Copy</button>@inproceedings{johnson20243dmultiframe, | |
| title={3D Multi-frame Fusion for Video Stabilization}, | |
| author={Johnson, Alex and Chen, Sarah and Roberts, Michael and Davis, Emily and Zhang, David}, | |
| booktitle={Proceedings of the IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR)}, | |
| year={2024} | |
| }</pre> | |
| </section> | |
| <footer> | |
| <div class="social-links" style="margin-bottom: 1rem;"> | |
| <a href="#" style="color: inherit; margin: 0 10px; font-size: 1.2rem;"><i class="fa-brands fa-twitter"></i></a> | |
| <a href="#" style="color: inherit; margin: 0 10px; font-size: 1.2rem;"><i class="fa-brands fa-github"></i></a> | |
| <a href="#" style="color: inherit; margin: 0 10px; font-size: 1.2rem;"><i class="fa-solid fa-envelope"></i></a> | |
| </div> | |
| <p>© 2024 Project Team. All rights reserved.</p> | |
| <p>The website template is designed for academic project pages.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Image Comparison Slider Logic | |
| function initComparisons() { | |
| var x, i; | |
| /* Find all elements with an "overlay" class: */ | |
| x = document.getElementsByClassName("img-comp-overlay"); | |
| for (i = 0; i < x.length; i++) { | |
| /* Once for each "overlay" element: | |
| pass the "overlay" element as a parameter when executing the compareImages function: */ | |
| compareImages(x[i]); | |
| } | |
| function compareImages(img) { | |
| var slider, clicked = 0, w, h; | |
| /* Get the width and height of the img element */ | |
| w = img.offsetWidth; | |
| h = img.offsetHeight; | |
| /* Set the width of the img element to 50%: */ | |
| img.style.width = (w / 2) + "px"; | |
| /* Create slider handle: */ | |
| // Note: The handle is already in HTML, we just need to position it based on logic | |
| // But for pure JS resizing, let's find the handle sibling | |
| var container = img.parentElement; | |
| var handle = container.querySelector('.slider-handle'); | |
| /* Execute a function when the mouse button is pressed: */ | |
| container.addEventListener("mousedown", slideReady); | |
| /* And another function when the mouse button is released: */ | |
| window.addEventListener("mouseup", slideFinish); | |
| /* Or touched (for touch screens: */ | |
| container.addEventListener("touchstart", slideReady); | |
| /* And released (for touch screens: */ | |
| window.addEventListener("touchend", slideFinish); | |
| function slideReady(e) { | |
| /* Prevent any other actions that may occur when moving over the image: */ | |
| e.preventDefault(); | |
| /* The slider is now clicked and ready to move: */ | |
| clicked = 1; | |
| /* Execute a function when the slider is moved: */ | |
| window.addEventListener("mousemove", slideMove); | |
| window.addEventListener("touchmove", slideMove); | |
| } | |
| function slideFinish() { | |
| /* The slider is no longer clicked: */ | |
| clicked = 0; | |
| } | |
| function slideMove(e) { | |
| var pos; | |
| /* If the slider is no longer clicked, exit this function: */ | |
| if (clicked == 0) return false; | |
| /* Get the cursor's x position: */ | |
| pos = getCursorPos(e); | |
| /* Prevent the slider from being positioned outside the image: */ | |
| if (pos < 0) pos = 0; | |
| if (pos > w) pos = w; | |
| /* Execute a function that will resize the overlay image according to the cursor: */ | |
| slide(pos); | |
| } | |
| function getCursorPos(e) { | |
| var a, x = 0; | |
| e = (e.changedTouches) ? e.changedTouches[0] : e; | |
| /* Get the x positions of the image: */ | |
| a = img.getBoundingClientRect(); | |
| /* Calculate the cursor's x coordinate, relative to the image: */ | |
| x = e.pageX - a.left; | |
| /* Consider any page scrolling: */ | |
| x = x - window.pageXOffset; | |
| return x; | |
| } | |
| function slide(x) { | |
| /* Resize the image: */ | |
| img.style.width = x + "px"; | |
| /* Position the slider: */ | |
| handle.style.left = (x / w * 100) + "%"; | |
| } | |
| } | |
| } | |
| // Initialize comparison sliders | |
| initComparisons(); | |
| // Copy BibTeX Function | |
| function copyBibtex() { | |
| const text = document.querySelector('pre').innerText.replace('Copy', ''); // Remove button text | |
| navigator.clipboard.writeText(text).then(() => { | |
| const btn = document.querySelector('.copy-btn'); | |
| const originalText = btn.innerText; | |
| btn.innerText = 'Copied!'; | |
| setTimeout(() => { | |
| btn.innerText = originalText; | |
| }, 2000); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |