update

Dockerfile

@@ -0,0 +1,10 @@
+FROM python:3.9-slim
+WORKDIR /code
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user PATH=/home/user/.local/bin:$PATH
+EXPOSE 7860
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,106 @@
+import io
+import base64
+from flask import Flask, render_template, request
+from datasets import load_dataset, Features, Value, Image, Sequence
+from PIL import Image as PILImage  # 给 PIL 的 Image 起个别名
+
+app = Flask(__name__)
+
+# 替换为你的数据集 ID
+DATASET_ID = "ma-xu/fine-t2i"
+
+def image_to_base64(pil_img):
+    # 兼容性处理：尝试获取新版本的 Resampling 属性，如果不存在则使用旧版本
+    try:
+        resampling_mode = PILImage.Resampling.LANCZOS
+    except AttributeError:
+        resampling_mode = PILImage.LANCZOS
+
+    # 1. 转换为缩略图提高加载速度，保持 aspect ratio
+    max_size = (800, 800)
+    pil_img.thumbnail(max_size, resampling_mode)
+    
+    # 2. 转换为 RGB 模式（JPEG 不支持 RGBA）
+    if pil_img.mode in ("RGBA", "P"):
+        pil_img = pil_img.convert("RGB")
+        
+    # 3. 编码为 Base64
+    byte_arr = io.BytesIO()
+    pil_img.save(byte_arr, format='JPEG', quality=85)
+    encoded_img = base64.b64encode(byte_arr.getvalue()).decode('utf-8')
+    return f"data:image/jpeg;base64,{encoded_img}"
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    samples = []
+    filter_folder = request.form.get('folder', 'synthetic_enhanced_prompt_random_resolution')
+    print(f"filter_folder: {filter_folder}")
+    if filter_folder == "curated":
+        url_pattern = "https://huggingface.co/datasets/ma-xu/fine-t2i/resolve/main/curated/train-*.tar"
+    elif filter_folder == "enhanced_prompt_random_resolution":
+        url_pattern = "https://huggingface.co/datasets/ma-xu/fine-t2i/resolve/main/synthetic_enhanced_prompt_random_resolution/train-*.tar"
+    elif filter_folder == "enhanced_prompt_square_resolution":
+        url_pattern = "https://huggingface.co/datasets/ma-xu/fine-t2i/resolve/main/synthetic_enhanced_prompt_square_resolution/train-*.tar"
+    elif filter_folder == "original_prompt_random_resolution":
+        url_pattern = "https://huggingface.co/datasets/ma-xu/fine-t2i/resolve/main/synthetic_original_prompt_random_resolution/train-*.tar"
+    else:
+        url_pattern = "https://huggingface.co/datasets/ma-xu/fine-t2i/resolve/main/synthetic_original_prompt_square_resolution/train-*.tar"
+
+    
+    if request.method == 'POST' or request.method == 'GET' :
+        json_feature = {
+            "aesthetic_predictor_v_2_5_score": Value("double"),
+            "enhanced_length": Value("int64"),
+            "enhanced_prompt": Value("string"),
+            "enhancer": Value("string"),
+            "id": Value("string"),
+            "image_aspect_ratio": Value("string"),
+            "image_generated_with_enhanced_prompt": Value("bool"),
+            "image_generator": Value("string"),
+            "image_resolution": Sequence(Value("int64")),
+            "length": Value("int64"),
+            "prompt": Value("string"),
+            "prompt_category": Value("string"),
+            "prompt_generator": Value("string"),
+            "style": Value("string"),
+            "task": Sequence(Value("string"))  # 对应 list<item: string>
+        }
+        features = Features({
+            "__key__": Value("string"),
+            "__url__": Value("string"),
+            "jpg": Image(), 
+            "txt": Value("string"),
+            "json": json_feature, # 这里对应报错中的 list<item: string>
+            # 如果 json 实际上是字典，可以改为 Value("string") 并在之后手动 json.loads
+        })
+        dataset = load_dataset(
+            "webdataset", 
+            data_files={"train": url_pattern}, 
+            split="train",
+            features=features,  # 强制指定特征 
+            streaming=True  # please do streaming, or you will download the whole dataset ~2TB
+        )
+        ds = dataset.shuffle(buffer_size=100, )
+        count = 0
+
+        
+        for item in ds:
+            if count >= 100: break
+            print( count)
+            # 这里的字段名需对应你数据集中的 key (jpg, json, txt)
+            text_content = item.get('txt', '')
+            json_data = item.get('json', {})
+            
+            samples.append({
+                "image": image_to_base64(item['jpg']),
+                "text": text_content,
+                "json": json_data,
+                "tar_file": item["__url__"]
+            })
+            count += 1
+
+    return render_template('index.html', samples=samples)
+
+if __name__ == '__main__':
+    # HF Space 必须使用 7860 端口
+    app.run(host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,3 @@
+flask
+datasets
+pillow

templates/index.html

@@ -0,0 +1,492 @@
+<!DOCTYPE html>
+<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; /* 使用斜体增加提示感 */
+        }
+    </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" class="submit-btn">Query Random 100 Samples</button>
+            </form>
+            <div class="search-tips">
+                <p>Notice: Images are 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">&times;</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';
+    }
+
+    // 处理键盘 ESC 退出
+    document.addEventListener('keydown', function(e) {
+        if (e.key === "Escape") closeModal();
+    });
+</script>
+
+</body>
+</html>