Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>Poster Template - HSCR (Stable Columns)</title> | |
| <style> | |
| :root{ | |
| --poster-width: 1400px; | |
| --poster-height: 900px; | |
| --header-bg: #cfe9ff; | |
| --border: #1f1f1f; | |
| --gap: 18px; | |
| --section-bar: #0b3d91; | |
| /* ===== 可压缩参数 ===== */ | |
| --base-font: 16px; | |
| --line-height: 1.35; | |
| --para-gap: 10px; | |
| --li-gap: 6px; | |
| --img-max-width: 100%; | |
| } | |
| *{ box-sizing: border-box; } | |
| body{ | |
| margin: 0; | |
| background: #e9eef5; | |
| font-family: "Comic Sans MS", cursive; | |
| } | |
| .stage{ | |
| min-height: 100vh; | |
| display: grid; | |
| place-items: center; | |
| padding: 24px; | |
| } | |
| .poster{ | |
| width: var(--poster-width); | |
| height: var(--poster-height); | |
| background: #fff; | |
| border: 3px solid var(--border); | |
| display: grid; | |
| grid-template-rows: 2fr 11fr; | |
| overflow: hidden; | |
| } | |
| /* ===== Header ===== */ | |
| .header{ | |
| background: var(--header-bg); | |
| border-bottom: 3px solid var(--border); | |
| padding: 6px 8px; | |
| display: grid; | |
| grid-template-columns: 7fr 1fr; | |
| gap: var(--gap); | |
| } | |
| .title{ | |
| margin: 0; | |
| font-size: 28px; | |
| font-weight: 800; | |
| } | |
| .authors{ | |
| margin-top: 6px; | |
| font-size: 20px; | |
| } | |
| .conf{ | |
| border-left: 3px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 42px; | |
| font-weight: 800; | |
| } | |
| /* ===== Main ===== */ | |
| .main{ | |
| padding: 18px; | |
| overflow: hidden; | |
| } | |
| .flow{ | |
| height: 100%; | |
| column-count: 3; | |
| column-gap: var(--gap); | |
| column-fill: auto; | |
| } | |
| /* ===== Sections ===== */ | |
| .section{ | |
| margin-bottom: 18px; | |
| break-inside: auto; | |
| background: #eef6ff; | |
| } | |
| .section-bar{ | |
| background: var(--section-bar); | |
| color: #fff; | |
| font-weight: 800; | |
| font-size: 20px; | |
| padding: 5px 6px; | |
| border-radius: 10px; | |
| margin-bottom: 8px; | |
| } | |
| .section-body{ | |
| font-size: var(--base-font); | |
| line-height: var(--line-height); | |
| } | |
| .section-body p{ | |
| margin: 0 0 var(--para-gap) 0; | |
| } | |
| .section-body ul{ | |
| margin: 0 0 var(--para-gap) 20px; | |
| padding: 0; | |
| } | |
| .section-body li{ | |
| margin-bottom: var(--li-gap); | |
| } | |
| .img-section { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 0 0 var(--para-gap) 0; | |
| width: 100%; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| } | |
| .img-section img { | |
| flex: 1; | |
| min-width: 0; | |
| max-width: var(--img-max-width); | |
| height: auto; | |
| object-fit: contain; | |
| border: 1px solid #000; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="stage"> | |
| <div class="poster"> | |
| <header class="header"> | |
| <div> | |
| <h1 class="title">HSCR: Hierarchical Self-Contrastive Rewarding for Aligning Medical Vision Language Models</h1> | |
| <div class="authors">Songtao Jiang1, Yan Zhang2, Yeying Jin3, Zhihang Tang1 Yangyang Wu1, Yang Feng4, Jian Wu1,5, Zuozhu Liu1,5† | |
| </div> | |
| </div> | |
| <div class="conf">ICML</div> | |
| </header> | |
| <main class="main"> | |
| <div class="flow" id="flow"> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!--The following content is strictly prohibited from being modified and must be kept in its original form.--> | |
| <script> | |
| (function(){ | |
| const flow = document.getElementById("flow"); | |
| const root = document.documentElement; | |
| // 基础设置工具函数 | |
| function setVar(k,v,u=""){ root.style.setProperty(k, v+u); } | |
| // 溢出检测（背包是否破裂） | |
| function overflowColumns(){ | |
| return flow.scrollWidth > flow.clientWidth + 1; | |
| } | |
| // 常量设定 | |
| const PARA_GAP = 12; // para-gap 取定值 (px) | |
| // 边界设定 (Constraint 3) | |
| const MIN_FONT = 10, MAX_FONT = 20; // base-font 范围 | |
| // 图片大小范围调整为 70% ~ 100% | |
| const MIN_IMG = 60, MAX_IMG = 100; | |
| // 步长设定 (Constraint 4) | |
| const STEP_FONT = 0.1; | |
| const STEP_IMG = 1; | |
| // 辅助函数：计算依赖变量 (line-height 和 li-gap) | |
| // 为了保证排版美观，这两个参数应当随字体大小动态变化 | |
| function getDependentVars(f) { | |
| // 计算当前字体在 [MIN, MAX] 区间内的比例 (0.0 ~ 1.0) | |
| const ratio = (f - MIN_FONT) / (MAX_FONT - MIN_FONT); | |
| // line-height: 范围调整为 1.05 ~ 1.6 | |
| // 计算：基数 1.05 + (区间跨度 0.55 * 比例) | |
| let lh = 1.05 + ratio * 0.55; | |
| // li-gap: 范围调整为 2px ~ 8px | |
| // 计算：基数 2 + (区间跨度 6 * 比例) | |
| let lg = 2 + ratio * 6; | |
| return { lh, lg }; | |
| } | |
| // 尝试将特定大小的“物品”装入“背包” | |
| // 返回 true 表示装得下，false 表示溢出 | |
| function tryFit(f, w) { | |
| // 格式化精度 | |
| f = Math.round(f * 10) / 10; | |
| w = Math.round(w); | |
| const { lh, lg } = getDependentVars(f); | |
| // 应用样式 | |
| setVar("--base-font", f, "px"); | |
| setVar("--img-max-width", w, "%"); | |
| setVar("--line-height", lh.toFixed(3)); | |
| setVar("--li-gap", lg.toFixed(1), "px"); | |
| setVar("--para-gap", PARA_GAP, "px"); | |
| // 检查容量 | |
| return !overflowColumns(); | |
| } | |
| // 主算法：背包资源分配 (二分查找 + 贪心策略) | |
| function fit(){ | |
| // 重置状态 | |
| setVar("--img-max-width",100,"%"); | |
| setVar("--base-font",16,"px"); | |
| // 阶段一：优先最大化 Font Size (高价值物品) | |
| // 策略：假设图片使用最小尺寸(MIN_IMG)，寻找能容纳的最大字体 | |
| let low = MIN_FONT; | |
| let high = MAX_FONT; | |
| let bestFont = MIN_FONT; | |
| // 二分查找最佳字体 | |
| while (low <= high) { | |
| let mid = (low + high) / 2; | |
| // 按照精度步长对齐 | |
| mid = Math.floor(mid / STEP_FONT) * STEP_FONT; | |
| if (tryFit(mid, MIN_IMG)) { | |
| bestFont = mid; // 记录当前可行解 | |
| low = mid + STEP_FONT; // 尝试更大的 | |
| } else { | |
| high = mid - STEP_FONT; // 尝试更小的 | |
| } | |
| } | |
| // 阶段二：在确定最佳字体后，最大化 Image Width (填充剩余空间) | |
| // 策略：固定字体为 bestFont，寻找能容纳的最大图片宽度 | |
| let wLow = MIN_IMG; | |
| let wHigh = MAX_IMG; | |
| let bestImg = MIN_IMG; | |
| while (wLow <= wHigh) { | |
| let mid = Math.floor((wLow + wHigh) / 2); | |
| if (tryFit(bestFont, mid)) { | |
| bestImg = mid; // 记录当前可行解 | |
| wLow = mid + STEP_IMG; // 尝试更大的 | |
| } else { | |
| wHigh = mid - STEP_IMG; // 尝试更小的 | |
| } | |
| } | |
| // 应用最终找到的最优解 (全局最优配置) | |
| tryFit(bestFont, bestImg); | |
| } | |
| // 事件监听保持不变 | |
| window.addEventListener("load", fit); | |
| window.addEventListener("resize", () => { | |
| clearTimeout(window.__fitTimer); | |
| window.__fitTimer = setTimeout(fit, 80); | |
| }); | |
| const mo = new MutationObserver(() => { | |
| clearTimeout(window.__fitTimer2); | |
| window.__fitTimer2 = setTimeout(fit, 80); | |
| }); | |
| mo.observe(flow, { childList: true, subtree: true, characterData: true }); | |
| function hookImages(){ | |
| const imgs = flow.querySelectorAll("img"); | |
| imgs.forEach(img=>{ | |
| if (img.__fitHooked) return; | |
| img.__fitHooked = true; | |
| img.addEventListener("load", () => setTimeout(fit, 50)); | |
| img.addEventListener("error", () => setTimeout(fit, 50)); | |
| }); | |
| } | |
| hookImages(); | |
| const mo2 = new MutationObserver(hookImages); | |
| mo2.observe(flow, { childList: true, subtree: true }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |