Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- Meta tags for social media banners --> | |
| <meta name="description" content="UniDisc: Unified Multimodal Discrete Diffusion"> | |
| <meta property="og:title" content="UniDisc: Unified Multimodal Discrete Diffusion"/> | |
| <meta property="og:description" content="UniDisc is a unified multimodal discrete diffusion model capable of jointly processing text and images for various tasks."/> | |
| <meta property="og:url" content="https://yourwebsite.com"/> | |
| <!-- Path to banner image --> | |
| <meta property="og:image" content="static/images/banner_image.webp" /> | |
| <meta property="og:image:width" content="1200"/> | |
| <meta property="og:image:height" content="630"/> | |
| <meta name="twitter:title" content="UniDisc: Unified Multimodal Discrete Diffusion"> | |
| <meta name="twitter:description" content="UniDisc is a unified multimodal discrete diffusion model capable of jointly processing text and images for various tasks."> | |
| <!-- Path to banner image --> | |
| <meta name="twitter:image" content="static/images/banner_image.webp"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <!-- Keywords --> | |
| <meta name="keywords" content="UniDisc, Multimodal, Discrete Diffusion, Machine Learning, AI, Text Generation, Image Generation"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>UniDisc: Unified Multimodal Discrete Diffusion</title> | |
| <!-- <link rel="icon" type="image/x-icon" href="static/images/favicon.ico"> --> | |
| <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" | |
| rel="stylesheet"> | |
| <link rel="stylesheet" href="static/css/bulma.min.css"> | |
| <link rel="stylesheet" href="static/css/bulma-carousel.min.css"> | |
| <link rel="stylesheet" href="static/css/bulma-slider.min.css"> | |
| <link rel="stylesheet" href="static/css/fontawesome.all.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css"> | |
| <link rel="stylesheet" href="static/css/index.css"> | |
| <style> | |
| .container p { | |
| padding-top: 1rem; | |
| } | |
| /* Add new custom column class */ | |
| .is-five-sixths { | |
| flex: none; | |
| width: 87.5%; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| a.anchor-link { | |
| margin-left: 0.15em; | |
| color: inherit; | |
| text-decoration: none; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| font-size: 0.6em; | |
| position: relative; | |
| top: -0.15em; | |
| cursor: pointer; | |
| } | |
| /* Show the anchor link on hover */ | |
| h2[id]:hover a.anchor-link { | |
| opacity: 1; | |
| } | |
| .progressive-image-container { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progressive-image { | |
| opacity: 0; | |
| transition: opacity 0.3s ease-in; | |
| } | |
| .progressive-image.loaded { | |
| opacity: 1; | |
| } | |
| .image-placeholder { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #f0f0f0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #3273dc; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Update the cached-sentence-builder width and layout */ | |
| #cached-section .cached-sentence-builder { | |
| flex-grow: 1; | |
| width: 100%; /* Changed from fixed 512px to 100% */ | |
| padding: 0px 23px; /* Keep existing padding */ | |
| max-width: 512px; /* Add max-width that matches the grid container */ | |
| } | |
| /* Update the current sentence display */ | |
| #cached-section #cached-current-sentence { | |
| margin-top: 10px; | |
| padding: 15px; | |
| background-color: #f5f5f5; | |
| border-radius: 8px; | |
| min-height: 30px; | |
| font-family: monospace; | |
| width: 100%; /* Ensure it takes full width of its container */ | |
| box-sizing: border-box; /* Include padding in width calculation */ | |
| white-space: pre-wrap; /* Allow text to wrap */ | |
| word-break: break-word; /* Break long words if needed */ | |
| } | |
| /* Add styles for the response text */ | |
| #cached-section #cached-response-text { | |
| margin-top: 8px; | |
| padding: 15px; | |
| background-color: #e6f7ff; | |
| border-radius: 8px; | |
| min-height: 30px; | |
| font-family: monospace; | |
| width: 100%; | |
| box-sizing: border-box; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| display: block; /* Changed from none to block */ | |
| } | |
| /* Adjust the main container spacing */ | |
| #cached-section .cached-main-container { | |
| display: flex; | |
| max-width: 1050px; /* Reduced from 1200px */ | |
| margin: 0 auto; /* Center the container */ | |
| gap: 40px; /* Increased from 20px for more balanced spacing */ | |
| align-items: flex-start; | |
| padding: 0 20px; /* Add padding to prevent edge touching */ | |
| } | |
| #cached-section .cached-grid-container { | |
| position: relative; | |
| width: 512px; | |
| height: 512px; | |
| } | |
| /* Add styles for the reset buttons */ | |
| #cached-section .cached-reset-buttons { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 5px; | |
| margin-bottom: 15px; | |
| justify-content: flex-start; | |
| flex-wrap: wrap; /* Changed from nowrap to wrap to handle different screen sizes */ | |
| overflow-x: visible; /* Changed from auto to visible since we're allowing wrapping */ | |
| padding-bottom: 5px; | |
| width: 100%; /* Added to ensure it takes full width */ | |
| } | |
| #cached-section .cached-reset-button { | |
| padding: 8px 15px; | |
| background-color: #f5f5f5; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: all 0.2s ease; | |
| } | |
| #cached-section .cached-reset-button:hover { | |
| background-color: #e0e0e0; | |
| } | |
| /* Add styles for the grey overlay */ | |
| #cached-section .cached-grey-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #888888; /* Solid grey color */ | |
| z-index: 10; /* Ensure it's above the grid */ | |
| display: none; /* Initially hidden */ | |
| } | |
| /* Scoped styles for the cached section */ | |
| #cached-section { | |
| font-family: Arial, sans-serif; | |
| } | |
| /* Restore bolder text for headers and word options */ | |
| #cached-section h2, | |
| #cached-section .cached-word-option { | |
| font-weight: 700; | |
| } | |
| #cached-section .cached-main-container { | |
| display: flex; | |
| max-width: 1200px; /* Increased width to accommodate side-by-side layout */ | |
| margin: 0 auto; | |
| gap: 40px; | |
| align-items: flex-start; | |
| padding: 0 20px; | |
| } | |
| /* Updated to have input and output sides */ | |
| #cached-section .cached-side { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; /* Reduced from 20px */ | |
| width: 50%; | |
| } | |
| /* Left side (input) - left aligned */ | |
| #cached-section .cached-input-side { | |
| align-items: flex-start; | |
| } | |
| /* Right side (output) - center aligned */ | |
| #cached-section .cached-output-side { | |
| align-items: center; | |
| } | |
| #cached-section .cached-side-title { | |
| text-align: center; | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| font-size: 1.2rem; | |
| width: 100%; | |
| } | |
| #cached-section .cached-grid-container { | |
| position: relative; | |
| width: 512px; | |
| height: 512px; | |
| margin: 0 auto; | |
| } | |
| #cached-section .cached-image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| #cached-section .cached-grid { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: grid; | |
| /* TODO: Grid define */ | |
| grid-template-columns: repeat(8, 1fr); | |
| grid-template-rows: repeat(8, 1fr); | |
| } | |
| #cached-section .cached-grid-cell { | |
| border: 1px solid black; | |
| transition: background-color 0.1s ease; | |
| } | |
| #cached-section .cached-highlighted { | |
| background-color: rgba(128, 128, 128, 0.9); | |
| } | |
| #cached-section .cached-sentence-builder { | |
| width: 512px; /* Match width with image container */ | |
| padding: 0px 23px; /* Reduced top padding from 20px to 10px */ | |
| } | |
| #cached-section .cached-output-container { | |
| width: 512px; /* Match width with image container */ | |
| } | |
| #cached-section .cached-sentence-row { | |
| margin: 10px 0; /* Reduced from 15px to 10px */ | |
| display: flex; | |
| gap: 15px; | |
| flex-wrap: wrap; | |
| justify-content: flex-start; /* Align items to the start of the row */ | |
| width: 100%; /* Ensure the row takes full width of its container */ | |
| } | |
| #cached-section .cached-word-option { | |
| padding: 5px 8px; /* Reduced padding from 12px 20px */ | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| color: #666; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| background: #f5f5f5; | |
| margin-bottom: 5px; /* Add bottom margin for better spacing when wrapped */ | |
| font-size: 0.8rem; /* Added smaller font size */ | |
| } | |
| #cached-section .cached-word-option:hover { | |
| color: #000; | |
| font-weight: 600; | |
| background: #e5e5e5; | |
| } | |
| #cached-section .cached-word-option.cached-selected { | |
| color: #886a6a; | |
| font-weight: 600; | |
| background: #e0e0e0; | |
| } | |
| #cached-section .cached-text-display { | |
| margin-top: 20px; | |
| padding: 15px; | |
| background-color: #f5f5f5; | |
| border-radius: 8px; | |
| min-height: 30px; | |
| font-family: monospace; | |
| width: 100%; | |
| box-sizing: border-box; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| #cached-section .cached-output-display { | |
| margin-top: 10px; | |
| padding: 15px; | |
| background-color: #e6f7ff; | |
| border-radius: 8px; | |
| min-height: 30px; | |
| font-family: monospace; | |
| width: 100%; | |
| box-sizing: border-box; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| #cached-section .cached-grey-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #888888; | |
| z-index: 10; | |
| display: none; | |
| } | |
| #cached-section .cached-reset-buttons { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 5px; | |
| margin-bottom: 15px; | |
| justify-content: flex-start; | |
| flex-wrap: nowrap; /* Prevent wrapping */ | |
| overflow-x: auto; /* Allow horizontal scrolling if needed */ | |
| padding-bottom: 5px; /* Add space for potential scrollbar */ | |
| } | |
| #cached-section .cached-reset-button { | |
| padding: 8px 15px; | |
| background-color: #f5f5f5; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| transition: all 0.2s ease; | |
| } | |
| #cached-section .cached-reset-button:hover { | |
| background-color: #e0e0e0; | |
| } | |
| #cached-section .cached-mask-size-container { | |
| display: flex; | |
| align-items: center; | |
| margin-left: 10px; | |
| } | |
| #cached-section .cached-mask-size-label { | |
| font-size: 12px; | |
| margin-right: 5px; | |
| white-space: nowrap; | |
| } | |
| #cached-section .cached-mask-size-input { | |
| width: 50px; | |
| padding: 6px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| text-align: center; | |
| } | |
| #cached-section .cached-output-container h2 { | |
| margin-top: 5px; | |
| /* margin-bottom: 10px; */ | |
| } | |
| /* Add new styles for the sentence groups layout */ | |
| #cached-section .cached-sentence-group { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 0px; | |
| flex-wrap: wrap; | |
| } | |
| #cached-section .cached-sentence-row { | |
| margin: 4px 0px; /* Reduced from 10px to 5px */ | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| justify-content: flex-start; | |
| width: calc(50% - 10px); /* Take up roughly half minus gap space */ | |
| min-width: 200px; /* Ensure minimum width for readability */ | |
| } | |
| @media (max-width: 768px) { | |
| #cached-section .cached-sentence-row { | |
| width: 100%; /* Full width on small screens */ | |
| } | |
| } | |
| </style> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script> | |
| <script defer src="static/js/fontawesome.all.min.js"></script> | |
| <script src="static/js/bulma-carousel.min.js"></script> | |
| <script src="static/js/bulma-slider.min.js"></script> | |
| <script src="static/js/index.js"></script> | |
| <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> | |
| </head> | |
| <body> | |
| <section id="cached-section" class="section"> | |
| <div class="cached-main-container"> | |
| <div class="cached-side cached-input-side"> | |
| <div class="cached-side-title">Input</div> | |
| <div class="cached-grid-container"> | |
| <img src="static/images/giraffe.png" alt="Input Image" class="cached-image" id="cached-input-image"> | |
| <div id="cached-grid" class="cached-grid"></div> | |
| <div id="cached-grey-overlay" class="cached-grey-overlay"></div> | |
| </div> | |
| <div class="cached-sentence-builder"> | |
| <div class="cached-reset-buttons"> | |
| <button id="cached-reset-image" class="cached-reset-button">Restore Image</button> | |
| <button id="cached-clear-mask" class="cached-reset-button">Clear Mask</button> | |
| <button id="cached-remove-image" class="cached-reset-button">Fully Mask</button> | |
| <div class="cached-mask-size-container" style="display: none;"> | |
| <label for="cached-mask-size" class="cached-mask-size-label">Mask Size:</label> | |
| <input type="number" id="cached-mask-size" class="cached-mask-size-input" min="2" max="8" value="7"> | |
| </div> | |
| </div> | |
| <h2 style="margin-bottom: 5px;">Build your sentence:</h2> | |
| <div class="cached-sentence-group"> | |
| <div class="cached-sentence-row"> | |
| <span class="cached-word-option" data-row="0" data-word="a tall">a tall</span> | |
| <span class="cached-word-option" data-row="0" data-word="a happy">a happy</span> | |
| <span class="cached-word-option" data-row="0" data-word="<mask><mask><mask>"><mask></span> | |
| </div> | |
| <div class="cached-sentence-row"> | |
| <span class="cached-word-option" data-row="1" data-word="giraffe">giraffe</span> | |
| <span class="cached-word-option" data-row="1" data-word="puppy">puppy</span> | |
| <span class="cached-word-option" data-row="1" data-word="<mask><mask><mask>"><mask></span> | |
| </div> | |
| </div> | |
| <div class="cached-sentence-group"> | |
| <div class="cached-sentence-row"> | |
| <span class="cached-word-option" data-row="2" data-word="wearing a">wearing a</span> | |
| <span class="cached-word-option" data-row="2" data-word="with a">with a</span> | |
| <span class="cached-word-option" data-row="2" data-word="<mask><mask>"><mask></span> | |
| </div> | |
| <div class="cached-sentence-row"> | |
| <span class="cached-word-option" data-row="3" data-word="green shirt">green shirt</span> | |
| <span class="cached-word-option" data-row="3" data-word="top hat">top hat</span> | |
| <span class="cached-word-option" data-row="3" data-word="<mask><mask>"><mask></span> | |
| </div> | |
| </div> | |
| <div class="cached-sentence-group"> | |
| <div class="cached-sentence-row"> | |
| <span class="cached-word-option" data-row="4" data-word=", detailed portrait">detailed</span> | |
| <span class="cached-word-option" data-row="4" data-word=", cartoon style">cartoon</span> | |
| <span class="cached-word-option" data-row="4" data-word="<mask><mask>"><mask></span> | |
| </div> | |
| </div> | |
| <div id="cached-current-sentence" class="cached-text-display">Click word pairs above to build your sentence!</div> | |
| </div> | |
| </div> | |
| <!-- Right side - Output --> | |
| <div class="cached-side cached-output-side"> | |
| <div class="cached-side-title">Output</div> | |
| <div class="cached-grid-container"> | |
| <img src="static/images/giraffe.png" alt="Output Image" class="cached-image" id="cached-output-image"> | |
| <div id="cached-output-overlay" class="cached-grey-overlay" style="display: block;"></div> | |
| </div> | |
| <div class="cached-output-container"> | |
| <h2>Model Response:</h2> | |
| <div id="cached-response-text" class="cached-output-display">Select words and interact with the input image to see results here.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="static/js/cached_section.js"></script> | |
| </section> | |
| <!-- BibTeX Citation --> | |
| <section class="section" id="BibTeX"> | |
| <div class="container is-max-desktop content"> | |
| <h2 class="title">BibTeX</h2> | |
| <pre><code>@article{swerdlow2025unidisc, | |
| title = {Unified Multimodal Discrete Diffusion}, | |
| author = {Swerdlow, Alexander and Prabhudesai, Mihir and Gandhi, Siddharth and Pathak, Deepak and Fragkiadaki, Katerina}, | |
| journal = {arXiv preprint arXiv:2503.20853}, | |
| year = {2025}, | |
| doi = {10.48550/arXiv.2503.20853}, | |
| }</code></pre> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="columns is-centered"> | |
| <div class="column is-8"> | |
| <div class="content"> | |
| <p> | |
| This page was built using the <a href="https://github.com/eliahuhorwitz/Academic-project-page-template" target="_blank">Academic Project Page Template</a> which was adopted from the <a href="https://nerfies.github.io" target="_blank">Nerfies</a> project page. This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative | |
| Commons Attribution-ShareAlike 4.0 International License</a>. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |