> ## Documentation Index
> Fetch the complete documentation index at: https://felimet-hub.jmcores.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Label Anything SAM 標註平台

> 整合 Label Studio、Supabase、MinIO 物件儲存與 SAM3 / SAM2.1 GPU 推論後端的容器化影像標註堆疊，透過 Cloudflare Tunnel 對外曝露 Web 介面，主機不開放任何入站埠號，可協作完成大規模物件分割標註任務。

export const OptionPicker = ({options = [], lang = "zh", label}) => {
  const t = lang === "en" ? {
    pick: label || "Pick an option to compare",
    rec: "Recommended"
  } : {
    pick: label || "點選項目比較",
    rec: "推薦"
  };
  const opts = Array.isArray(options) ? options : [];
  const [sel, setSel] = useState(0);
  if (opts.length === 0) return null;
  const idx = Math.min(sel, opts.length - 1);
  const cur = opts[idx];
  const css = `
  .op-root{--op-bg:#FAF8F3;--op-surface:rgba(0,0,0,0.025);--op-border:rgba(0,0,0,0.09);--op-text:#2b2722;--op-dim:#6f6a62;--op-faint:#8a8378;--op-accent:#bf7551;border:1px solid var(--op-border);border-radius:14px;background:var(--op-bg);color:var(--op-text);overflow:hidden;}
  .dark .op-root{--op-bg:#1b1a18;--op-surface:rgba(255,255,255,0.03);--op-border:rgba(255,255,255,0.08);--op-text:#e7e3da;--op-dim:#a8a299;--op-faint:#8a8378;--op-accent:#cf8a68;}
  .op-head{padding:12px 16px 11px;border-bottom:1px solid var(--op-border);font-size:12.5px;color:var(--op-dim);display:flex;align-items:center;gap:8px;}
  .op-head-ic{color:var(--op-accent);flex-shrink:0;}
  .op-tabs{display:flex;gap:8px;padding:14px 16px 4px;flex-wrap:wrap;}
  .op-tab{position:relative;flex:1 1 130px;min-width:120px;text-align:left;background:transparent;border:1px solid var(--op-border);border-radius:11px;padding:11px 13px;cursor:pointer;color:inherit;font:inherit;transition:border-color .15s,background .15s,box-shadow .15s;}
  .op-tab:hover{background:var(--op-surface);}
  .op-tab-on{border-color:rgba(191,117,81,.5);background:rgba(191,117,81,.07);box-shadow:0 0 0 3px rgba(191,117,81,.1);}
  .op-tab-name{font-size:14.5px;font-weight:600;line-height:1.3;}
  .op-tab-on .op-tab-name{color:var(--op-accent);}
  .op-badge{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:20px;background:rgba(191,117,81,.14);color:var(--op-accent);}
  .op-rec{position:absolute;top:10px;right:11px;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--op-accent);}
  .op-body{padding:6px 16px 16px;}
  .op-specs{border:1px solid var(--op-border);border-radius:10px;overflow:hidden;margin-bottom:11px;}
  .op-row{display:flex;border-top:1px solid var(--op-border);font-size:13px;}
  .op-row:first-child{border-top:none;}
  .op-k{width:42%;flex-shrink:0;padding:8px 12px;color:var(--op-dim);background:var(--op-surface);}
  .op-v{flex:1 1 0;min-width:0;padding:8px 12px;font-weight:500;}
  .op-note{font-size:13px;line-height:1.6;color:var(--op-dim);padding:0 2px;}
  `;
  return <div className="op-root">
      <style>{css}</style>
      <div className="op-head"><svg className="op-head-ic" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" /><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" /><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" /></svg>{t.pick}</div>
      <div className="op-tabs">
        {opts.map((o, i) => <button key={i} type="button" className={"op-tab" + (i === idx ? " op-tab-on" : "")} onClick={() => setSel(i)}>
            {o.recommend && <span className="op-rec">★ {t.rec}</span>}
            <div className="op-tab-name">{o.name}</div>
            {o.badge && <span className="op-badge">{o.badge}</span>}
          </button>)}
      </div>
      <div className="op-body">
        <div className="op-specs">
          {(cur.specs || []).map((row, i) => <div className="op-row" key={i}>
              <div className="op-k">{row[0]}</div>
              <div className="op-v">{row[1]}</div>
            </div>)}
        </div>
        {cur.note && <div className="op-note">{cur.note}</div>}
      </div>
    </div>;
};

export const ArchFlow = ({nodes = [], lang = "zh"}) => {
  const t = lang === "en" ? {
    flow: "Data flow",
    hint: "Click any stage to see what it does",
    stage: "Stage"
  } : {
    flow: "資料流",
    hint: "點任一階段看它做什麼",
    stage: "階段"
  };
  const safe = Array.isArray(nodes) ? nodes : [];
  const [active, setActive] = useState(0);
  if (safe.length === 0) return null;
  const idx = Math.min(active, safe.length - 1);
  const current = safe[idx];
  const css = `
  .af-root{--af-bg:#FAF8F3;--af-surface:rgba(191,117,81,0.06);--af-surface2:rgba(0,0,0,0.025);--af-border:rgba(0,0,0,0.09);--af-text:#2b2722;--af-dim:#6f6a62;--af-faint:#8a8378;--af-rail:rgba(0,0,0,0.12);--af-accent:#bf7551;border:1px solid var(--af-border);border-radius:14px;background:var(--af-bg);color:var(--af-text);overflow:hidden;}
  .dark .af-root{--af-bg:#1b1a18;--af-surface:rgba(207,138,104,0.09);--af-surface2:rgba(255,255,255,0.03);--af-border:rgba(255,255,255,0.08);--af-text:#e7e3da;--af-dim:#a8a299;--af-faint:#8a8378;--af-rail:rgba(255,255,255,0.13);--af-accent:#cf8a68;}
  .af-head{padding:13px 18px 11px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;border-bottom:1px solid var(--af-border);}
  .af-head-ic{color:var(--af-accent);flex-shrink:0;}
  .af-head-t{font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--af-dim);text-transform:uppercase;}
  .af-head-h{font-size:12px;color:var(--af-faint);}
  .af-grid{display:flex;gap:0;align-items:stretch;}
  .af-list{flex:1 1 0;min-width:0;padding:12px 12px 16px;}
  .af-node{display:flex;align-items:stretch;gap:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;padding:0;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;}
  .af-railcol{width:22px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;}
  .af-dot{width:9px;height:9px;border-radius:50%;margin-top:14px;background:var(--af-faint);opacity:.5;flex-shrink:0;transition:background .15s,box-shadow .15s,opacity .15s;}
  .af-line{width:2px;flex:1 1 0;background:var(--af-rail);min-height:10px;}
  .af-body{flex:1 1 0;min-width:0;padding:9px 12px;margin:2px 0;border-radius:9px;border:1px solid transparent;transition:background .15s,border-color .15s;}
  .af-node:hover .af-body{background:var(--af-surface2);}
  .af-node-on .af-body{background:var(--af-surface);border-color:rgba(191,117,81,.30);}
  .af-node-on .af-dot{background:var(--af-accent);opacity:1;box-shadow:0 0 0 4px rgba(191,117,81,.15);}
  .af-label{font-size:14.5px;font-weight:550;line-height:1.45;}
  .af-node-on .af-label{color:var(--af-accent);}
  .af-detail{width:300px;flex-shrink:0;border-left:1px solid var(--af-border);padding:16px 18px;background:var(--af-surface2);}
  .af-detail-k{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--af-accent);margin-bottom:7px;}
  .af-detail-l{font-size:16px;font-weight:600;margin-bottom:9px;line-height:1.35;}
  .af-detail-d{font-size:13.5px;line-height:1.65;color:var(--af-dim);}
  @media (max-width:640px){.af-grid{flex-direction:column;}.af-detail{width:auto;border-left:none;border-top:1px solid var(--af-border);}}
  `;
  return <div className="af-root">
      <style>{css}</style>
      <div className="af-head">
        <svg className="af-head-ic" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="8" height="8" x="3" y="3" rx="2" /><path d="M7 11v4a2 2 0 0 0 2 2h4" /><rect width="8" height="8" x="13" y="13" rx="2" /></svg>
        <span className="af-head-t">{t.flow}</span>
        <span className="af-head-h">{t.hint}</span>
      </div>
      <div className="af-grid">
        <div className="af-list">
          {safe.map((n, i) => <button key={i} type="button" className={"af-node" + (i === idx ? " af-node-on" : "")} onClick={() => setActive(i)} onMouseEnter={() => setActive(i)}>
              <div className="af-railcol">
                <div className="af-dot" />
                {i < safe.length - 1 && <div className="af-line" />}
              </div>
              <div className="af-body">
                <div className="af-label">{n.label}</div>
              </div>
            </button>)}
        </div>
        <div className="af-detail">
          <div className="af-detail-k">{t.stage} {idx + 1} / {safe.length}</div>
          <div className="af-detail-l">{current.label}</div>
          <div className="af-detail-d">{current.detail}</div>
        </div>
      </div>
    </div>;
};

