Spaces:

Kirito-Lab
/

PaperX

Running

File size: 7,141 Bytes

67ad1a6

<!DOCTYPE html>

<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>