huangqiyong
/
pptList


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637
							<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>音乐模板候选视觉复核</title>
    <style>
      * { box-sizing: border-box; }
      body { margin: 0; padding: 24px; background: #e9edf2; color: #172231; font-family: "Microsoft Yahei", sans-serif; }
      h1 { margin: 0 0 20px; font-size: 25px; }
      .candidate { margin-bottom: 18px; padding: 14px; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(20, 32, 48, .1); }
      .meta { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
      .id { color: #167b70; font-size: 18px; font-weight: 700; }
      .name { overflow: hidden; font-size: 17px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
      .score { margin-left: auto; color: #6a7685; font-size: 14px; }
      .slides { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
      img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eef1f4; border: 1px solid #dce2e8; }
    </style>
  </head>
  <body>
    <h1 id="title">音乐模板候选视觉复核</h1>
    <main id="content"></main>
    <script type="module">
      const scene = new URLSearchParams(location.search).get("scene") || "general"
      const response = await fetch("/artifacts/music-template-extraction/review/manifest.json")
      const data = await response.json()
      const items = data.items.filter(item => item.scene === scene)
      document.querySelector("#title").textContent = `${scene} · ${items.length} 套候选`
      document.querySelector("#content").innerHTML = items.map(item => `
        <section class="candidate">
          <div class="meta"><span class="id">${item.id}</span><span class="name">${item.name}</span><span class="score">结构分 ${item.score}</span></div>
          <div class="slides">${item.samples.map(file => `<img src="/artifacts/music-template-extraction/review/${item.id}/${file}" alt="${item.id}">`).join("")}</div>
        </section>
      `).join("")
    </script>
  </body>
</html>