`Label Studio` · `SAM` · `Docker` · `Supabase` · `MinIO` · `Cloudflare Tunnel`

## 專案概述

上游 Label Studio ML backend 截至 2026-04 尚未提供維護中的 SAM3 生產部署整合路徑。本專案補上這個缺口：以 Docker Compose 把 Label Studio、PostgreSQL、Redis、MinIO、Nginx、Cloudflare Tunnel 打包成核心堆疊，再用可選的 GPU overlay 掛上 SAM3 與 SAM2.1 的圖片和影片推論後端。Label Studio 的資料庫後端走 Supabase standalone（`v1.1.x` 主線），若偏好原生 PostgreSQL 模式可切換到 `v1.0.4` 版本線。

## 核心功能

* `make up` 一次帶起核心堆疊（Label Studio + PostgreSQL + Redis + MinIO + Nginx + Cloudflare Tunnel）
* SAM3 後端：原生點嵌入（圖片 + 影片）、多種遮罩選取模式（`adaptive` / `top1` / `topk` / `threshold` / `all`）、雙向影片追蹤、多物件軌跡合併、執行時 UI 覆寫閾值與模式
* SAM2.1 後端：圖片與影片推論
* SAM3 Agent（選用）：LLM 輔助遮罩選取，支援 vLLM、Ollama、OpenAI、Gemini、Groq 等具備視覺能力的模型端點
* 批次標註：透過 CLI 或瀏覽器 Web UI 對整個 Label Studio 專案執行 SAM3/SAM2.1 批次推論，不需開終端機
* 分離的環境設定檔（`.env` / `.env.ml` / `.env.supabase` / `.env.tools`）避免單一過大的 env 檔
* Cloudflare Tunnel 選用路由（Supabase Studio、RedisInsight 等管理介面）

## 推論後端

可選的 GPU overlay 提供三種推論後端，依任務性質挑選：

<OptionPicker
  label="點選後端比較"
  options={[
{
name: "SAM3", badge: "主力", recommend: true,
specs: [["模態", "圖片 + 影片"], ["遮罩選取", "adaptive / top1 / topk / threshold / all"], ["影片追蹤", "雙向 + 多物件軌跡合併"], ["執行時覆寫", "可（UI 改閾值與模式）"]],
note: "原生點嵌入的主力後端，遮罩選取模式最完整，支援雙向影片追蹤。"
},
{
name: "SAM2.1",
specs: [["模態", "圖片 + 影片"], ["遮罩選取", "標準"], ["影片追蹤", "基本"], ["定位", "穩定備援 / 相容"]],
note: "圖片與影片推論的穩定後端，作為 SAM3 之外的相容選項。"
},
{
name: "SAM3 Agent", badge: "選用",
specs: [["型態", "LLM 輔助遮罩選取"], ["模型端點", "vLLM / Ollama / OpenAI / Gemini / Groq"], ["需求", "具視覺能力的模型"], ["定位", "語意輔助"]],
note: "用具視覺能力的 LLM 輔助挑選遮罩，屬選用層，疊在 SAM3 之上。"
}
]}
/>

## 專案架構

<ArchFlow
  nodes={[
{ label: "外部瀏覽器", detail: "透過 HTTPS 連到 Cloudflare，不直接接觸主機。" },
{ label: "Cloudflare Tunnel", detail: "outbound-only 連線，cloudflared 從內部主動連到 Cloudflare，主機防火牆不開任何入站埠。" },
{ label: "Nginx", detail: "反向代理，將不同路徑的請求分派至 Label Studio 或管理介面（Supabase Studio、RedisInsight 等）。" },
{ label: "Label Studio", detail: "標註 UI 與任務管理。資料庫後端走 Supabase standalone（PostgreSQL），佇列與快取走 Redis，物件儲存走 MinIO（S3 相容）。" },
{ label: "GPU 推論後端", detail: "可選 overlay：SAM3 圖片 / 影片後端、SAM2.1 後端、SAM3 Agent（LLM 視覺輔助），以 ML backend API 接入 Label Studio。" },
{ label: "批次標註", detail: "對整個 Label Studio 專案執行 SAM3/SAM2.1 批次推論，可透過 CLI 或瀏覽器 Web UI 觸發，無需開終端機。" }
]}
/>

## 快速開始

<Steps>
  <Step title="複製 repo 並準備環境設定">
    ```bash theme={null}
    git clone https://github.com/felimet/label-anything-sam
    cd label-anything-sam
    cp .env.example .env
    cp .env.supabase.example .env.supabase
    ```

    填入所有 `<PLACEHOLDER>` 欄位。`LABEL_STUDIO_USER_TOKEN` 長度上限 40 字元，可用 `openssl rand -hex 20` 產生。`.env` 與 `.env.supabase` 的 `POSTGRES_PASSWORD` 必須一致。
  </Step>

  <Step title="啟動 Supabase 與核心堆疊">
    ```bash theme={null}
    make supabase-up
    make up
    make init-minio
    ```

    `make init-minio` 是一次性指令，初始化 MinIO bucket 與服務帳號。完成後開 `http://localhost:18090` 確認 Label Studio 正常運作。
  </Step>

  <Step title="（選用）掛上 GPU 推論後端">
    ```bash theme={null}
    cp .env.ml.example .env.ml
    # 填入 LABEL_STUDIO_API_KEY（Legacy Token）與 HF_TOKEN
    make ml-up
    ```

    Legacy Token 從 Label Studio 帳號頁取得，不是 Personal Access Token。
  </Step>

  <Step title="確認堆疊健康">
    ```bash theme={null}
    make health
    ```
  </Step>
</Steps>

## 注意事項

<Warning>
  ML 後端必須用 Legacy Token，不是 Personal Access Token。MinIO 的 Label Studio S3 存取用服務帳號金鑰（`MINIO_LS_ACCESS_ID` / `MINIO_LS_SECRET_KEY`），不用 root 憑證。首次部署後立即輪換 MinIO 服務帳號金鑰。`.env` 異動後須 `down` + `up` 重建容器，只 `restart` 不會套用新的環境變數。
</Warning>

## 實際應用面

用於精準畜牧影像資料集的標註作業，以 SAM 自動產生初始遮罩再由標註者修正，比全手動標註省時。批次標註模式可一次對整個 Label Studio 專案的圖片或影片跑推論，適合大批次資料的初步分割。

## 相關連結

* GitHub：[felimet/label-anything-sam](https://github.com/felimet/label-anything-sam)
* Label Studio ML backend 上游：[HumanSignal/label-studio-ml-backend](https://github.com/HumanSignal/label-studio-ml-backend)