> ## 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 annotation stack

> Containerised image annotation stack integrating Label Studio, Supabase, MinIO, and SAM3/SAM2.1 GPU backends, exposed via Cloudflare Tunnel with no open ports.

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`

## Overview

As of 2026-04, the upstream Label Studio ML backend does not provide a maintained SAM3 production deployment path. This project fills that gap: a Docker Compose stack that bundles Label Studio, PostgreSQL, Redis, MinIO, Nginx, and a Cloudflare Tunnel as the core service set, with optional GPU overlays for SAM3 and SAM2.1 image and video inference backends. The Label Studio database backend uses Supabase standalone (the `v1.1.x` main line). For native PostgreSQL mode, switch to the `v1.0.4` release line.

## Core features

* `make up` brings up the full core stack (Label Studio + PostgreSQL + Redis + MinIO + Nginx + Cloudflare Tunnel)
* SAM3 backend: native point embeddings (image + video), mask selection modes (`adaptive` / `top1` / `topk` / `threshold` / `all`), bidirectional video tracking, multi-object track merging, runtime threshold and mode UI overrides
* SAM2.1 backend: image and video inference
* SAM3 Agent (optional): LLM-assisted mask selection, compatible with vLLM, Ollama, OpenAI, Gemini, Groq, and any vision-capable endpoint
* Batch annotation: run SAM3 or SAM2.1 inference over an entire Label Studio project from the CLI or from a browser-based Web UI with no terminal required
* Separate env files (`.env` / `.env.ml` / `.env.supabase` / `.env.tools`) to keep per-scope variables isolated
* Optional Cloudflare Tunnel routes for admin interfaces (Supabase Studio, RedisInsight, etc.)

## Inference backends

Optional GPU overlays provide three inference backends; pick by task:

<OptionPicker
  lang="en"
  label="Compare backends"
  options={[
{
name: "SAM3", badge: "primary", recommend: true,
specs: [["Modality", "Image + video"], ["Mask selection", "adaptive / top1 / topk / threshold / all"], ["Video tracking", "Bidirectional + multi-object merge"], ["Runtime override", "Yes (threshold & mode in UI)"]],
note: "The primary backend with native point embeddings, the most complete mask-selection modes, and bidirectional video tracking."
},
{
name: "SAM2.1",
specs: [["Modality", "Image + video"], ["Mask selection", "Standard"], ["Video tracking", "Basic"], ["Role", "Stable fallback / compatibility"]],
note: "A stable backend for image and video inference, a compatible option alongside SAM3."
},
{
name: "SAM3 Agent", badge: "optional",
specs: [["Type", "LLM-assisted mask selection"], ["Endpoints", "vLLM / Ollama / OpenAI / Gemini / Groq"], ["Requires", "A vision-capable model"], ["Role", "Semantic assist"]],
note: "Uses a vision-capable LLM to help pick masks; an optional layer on top of SAM3."
}
]}
/>

## Architecture

<ArchFlow
  lang="en"
  nodes={[
{ label: "Browser", detail: "Reaches Cloudflare over HTTPS and never touches the host directly." },
{ label: "Cloudflare Tunnel", detail: "Outbound-only: cloudflared dials out to Cloudflare from inside, so the host firewall opens no inbound ports." },
{ label: "Nginx", detail: "Reverse proxy that routes requests to Label Studio or admin interfaces (Supabase Studio, RedisInsight, etc.) based on path." },
{ label: "Label Studio", detail: "Annotation UI and task manager. Database backend is Supabase standalone (PostgreSQL); queue and cache are Redis; object storage is MinIO (S3-compatible)." },
{ label: "GPU inference backends", detail: "Optional overlay: SAM3 image/video backend, SAM2.1 backend, and SAM3 Agent (LLM vision assist), all connected to Label Studio via the ML backend API." },
{ label: "Batch annotation", detail: "Runs SAM3 or SAM2.1 inference over an entire Label Studio project, triggered from the CLI or from a browser-based Web UI with no terminal required." }
]}
/>

## Quick start

<Steps>
  <Step title="Clone the repo and prepare env files">
    ```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
    ```

    Fill in all `<PLACEHOLDER>` values. `LABEL_STUDIO_USER_TOKEN` has a 40-character limit; generate one with `openssl rand -hex 20`. The `POSTGRES_PASSWORD` in `.env` and `.env.supabase` must match.
  </Step>

  <Step title="Start Supabase and the core stack">
    ```bash theme={null}
    make supabase-up
    make up
    make init-minio
    ```

    `make init-minio` is a one-time command that initialises MinIO buckets and service accounts. Open `http://localhost:18090` to confirm Label Studio is running.
  </Step>

  <Step title="Attach GPU inference backends (optional)">
    ```bash theme={null}
    cp .env.ml.example .env.ml
    # Fill in LABEL_STUDIO_API_KEY (Legacy Token) and HF_TOKEN
    make ml-up
    ```

    Use a Legacy Token from the Label Studio account page, not a Personal Access Token.
  </Step>

  <Step title="Verify stack health">
    ```bash theme={null}
    make health
    ```
  </Step>
</Steps>

## Notes

<Warning>
  ML backends require a Legacy Token, not a Personal Access Token. For Label Studio S3 access to MinIO, use the dedicated service-account keys (`MINIO_LS_ACCESS_ID` / `MINIO_LS_SECRET_KEY`), never the root credentials. Rotate the MinIO service-account keys immediately after first deployment. After changing `.env`, recreate containers with `down` + `up` rather than only `restart`, which does not pick up env changes.
</Warning>

## In practice

Used for annotating precision livestock imagery: SAM auto-generates initial masks, which annotators then correct, significantly faster than fully manual labelling. Batch annotation mode processes an entire Label Studio project of images or video in one command, well-suited to the initial segmentation pass on large datasets.

## Links

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