Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fine-T2I Gallery Explorer</title> | |
| <style> | |
| :root { | |
| --bg-color: #0d1117; | |
| --card-bg: #161b22; | |
| --header-bg: #21262d; | |
| --text-main: #c9d1d9; | |
| --text-bright: #ffffff; | |
| --accent: #2f81f7; | |
| --border-color: #30363d; | |
| --json-color: #7ee787; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* 顶部导航与搜索栏 */ | |
| header { | |
| background-color: var(--header-bg); | |
| padding: 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.5); | |
| } | |
| .search-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| gap: 15px; | |
| align-items: center; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .search-container h2 { | |
| margin: 0 20px 0 0; | |
| color: var(--text-bright); | |
| font-size: 1.2rem; | |
| } | |
| select, input, button { | |
| background: var(--bg-color); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-main); | |
| padding: 10px 15px; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| select:focus, input:focus { | |
| border-color: var(--accent); | |
| } | |
| button { | |
| background-color: var(--accent); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| font-weight: 600; | |
| padding: 10px 25px; | |
| } | |
| button:hover { | |
| opacity: 0.9; | |
| } | |
| /* 确保瀑布流容器有足够的间距 */ | |
| .gallery-wrapper { | |
| max-width: 1600px; | |
| margin: 40px auto; /* 增加与 Header 的间距 */ | |
| padding: 0 20px; | |
| } | |
| .masonry-grid { | |
| column-count: 4; /* 大屏幕4列 */ | |
| column-gap: 20px; | |
| } | |
| @media (max-width: 1200px) { .masonry-grid { column-count: 3; } } | |
| @media (max-width: 800px) { .masonry-grid { column-count: 2; } } | |
| @media (max-width: 500px) { .masonry-grid { column-count: 1; } } | |
| .card { | |
| background: var(--card-bg); | |
| margin-bottom: 20px; | |
| break-inside: avoid; /* 核心：防止图片跨列截断 */ | |
| border-radius: 12px; | |
| overflow: hidden; | |
| border: 1px solid var(--border-color); | |
| cursor: pointer; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.4); | |
| border-color: var(--accent); | |
| } | |
| .card img { | |
| width: 100%; | |
| height: auto; /* 保持图片原始比例 */ | |
| display: block; | |
| } | |
| /* 弹窗样式 (Modal) */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: rgba(0,0,0,0.9); | |
| z-index: 2000; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal-content { | |
| background: var(--card-bg); | |
| width: 95%; | |
| max-width: 1300px; | |
| height: 85vh; | |
| display: flex; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .modal-left { | |
| flex: 1.5; | |
| background: #000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .modal-left img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| box-shadow: 0 0 20px rgba(255,255,255,0.1); | |
| } | |
| .modal-right { | |
| flex: 1; | |
| padding: 30px; | |
| overflow-y: auto; | |
| border-left: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .modal-right h3 { | |
| margin-top: 0; | |
| color: var(--accent); | |
| font-size: 1rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .text-box { | |
| background: rgba(0,0,0,0.3); | |
| padding: 15px; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| white-space: pre-wrap; | |
| } | |
| pre { | |
| background: #000; | |
| padding: 15px; | |
| border-radius: 8px; | |
| color: var(--json-color); | |
| font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; | |
| font-size: 13px; | |
| overflow-x: auto; | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 15px; | |
| right: 20px; | |
| font-size: 30px; | |
| color: white; | |
| cursor: pointer; | |
| z-index: 2100; | |
| } | |
| /* 状态提示 */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 100px; | |
| font-size: 1.2rem; | |
| color: #8b949e; | |
| } | |
| /* 独立 Header Block 样式 */ | |
| .project-header { | |
| background-color: var(--header-bg); | |
| padding: 80px 20px; /* 增加内边距，使其更像一个独立的 Hero Section */ | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: center; | |
| position: relative; /* 确保它随流布局，不固定 */ | |
| } | |
| .header-container { | |
| max-width: 1000px; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .search-block { | |
| margin-top: 20px; | |
| } | |
| /* 标题样式保持大字号 */ | |
| .project-title { | |
| font-size: 3rem; /* 稍微再加大一点，增强学术主页感 */ | |
| color: var(--text-bright); | |
| margin: 0 0 25px 0; | |
| line-height: 1.2; | |
| font-weight: 800; | |
| } | |
| /* 作者：居中，字号加大 */ | |
| /* 作者区域样式优化 */ | |
| .author-list { | |
| font-size: 1.3rem; | |
| margin-bottom: 25px; | |
| color: var(--text-main); /* 逗号的颜色 */ | |
| } | |
| .author-list a { | |
| /* 使用一种更柔和、有科技感的青蓝色 */ | |
| color: #58a6ff; | |
| text-decoration: none; | |
| margin: 0 10px; | |
| font-weight: 500; | |
| position: relative; | |
| transition: color 0.3s ease; | |
| } | |
| /* 悬停效果：改变颜色并显示下划线 */ | |
| .author-list a:hover { | |
| color: #a5d6ff; /* 悬停时颜色变浅 */ | |
| } | |
| /* 可选：增加一个优雅的底部渐变线条 */ | |
| .author-list a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 1px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #a5d6ff; | |
| transition: width 0.3s ease; | |
| } | |
| .author-list a:hover::after { | |
| width: 100%; | |
| } | |
| /* HF 按钮 */ | |
| .external-links { | |
| margin-bottom: 30px; | |
| } | |
| .hf-btn { | |
| display: inline-block; | |
| font-size: 1.1rem; | |
| padding: 12px 30px; | |
| background: #238636; | |
| color: white; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: transform 0.2s; | |
| } | |
| .hf-btn:hover { | |
| transform: translateY(-2px); | |
| background: #2ea043; | |
| } | |
| /* 优雅的分割线 */ | |
| .divider { | |
| height: 2px; | |
| background: linear-gradient(to right, transparent, var(--border-color), transparent); | |
| margin: 40px auto; | |
| width: 80%; | |
| } | |
| /* 搜索栏：独立且居中 */ | |
| .filter-form { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .filter-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .label-text { | |
| font-weight: bold; | |
| color: var(--text-main); | |
| font-size: 1.1rem; | |
| } | |
| .filter-form select, .filter-form input { | |
| font-size: 1rem; | |
| padding: 10px 15px; | |
| border-radius: 8px; | |
| min-width: 250px; | |
| } | |
| .submit-btn { | |
| font-size: 1rem; | |
| padding: 10px 30px; | |
| background-color: var(--accent); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| font-weight: bold; | |
| border-radius: 8px; | |
| } | |
| /* 搜索提示语样式 */ | |
| .search-tips { | |
| margin-top: 20px; | |
| text-align: center; | |
| } | |
| .search-tips p { | |
| margin: 5px 0; | |
| font-size: 0.9rem; /* 稍微调小一点，不喧宾夺主 */ | |
| color: #8b949e; /* 经典的灰度色，既清晰又柔和 */ | |
| font-style: italic; /* 使用斜体增加提示感 */ | |
| } | |
| /* 旋转动画定义 */ | |
| .spinner { | |
| display: inline-block; | |
| width: 14px; | |
| height: 14px; | |
| border: 2px solid rgba(255,255,255,.3); | |
| border-radius: 50%; | |
| border-top-color: #fff; | |
| animation: spin 1s ease-in-out infinite; | |
| margin-right: 8px; | |
| vertical-align: middle; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* 按钮点击后的禁用状态 */ | |
| .query-btn:disabled { | |
| filter: grayscale(1); | |
| cursor: wait; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="project-header"> | |
| <div class="header-container"> | |
| <h1 class="project-title">Fine-T2I: An Open, Large-Scale, and Diverse Dataset for High-Quality T2I Fine-Tuning</h1> | |
| <h1>(Dataset Explore)</h1> | |
| <div class="author-list"> | |
| <a href="https://ma-xu.github.io/" target="_blank">Xu Ma</a>, | |
| <a href="https://bespontaneous.github.io/homepage/" target="_blank">Yitian Zhang</a>, | |
| <a href="https://dddraxxx.github.io/" target="_blank">Qihua Dong</a>, | |
| <a href="https://www1.ece.neu.edu/~yunfu/" target="_blank">Yun Fu</a> | |
| </div> | |
| <div class="external-links"> | |
| <a href="https://huggingface.co/datasets/ma-xu/fine-t2i" target="_blank" class="hf-btn"> | |
| 🤗 Hugging Face Dataset | |
| </a> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="search-block"> | |
| <form method="post" class="filter-form"> | |
| <div class="filter-group"> | |
| <span class="label-text">Subset:</span> | |
| <select name="folder"> | |
| {% set options = [ | |
| 'enhanced_prompt_random_resolution', | |
| 'enhanced_prompt_square_resolution', | |
| 'original_prompt_random_resolution', | |
| 'original_prompt_square_resolution', | |
| 'curated' | |
| ] %} | |
| {% for opt in options %} | |
| <option value="{{ opt }}" {% if request.form.get('folder') == opt %}selected{% endif %}>{{ opt }}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <button type="submit" id="submit-btn" class="query-btn" onclick="startLoading()">Query Random 100 Samples</button> | |
| </form> | |
| <div class="search-tips"> | |
| <p>Notice: Images are downsampled and compressed for faster loading speeds.</p> | |
| <p>Wait time: Each query may take 1-2 minutes to load (curated subset longer), please be patient.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="gallery-wrapper"> | |
| {% if samples %} | |
| <div class="masonry-grid"> | |
| {% for s in samples %} | |
| <div class="card" | |
| onclick='openModal( | |
| "{{ s.image }}", | |
| {{ s.text | tojson }}, | |
| {{ s.json | tojson }}, | |
| "{{ s.tar_file }}" | |
| )'> | |
| <img src="{{ s.image }}" alt="loading..."> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% else %} | |
| <div class="empty-state"> | |
| {% if request.method == 'POST' %} | |
| 没有找到符合条件的 Sample。 | |
| {% else %} | |
| 请选择文件夹并点击查询。 | |
| {% endif %} | |
| </div> | |
| {% endif %} | |
| </div> | |
| <div id="imageModal" class="modal" onclick="closeModal()"> | |
| <span class="close-modal">×</span> | |
| <div class="modal-content" onclick="event.stopPropagation()"> | |
| <div class="modal-left"> | |
| <img id="fullImg" src="" alt="large view"> | |
| </div> | |
| <div class="modal-right"> | |
| <h3>Source Tar File</h3> | |
| <div id="modalTar" style="font-size: 11px; color: #8b949e; background: #000; padding: 8px; border-radius: 4px; word-break: break-all; border: 1px dashed #30363d;"></div> | |
| <h3>Prompt / TXT</h3> | |
| <div id="fullText" class="text-box"></div> | |
| <h3>JSON Metadata</h3> | |
| <pre id="fullJson"></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function openModal(imgSrc, text, jsonData, tarFile) { | |
| console.log("Modal Triggered"); | |
| console.log("Text length:", text.length); | |
| console.log("JSON keys:", Object.keys(jsonData)); | |
| const modal = document.getElementById('imageModal'); | |
| const modalImg = document.getElementById('fullImg'); | |
| const modalText = document.getElementById('fullText'); | |
| const modalJson = document.getElementById('fullJson'); | |
| const modalTar = document.getElementById('modalTar'); | |
| if (!modal || !modalImg || !modalText || !modalJson) { | |
| console.error("Missing modal elements in HTML!"); | |
| return; | |
| } | |
| modalImg.src = imgSrc; | |
| modalText.innerText = text; | |
| modalTar.innerText = tarFile; | |
| modalJson.innerText = JSON.stringify(jsonData, null, 2); | |
| modal.style.display = 'flex'; | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeModal() { | |
| document.getElementById('imageModal').style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| } | |
| function startLoading() { | |
| const btn = document.getElementById('submit-btn'); | |
| // 1. 将按钮文字改为正在加载 | |
| btn.innerText = "Processing... Please wait"; | |
| // 2. 将按钮置灰，防止用户由于焦虑多次点击 | |
| btn.style.opacity = "0.6"; | |
| btn.style.cursor = "not-allowed"; | |
| // 3. (可选) 你甚至可以加一个旋转的小图标 | |
| btn.innerHTML = '<span class="spinner"></span> Processing...'; | |
| } | |
| // 处理键盘 ESC 退出 | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === "Escape") closeModal(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |