viscsv 0.1.0__py3-none-any.whl

viscsv/__init__.py

@@ -0,0 +1,3 @@
+from .builder import build_viewer, preview, render, VisCSV
+
+__all__ = ["build_viewer", "preview", "render", "VisCSV"]

viscsv/builder.py

@@ -0,0 +1,438 @@
+from __future__ import annotations
+
+from pathlib import Path
+import json
+import shutil
+from typing import Iterable, Mapping, Sequence
+
+import numpy as np
+import pandas as pd
+
+from .meta import write_meta_chunk_js
+from .thumbnail import make_thumbnail
+from .viewer import write_viewer
+
+
+class VisCSV:
+    def __init__(
+        self,
+        image: str | Sequence[str] | None = None,
+        image_columns: str | Sequence[str] | None = None,
+        dataframe: pd.DataFrame | None = None,
+    ) -> None:
+        image = image if image is not None else image_columns
+        if isinstance(image, str):
+            image = [image]
+        self.image_columns = list(image) if image is not None else []
+        self.df = dataframe.copy() if dataframe is not None else pd.DataFrame()
+        self._validate_image_columns()
+
+    @classmethod
+    def from_csv(
+        cls,
+        csv_path: str | Path,
+        image: str | Sequence[str] | None = None,
+        **kwargs,
+    ) -> "VisCSV":
+        path = Path(csv_path)
+        if not path.exists():
+            raise FileNotFoundError(f"CSV not found: {path}")
+        data = pd.read_csv(path, **kwargs)
+        return cls(image=image, dataframe=data)
+
+    def add(self, *args, **fields) -> None:
+        if len(args) == 1 and not fields:
+            self.add_any(args[0])
+            return
+        if not args:
+            raise TypeError("add() expects data or image path.")
+        image_path = args[0]
+        if not self.image_columns:
+            raise ValueError("No image column configured. Use add_row/add_rows or set image column.")
+        row = {self.image_columns[0]: str(image_path), **fields}
+        self.add_row(row)
+
+    def add_data(self, data) -> None:
+        self.add_any(data)
+
+    def add_any(self, data) -> None:
+        if isinstance(data, pd.DataFrame):
+            self.add_rows(data)
+            return
+        if isinstance(data, dict):
+            self.add_row(data)
+            return
+        if isinstance(data, (list, tuple)):
+            if data and isinstance(data[0], dict):
+                self.add_rows(data)
+                return
+            if data and isinstance(data[0], (list, tuple)):
+                self.add_rows(data)
+                return
+        self.add_row(data)
+
+    def add_row(self, row: dict | Sequence) -> None:
+        if isinstance(row, dict):
+            df = pd.DataFrame([row])
+        elif isinstance(row, (list, tuple)):
+            if not len(self.df.columns):
+                raise ValueError("Cannot append list row without existing columns.")
+            df = pd.DataFrame([row], columns=list(self.df.columns))
+        else:
+            raise TypeError("row must be a dict or a list/tuple.")
+        self.df = pd.concat([self.df, df], ignore_index=True)
+        self._validate_image_columns()
+
+    def add_rows(self, rows: Iterable) -> None:
+        if isinstance(rows, pd.DataFrame):
+            df = rows
+        else:
+            rows = list(rows)
+            if not rows:
+                return
+            if isinstance(rows[0], dict):
+                df = pd.DataFrame(rows)
+            else:
+                if not len(self.df.columns):
+                    raise ValueError("Cannot append list rows without existing columns.")
+                df = pd.DataFrame(rows, columns=list(self.df.columns))
+        self.df = pd.concat([self.df, df], ignore_index=True)
+        self._validate_image_columns()
+
+    def to_csv(self, csv_path: str | Path, **kwargs) -> None:
+        path = Path(csv_path)
+        self.df.to_csv(path, index=False, **kwargs)
+
+    def build(
+        self,
+        output: str | Path = "output",
+        thumb_size: int = 256,
+        batch: int = 80,
+        image_column: str | None = None,
+        launch: bool = False,
+        type_hints: Mapping[str, str] | None = None,
+        chunk_size: int = 500,
+    ) -> Path:
+        image_column = image_column or (self.image_columns[0] if self.image_columns else None)
+        return render(
+            self.df,
+            image=image_column,
+            output=output,
+            thumb_size=thumb_size,
+            batch=batch,
+            image_columns=self.image_columns,
+            launch=launch,
+            type_hints=type_hints,
+            chunk_size=chunk_size,
+        )
+
+    def _validate_image_columns(self) -> None:
+        if not self.image_columns:
+            return
+        if len(self.df.columns) == 0:
+            return
+        for col in self.image_columns:
+            if col not in self.df.columns:
+                raise ValueError(f"Image column not found: {col}")
+
+
+def render(
+    data: str | Path | pd.DataFrame | list[dict] | list[tuple],
+    image: str | None = None,
+    output: str | Path = "output",
+    columns: list[str] | None = None,
+    thumb_size: int = 256,
+    batch: int = 80,
+    image_columns: Sequence[str] | None = None,
+    launch: bool = False,
+    type_hints: Mapping[str, str] | None = None,
+    chunk_size: int = 500,
+) -> Path:
+    df = _normalize_data(data, image=image, columns=columns)
+    inferred = infer_image_columns(df) if image_columns is None else list(image_columns)
+    if image is not None and image not in inferred:
+        inferred = [image] + [c for c in inferred if c != image]
+    return _build_viewer_from_df(
+        df,
+        image_columns=inferred,
+        output=output,
+        thumb_size=thumb_size,
+        batch=batch,
+        launch=launch,
+        type_hints=type_hints,
+        chunk_size=chunk_size,
+    )
+
+
+def build_viewer(
+    data: str | Path | pd.DataFrame | list[dict] | list[tuple],
+    image_column: str = "image",
+    output_dir: str = "output",
+    columns: list[str] | None = None,
+    thumb_size: int = 256,
+    batch_render: int = 80,
+    launch: bool = False,
+    type_hints: Mapping[str, str] | None = None,
+    chunk_size: int = 500,
+) -> Path:
+    return render(
+        data,
+        image=image_column,
+        output=output_dir,
+        columns=columns,
+        thumb_size=thumb_size,
+        batch=batch_render,
+        image_columns=[image_column],
+        launch=launch,
+        type_hints=type_hints,
+        chunk_size=chunk_size,
+    )
+
+
+def preview(
+    data: str | Path | pd.DataFrame | list[dict] | list[tuple],
+    image: str | None = None,
+    **kwargs,
+) -> Path:
+    return render(data, image=image, **kwargs)
+
+
+def _normalize_data(
+    data: str | Path | pd.DataFrame | list[dict] | list[tuple],
+    image: str | None,
+    columns: list[str] | None,
+) -> pd.DataFrame:
+    if isinstance(data, (str, Path)):
+        path = Path(data)
+        if not path.exists():
+            raise FileNotFoundError(f"CSV not found: {path}")
+        df = pd.read_csv(path)
+    elif isinstance(data, pd.DataFrame):
+        df = data.copy()
+    elif isinstance(data, list) and data:
+        if isinstance(data[0], tuple):
+            if image is None:
+                raise ValueError("image is required when using tuple data.")
+            if columns is None:
+                raise ValueError("columns is required when using tuple data.")
+            df = pd.DataFrame(data, columns=[image] + list(columns))
+        elif isinstance(data[0], dict):
+            df = pd.DataFrame(data)
+        else:
+            raise TypeError("Unsupported data format for render.")
+    else:
+        raise TypeError("Data must be a CSV path, DataFrame, or non-empty list.")
+
+    if image is not None and image not in df.columns:
+        raise ValueError(f"Image column not found: {image}")
+    return df
+
+
+def infer_image_columns(df: pd.DataFrame, sample_size: int = 50) -> list[str]:
+    candidates = []
+    name_hints = {"image", "img", "picture", "pic", "photo", "thumbnail", "thumb", "path", "filepath", "file"}
+    image_exts = {".jpg", ".jpeg", ".png", ".webp", ".bmp", ".gif"}
+
+    for col in df.columns:
+        if not pd.api.types.is_object_dtype(df[col]):
+            continue
+        col_lower = str(col).lower()
+        sample = df[col].dropna().astype(str).head(sample_size)
+        if sample.empty:
+            continue
+        hit = 0
+        for v in sample:
+            v = v.strip()
+            if v.startswith("http://") or v.startswith("https://"):
+                if any(ext in v.lower() for ext in image_exts):
+                    hit += 1
+                    continue
+            if any(v.lower().endswith(ext) for ext in image_exts):
+                hit += 1
+        ratio = hit / max(len(sample), 1)
+        if ratio >= 0.6 or any(h in col_lower for h in name_hints):
+            candidates.append(col)
+    return candidates
+
+
+def _infer_column_types(
+    df: pd.DataFrame,
+    image_columns: Sequence[str],
+    type_hints: Mapping[str, str] | None = None,
+    sample_size: int = 80,
+) -> dict[str, str]:
+    result: dict[str, str] = {}
+    type_hints = type_hints or {}
+    for col in df.columns:
+        if col in image_columns:
+            result[col] = "image"
+            continue
+        if col in type_hints:
+            result[col] = type_hints[col]
+            continue
+        result[col] = _infer_semantic_type(df[col], sample_size=sample_size)
+    return result
+
+
+def _infer_semantic_type(series: pd.Series, sample_size: int = 80) -> str:
+    dtype = series.dtype
+    if pd.api.types.is_bool_dtype(dtype):
+        return "boolean"
+    if pd.api.types.is_numeric_dtype(dtype):
+        return "number"
+    if pd.api.types.is_datetime64_any_dtype(dtype):
+        return "datetime"
+
+    sample = series.dropna().astype(str).head(sample_size)
+    if sample.empty:
+        return "string"
+
+    sample_list = [v.strip() for v in sample if v and str(v).strip()]
+    if not sample_list:
+        return "string"
+
+    json_hits = sum(1 for s in sample_list if _looks_like_json(s))
+    md_hits = sum(1 for s in sample_list if _looks_like_markdown(s))
+    code_hits = sum(1 for s in sample_list if _looks_like_code(s))
+    num_hits = _count_numeric(sample_list)
+    date_hits = _count_datetime(sample_list)
+
+    ratio = lambda n: n / max(len(sample_list), 1)
+    if ratio(json_hits) >= 0.6:
+        return "json"
+    if ratio(md_hits) >= 0.5:
+        return "markdown"
+    if ratio(code_hits) >= 0.5:
+        return "code"
+    if ratio(date_hits) >= 0.6:
+        return "datetime"
+    if ratio(num_hits) >= 0.8:
+        return "number"
+    return "string"
+
+
+def _looks_like_json(text: str) -> bool:
+    if not (text.startswith("{") and text.endswith("}")) and not (
+        text.startswith("[") and text.endswith("]")
+    ):
+        return False
+    try:
+        json.loads(text)
+        return True
+    except Exception:
+        return False
+
+
+def _looks_like_markdown(text: str) -> bool:
+    indicators = ("```", "# ", "## ", "- ", "* ", "> ", "[", "](", "**", "_")
+    return any(token in text for token in indicators)
+
+
+def _looks_like_code(text: str) -> bool:
+    indicators = (";", "{", "}", "def ", "class ", "function ", "=>", "var ", "let ", "const ")
+    return any(token in text for token in indicators)
+
+def _count_numeric(values: list[str]) -> int:
+    if not values:
+        return 0
+    parsed = pd.to_numeric(pd.Series(values), errors="coerce")
+    return int(parsed.notna().sum())
+
+
+def _count_datetime(values: list[str]) -> int:
+    if not values:
+        return 0
+    parsed = pd.to_datetime(
+        pd.Series(values),
+        errors="coerce",
+        utc=False,
+        format="mixed",
+        cache=True,
+    )
+    return int(parsed.notna().sum())
+
+
+def _to_jsonable(value):
+    if pd.isna(value):
+        return None
+    if isinstance(value, (np.integer, np.floating, np.bool_)):
+        return value.item()
+    if isinstance(value, pd.Timestamp):
+        return value.isoformat()
+    return value
+
+
+def _build_viewer_from_df(
+    df: pd.DataFrame,
+    image_columns: Sequence[str],
+    output: str | Path,
+    thumb_size: int,
+    batch: int,
+    launch: bool,
+    type_hints: Mapping[str, str] | None,
+    chunk_size: int,
+) -> Path:
+    out = Path(output)
+    out.mkdir(parents=True, exist_ok=True)
+    img_dir = out / "images"
+    thumb_dir = out / "thumbs"
+    if image_columns:
+        img_dir.mkdir(parents=True, exist_ok=True)
+        thumb_dir.mkdir(parents=True, exist_ok=True)
+
+    records: list[dict] = []
+    chunk_index = 0
+    chunk_paths: list[Path] = []
+    columns = list(df.columns)
+    for i, row in enumerate(df.reset_index(drop=True).itertuples(index=False, name=None)):
+        row_map = dict(zip(columns, row))
+        img_map: dict[str, str | None] = {}
+        for col in image_columns:
+            raw_path = row_map[col]
+            img_id = None
+            if pd.notna(raw_path):
+                raw_text = str(raw_path)
+                if raw_text.startswith("http://") or raw_text.startswith("https://"):
+                    img_id = None
+                else:
+                    img_path = Path(raw_text)
+                    ext = img_path.suffix.lower() if img_path.suffix else ".jpg"
+                    name = f"{i:06d}_{col}{ext}"
+                    if img_path.exists():
+                        shutil.copy(img_path, img_dir / name)
+                        make_thumbnail(img_path, thumb_dir / name, thumb_size)
+                        img_id = name
+            img_map[col] = img_id
+
+        record = {"__img_id__": img_map}
+        for col in columns:
+            record[col] = _to_jsonable(row_map[col])
+        records.append(record)
+
+        if chunk_size > 0 and len(records) >= chunk_size:
+            chunk_path = out / f"meta_{chunk_index:04d}.js"
+            write_meta_chunk_js(chunk_path, records)
+            chunk_paths.append(chunk_path)
+            records = []
+            chunk_index += 1
+
+    if records or not chunk_paths:
+        chunk_path = out / f"meta_{chunk_index:04d}.js"
+        write_meta_chunk_js(chunk_path, records)
+        chunk_paths.append(chunk_path)
+    column_types = _infer_column_types(df, image_columns=image_columns, type_hints=type_hints)
+    write_viewer(
+        out / "viewer.html",
+        columns=columns,
+        column_types=column_types,
+        image_column=image_columns[0] if image_columns else "",
+        image_columns=list(image_columns),
+        batch_size=batch,
+        chunk_count=len(chunk_paths),
+    )
+    html_path = out / "viewer.html"
+    if launch:
+        import webbrowser
+
+        webbrowser.open(html_path.resolve().as_uri())
+    return html_path

viscsv/meta.py

@@ -0,0 +1,18 @@
+import json
+from pathlib import Path
+from typing import Iterable
+
+
+def write_meta_jsonl(meta_path: Path, records: Iterable[dict]) -> None:
+    with meta_path.open("w", encoding="utf-8") as f:
+        for r in records:
+            f.write(json.dumps(r, ensure_ascii=False) + "\n")
+
+
+def write_meta_chunk_js(meta_path: Path, records: list[dict]) -> None:
+    payload = (
+        "window.__VISCSV_LAST_CHUNK__ = "
+        + json.dumps(records, ensure_ascii=False)
+        + ";"
+    )
+    meta_path.write_text(payload, encoding="utf-8")

viscsv/thumbnail.py

@@ -0,0 +1,26 @@
+from pathlib import Path
+from PIL import Image, ImageDraw
+
+
+def _save_image(img: Image.Image, dst: Path, quality: int) -> None:
+    ext = dst.suffix.lower()
+    if ext == ".png":
+        img.save(dst, "PNG", optimize=True)
+    else:
+        img.save(dst, "JPEG", quality=quality)
+
+
+def make_thumbnail(src: Path, dst: Path, size: int, quality: int = 85) -> bool:
+    try:
+        img = Image.open(src)
+        img.thumbnail((size, size))
+        _save_image(img, dst, quality)
+        return True
+    except Exception:
+        img = Image.new("RGB", (size, size), (235, 235, 235))
+        draw = ImageDraw.Draw(img)
+        draw.rectangle([(0, 0), (size - 1, size - 1)], outline=(190, 190, 190))
+        draw.line([(0, 0), (size - 1, size - 1)], fill=(200, 200, 200), width=2)
+        draw.line([(0, size - 1), (size - 1, 0)], fill=(200, 200, 200), width=2)
+        _save_image(img, dst, quality)
+        return False

viscsv/viewer.py

@@ -0,0 +1,772 @@
+from pathlib import Path
+import json
+
+
+HTML_TEMPLATE = """<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>VisCSV Viewer</title>
+<style>
+:root {
+  --bg: #f4f5f7;
+  --panel: #ffffff;
+  --ink: #1b1f24;
+  --muted: #5b6472;
+  --accent: #2a5d7c;
+  --accent-soft: #e0ecf4;
+  --border: #e2e6ea;
+  --shadow: 0 8px 30px rgba(16, 24, 40, 0.08);
+  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  --sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: var(--sans);
+  color: var(--ink);
+  background: radial-gradient(1200px 600px at 10% -10%, #f0f6fb, transparent),
+              radial-gradient(900px 500px at 100% 10%, #f2f0fb, transparent),
+              var(--bg);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+header {
+  padding: 22px 36px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+h1 {
+  margin: 0 0 6px;
+  font-weight: 700;
+  font-size: 26px;
+}
+
+.subtitle {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  border: 1px solid var(--border);
+  background: var(--panel);
+  border-radius: 999px;
+  padding: 8px 14px;
+  font-size: 13px;
+  cursor: pointer;
+  box-shadow: var(--shadow);
+}
+
+.drawer {
+  display: none;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+  padding: 10px 36px 18px;
+}
+
+.drawer.active {
+  display: grid;
+}
+
+.group {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 14px;
+  box-shadow: var(--shadow);
+  display: grid;
+  gap: 8px;
+}
+
+.group label {
+  font-size: 12px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.group input,
+.group select {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 14px;
+  outline: none;
+  background: #fff;
+}
+
+.stats {
+  display: grid;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.stats strong {
+  color: var(--ink);
+}
+
+.table-wrap {
+  padding: 10px 36px 10px;
+  overflow: auto;
+  flex: 1 1 auto;
+}
+
+table {
+  width: max-content;
+  min-width: 100%;
+  table-layout: auto;
+  border-collapse: collapse;
+  background: var(--panel);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: var(--shadow);
+}
+
+thead th {
+  position: sticky;
+  top: 0;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  font-size: 13px;
+  padding: 12px;
+  z-index: 2;
+  min-width: 140px;
+  white-space: nowrap;
+}
+
+.th-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.col-resizer {
+  width: 6px;
+  height: 22px;
+  cursor: col-resize;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.06);
+  flex: 0 0 auto;
+}
+
+thead th.sorted {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+tbody td {
+  border-bottom: 1px solid var(--border);
+  padding: 10px 12px;
+  font-size: 13px;
+  vertical-align: top;
+  max-width: 320px;
+  word-break: break-word;
+  white-space: normal;
+  min-width: 140px;
+}
+
+tbody tr:hover {
+  background: #f7fafc;
+}
+
+.preview {
+  width: 120px;
+}
+
+.preview img {
+  width: 110px;
+  height: 110px;
+  object-fit: cover;
+  border-radius: 10px;
+  border: 1px solid #d7dee6;
+  cursor: pointer;
+  background: #fff;
+}
+
+.cell-image img {
+  width: 100%;
+  height: auto;
+  max-height: 160px;
+  object-fit: cover;
+  border-radius: 10px;
+  border: 1px solid #d7dee6;
+  cursor: pointer;
+  background: #fff;
+}
+
+.cell-number {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.cell-code {
+  font-family: var(--mono);
+  background: #f3f4f6;
+  border-radius: 6px;
+  padding: 6px 8px;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cell-json {
+  font-family: var(--mono);
+  white-space: pre-wrap;
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 8px 10px;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cell-date {
+  font-family: var(--mono);
+}
+
+
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 11px;
+  margin-right: 6px;
+}
+
+.value-null {
+  color: #9aa4af;
+  font-family: var(--mono);
+}
+
+.footer {
+  padding: 6px 36px 12px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+@media (max-width: 860px) {
+  header { padding: 18px 18px 8px; flex-direction: column; align-items: flex-start; }
+  .drawer, .table-wrap, .footer { padding-left: 18px; padding-right: 18px; }
+  .cell-image img { width: 90px; height: 90px; }
+}
+</style>
+</head>
+<body>
+<div class="page">
+
+<header>
+  <div>
+    <h1>VisCSV Image Table</h1>
+    <div class="subtitle">Focus on the data preview. Controls are tucked into drawers.</div>
+  </div>
+  <div class="actions">
+    <button class="action-btn" data-toggle="search">Search</button>
+    <button class="action-btn" data-toggle="filter">Filter</button>
+    <button class="action-btn" data-toggle="sort">Sort</button>
+    <button class="action-btn" data-toggle="stats">Stats</button>
+  </div>
+</header>
+
+<section class="drawer" id="drawer-search">
+  <div class="group">
+    <label for="searchInput">Search</label>
+    <input id="searchInput" placeholder="Search all columns" autocomplete="off">
+    <div class="stats"><span>Total: <strong id="totalCount">0</strong></span>
+    <span>Filtered: <strong id="filteredCount">0</strong></span></div>
+  </div>
+</section>
+
+<section class="drawer" id="drawer-filter">
+  <div class="group">
+    <label>Filter</label>
+    <select id="filterColumn"></select>
+    <input id="filterValue" placeholder="Contains" autocomplete="off">
+  </div>
+</section>
+
+<section class="drawer" id="drawer-sort">
+  <div class="group">
+    <label>Sort</label>
+    <select id="sortColumn"></select>
+    <select id="sortDir">
+      <option value="asc">Ascending</option>
+      <option value="desc">Descending</option>
+    </select>
+  </div>
+</section>
+
+<section class="drawer" id="drawer-stats">
+  <div class="group">
+    <label>Stats Column</label>
+    <select id="statsColumn"></select>
+    <div class="stats" id="statsPanel"></div>
+  </div>
+</section>
+
+<section class="table-wrap">
+  <table>
+    <thead>
+      <tr>
+        {headers}
+      </tr>
+    </thead>
+    <tbody id="tbody"></tbody>
+  </table>
+</section>
+
+<div class="footer">
+  Tip: Use the filter to quickly narrow a column, then sort for easier comparison.
+</div>
+
+<script>
+const batchSize = {batch_size};
+const columns = {columns};
+const columnTypes = {column_types};
+const imageColumn = {image_column};
+const imageColumns = {image_columns};
+const chunkCount = {chunk_count};
+
+const placeholder =
+  "data:image/svg+xml;charset=utf-8," +
+  encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>
+  <rect width='100%' height='100%' fill='#f1f3f5'/>
+  <path d='M10 10L110 110M110 10L10 110' stroke='#cbd5e1' stroke-width='4'/>
+  </svg>`);
+
+let data = [];
+let view = [];
+let cursor = 0;
+
+const tbody = document.getElementById("tbody");
+const totalCount = document.getElementById("totalCount");
+const filteredCount = document.getElementById("filteredCount");
+const filterColumn = document.getElementById("filterColumn");
+const filterValue = document.getElementById("filterValue");
+const sortColumn = document.getElementById("sortColumn");
+const sortDir = document.getElementById("sortDir");
+const searchInput = document.getElementById("searchInput");
+const statsColumn = document.getElementById("statsColumn");
+const statsPanel = document.getElementById("statsPanel");
+const colSpan = columns.length;
+const table = document.querySelector("table");
+const tableWrap = document.querySelector(".table-wrap");
+
+const drawers = {
+  search: document.getElementById("drawer-search"),
+  filter: document.getElementById("drawer-filter"),
+  sort: document.getElementById("drawer-sort"),
+  stats: document.getElementById("drawer-stats"),
+};
+
+let columnsOrder = [...columns];
+const columnWidths = {};
+
+document.querySelectorAll("[data-toggle]").forEach(btn => {
+  btn.addEventListener("click", () => {
+    const key = btn.getAttribute("data-toggle");
+    Object.entries(drawers).forEach(([k, el]) => {
+      el.classList.toggle("active", k === key ? !el.classList.contains("active") : false);
+    });
+  });
+});
+
+function setOptions(select, items) {
+  select.innerHTML = items.map(v => `<option value="${v}">${v}</option>`).join("");
+}
+
+function normalizeValue(value) {
+  if (value === null || value === undefined) return "";
+  return String(value).toLowerCase();
+}
+
+function parseNumber(value) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : null;
+}
+
+function parseDate(value) {
+  const t = Date.parse(value);
+  return Number.isFinite(t) ? t : null;
+}
+
+function compareValues(a, b, type) {
+  if (type === "number") {
+    const na = parseNumber(a);
+    const nb = parseNumber(b);
+    if (na === null && nb === null) return 0;
+    if (na === null) return -1;
+    if (nb === null) return 1;
+    return na - nb;
+  }
+  if (type === "datetime") {
+    const ta = parseDate(a);
+    const tb = parseDate(b);
+    if (ta === null && tb === null) return 0;
+    if (ta === null) return -1;
+    if (tb === null) return 1;
+    return ta - tb;
+  }
+  if (type === "boolean") {
+    const ba = Boolean(a);
+    const bb = Boolean(b);
+    return (ba === bb) ? 0 : (ba ? 1 : -1);
+  }
+  const sa = normalizeValue(a);
+  const sb = normalizeValue(b);
+  if (sa < sb) return -1;
+  if (sa > sb) return 1;
+  return 0;
+}
+
+function sortView() {
+  const col = sortColumn.value;
+  const dir = sortDir.value === "desc" ? -1 : 1;
+  const type = columnTypes[col] || "string";
+  view.sort((a, b) => compareValues(a[col], b[col], type) * dir);
+}
+
+function applyFilters() {
+  if (!data.length) {
+    tbody.innerHTML = `<tr><td colspan="${colSpan}" class="value-null">No data</td></tr>`;
+    updateCounts();
+    statsPanel.innerHTML = "<span>No data</span>";
+    return;
+  }
+  const q = searchInput.value.trim().toLowerCase();
+  const fcol = filterColumn.value;
+  const fval = filterValue.value.trim().toLowerCase();
+
+  view = data.filter(row => {
+    if (q) {
+      const match = columns.some(c => normalizeValue(row[c]).includes(q));
+      if (!match) return false;
+    }
+    if (fval) {
+      return normalizeValue(row[fcol]).includes(fval);
+    }
+    return true;
+  });
+
+  sortView();
+  cursor = 0;
+  tbody.innerHTML = "";
+  highlightSorted();
+  renderBatch();
+  updateCounts();
+  updateStats();
+}
+
+function highlightSorted() {
+  const col = sortColumn.value;
+  document.querySelectorAll("thead th").forEach(th => {
+    th.classList.toggle("sorted", th.getAttribute("data-col") === col);
+  });
+}
+
+function renderBatch() {
+  for (let i = cursor; i < Math.min(cursor + batchSize, view.length); i++) {
+    const d = view[i];
+    let row = "<tr>";
+    for (const c of columnsOrder) {
+      row += renderCell(d, c);
+    }
+    row += "</tr>";
+    tbody.insertAdjacentHTML("beforeend", row);
+  }
+  cursor += batchSize;
+}
+
+function renderCell(row, col) {
+  const v = row[col];
+  const type = columnTypes[col] || "string";
+  const dataCol = `data-col="${col}"`;
+  const widthStyle = columnWidths[col] ? ` style="width:${columnWidths[col]}px;min-width:${columnWidths[col]}px"` : "";
+  if (v === null || v === undefined || v === "") {
+    return `<td ${dataCol}${widthStyle} class="value-null">null</td>`;
+  }
+  if ((type === "image" || imageColumns.includes(col)) && imageColumns.length) {
+    const imgMap = row.__img_id__ || {};
+    const imgId = imgMap[col];
+    const raw = String(v);
+    const src = imgId ? `thumbs/${imgId}` : (raw.startsWith("http") ? raw : placeholder);
+    const openTarget = imgId ? `images/${imgId}` : (raw.startsWith("http") ? raw : null);
+    return `<td ${dataCol}${widthStyle} class="cell-image">` +
+           `<img src="${src}" loading="lazy" alt="image"` +
+           (openTarget ? ` onclick="window.open('${openTarget}')"` : "") +
+           `>` +
+           `</td>`;
+  }
+  if (type === "number") {
+    return `<td ${dataCol}${widthStyle} class="cell-number">${v}</td>`;
+  }
+  if (type === "boolean") {
+    return `<td ${dataCol}${widthStyle}><span class="badge">${String(Boolean(v))}</span></td>`;
+  }
+  if (type === "datetime") {
+    const t = parseDate(v);
+    const text = t ? new Date(t).toLocaleString() : String(v);
+    const iso = t ? new Date(t).toISOString() : String(v);
+    return `<td ${dataCol}${widthStyle} class="cell-date" title="${iso}">${text}</td>`;
+  }
+  const s = String(v);
+  if (type === "json" || s.trim().startsWith("{") || s.trim().startsWith("[")) {
+    try {
+      const obj = JSON.parse(s);
+      return `<td ${dataCol}${widthStyle}><pre class="cell-json">${JSON.stringify(obj, null, 2)}</pre></td>`;
+    } catch (e) {
+      return `<td ${dataCol}${widthStyle}>${escapeHtml(s)}</td>`;
+    }
+  }
+  if (type === "markdown") {
+    return `<td ${dataCol}${widthStyle}>${escapeHtml(s)}</td>`;
+  }
+  if (type === "code" || s.includes(";") || (s.includes("{") && s.includes("}"))) {
+    return `<td ${dataCol}${widthStyle}><code class="cell-code">${escapeHtml(s)}</code></td>`;
+  }
+  return `<td ${dataCol}${widthStyle}>${escapeHtml(s)}</td>`;
+}
+
+function escapeHtml(str) {
+  return str
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function renderHeader() {
+  const thead = document.querySelector("thead tr");
+  thead.innerHTML = columnsOrder.map(c => {
+    const w = columnWidths[c];
+    const style = w ? ` style="width:${w}px;min-width:${w}px"` : "";
+    return `<th data-col="${c}" draggable="true"${style}><div class="th-wrap"><span>${c}</span><span class="col-resizer" data-resize="${c}"></span></div></th>`;
+  }).join("");
+  attachDragHandlers();
+  attachResizeHandlers();
+}
+
+function attachDragHandlers() {
+  const headers = document.querySelectorAll("thead th");
+  headers.forEach(th => {
+    th.addEventListener("dragstart", e => {
+      e.dataTransfer.setData("text/plain", th.getAttribute("data-col"));
+    });
+    th.addEventListener("dragover", e => e.preventDefault());
+    th.addEventListener("drop", e => {
+      e.preventDefault();
+      const from = e.dataTransfer.getData("text/plain");
+      const to = th.getAttribute("data-col");
+      if (!from || !to || from === to) return;
+      const fromIdx = columnsOrder.indexOf(from);
+      const toIdx = columnsOrder.indexOf(to);
+      columnsOrder.splice(fromIdx, 1);
+      columnsOrder.splice(toIdx, 0, from);
+      tbody.innerHTML = "";
+      cursor = 0;
+      renderHeader();
+      highlightSorted();
+      renderBatch();
+    });
+  });
+}
+
+function attachResizeHandlers() {
+  document.querySelectorAll(".col-resizer").forEach(resizer => {
+    resizer.addEventListener("mousedown", e => {
+      e.preventDefault();
+      e.stopPropagation();
+      const col = resizer.getAttribute("data-resize");
+      const th = resizer.closest("th");
+      const startX = e.clientX;
+      const startWidth = th.getBoundingClientRect().width;
+
+      function onMove(ev) {
+        const delta = ev.clientX - startX;
+        const next = Math.max(80, Math.round(startWidth + delta));
+        columnWidths[col] = next;
+        th.style.width = `${next}px`;
+        th.style.minWidth = `${next}px`;
+        document.querySelectorAll(`td[data-col="${col}"]`).forEach(td => {
+          td.style.width = `${next}px`;
+          td.style.minWidth = `${next}px`;
+        });
+      }
+
+      function onUp() {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      }
+
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    });
+  });
+}
+
+function updateCounts() {
+  totalCount.textContent = data.length;
+  filteredCount.textContent = view.length;
+}
+
+function updateStats() {
+  const col = statsColumn.value;
+  const type = columnTypes[col] || "string";
+  const values = view.map(r => r[col]).filter(v => v !== null && v !== undefined && v !== "");
+  if (values.length === 0) {
+    statsPanel.innerHTML = "<span>No data</span>";
+    return;
+  }
+
+  if (type === "number") {
+    const nums = values.map(v => parseNumber(v)).filter(v => v !== null);
+    if (!nums.length) {
+      statsPanel.innerHTML = "<span>No numeric data</span>";
+      return;
+    }
+    const min = Math.min(...nums);
+    const max = Math.max(...nums);
+    const mean = nums.reduce((a, b) => a + b, 0) / nums.length;
+    statsPanel.innerHTML = `<span class="badge">number</span>
+      <div>count: <strong>${nums.length}</strong></div>
+      <div>min: <strong>${min.toFixed(3)}</strong></div>
+      <div>max: <strong>${max.toFixed(3)}</strong></div>
+      <div>mean: <strong>${mean.toFixed(3)}</strong></div>`;
+    return;
+  }
+
+  if (type === "boolean") {
+    const counts = { true: 0, false: 0 };
+    values.forEach(v => counts[Boolean(v)]++);
+    statsPanel.innerHTML = `<span class="badge">boolean</span>
+      <div>true: <strong>${counts.true}</strong></div>
+      <div>false: <strong>${counts.false}</strong></div>`;
+    return;
+  }
+
+  if (type === "datetime") {
+    const times = values.map(v => parseDate(v)).filter(v => v !== null);
+    if (!times.length) {
+      statsPanel.innerHTML = "<span>No datetime data</span>";
+      return;
+    }
+    const min = new Date(Math.min(...times)).toISOString();
+    const max = new Date(Math.max(...times)).toISOString();
+    statsPanel.innerHTML = `<span class="badge">datetime</span>
+      <div>count: <strong>${times.length}</strong></div>
+      <div>min: <strong>${min}</strong></div>
+      <div>max: <strong>${max}</strong></div>`;
+    return;
+  }
+
+  const freq = new Map();
+  values.forEach(v => {
+    const key = String(v);
+    freq.set(key, (freq.get(key) || 0) + 1);
+  });
+  const top = Array.from(freq.entries()).sort((a, b) => b[1] - a[1]).slice(0, 5);
+  statsPanel.innerHTML = `<span class="badge">string</span>` +
+    top.map(([k, v]) => `<div>${k}: <strong>${v}</strong></div>`).join("");
+}
+
+function init() {
+  setOptions(filterColumn, columns);
+  setOptions(sortColumn, columns);
+  setOptions(statsColumn, columns);
+
+  filterColumn.value = columns[0];
+  sortColumn.value = columns[0];
+  statsColumn.value = columns[0];
+
+  [searchInput, filterValue].forEach(el => el.addEventListener("input", applyFilters));
+  [filterColumn, sortColumn, sortDir, statsColumn].forEach(el => el.addEventListener("change", applyFilters));
+
+  renderHeader();
+}
+
+init();
+loadChunks();
+
+window.addEventListener("scroll", () => {
+  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 400) {
+    renderBatch();
+  }
+});
+
+function loadChunks() {
+  let index = 0;
+  function loadNext() {
+    if (index >= chunkCount) {
+      applyFilters();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `meta_${String(index).padStart(4, "0")}.js`;
+    script.onload = () => {
+      const chunk = Array.isArray(window.__VISCSV_LAST_CHUNK__) ? window.__VISCSV_LAST_CHUNK__ : [];
+      if (chunk.length) {
+        data = data.concat(chunk);
+      }
+      window.__VISCSV_LAST_CHUNK__ = [];
+      applyFilters();
+      index += 1;
+      loadNext();
+    };
+    script.onerror = () => {
+      index += 1;
+      loadNext();
+    };
+    document.body.appendChild(script);
+  }
+  loadNext();
+}
+</script>
+
+</div>
+</body>
+</html>
+"""
+
+
+def write_viewer(
+    html_path: Path,
+    columns: list[str],
+    column_types: dict[str, str],
+    image_column: str,
+    image_columns: list[str],
+    batch_size: int,
+    chunk_count: int,
+):
+    headers = "".join(f"<th data-col=\"{c}\">{c}</th>" for c in columns)
+    html = HTML_TEMPLATE
+    html = html.replace("{headers}", headers)
+    html = html.replace("{columns}", json.dumps(columns))
+    html = html.replace("{column_types}", json.dumps(column_types))
+    html = html.replace("{image_column}", json.dumps(image_column))
+    html = html.replace("{image_columns}", json.dumps(image_columns))
+    html = html.replace("{batch_size}", str(batch_size))
+    html = html.replace("{chunk_count}", str(chunk_count))
+    html_path.write_text(html, encoding="utf-8")

viscsv-0.1.0.dist-info/METADATA

@@ -0,0 +1,78 @@
+Metadata-Version: 2.4
+Name: viscsv
+Version: 0.1.0
+Summary: Add your description here
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+Requires-Dist: pandas>=2.3.3
+Requires-Dist: pillow>=12.1.0
+
+# VisCSV
+
+![Python](https://img.shields.io/badge/Python-3.10%2B-3776AB?logo=python&logoColor=white)
+![Pandas](https://img.shields.io/badge/Pandas-2.x-150458?logo=pandas&logoColor=white)
+![License](https://img.shields.io/badge/License-MIT-000000?logo=opensourceinitiative&logoColor=white)
+
+VisCSV turns CSV data (with image paths) into a clean, interactive HTML table.  
+Simple API, fast preview, no server required.
+
+## Highlights
+
+- Image columns support (local paths or URLs)
+- Smart type inference (number, datetime, boolean, json, code)
+- Drag to reorder columns
+- Resize column widths
+- Built-in horizontal/vertical scrolling
+- Chunked loading for large datasets
+
+## Quickstart
+
+```python
+from viscsv import preview
+
+preview("data.csv", output="output")
+```
+
+Open `output/viewer.html` in your browser.
+
+## With Image Columns
+
+```python
+from viscsv import preview
+
+preview("data.csv", image="image_path", output="output")
+```
+
+## Use the Class API
+
+```python
+from viscsv import VisCSV
+
+vc = VisCSV(image="image")
+vc.add("imgs/1.jpg", label="cat", score=0.98)
+vc.add([
+    {"image": "imgs/2.jpg", "label": "dog", "score": 0.87},
+    {"image": "imgs/3.jpg", "label": "fox", "score": 0.72},
+])
+vc.build(output="output")
+```
+
+## Type Hints (Optional)
+
+```python
+preview(
+    "data.csv",
+    output="output",
+    type_hints={"payload": "json", "created_at": "datetime"},
+)
+```
+
+## Large Datasets
+
+```python
+preview("big.csv", output="output", chunk_size=2000)
+```
+
+## Links
+
+- 中文说明: [README-ch.md](README-ch.md)

viscsv-0.1.0.dist-info/RECORD

@@ -0,0 +1,9 @@
+viscsv/__init__.py,sha256=2H6wo724_kfaILCGlWw9BvD5wX1OOdAXhP3GOMg8Tbc,118
+viscsv/builder.py,sha256=FkEYNxDciD-sQr-Hf2DzxoM2G01raF7XS3OELxzhxt0,14279
+viscsv/meta.py,sha256=kdp3jF1Bz3L9nR6I6T_AXlTni5Gf5MRhFm9UdAwbjJM,533
+viscsv/thumbnail.py,sha256=ffZKUnqw8jazzly6XvLmDhrSXObgvIun6kfUzQaze8Q,917
+viscsv/viewer.py,sha256=bE98Z0YubepbqrRbsWMyANaVK7wuv9zc2jNhouf68tI,20645
+viscsv-0.1.0.dist-info/METADATA,sha256=YuH5JaJwXcByeMIEUkFHoJ76RBGyMS2kUcQuaWNPKUo,1806
+viscsv-0.1.0.dist-info/WHEEL,sha256=wUyA8OaulRlbfwMtmQsvNngGrxQHAvkKcvRmdizlJi0,92
+viscsv-0.1.0.dist-info/top_level.txt,sha256=Lp9UADgVYnnRtfDCXn9SVoUIwgVe1lGyBhR_HarbEV8,7
+viscsv-0.1.0.dist-info/RECORD,,

viscsv-0.1.0.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (80.10.2)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

viscsv-0.1.0.dist-info/top_level.txt

@@ -0,0 +1 @@
+viscsv