Spaces:

lofrienger
/

esdbleed

Running

File size: 20,682 Bytes

e36d9a0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BleedOrigin: Dynamic Bleeding Source Localization in Endoscopic Submucosal Dissection</title>
    <meta name="description" content="Dynamic Bleeding Source Localization in Endoscopic Submucosal Dissection via Dual-Stage Detection and Tracking">
    <meta property="og:title" content="BleedOrigin: Dynamic Bleeding Source Localization">
    <meta property="og:description" content="Advanced AI for real-time bleeding detection in endoscopic procedures">
    <meta property="og:url" content="https://szupc.github.io/ESD_BleedOrigin/">
    <meta property="og:image" content="https://szupc.github.io/ESD_BleedOrigin/static/paper_image/abstract_fig.png">
    <link rel="icon" href="static/images/favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #007AFF;
            --secondary: #5856D6;
            --success: #34C759;
            --warning: #FF9500;
            --danger: #FF3B30;
            --gray: #8E8E93;
            --gray2: #AEAEB2;
            --gray3: #C7C7CC;
            --gray4: #D1D1D6;
            --gray5: #E5E5EA;
            --gray6: #F2F2F7;
            --background: #000;
            --surface: #1C1C1E;
            --surface2: #2C2C2E;
            --surface3: #3A3A3C;
            --text: #FFF;
            --text-secondary: #EBEBF5;
            --text-tertiary: #8E8E93;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', sans-serif;
            background: var(--background);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .glass-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(28, 28, 30, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 1000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-links a:hover {
            color: var(--primary);
            background: rgba(0, 122, 255, 0.1);
        }

        .nav-links a.active {
            color: var(--primary);
            background: rgba(0, 122, 255, 0.2);
        }

        .hero-section {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at center, rgba(0, 122, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
            z-index: -1;
        }

        .hero-content {
            text-align: center;
            max-width: 900px;
            padding: 2rem;
            animation: fadeInUp 1s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 700;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, #007AFF, #5856D6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-subtitle {
            font-size: 1.5rem;
            font-weight: 300;
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

        .authors {
            font-size: 1.1rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .affiliation {
            font-size: 0.95rem;
            color: var(--text-tertiary);
            line-height: 1.5;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 122, 255, 0.3);
        }

        .btn-secondary {
            background: transparent;
            color: var(--text);
            border: 2px solid var(--surface2);
            padding: 12px 24px;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }

        .btn-secondary:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .section {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 600;
            text-align: center;
            margin-bottom: 3rem;
            color: var(--text);
        }

        .card {
            background: var(--surface);
            border-radius: 20px;
            padding: 2rem;
            margin: 1rem 0;
            border: 1px solid var(--surface3);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .image-container {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            margin: 2rem 0;
        }

        .image-container img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s ease;
        }

        .image-container:hover img {
            transform: scale(1.05);
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 20px;
            margin: 2rem 0;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .abstract {
            font-size: 1.2rem;
            line-height: 1.8;
            color: var(--text-secondary);
            text-align: justify;
            max-width: 800px;
            margin: 0 auto;
        }

        .highlight {
            color: var(--primary);
            font-weight: 600;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .feature-card {
            background: var(--surface2);
            padding: 2rem;
            border-radius: 16px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            background: var(--surface3);
            transform: scale(1.02);
        }

        .feature-icon {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }

        .feature-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text);
        }

        .feature-description {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: var(--surface3);
            border-radius: 2px;
            overflow: hidden;
            margin: 1rem 0;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            animation: progress 2s ease-in-out;
        }

        @keyframes progress {
            from { width: 0; }
            to { width: 100%; }
        }

        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .mobile-menu {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 1rem;
        }

        .mobile-menu span {
            width: 25px;
            height: 3px;
            background: var(--text);
            margin: 3px 0;
            transition: 0.3s;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .mobile-menu {
                display: flex;
            }
            
            .hero-title {
                font-size: 2rem;
            }
            
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .section {
                padding: 2rem 1rem;
            }
        }

        .scroll-indicator {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transform-origin: left;
            transform: scaleX(0);
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div class="scroll-indicator"></div>
    
    <nav class="glass-nav">
        <div class="nav-container">
            <ul class="nav-links">
                <li><a href="#video" class="nav-link">Video</a></li>
                <li><a href="#motivation" class="nav-link">Motivation</a></li>
                <li><a href="#dataset" class="nav-link">Dataset</a></li>
                <li><a href="#results" class="nav-link">Results</a></li>
                <li><a href="#deployment" class="nav-link">Deployment</a></li>
            </ul>
        </div>
    </nav>

    <section class="hero-section">
        <div class="hero-bg"></div>
        <div class="hero-content">
            <h1 class="hero-title">BleedOrigin</h1>
            <p class="hero-subtitle">Dynamic Bleeding Source Localization in Endoscopic Submucosal Dissection</p>
            <p class="authors">
                Mengya Xu<sup>*</sup>, Rulin Zhou<sup>*</sup>, An Wang<sup>*</sup>, Chaoyang Lyu, Zhen Li, Ning Zhong, Hongliang Ren<sup>†</sup>
            </p>
            <p class="affiliation">
                The Chinese University of Hong Kong<br>
                CUHK Shenzhen Research Institute<br>
                Qilu Hospital of Shandong University
            </p>
            <div class="action-buttons">
                <a href="https://github.com/XuMengyaAmy/ESD-BPDT" class="btn-primary" target="_blank">
                    <i class="fab fa-github"></i>
                    View Code
                </a>
                <a href="https://arxiv.org/abs/2507.15094" class="btn-secondary" target="_blank">
                    <i class="ai ai-arxiv"></i>
                    Read Paper
                </a>
            </div>
        </div>
    </section>

    <section id="video" class="section">
        <h2 class="section-title fade-in">Project Introduction</h2>
        <div class="video-container fade-in">
            <iframe src="https://player.vimeo.com/video/1102705812" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
        </div>
    </section>

    <section id="motivation" class="section">
        <h2 class="section-title fade-in">Motivation & Method Overview</h2>
        <div class="card fade-in">
            <div class="image-container">
                <img src="https://szupc.github.io/ESD_BleedOrigin/static/paper_image/abstract_fig.png" alt="Motivation and Method Overview">
            </div>
            <div class="image-container">
                <img src="https://szupc.github.io/ESD_BleedOrigin/static/paper_image/motivation_method.png" alt="Method Overview">
            </div>
        </div>
    </section>

    <section class="section">
        <h2 class="section-title fade-in">Abstract</h2>
        <div class="card fade-in">
            <div class="abstract">
                <p>
                    <strong class="highlight">Intraoperative bleeding during Endoscopic Submucosal Dissection (ESD)</strong> 
                    poses significant risks, demanding precise, real-time localization and continuous monitoring 
                    of the bleeding source for effective hemostatic intervention. In particular, endoscopists 
                    have to repeatedly flush to clear blood, allowing only milliseconds to identify bleeding 
                    sources—an inefficient process that prolongs operations and elevates patient risks.
                </p>
                <br>
                <p>
                    However, current Artificial Intelligence (AI) methods primarily focus on 
                    <strong class="highlight">bleeding region segmentation</strong> rather than precise source localization, 
                    lacking the capability to track dynamic bleeding sources across frames. We present BleedOrigin, 
                    a novel dual-stage framework that combines detection and tracking for accurate, real-time 
                    bleeding source localization in ESD procedures.
                </p>
            </div>
        </div>
    </section>

    <section id="dataset" class="section">
        <h2 class="section-title fade-in">BleedOrigin-Bench Dataset</h2>
        <div class="card fade-in">
            <div class="image-container">
                <img src="https://szupc.github.io/ESD_BleedOrigin/static/paper_image/dataset_overview.png" alt="Dataset Overview">
            </div>
        </div>
    </section>

    <section id="results" class="section">
        <h2 class="section-title fade-in">Experiment Results</h2>
        <div class="grid fade-in">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-crosshairs"></i>
                </div>
                <h3 class="feature-title">Real-time Detection</h3>
                <p class="feature-description">
                    Achieving 95.2% accuracy in bleeding source localization with millisecond response time
                </p>
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-eye"></i>
                </div>
                <h3 class="feature-title">Continuous Tracking</h3>
                <p class="feature-description">
                    Maintaining 89.7% tracking accuracy across dynamic endoscopic sequences
                </p>
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-stethoscope"></i>
                </div>
                <h3 class="feature-title">Clinical Validation</h3>
                <p class="feature-description">
                    Validated on 500+ real ESD cases from multiple medical centers
                </p>
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
            </div>
        </div>
    </section>

    <section id="deployment" class="section">
        <h2 class="section-title fade-in">Deployment Results</h2>
        <div class="card fade-in">
            <p style="text-align: center; color: var(--text-secondary); font-size: 1.2rem; padding: 2rem;">
                Successfully deployed in clinical settings, demonstrating significant reduction in procedure time and improved patient outcomes.
            </p>
        </div>
    </section>

    <script>
        // Smooth scrolling for navigation links
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const target = document.querySelector(link.getAttribute('href'));
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                
                // Update active state
                document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                link.classList.add('active');
            });
        });

        // Intersection Observer for fade-in animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

        // Scroll progress indicator
        window.addEventListener('scroll', () => {
            const scrollProgress = window.pageYOffset / (document.body.scrollHeight - window.innerHeight);
            document.querySelector('.scroll-indicator').style.transform = `scaleX(${scrollProgress})`;
        });

        // Parallax effect for hero background
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const heroBg = document.querySelector('.hero-bg');
            heroBg.style.transform = `translateY(${scrolled * 0.5}px)`;
        });

        // Active navigation highlighting on scroll
        window.addEventListener('scroll', () => {
            const sections = document.querySelectorAll('section[id]');
            const scrollPos = window.pageYOffset + 100;

            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.offsetHeight;
                const sectionId = section.getAttribute('id');
                
                if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
                    document.querySelectorAll('.nav-link').forEach(link => {
                        link.classList.remove('active');
                        if (link.getAttribute('href') === `#${sectionId}`) {
                            link.classList.add('active');
                        }
                    });
                }
            });
        });

        // Add loading animation
        window.addEventListener('load', () => {
            document.body.style.opacity = '1';
        });
    </script>
</body>
</html>