1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ICML 2026 Paper Explorer</title> 7 <meta name="description" content="Explore accepted papers and events for ICML 2026. Browse by type, search by title or author, and read abstracts."> 8 <link rel="preconnect" href="https://fonts.googleapis.com"> 9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 <link href="https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> 11 12 <!-- KaTeX for LaTeX Math Rendering --> 13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"> 14
14<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
14 15
15<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"></script>
15 16 <style> 17 :root { 18 --bg-color: #0b0c10; 19 --surface-color: #1f2833; 20 --surface-color-light: #2c3a4a; 21 --text-main: #e2e8f0; 22 --text-muted: #94a3b8; 23 --accent-primary: #66fcf1; 24 --accent-secondary: #45a29e; 25 --status-oral: #fbbf24; 26 --status-spotlight: #c084fc; 27 --status-poster: #60a5fa; 28 --status-workshop: #f472b6; 29 --status-tutorial: #34d399; 30 --border-radius: 12px; 31 --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 32 } 33 * { box-sizing: border-box; margin: 0; padding: 0; } 34 body { 35 font-family: 'Inter', sans-serif; 36 background-color: var(--bg-color); 37 color: var(--text-main); 38 min-height: 100vh; 39 line-height: 1.6; 40 overflow-x: hidden; 41 background-image: 42 radial-gradient(circle at 15% 50%, rgba(102,252,241,0.05) 0%, transparent 50%), 43 radial-gradient(circle at 85% 30%, rgba(192,132,252,0.05) 0%, transparent 50%); 44 } 45 h1, h2, h3 { font-family: 'Clash Display', sans-serif; } 46 47 header { 48 position: sticky; top: 0; z-index: 100; 49 background: rgba(11,12,16,0.75); 50 backdrop-filter: blur(12px); 51 -webkit-backdrop-filter: blur(12px); 52 border-bottom: 1px solid rgba(255,255,255,0.05); 53 padding: 1.5rem 2rem; 54 display: flex; align-items: center; justify-content: space-between; 55 } 56 .logo-container { display: flex; align-items: center; gap: 1rem; } 57 .logo-img { height: 40px; object-fit: contain; } 58 .logo-text h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.5px; color: white; } 59 .logo-text p { font-size: 0.85rem; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } 60 61 main { max-width: 1400px; margin: 0 auto; padding: 2rem; } 62 63 .controls-section { 64 background: var(--surface-color); 65 border-radius: var(--border-radius); 66 padding: 1.5rem 2rem; 67 margin-bottom: 2rem; 68 display: flex; gap: 1.5rem; flex-wrap: wrap; 69 box-shadow: 0 10px 30px rgba(0,0,0,0.3); 70 border: 1px solid rgba(255,255,255,0.03); 71 animation: slideDown 0.6s cubic-bezier(0.16,1,0.3,1) forwards; 72 opacity: 0; transform: translateY(-20px); 73 } 74 .control-group { flex: 1; min-width: 200px; } 75 .control-group label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; font-weight: 500; } 76 input, select { 77 width: 100%; background: rgba(0,0,0,0.2); 78 border: 1px solid rgba(255,255,255,0.1); 79 color: white; padding: 0.75rem 1rem; 80 border-radius: 8px; font-family: inherit; font-size: 0.95rem; 81 transition: var(--transition); 82 } 83 input:focus, select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(102,252,241,0.2); } 84 input[type="checkbox"] { width: auto; padding: 0; margin: 0; border: none; background: transparent; accent-color: var(--accent-primary); cursor: pointer; } 85 .artifact-filters { display: flex; gap: 1rem; flex-wrap: wrap; padding-top: 0.35rem; } 86 .artifact-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--text-main); cursor: pointer; white-space: nowrap; } 87 88 .table-container { 89 width: 100%; overflow-x: auto; 90 background: rgba(31,40,51,0.4); 91 border-radius: var(--border-radius); 92 border: 1px solid rgba(255,255,255,0.05); 93 box-shadow: 0 15px 35px rgba(0,0,0,0.4); 94 backdrop-filter: blur(10px); 95 opacity: 0; animation: fadeIn 0.8s 0.2s forwards; 96 } 97 table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; } 98 th { 99 background: rgba(255,255,255,0.02); 100 padding: 1.25rem 1.5rem; font-weight: 600; font-size: 0.85rem; 101 text-transform: uppercase; letter-spacing: 1px; 102 color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.05); 103 white-space: nowrap; 104 } 105 td { 106 padding: 1.25rem 1.5rem; 107 border-bottom: 1px solid rgba(255,255,255,0.03); 108 vertical-align: top; transition: var(--transition); 109 } 110 tbody tr { transition: var(--transition); cursor: pointer; position: relative; } 111 tbody tr:hover { background: rgba(255,255,255,0.03); transform: scale(1.002); } 112 tbody tr:hover td { border-bottom-color: transparent; } 113 114 .paper-title { font-size: 1.05rem; font-weight: 600; color: white; margin-bottom: 0.4rem; display: inline-block; } 115 .paper-authors { font-size: 0.85rem; color: var(--text-muted); } 116 .paper-abstract-preview { 117 font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; 118 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 119 overflow: hidden; display: none; 120 } 121 tr.expanded { background: rgba(102,252,241,0.03); border-left: 2px solid var(--accent-primary); } 122 tr.expanded .paper-abstract-preview { 123 display: block; -webkit-line-clamp: unset; color: #cbd5e1; 124 padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 8px; margin-top: 0.75rem; 125 } 126 tr.expanded .lay-summary { 127 display: block; color: #a5b4c8; 128 padding: 0.75rem 1rem; background: rgba(69,162,158,0.08); 129 border-radius: 8px; margin-top: 0.5rem; border-left: 3px solid var(--accent-secondary); 130 } 131 .lay-summary { display: none; font-size: 0.85rem; } 132 .lay-summary-label { font-weight: 600; color: var(--accent-secondary); margin-bottom: 0.25rem; display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; } 133 134 .badge { 135 display: inline-flex; align-items: center; 136 padding: 0.35rem 0.75rem; border-radius: 20px; 137 font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; 138 } 139 .badge-poster { background: rgba(96,165,250,0.15); color: var(--status-poster); border: 1px solid rgba(96,165,250,0.3); } 140 .badge-workshop { background: rgba(244,114,182,0.15); color: var(--status-workshop); border: 1px solid rgba(244,114,182,0.3); } 141 .badge-tutorial { background: rgba(52,211,153,0.15); color: var(--status-tutorial); border: 1px solid rgba(52,211,153,0.3); } 142 .badge-oral { background: rgba(251,191,36,0.15); color: var(--status-oral); border: 1px solid rgba(251,191,36,0.3); } 143 .badge-spotlight { background: rgba(192,132,252,0.15); color: var(--status-spotlight); border: 1px solid rgba(192,132,252,0.3); } 144 .badge-default { background: rgba(148,163,184,0.15); color: var(--text-muted); border: 1px solid rgba(148,163,184,0.3); } 145 146 .icon-link { 147 display: inline-flex; align-items: center; justify-content: center; 148 padding: 0.3rem 0.6rem; 149 background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); 150 border-radius: 6px; color: var(--accent-primary); 151 text-decoration: none; font-size: 0.75rem; font-weight: 500; 152 white-space: nowrap; transition: var(--transition); 153 } 154 .icon-link:hover { background: rgba(102,252,241,0.1); border-color: rgba(102,252,241,0.3); transform: translateY(-1px); } 155 156 .loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 0; } 157 .loader { width: 48px; height: 48px; border: 3px solid rgba(102,252,241,0.2); border-radius: 50%; border-top-color: var(--accent-primary); animation: spin 1s ease-in-out infinite; margin-bottom: 1rem; } 158 .empty-state { padding: 4rem 2rem; text-align: center; color: var(--text-muted); display: none; } 159 160 /* Pagination */ 161 .pagination { 162 display: flex; align-items: center; justify-content: center; gap: 0.5rem; 163 padding: 1.5rem 2rem; flex-wrap: wrap; 164 } 165 .pagination button { 166 background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); 167 color: var(--text-main); padding: 0.5rem 1rem; border-radius: 8px; 168 cursor: pointer; font-family: inherit; font-size: 0.9rem; transition: var(--transition); 169 } 170 .pagination button:hover:not(:disabled) { background: rgba(102,252,241,0.1); border-color: var(--accent-primary); color: white; } 171 .pagination button:disabled { opacity: 0.3;
171 cursor: not-allowed; } 172 .pagination button.active { background: var(--accent-primary); color: #0b0c10; font-weight: 600; border-color: var(--accent-primary); } 173 .pagination .page-info { color: var(--text-muted); font-size: 0.85rem; margin: 0 0.5rem; } 174 175 @keyframes spin { to { transform: rotate(360deg); } } 176 @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } 177 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 178 @keyframes fadeUpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } 179 .row-anim { animation: fadeUpIn 0.4s ease forwards; opacity: 0; } 180 #total-count { color: var(--accent-primary); font-weight: bold; } 181 182 details.tutorial-card { 183 background: rgba(31,40,51,0.4); border: 1px solid rgba(255,255,255,0.05); 184 border-radius: var(--border-radius); margin-bottom: 2rem; 185 animation: slideDown 0.4s ease forwards; box-shadow: 0 10px 30px rgba(0,0,0,0.3); 186 } 187 details.tutorial-card summary { 188 padding: 1.25rem 2rem; font-family: 'Clash Display', sans-serif; 189 font-weight: 600; color: white; cursor: pointer; list-style: none; 190 display: flex; align-items: center; justify-content: space-between; 191 font-size: 1.1rem; user-select: none; 192 } 193 details.tutorial-card summary::-webkit-details-marker { display: none; } 194 details.tutorial-card summary::after { content: "+"; font-size: 1.5rem; color: var(--accent-primary); transition: transform 0.3s ease; } 195 details[open].tutorial-card summary::after { content: "â"; transform: rotate(180deg); } 196 .tutorial-content { 197 padding: 0 2rem 2rem 2rem; border-top: 1px solid rgba(255,255,255,0.05); 198 margin-top: 0.5rem; padding-top: 1.5rem; animation: fadeIn 0.4s ease; 199 } 200 .tutorial-content h2 { margin-bottom: 0.5rem; color: var(--accent-primary); font-size: 1.2rem; } 201 .tutorial-content h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; color: white; font-size: 1rem; } 202 .tutorial-content p { font-size: 0.9rem; color: #cbd5e1; margin-bottom: 0.75rem; line-height: 1.6; } 203 .tutorial-content a { color: var(--accent-primary); text-decoration: none; } 204 .tutorial-content a:hover { text-decoration: underline; color: white; } 205 .tutorial-links { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.9rem; } 206 207 .mobile-label { display: none; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 0.25rem; } 208 209 /* KaTeX Tweak */ 210 .katex-display { margin: 0.5em 0; overflow-x: auto; overflow-y: hidden; } 211 .katex { font-size: 1.05em !important; } 212 .paper-title .katex { color: var(--accent-primary); } 213 214 @media (max-width: 768px) { 215 header { padding: 1rem; flex-direction: column; gap: 1rem; align-items: flex-start; } 216 .controls-section { padding: 1rem; flex-direction: column; } 217 .control-group { min-width: 100%; } 218 thead { display: none; } 219 tbody tr { 220 display: flex; flex-direction: column; 221 background: rgba(31,40,51,0.6); border: 1px solid rgba(255,255,255,0.05); 222 border-radius: var(--border-radius); padding: 1rem; margin-bottom: 1rem; gap: 0.75rem; 223 } 224 tbody tr:hover { transform: none; } 225 td { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: none; } 226 td:first-child { border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1rem; margin-bottom: 0.25rem; } 227 .mobile-label { display: block; } 228 } 229 </style> 230</head> 231<body> 232 <header> 233 <div class="logo-container"> 234 <img src="https://icml.cc/static/core/img/icml-navbar-logo.svg" alt="ICML" class="logo-img"> 235 <div class="logo-text"> 236 <h1>Conference Navigator</h1> 237 <p>2026 Accepted Works</p> 238 </div> 239 </div> 240 <div style="font-size: 0.9rem; color: var(--text-muted)">
241 Showing <span id="total-count">0</span> events 242 </div> 243 </header> 244 245 <main> 246 <details class="tutorial-card"> 247 <summary>Instructions & Tutorial for Authors</summary> 248 <div class="tutorial-content"> 249 <h2>Hugging Face ICML 2026 event</h2> 250 <p><strong><a href="https://huggingface.co/organizations/ICML2026/share/vIMSRtFGvfrJTrRhaqihavkhijjxRxGvfY" target="_blank" rel="noopener">Join the org using this link</a></strong></p> 251 <p>The ICML 2026 organization is accepting paper claims from authors attending ICML 2026. This organization invites participants to claim their ICML 2026 papers, upload models and datasets, and build their Gradio demos for conference papers on Hugging Face.</p> 252 <h3>Hugging Face Paper Pages ICML 2026</h3> 253 <p>ICML 2026 Paper Pages will allow authors to claim their papers on Hugging Face. Claiming papers on the ICML 2026 organization will allow people to find artifacts related to a paper such as models, datasets and Gradio demos (in the form of Spaces). This also enables the community to discuss the paper.</p> 254 <h3>Tutorial for claiming ICML 2026 papers</h3> 255 <p>Visit the demo and find your paper. To claim your paper, click on the paper page link in the table and then click on your name in the corresponding Paper page and click "claim authorship". This will automatically redirect to your paper settings where you can confirm the request. The admin team will validate your request soon. Once confirmed, the Paper page will show as verified.</p> 256 <h2>Let's reproduce ICML 2026, together</h2> 257 <p>How well can you and your agents do cutting-edge AI research? Join the challenge to reproduce papers from ICML 2026. Every agent produces a logbook â a full, shareable attempt to reproduce its claims. Published logbooks are judged and appear on the leaderboard. <a href="https://huggingface.co/spaces/ICML-2026-agent-repro/challenge" target="_blank" rel="noopener">Grab a paper and go!</a></p> 258 <div class="tutorial-links"> 259 <p><a href="https://huggingface.co/docs/hub/paper-pages#claiming-authorship-to-a-paper" target="_blank" rel="noopener">If you need further assistance, see the guide here</a></p> 260 <p>If your paper is not yet indexed on Hugging Face, you can index it by following this <a href="https://huggingface.co/docs/hub/paper-pages#can-i-have-a-paper-page-even-if-i-have-no-modeldatasetspace" target="_blank" rel="noopener">guide</a>, then <a href="https://huggingface.co/spaces/ICML2026/ICML2026/discussions" target="_blank" rel="noopener">open a discussion</a> to add your paper to the Hugging Face demo.</p> 261 </div> 262 </div> 263 </details> 264 265 <section class="controls-section"> 266 <div class="control-group" style="flex:2;"> 267 <label for="searchInput">Search Events</label> 268 <input type="text" id="searchInput" placeholder="Search by title, authors, or keyword..."> 269 </div> 270 <div class="control-group"> 271 <label for="typeFilter">Event Type</label> 272 <select id="typeFilter"> 273 <option value="">All Types</option> 274 </select> 275 </div> 276 <div class="control-group" style="flex:3;"> 277 <label>Has Artifact</label> 278 <div class="artifact-filters"> 279 <label class="artifact-check"><input type="checkbox" class="artifact-filter" data-field="code_url"> Code</label> 280 <label class="artifact-check"><input type="checkbox" class="artifact-filter" data-field="hf_paper_url"> Paper pages</label> 281 <label class="artifact-check"><input type="checkbox" class="artifact-filter" data-field="model_url"> Model</label> 282 <label class="artifact-check"><input type="checkbox" class="artifact-filter" data-field="dataset_url"> Dataset</label> 283 <label class="artifact-check"><input type="checkbox" class="artifact-filter" data-field="space_url"> App</label> 284 </div> 285 </div> 286 </section> 287 288 <div class="table-container"> 289 <table> 290 <thead> 291 <tr> 292 <th style="min-width:300px">Title</th> 293 <th style="min-width:180px">Authors / Speakers</th> 294 <th>Type</th> 295 <th>ICML</th> 296 <th>Paper pages</th> 297 <th>Code</th> 298 <th>Model</th> 299 <th>Data</th> 300 <th>App</th> 301 </tr> 302 </thead> 303 <tbody id="papers-table-body"> 304 <tr> 305 <td colspan="9"> 306 <div class="loader-container" id="loader"> 307 <div class="loader"></div> 308 <p>Loading ICML 2026 Events...</p> 309 </div> 310 </td> 311 </tr> 312 </tbody> 313 </table> 314 <div id="no-results" class="empty-state"> 315 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:1rem;opacity:0.5;"> 316 <circle cx="11" cy="11" r="8"></circle> 317 <line x1="21" y1="21" x2="16.65" y2="16.65"></line> 318 </svg> 319 <h3>No events found</h3> 320 <p style="margin-top:0.5rem">Try adjusting your filters or search terms.</p> 321 </div> 322 <div class="pagination" id="pagination"></div> 323 </div> 324 </main> 325 326
326<script type="module"> 327 import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"; 328 329 let allEvents = []; 330 let filteredEvents = []; 331 let currentPage = 1; 332 const PAGE_SIZE = 50; 333 334 const tableBody = document.getElementById('papers-table-body'); 335 const searchInput = document.getElementById('searchInput'); 336 const typeFilter = document.getElementById('typeFilter'); 337 const totalCount = document.getElementById('total-count'); 338 const noResults = document.getElementById('no-results'); 339 const paginationEl = document.getElementById('pagination'); 340 const artifactFilters = document.querySelectorAll('.artifact-filter'); 341 342 async function init() { 343 try { 344 const client = await Client.connect(window.location.origin); 345 346 // Load event types for the filter dropdown 347 const typesResult = await client.predict("/get_event_types"); 348 if (typesResult.data && typesResult.data[0]) { 349 const types = JSON.parse(typesResult.data[0]); 350 types.forEach(t => { 351 const opt = document.createElement('option'); 352 opt.value = t; 353 opt.textContent = t; 354 typeFilter.appendChild(opt); 355 }); 356 } 357 358 // Load events 359 const result = await client.predict("/get_events"); 360 if (result.data && result.data[0]) { 361 allEvents = JSON.parse(result.data[0]); 362 applyFilters(); 363 } else { 364 throw new Error("No data received from backend"); 365 } 366 } catch (error) { 367 console.error("Error:", error); 368 tableBody.innerHTML = `<tr><td colspan="9" style="text-align:center;padding:3rem;color:#ef4444;"> 369 <p>Failed to load events. Please ensure the backend is running.</p> 370 <p style="font-size:0.85rem;margin-top:0.5rem;opacity:0.7;">${error.message}</p> 371 </td></tr>`; 372 } 373 } 374 375 function getBadgeClass(type) { 376 const t = (type || '').toLowerCase(); 377 if (t === 'poster') return 'badge-poster'; 378 if (t === 'workshop') return 'badge-workshop'; 379 if (t === 'tutorial') return 'badge-tutorial'; 380 if (t === 'oral') return 'badge-oral'; 381 if (t === 'spotlight') return 'badge-spotlight'; 382 return 'badge-default'; 383 } 384 385 function escapeHtml(str) { 386 const div = document.createElement('div'); 387 div.textContent = str; 388 return div.innerHTML; 389 } 390 391 function applyFilters() { 392 const searchTerm = searchInput.value.toLowerCase(); 393 const typeVal = typeFilter.value; 394 const requiredArtifacts = Array.from(artifactFilters) 395 .filter(cb => cb.checked) 396 .map(cb => cb.dataset.field); 397 398 filteredEvents = allEvents.filter(ev => { 399 const searchStr = `${ev.title} ${ev.authors} ${ev.abstract || ''} ${ev.lay_summary || ''} ${ev.code_url || ''} ${ev.hf_paper_url || ''} ${ev.model_url || ''} ${ev.dataset_url || ''} ${ev.space_url || ''}`.toLowerCase(); 400 const matchesSearch = searchStr.includes(searchTerm); 401 const matchesType = typeVal === "" || ev.type === typeVal; 402 const matchesArtifacts = requiredArtifacts.every(field => ev[field]); 403 return matchesSearch && matchesType && matchesArtifacts; 404 }); 405 406 currentPage = 1; 407 renderPage(); 408 } 409 410 function renderPage() { 411 const totalPages = Math.max(1, Math.ceil(filteredEvents.length / PAGE_SIZE)); 412 if (currentPage > totalPages) currentPage = totalPages; 413 414 const start = (currentPage - 1) * PAGE_SIZE; 415 const pageItems = filteredEvents.slice(start, start + PAGE_SIZE); 416 417 totalCount.textContent = filteredEvents.length; 418 tableBody.innerHTML = ''; 419 420 if (filteredEvents.length === 0) { 421 noResults.style.display = 'block'; 422 paginationEl.innerHTML = ''; 423 return; 424 } 425 noResults.style.display = 'none'; 426
427 pageItems.forEach((ev, index) => { 428 const tr = document.createElement('tr'); 429 tr.style.animationDelay = `${Math.min(index * 0.02, 0.5)}s`; 430 tr.className = 'row-anim'; 431 432 const abstractHtml = ev.abstract ? `<div class="paper-abstract-preview">${escapeHtml(ev.abstract)}</div>` : ''; 433 const laySummaryHtml = ev.lay_summary ? `<div class="lay-summary"><span class="lay-summary-label">Lay Summary</span>${escapeHtml(ev.lay_summary)}</div>` : ''; 434 const paperLink = ev.url ? `<a href="${escapeHtml(ev.url)}" class="icon-link" target="_blank" rel="noopener">View â</a>` : '<span style="color:rgba(255,255,255,0.1);font-style:italic;font-size:0.8rem">â</span>'; 435 const hfPaperLink = ev.hf_paper_url ? `<a href="${escapeHtml(ev.hf_paper_url)}" class="icon-link" style="color:var(--status-spotlight);border-color:rgba(192,132,252,0.3);background:rgba(192,132,252,0.05);" target="_blank" rel="noopener">Paper â</a>` : '<span style="color:rgba(255,255,255,0.1);font-style:italic;font-size:0.8rem">â</span>'; 436 const codeLink = ev.code_url ? `<a href="${escapeHtml(ev.code_url)}" class="icon-link" style="color:var(--status-oral);border-color:rgba(251,191,36,0.3);background:rgba(251,191,36,0.05);" target="_blank" rel="noopener">Code â</a>` : '<span style="color:rgba(255,255,255,0.1);font-style:italic;font-size:0.8rem">â</span>'; 437 const modelLink = ev.model_url ? `<a href="${escapeHtml(ev.model_url)}" class="icon-link" style="color:var(--status-poster);border-color:rgba(96,165,250,0.3);background:rgba(96,165,250,0.05);" target="_blank" rel="noopener">Model â</a>` : '<span style="color:rgba(255,255,255,0.1);font-style:italic;font-size:0.8rem">â</span>'; 438 const dataLink = ev.dataset_url ? `<a href="${escapeHtml(ev.dataset_url)}" class="icon-link" style="color:var(--status-workshop);border-color:rgba(244,114,182,0.3);background:rgba(244,114,182,0.05);" target="_blank" rel="noopener">Data â</a>` : '<span style="color:rgba(255,255,255,0.1);font-style:italic;font-size:0.8rem">â</span>'; 439 const appLink = ev.space_url ? `<a href="${escapeHtml(ev.space_url)}" class="icon-link" style="color:var(--status-tutorial);border-color:rgba(52,211,153,0.3);background:rgba(52,211,153,0.05);" target="_blank" rel="noopener">App â</a>` : '<span style="color:rgba(255,255,255,0.1);font-style:italic;font-size:0.8rem">â</span>'; 440 441 const claimedHtml = `<div style="font-size:0.9rem;font-weight:500;white-space:nowrap;">${ev.claimed_count}/${ev.total_authors}${ev.claimed_count > 0 ? ' <span style="color:#34d399;">â </span>' : ''}</div>`; 442 443 tr.innerHTML = ` 444 <td> 445 <div class="paper-title">${escapeHtml(ev.title)}</div> 446 ${abstractHtml} 447 ${laySummaryHtml} 448 </td> 449 <td><span class="mobile-label">Authors</span><div class="paper-authors">${escapeHtml(ev.authors)}</div></td> 450 <td><span class="mobile-label">Type</span><span class="badge ${getBadgeClass(ev.type)}">${escapeHtml(ev.type)}</span></td> 451 <td><span class="mobile-label">ICML</span>${paperLink}</td> 452 <td><span class="mobile-label">Paper pages</span>${hfPaperLink}</td> 453 <td><span class="mobile-label">Code</span>${codeLink}</td> 454 <td><span class="mobile-label">Model</span>${modelLink}</td> 455 <td><span class="mobile-label">Data</span>${dataLink}</td> 456 <td><span class="mobile-label">App</span>${appLink}</td> 457 `; 458 459 tr.addEventListener('click', (e) => { 460 if (e.target.tagName !== 'A') tr.classList.toggle('expanded'); 461 }); 462 tableBody.appendChild(tr); 463 }); 464 465 // Render pagination 466 renderPagination(totalPages); 467 468 // Render LaTeX math 469 renderMath(); 470 } 471 472 function renderMath() { 473 if (typeof renderMathInElement === 'function') { 474 renderMathInElement(tableBody, { 475 delimiters: [ 476 {left: '$$', right: '$$', display: true}, 477 {left: '$', right: '$', display: false}, 478 {left: '\\(', right: '\\)', display: false}, 479 {left: '\\[', right: '\\]', display: true} 480 ], 481 throwOnError: false 482 }); 483 } else { 484 // If script not loaded yet, try again in a bit 485 setTimeout(renderMath, 100); 486 } 487 } 488 489 function renderPagination(totalPages) { 490 if (totalPages <= 1) { paginationEl.innerHTML = ''; return; } 491 492 let html = `<button id="prev-btn" ${currentPage===1?'disabled':''}>â Prev</button>`; 493 494 const maxButtons = 7; 495 let startP = Math.max(1, currentPage - Math.floor(maxButtons/2));
496 let endP = Math.min(totalPages, startP + maxButtons - 1); 497 if (endP - startP < maxButtons - 1) startP = Math.max(1, endP - maxButtons + 1); 498 499 if (startP > 1) { html += `<button data-page="1">1</button>`; if (startP > 2) html += `<span class="page-info">â¦</span>`; } 500 for (let i = startP; i <= endP; i++) { 501 html += `<button data-page="${i}" class="${i===currentPage?'active':''}">${i}</button>`; 502 } 503 if (endP < totalPages) { if (endP < totalPages-1) html += `<span class="page-info">â¦</span>`; html += `<button data-page="${totalPages}">${totalPages}</button>`; } 504 505 html += `<span class="page-info">Page ${currentPage} of ${totalPages}</span>`; 506 html += `<button id="next-btn" ${currentPage===totalPages?'disabled':''}>Next â</button>`; 507 508 paginationEl.innerHTML = html; 509 510 document.getElementById('prev-btn').addEventListener('click', () => { currentPage--; renderPage(); window.scrollTo({top:300,behavior:'smooth'}); }); 511 document.getElementById('next-btn').addEventListener('click', () => { currentPage++; renderPage(); window.scrollTo({top:300,behavior:'smooth'}); }); 512 paginationEl.querySelectorAll('[data-page]').forEach(btn => { 513 btn.addEventListener('click', () => { currentPage = parseInt(btn.dataset.page); renderPage(); window.scrollTo({top:300,behavior:'smooth'}); }); 514 }); 515 } 516 517 let debounceTimer; 518 searchInput.addEventListener('input', () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(applyFilters, 200); }); 519 typeFilter.addEventListener('change', applyFilters); 520 artifactFilters.forEach(cb => cb.addEventListener('change', applyFilters)); 521 522 document.addEventListener('DOMContentLoaded', init); 523 </script>
523 524</body> 525</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.