Fix image dict handling, restore original UI, remove .opencode from repo

.gitignore

@@ -0,0 +1,7 @@
+.opencode/
+.venv/
+__pycache__/
+*.py[cod]
+*.safetensors
+*.pt
+*.pth

.opencode/skills/caveman-commit/SKILL.md

@@ -1,65 +0,0 @@
----
-name: caveman-commit
-description: >
-  Ultra-compressed commit message generator. Cuts noise from commit messages while preserving
-  intent and reasoning. Conventional Commits format. Subject ≤50 chars, body only when "why"
-  isn't obvious. Use when user says "write a commit", "commit message", "generate commit",
-  "/commit", or invokes /caveman-commit. Auto-triggers when staging changes.
----
-
-Write commit messages terse and exact. Conventional Commits format. No fluff. Why over what.
-
-## Rules
-
-**Subject line:**
-- `<type>(<scope>): <imperative summary>` — `<scope>` optional
-- Types: `feat`, `fix`, `refactor`, `perf`, `docs`, `test`, `chore`, `build`, `ci`, `style`, `revert`
-- Imperative mood: "add", "fix", "remove" — not "added", "adds", "adding"
-- ≤50 chars when possible, hard cap 72
-- No trailing period
-- Match project convention for capitalization after the colon
-
-**Body (only if needed):**
-- Skip entirely when subject is self-explanatory
-- Add body only for: non-obvious *why*, breaking changes, migration notes, linked issues
-- Wrap at 72 chars
-- Bullets `-` not `*`
-- Reference issues/PRs at end: `Closes #42`, `Refs #17`
-
-**What NEVER goes in:**
-- "This commit does X", "I", "we", "now", "currently" — the diff says what
-- "As requested by..." — use Co-authored-by trailer
-- "Generated with Claude Code" or any AI attribution
-- Emoji (unless project convention requires)
-- Restating the file name when scope already says it
-
-## Examples
-
-Diff: new endpoint for user profile with body explaining the why
-- ❌ "feat: add a new endpoint to get user profile information from the database"
-- ✅
-  ```
-  feat(api): add GET /users/:id/profile
-
-  Mobile client needs profile data without the full user payload
-  to reduce LTE bandwidth on cold-launch screens.
-
-  Closes #128
-  ```
-
-Diff: breaking API change
-- ✅
-  ```
-  feat(api)!: rename /v1/orders to /v1/checkout
-
-  BREAKING CHANGE: clients on /v1/orders must migrate to /v1/checkout
-  before 2026-06-01. Old route returns 410 after that date.
-  ```
-
-## Auto-Clarity
-
-Always include body for: breaking changes, security fixes, data migrations, anything reverting a prior commit. Never compress these into subject-only — future debuggers need the context.
-
-## Boundaries
-
-Only generates the commit message. Does not run `git commit`, does not stage files, does not amend. Output the message as a code block ready to paste. "stop caveman-commit" or "normal mode": revert to verbose commit style.

.opencode/skills/caveman-help/SKILL.md

@@ -1,59 +0,0 @@
----
-name: caveman-help
-description: >
-  Quick-reference card for all caveman modes, skills, and commands.
-  One-shot display, not a persistent mode. Trigger: /caveman-help,
-  "caveman help", "what caveman commands", "how do I use caveman".
----
-
-# Caveman Help
-
-Display this reference card when invoked. One-shot — do NOT change mode, write flag files, or persist anything. Output in caveman style.
-
-## Modes
-
-| Mode | Trigger | What change |
-|------|---------|-------------|
-| **Lite** | `/caveman lite` | Drop filler. Keep sentence structure. |
-| **Full** | `/caveman` | Drop articles, filler, pleasantries, hedging. Fragments OK. Default. |
-| **Ultra** | `/caveman ultra` | Extreme compression. Bare fragments. Tables over prose. |
-| **Wenyan-Lite** | `/caveman wenyan-lite` | Classical Chinese style, light compression. |
-| **Wenyan-Full** | `/caveman wenyan` | Full 文言文. Maximum classical terseness. |
-| **Wenyan-Ultra** | `/caveman wenyan-ultra` | Extreme. Ancient scholar on a budget. |
-
-Mode stick until changed or session end.
-
-## Skills
-
-| Skill | Trigger | What it do |
-|-------|---------|-----------|
-| **caveman-commit** | `/caveman-commit` | Terse commit messages. Conventional Commits. ≤50 char subject. |
-| **caveman-review** | `/caveman-review` | One-line PR comments: `L42: bug: user null. Add guard.` |
-| **caveman-compress** | `/caveman:compress <file>` | Compress .md files to caveman prose. Saves ~46% input tokens. |
-| **caveman-help** | `/caveman-help` | This card. |
-
-## Deactivate
-
-Say "stop caveman" or "normal mode". Resume anytime with `/caveman`.
-
-## Configure Default Mode
-
-Default mode = `full`. Change it:
-
-**Environment variable** (highest priority):
-```bash
-export CAVEMAN_DEFAULT_MODE=ultra
-```
-
-**Config file** (`~/.config/caveman/config.json`):
-```json
-{ "defaultMode": "lite" }
-```
-
-Set `"off"` to disable auto-activation on session start. User can still activate manually with `/caveman`.
-
-Resolution: env var > config file > `full`.
-
-## More
-
-Full docs: https://github.com/JuliusBrussee/caveman

.opencode/skills/caveman-review/SKILL.md

@@ -1,55 +0,0 @@
----
-name: caveman-review
-description: >
-  Ultra-compressed code review comments. Cuts noise from PR feedback while preserving
-  the actionable signal. Each comment is one line: location, problem, fix. Use when user
-  says "review this PR", "code review", "review the diff", "/review", or invokes
-  /caveman-review. Auto-triggers when reviewing pull requests.
----
-
-Write code review comments terse and actionable. One line per finding. Location, problem, fix. No throat-clearing.
-
-## Rules
-
-**Format:** `L<line>: <problem>. <fix>.` — or `<file>:L<line>: ...` when reviewing multi-file diffs.
-
-**Severity prefix (optional, when mixed):**
-- `🔴 bug:` — broken behavior, will cause incident
-- `🟡 risk:` — works but fragile (race, missing null check, swallowed error)
-- `🔵 nit:` — style, naming, micro-optim. Author can ignore
-- `❓ q:` — genuine question, not a suggestion
-
-**Drop:**
-- "I noticed that...", "It seems like...", "You might want to consider..."
-- "This is just a suggestion but..." — use `nit:` instead
-- "Great work!", "Looks good overall but..." — say it once at the top, not per comment
-- Restating what the line does — the reviewer can read the diff
-- Hedging ("perhaps", "maybe", "I think") — if unsure use `q:`
-
-**Keep:**
-- Exact line numbers
-- Exact symbol/function/variable names in backticks
-- Concrete fix, not "consider refactoring this"
-- The *why* if the fix isn't obvious from the problem statement
-
-## Examples
-
-❌ "I noticed that on line 42 you're not checking if the user object is null before accessing the email property. This could potentially cause a crash if the user is not found in the database. You might want to add a null check here."
-
-✅ `L42: 🔴 bug: user can be null after .find(). Add guard before .email.`
-
-❌ "It looks like this function is doing a lot of things and might benefit from being broken up into smaller functions for readability."
-
-✅ `L88-140: 🔵 nit: 50-line fn does 4 things. Extract validate/normalize/persist.`
-
-❌ "Have you considered what happens if the API returns a 429? I think we should probably handle that case."
-
-✅ `L23: 🟡 risk: no retry on 429. Wrap in withBackoff(3).`
-
-## Auto-Clarity
-
-Drop terse mode for: security findings (CVE-class bugs need full explanation + reference), architectural disagreements (need rationale, not just a one-liner), and onboarding contexts where the author is new and needs the "why". In those cases write a normal paragraph, then resume terse for the rest.
-
-## Boundaries
-
-Reviews only — does not write the code fix, does not approve/request-changes, does not run linters. Output the comment(s) ready to paste into the PR. "stop caveman-review" or "normal mode": revert to verbose review style.

.opencode/skills/caveman/SKILL.md

@@ -1,67 +0,0 @@
----
-name: caveman
-description: >
-  Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman
-  while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra,
-  wenyan-lite, wenyan-full, wenyan-ultra.
-  Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens",
-  "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.
----
-
-Respond terse like smart caveman. All technical substance stay. Only fluff die.
-
-## Persistence
-
-ACTIVE EVERY RESPONSE. No revert after many turns. No filler drift. Still active if unsure. Off only: "stop caveman" / "normal mode".
-
-Default: **full**. Switch: `/caveman lite|full|ultra`.
-
-## Rules
-
-Drop: articles (a/an/the), filler (just/really/basically/actually/simply), pleasantries (sure/certainly/of course/happy to), hedging. Fragments OK. Short synonyms (big not extensive, fix not "implement a solution for"). Technical terms exact. Code blocks unchanged. Errors quoted exact.
-
-Pattern: `[thing] [action] [reason]. [next step].`
-
-Not: "Sure! I'd be happy to help you with that. The issue you're experiencing is likely caused by..."
-Yes: "Bug in auth middleware. Token expiry check use `<` not `<=`. Fix:"
-
-## Intensity
-
-| Level | What change |
-|-------|------------|
-| **lite** | No filler/hedging. Keep articles + full sentences. Professional but tight |
-| **full** | Drop articles, fragments OK, short synonyms. Classic caveman |
-| **ultra** | Abbreviate (DB/auth/config/req/res/fn/impl), strip conjunctions, arrows for causality (X → Y), one word when one word enough |
-| **wenyan-lite** | Semi-classical. Drop filler/hedging but keep grammar structure, classical register |
-| **wenyan-full** | Maximum classical terseness. Fully 文言文. 80-90% character reduction. Classical sentence patterns, verbs precede objects, subjects often omitted, classical particles (之/乃/為/其) |
-| **wenyan-ultra** | Extreme abbreviation while keeping classical Chinese feel. Maximum compression, ultra terse |
-
-Example — "Why React component re-render?"
-- lite: "Your component re-renders because you create a new object reference each render. Wrap it in `useMemo`."
-- full: "New object ref each render. Inline object prop = new ref = re-render. Wrap in `useMemo`."
-- ultra: "Inline obj prop → new ref → re-render. `useMemo`."
-- wenyan-lite: "組件頻重繪，以每繪新生對象參照故。以 useMemo 包之。"
-- wenyan-full: "物出新參照，致重繪。useMemo .Wrap之。"
-- wenyan-ultra: "新參照→重繪。useMemo Wrap。"
-
-Example — "Explain database connection pooling."
-- lite: "Connection pooling reuses open connections instead of creating new ones per request. Avoids repeated handshake overhead."
-- full: "Pool reuse open DB connections. No new connection per request. Skip handshake overhead."
-- ultra: "Pool = reuse DB conn. Skip handshake → fast under load."
-- wenyan-full: "池reuse open connection。不每req新開。skip handshake overhead。"
-- wenyan-ultra: "池reuse conn。skip handshake → fast。"
-
-## Auto-Clarity
-
-Drop caveman for: security warnings, irreversible action confirmations, multi-step sequences where fragment order risks misread, user asks to clarify or repeats question. Resume caveman after clear part done.
-
-Example — destructive op:
-> **Warning:** This will permanently delete all rows in the `users` table and cannot be undone.
-> ```sql
-> DROP TABLE users;
-> ```
-> Caveman resume. Verify backup exist first.
-
-## Boundaries
-
-Code/commits/PRs: write normal. "stop caveman" or "normal mode": revert. Level persist until changed or session end.

.opencode/skills/compress/SKILL.md

@@ -1 +0,0 @@
-../../caveman-compress/SKILL.md

.opencode/skills/compress/scripts

@@ -1 +0,0 @@
-../../caveman-compress/scripts

.opencode/skills/hf-cli/.hf-skill-manifest.json

@@ -1,4 +0,0 @@
-{
-  "installed_revision": "072fb2635445f6b0ae9761fd6306569b4a87aa2c",
-  "schema_version": 1
-}

.opencode/skills/hf-cli/SKILL.md

@@ -1,189 +0,0 @@
----
-name: hf-cli
-description: "Hugging Face Hub CLI (`hf`) for downloading, uploading, and managing models, datasets, spaces, buckets, repos, papers, jobs, and more on the Hugging Face Hub. Use when: handling authentication; managing local cache; managing Hugging Face Buckets; running or scheduling jobs on Hugging Face infrastructure; managing Hugging Face repos; discussions and pull requests; browsing models, datasets and spaces; reading, searching, or browsing academic papers; managing collections; querying datasets; configuring spaces; setting up webhooks; or deploying and managing HF Inference Endpoints. Make sure to use this skill whenever the user mentions 'hf', 'huggingface', 'Hugging Face', 'huggingface-cli', or 'hugging face cli', or wants to do anything related to the Hugging Face ecosystem and to AI and ML in general. Also use for cloud storage needs like training checkpoints, data pipelines, or agent traces. Use even if the user doesn't explicitly ask for a CLI command. Replaces the deprecated `huggingface-cli`."
----
-
-Install: `curl -LsSf https://hf.co/cli/install.sh | bash -s`.
-
-The Hugging Face Hub CLI tool `hf` is available. IMPORTANT: The `hf` command replaces the deprecated `huggingface-cli` command.
-
-Use `hf --help` to view available functions. Note that auth commands are now all under `hf auth` e.g. `hf auth whoami`.
-
-Generated with `huggingface_hub v1.10.2`. Run `hf skills add --force` to regenerate.
-
-## Commands
-
-- `hf download REPO_ID` — Download files from the Hub. `[--type CHOICE --revision TEXT --include TEXT --exclude TEXT --cache-dir TEXT --local-dir TEXT --force-download --dry-run --quiet --max-workers INTEGER]`
-- `hf env` — Print information about the environment.
-- `hf sync` — Sync files between local directory and a bucket. `[--delete --ignore-times --ignore-sizes --plan TEXT --apply TEXT --dry-run --include TEXT --exclude TEXT --filter-from TEXT --existing --ignore-existing --verbose --quiet]`
-- `hf upload REPO_ID` — Upload a file or a folder to the Hub. Recommended for single-commit uploads. `[--type CHOICE --revision TEXT --private --include TEXT --exclude TEXT --delete TEXT --commit-message TEXT --commit-description TEXT --create-pr --every FLOAT --quiet]`
-- `hf upload-large-folder REPO_ID LOCAL_PATH` — Upload a large folder to the Hub. Recommended for resumable uploads. `[--type CHOICE --revision TEXT --private --include TEXT --exclude TEXT --num-workers INTEGER --no-report --no-bars]`
-- `hf version` — Print information about the hf version.
-
-### `hf auth` — Manage authentication (login, logout, etc.).
-
-- `hf auth list` — List all stored access tokens.
-- `hf auth login` — Login using a token from huggingface.co/settings/tokens. `[--add-to-git-credential --force]`
-- `hf auth logout` — Logout from a specific token. `[--token-name TEXT]`
-- `hf auth switch` — Switch between access tokens. `[--token-name TEXT --add-to-git-credential]`
-- `hf auth whoami` — Find out which huggingface.co account you are logged in as. `[--format CHOICE]`
-
-### `hf buckets` — Commands to interact with buckets.
-
-- `hf buckets cp SRC` — Copy files to or from buckets. `[--quiet]`
-- `hf buckets create BUCKET_ID` — Create a new bucket. `[--private --exist-ok --quiet]`
-- `hf buckets delete BUCKET_ID` — Delete a bucket. `[--yes --missing-ok --quiet]`
-- `hf buckets info BUCKET_ID` — Get info about a bucket. `[--quiet]`
-- `hf buckets list` — List buckets or files in a bucket. `[--human-readable --tree --recursive --format CHOICE --quiet]`
-- `hf buckets move FROM_ID TO_ID` — Move (rename) a bucket to a new name or namespace.
-- `hf buckets remove ARGUMENT` — Remove files from a bucket. `[--recursive --yes --dry-run --include TEXT --exclude TEXT --quiet]`
-- `hf buckets sync` — Sync files between local directory and a bucket. `[--delete --ignore-times --ignore-sizes --plan TEXT --apply TEXT --dry-run --include TEXT --exclude TEXT --filter-from TEXT --existing --ignore-existing --verbose --quiet]`
-
-### `hf cache` — Manage local cache directory.
-
-- `hf cache list` — List cached repositories or revisions. `[--cache-dir TEXT --revisions --filter TEXT --format CHOICE --quiet --sort CHOICE --limit INTEGER]`
-- `hf cache prune` — Remove detached revisions from the cache. `[--cache-dir TEXT --yes --dry-run]`
-- `hf cache rm TARGETS` — Remove cached repositories or revisions. `[--cache-dir TEXT --yes --dry-run]`
-- `hf cache verify REPO_ID` — Verify checksums for a single repo revision from cache or a local directory. `[--type CHOICE --revision TEXT --cache-dir TEXT --local-dir TEXT --fail-on-missing-files --fail-on-extra-files]`
-
-### `hf collections` — Interact with collections on the Hub.
-
-- `hf collections add-item COLLECTION_SLUG ITEM_ID ITEM_TYPE` — Add an item to a collection. `[--note TEXT --exists-ok]`
-- `hf collections create TITLE` — Create a new collection on the Hub. `[--namespace TEXT --description TEXT --private --exists-ok]`
-- `hf collections delete COLLECTION_SLUG` — Delete a collection from the Hub. `[--missing-ok]`
-- `hf collections delete-item COLLECTION_SLUG ITEM_OBJECT_ID` — Delete an item from a collection. `[--missing-ok]`
-- `hf collections info COLLECTION_SLUG` — Get info about a collection on the Hub. Output is in JSON format.
-- `hf collections list` — List collections on the Hub. `[--owner TEXT --item TEXT --sort CHOICE --limit INTEGER --format CHOICE --quiet]`
-- `hf collections update COLLECTION_SLUG` — Update a collection's metadata on the Hub. `[--title TEXT --description TEXT --position INTEGER --private --theme TEXT]`
-- `hf collections update-item COLLECTION_SLUG ITEM_OBJECT_ID` — Update an item in a collection. `[--note TEXT --position INTEGER]`
-
-### `hf datasets` — Interact with datasets on the Hub.
-
-- `hf datasets info DATASET_ID` — Get info about a dataset on the Hub. `[--revision TEXT --expand TEXT --format CHOICE]`
-- `hf datasets list` — List datasets on the Hub. `[--search TEXT --author TEXT --filter TEXT --sort CHOICE --limit INTEGER --expand TEXT --format CHOICE]`
-- `hf datasets parquet DATASET_ID` — List parquet file URLs available for a dataset. `[--subset TEXT --split TEXT --format CHOICE]`
-- `hf datasets sql SQL` — Execute a raw SQL query with DuckDB against dataset parquet URLs. `[--format CHOICE]`
-
-### `hf discussions` — Manage discussions and pull requests on the Hub.
-
-- `hf discussions close REPO_ID NUM` — Close a discussion or pull request. `[--comment TEXT --yes --type CHOICE]`
-- `hf discussions comment REPO_ID NUM` — Comment on a discussion or pull request. `[--body TEXT --body-file PATH --type CHOICE]`
-- `hf discussions create REPO_ID --title TEXT` — Create a new discussion or pull request on a repo. `[--body TEXT --body-file PATH --pull-request --type CHOICE]`
-- `hf discussions diff REPO_ID NUM` — Show the diff of a pull request. `[--type CHOICE]`
-- `hf discussions info REPO_ID NUM` — Get info about a discussion or pull request. `[--comments --diff --no-color --type CHOICE --format CHOICE]`
-- `hf discussions list REPO_ID` — List discussions and pull requests on a repo. `[--status CHOICE --kind CHOICE --author TEXT --limit INTEGER --type CHOICE --format CHOICE --quiet]`
-- `hf discussions merge REPO_ID NUM` — Merge a pull request. `[--comment TEXT --yes --type CHOICE]`
-- `hf discussions rename REPO_ID NUM NEW_TITLE` — Rename a discussion or pull request. `[--type CHOICE]`
-- `hf discussions reopen REPO_ID NUM` — Reopen a closed discussion or pull request. `[--comment TEXT --yes --type CHOICE]`
-
-### `hf endpoints` — Manage Hugging Face Inference Endpoints.
-
-- `hf endpoints catalog deploy --repo TEXT` — Deploy an Inference Endpoint from the Model Catalog. `[--name TEXT --accelerator TEXT --namespace TEXT]`
-- `hf endpoints catalog list` — List available Catalog models.
-- `hf endpoints delete NAME` — Delete an Inference Endpoint permanently. `[--namespace TEXT --yes]`
-- `hf endpoints deploy NAME --repo TEXT --framework TEXT --accelerator TEXT --instance-size TEXT --instance-type TEXT --region TEXT --vendor TEXT` — Deploy an Inference Endpoint from a Hub repository. `[--namespace TEXT --task TEXT --min-replica INTEGER --max-replica INTEGER --scale-to-zero-timeout INTEGER --scaling-metric CHOICE --scaling-threshold FLOAT]`
-- `hf endpoints describe NAME` — Get information about an existing endpoint. `[--namespace TEXT]`
-- `hf endpoints list` — Lists all Inference Endpoints for the given namespace. `[--namespace TEXT --format CHOICE --quiet]`
-- `hf endpoints pause NAME` — Pause an Inference Endpoint. `[--namespace TEXT]`
-- `hf endpoints resume NAME` — Resume an Inference Endpoint. `[--namespace TEXT --fail-if-already-running]`
-- `hf endpoints scale-to-zero NAME` — Scale an Inference Endpoint to zero. `[--namespace TEXT]`
-- `hf endpoints update NAME` — Update an existing endpoint. `[--namespace TEXT --repo TEXT --accelerator TEXT --instance-size TEXT --instance-type TEXT --framework TEXT --revision TEXT --task TEXT --min-replica INTEGER --max-replica INTEGER --scale-to-zero-timeout INTEGER --scaling-metric CHOICE --scaling-threshold FLOAT]`
-
-### `hf extensions` — Manage hf CLI extensions.
-
-- `hf extensions exec NAME` — Execute an installed extension.
-- `hf extensions install REPO_ID` — Install an extension from a public GitHub repository. `[--force]`
-- `hf extensions list` — List installed extension commands. `[--format CHOICE --quiet]`
-- `hf extensions remove NAME` — Remove an installed extension.
-- `hf extensions search` — Search extensions available on GitHub (tagged with 'hf-extension' topic). `[--format CHOICE --quiet]`
-
-### `hf jobs` — Run and manage Jobs on the Hub.
-
-- `hf jobs cancel JOB_ID` — Cancel a Job `[--namespace TEXT]`
-- `hf jobs hardware` — List available hardware options for Jobs
-- `hf jobs inspect JOB_IDS` — Display detailed information on one or more Jobs `[--namespace TEXT]`
-- `hf jobs logs JOB_ID` — Fetch the logs of a Job. `[--follow --tail INTEGER --namespace TEXT]`
-- `hf jobs ps` — List Jobs. `[--all --namespace TEXT --filter TEXT --format TEXT --quiet]`
-- `hf jobs run IMAGE COMMAND` — Run a Job. `[--env TEXT --secrets TEXT --label TEXT --volume TEXT --env-file TEXT --secrets-file TEXT --flavor CHOICE --timeout TEXT --detach --namespace TEXT]`
-- `hf jobs scheduled delete SCHEDULED_JOB_ID` — Delete a scheduled Job. `[--namespace TEXT]`
-- `hf jobs scheduled inspect SCHEDULED_JOB_IDS` — Display detailed information on one or more scheduled Jobs `[--namespace TEXT]`
-- `hf jobs scheduled ps` — List scheduled Jobs `[--all --namespace TEXT --filter TEXT --format TEXT --quiet]`
-- `hf jobs scheduled resume SCHEDULED_JOB_ID` — Resume (unpause) a scheduled Job. `[--namespace TEXT]`
-- `hf jobs scheduled run SCHEDULE IMAGE COMMAND` — Schedule a Job. `[--suspend --concurrency --env TEXT --secrets TEXT --label TEXT --volume TEXT --env-file TEXT --secrets-file TEXT --flavor CHOICE --timeout TEXT --namespace TEXT]`
-- `hf jobs scheduled suspend SCHEDULED_JOB_ID` — Suspend (pause) a scheduled Job. `[--namespace TEXT]`
-- `hf jobs scheduled uv run SCHEDULE SCRIPT` — Run a UV script (local file or URL) on HF infrastructure `[--suspend --concurrency --image TEXT --flavor CHOICE --env TEXT --secrets TEXT --label TEXT --volume TEXT --env-file TEXT --secrets-file TEXT --timeout TEXT --namespace TEXT --with TEXT --python TEXT]`
-- `hf jobs stats` — Fetch the resource usage statistics and metrics of Jobs `[--namespace TEXT]`
-- `hf jobs uv run SCRIPT` — Run a UV script (local file or URL) on HF infrastructure `[--image TEXT --flavor CHOICE --env TEXT --secrets TEXT --label TEXT --volume TEXT --env-file TEXT --secrets-file TEXT --timeout TEXT --detach --namespace TEXT --with TEXT --python TEXT]`
-
-### `hf models` — Interact with models on the Hub.
-
-- `hf models info MODEL_ID` — Get info about a model on the Hub. `[--revision TEXT --expand TEXT --format CHOICE]`
-- `hf models list` — List models on the Hub. `[--search TEXT --author TEXT --filter TEXT --num-parameters TEXT --sort CHOICE --limit INTEGER --expand TEXT --format CHOICE]`
-
-### `hf papers` — Interact with papers on the Hub.
-
-- `hf papers info PAPER_ID` — Get info about a paper on the Hub. `[--format CHOICE]`
-- `hf papers list` — List daily papers on the Hub. `[--date TEXT --week TEXT --month TEXT --submitter TEXT --sort CHOICE --limit INTEGER --format CHOICE]`
-- `hf papers read PAPER_ID` — Read a paper as markdown.
-- `hf papers search QUERY` — Search papers on the Hub. `[--limit INTEGER --format CHOICE]`
-
-### `hf repos` — Manage repos on the Hub.
-
-- `hf repos branch create REPO_ID BRANCH` — Create a new branch for a repo on the Hub. `[--revision TEXT --type CHOICE --exist-ok]`
-- `hf repos branch delete REPO_ID BRANCH` — Delete a branch from a repo on the Hub. `[--type CHOICE]`
-- `hf repos create REPO_ID` — Create a new repo on the Hub. `[--type CHOICE --space-sdk TEXT --private --public --protected --exist-ok --resource-group-id TEXT --flavor CHOICE --storage CHOICE --sleep-time INTEGER --secrets TEXT --secrets-file TEXT --env TEXT --env-file TEXT --volume TEXT]`
-- `hf repos delete REPO_ID` — Delete a repo from the Hub. This is an irreversible operation. `[--type CHOICE --missing-ok]`
-- `hf repos delete-files REPO_ID PATTERNS` — Delete files from a repo on the Hub. `[--type CHOICE --revision TEXT --commit-message TEXT --commit-description TEXT --create-pr]`
-- `hf repos duplicate FROM_ID` — Duplicate a repo on the Hub (model, dataset, or Space). `[--type CHOICE --private --public --protected --exist-ok --flavor CHOICE --storage CHOICE --sleep-time INTEGER --secrets TEXT --secrets-file TEXT --env TEXT --env-file TEXT --volume TEXT]`
-- `hf repos move FROM_ID TO_ID` — Move a repository from a namespace to another namespace. `[--type CHOICE]`
-- `hf repos settings REPO_ID` — Update the settings of a repository. `[--gated CHOICE --private --public --protected --type CHOICE]`
-- `hf repos tag create REPO_ID TAG` — Create a tag for a repo. `[--message TEXT --revision TEXT --type CHOICE]`
-- `hf repos tag delete REPO_ID TAG` — Delete a tag for a repo. `[--yes --type CHOICE]`
-- `hf repos tag list REPO_ID` — List tags for a repo. `[--type CHOICE]`
-
-### `hf skills` — Manage skills for AI assistants.
-
-- `hf skills add` — Download a Hugging Face skill and install it for an AI assistant. `[--claude --global --dest PATH --force]`
-- `hf skills preview` — Print the generated `hf-cli` SKILL.md to stdout.
-- `hf skills upgrade` — Upgrade installed Hugging Face marketplace skills. `[--claude --global --dest PATH]`
-
-### `hf spaces` — Interact with spaces on the Hub.
-
-- `hf spaces dev-mode SPACE_ID` — Enable or disable dev mode on a Space. `[--stop]`
-- `hf spaces hot-reload SPACE_ID` — Hot-reload any Python file of a Space without a full rebuild + restart. `[--local-file TEXT --skip-checks --skip-summary]`
-- `hf spaces info SPACE_ID` — Get info about a space on the Hub. `[--revision TEXT --expand TEXT --format CHOICE]`
-- `hf spaces list` — List spaces on the Hub. `[--search TEXT --author TEXT --filter TEXT --sort CHOICE --limit INTEGER --expand TEXT --format CHOICE]`
-
-### `hf webhooks` — Manage webhooks on the Hub.
-
-- `hf webhooks create --watch TEXT` — Create a new webhook. `[--url TEXT --job-id TEXT --domain CHOICE --secret TEXT]`
-- `hf webhooks delete WEBHOOK_ID` — Delete a webhook permanently. `[--yes]`
-- `hf webhooks disable WEBHOOK_ID` — Disable an active webhook.
-- `hf webhooks enable WEBHOOK_ID` — Enable a disabled webhook.
-- `hf webhooks info WEBHOOK_ID` — Show full details for a single webhook as JSON.
-- `hf webhooks list` — List all webhooks for the current user. `[--format CHOICE --quiet]`
-- `hf webhooks update WEBHOOK_ID` — Update an existing webhook. Only provided options are changed. `[--url TEXT --watch TEXT --domain CHOICE --secret TEXT]`
-
-## Common options
-
-- `--format` — Output format: `--format json` (or `--json`) or `--format table` (default).
-- `-q / --quiet` — Minimal output.
-- `--revision` — Git revision id which can be a branch name, a tag, or a commit hash.
-- `--token` — Use a User Access Token. Prefer setting `HF_TOKEN` env var instead of passing `--token`.
-- `--type` — The type of repository (model, dataset, or space).
-
-## Mounting repos as local filesystems
-
-To mount Hub repositories or buckets as local filesystems — no download, no copy, no waiting — use `hf-mount`. Files are fetched on demand. GitHub: https://github.com/huggingface/hf-mount
-
-Install: `curl -fsSL https://raw.githubusercontent.com/huggingface/hf-mount/main/install.sh | sh`
-
-Some command examples:
-- `hf-mount start repo openai-community/gpt2 /tmp/gpt2` — mount a repo (read-only)
-- `hf-mount start --hf-token $HF_TOKEN bucket myuser/my-bucket /tmp/data` — mount a bucket (read-write)
-- `hf-mount status` / `hf-mount stop /tmp/data` — list or unmount
-
-## Tips
-
-- Use `hf <command> --help` for full options, descriptions, usage, and real-world examples
-- Authenticate with `HF_TOKEN` env var (recommended) or with `--token`

app.py

@@ -7,6 +7,7 @@ import io
 import json
 import os
 from pathlib import Path
+from typing import Any
 
 import spaces
 import torchvision.transforms.v2 as v2
@@ -64,10 +65,23 @@ CATEGORY_META: dict[int, dict] = {
 }
 
 # ---------------------------------------------------------------------------
-# CPU helpers
+# Helpers
 # ---------------------------------------------------------------------------
 
 
+def _resolve_image_source(image: Any) -> str:
+    """Normalise the image argument from Gradio.
+
+    Gradio passes uploaded files as a dict:
+        {"path": "/tmp/gradio/...", "orig_name": "...", "url": "...", ...}
+    URL strings and local paths are passed as plain str.
+    Returns a str (filepath or URL) that _open_image can consume.
+    """
+    if isinstance(image, dict):
+        return image.get("path") or image.get("url") or image["orig_name"]
+    return str(image)
+
+
 def _preprocess(img: Image.Image, max_size: int) -> torch.Tensor:
     """Resize + ImageNet-normalise → [1, 3, H, W] float32 CPU tensor."""
     w, h = img.size
@@ -180,7 +194,8 @@ templates.env.filters["format_number"] = lambda v: f"{v:,}"
 def get_tags(image: str, max_size: int = 1024, floor: float = 0.05) -> str:
     """Tag an image. image: local filepath (uploaded) or http(s) URL.
     Returns JSON string: {tags, categories, count}."""
-    img = _open_image(image)  # CPU: load + decode
+    src = _resolve_image_source(image)  # normalise str or dict
+    img = _open_image(src)  # CPU: load + decode
     pv = _preprocess(img, max_size)  # CPU: resize + normalise
     logits = _gpu_infer(pv)  # GPU: model forward
     return _postprocess(logits, floor)  # CPU: sort + bucketise → JSON str
@@ -189,7 +204,8 @@ def get_tags(image: str, max_size: int = 1024, floor: float = 0.05) -> str:
 @app.api(name="get_pca")
 def get_pca(image: str, max_size: int = 1024) -> str:
     """Return base64-encoded PNG of PCA patch-feature visualisation."""
-    img = _open_image(image)
+    src = _resolve_image_source(image)
+    img = _open_image(src)
     pv = _preprocess(img, max_size)
     pca_img = _gpu_pca(pv)  # GPU: backbone + PCA
     return _pil_to_base64(pca_img)  # CPU: encode → base64 str

tagger_ui/templates/index.html

@@ -94,7 +94,7 @@
     /* preview — full width on top */
     .preview-wrap {
       display: flex; align-items: flex-start; gap: 1rem;
-      margin-bottom: 1.2rem; flex-wrap: wrap;
+      margin-bottom: 1.2rem;
     }
     .preview-wrap img {
       border-radius: var(--radius); max-height: 420px;
@@ -204,6 +204,7 @@
     .tag-pill.hidden { display: none; }
 
     /* ---- PCA panel ---- */
+    .preview-wrap { flex-wrap: wrap; }
     .preview-col { flex: 1 1 0; min-width: 0; }
     .pca-col {
       flex: 1 1 0; min-width: 0;
@@ -242,11 +243,11 @@
 
   <div class="input-row">
     <input type="text" id="url-input" placeholder="Paste image URL or drop a file below…" />
-    <button class="btn" id="tag-btn" onclick="window._tagger.runFromUrl()">Tag</button>
+    <button class="btn" id="tag-btn" onclick="runFromUrl()">Tag</button>
   </div>
 
   <div id="drop-zone" onclick="document.getElementById('file-input').click()">
-    <input type="file" id="file-input" accept="image/*" onchange="window._tagger.runFromFile(this)" />
+    <input type="file" id="file-input" accept="image/*" onchange="runFromFile(this)" />
     Drop image here or <strong>click to browse</strong>
   </div>
 
@@ -255,10 +256,10 @@
     <label>
       Min score
       <input type="range" id="global-thresh" min="0" max="99" step="1" value="0"
-             oninput="window._tagger.setGlobalThreshold(this.value)" />
+             oninput="setGlobalThreshold(this.value)" />
       <input type="number" id="global-thresh-num" min="0" max="99" step="1" value="0"
              style="width:52px"
-             oninput="window._tagger.setGlobalThreshold(this.value)" />
+             oninput="setGlobalThreshold(this.value)" />
       <span id="global-thresh-val" style="display:none">0%</span>
     </label>
   </div>
@@ -283,13 +284,13 @@
 
     <!-- PCA toggle -->
     <div style="display:flex;justify-content:flex-end;margin-bottom:.6rem">
-      <button class="pca-toggle" id="pca-toggle" onclick="window._tagger.togglePca()">Show PCA</button>
+      <button class="pca-toggle" id="pca-toggle" onclick="togglePca()">Show PCA</button>
     </div>
 
     <!-- global copy bar -->
     <div class="copy-bar">
-      <div class="tag-string" id="tag-string" onclick="window._tagger.copyAll()" title="Click to copy all visible tags"></div>
-      <button class="copy-btn" id="copy-btn-all" onclick="window._tagger.copyAll()">Copy all</button>
+      <div class="tag-string" id="tag-string" onclick="copyAll()" title="Click to copy all visible tags"></div>
+      <button class="copy-btn" id="copy-btn-all" onclick="copyAll()">Copy all</button>
     </div>
 
     <!-- category sections -->
@@ -299,10 +300,7 @@
 
 </div>
 
-<script type="module">
-  import { client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
-  const gradioApp = await client(location.origin);
-
+<script>
   // ---- category metadata from server ----
   const CAT_META = {
     {% for cat_id, meta in category_meta.items() %}
@@ -310,13 +308,9 @@
     {% endfor %}
   };
 
-  // Per-category filter state
+  // Per-category filter state: { [catId]: { mode: 'topk'|'threshold', topk: int, threshold: float } }
   const catState = {};
-  let globalFloor = 0.0;
-
-  // ---- PCA state ----
-  let _pcaEnabled = false;
-  let _lastPcaRequest = null;
+  let globalFloor = 0.0;  // global minimum score (0–1), applied on top of per-category filters
 
   function getCatState(catId) {
     if (!catState[catId]) catState[catId] = { mode: 'threshold', topk: 20, threshold: 0.85 };
@@ -328,6 +322,7 @@
     globalFloor = v / 100;
     document.getElementById('global-thresh').value = v;
     document.getElementById('global-thresh-num').value = v;
+    // re-apply filter to every rendered category
     document.querySelectorAll('.cat-section').forEach(sec => {
       applyFilter(parseInt(sec.dataset.catId));
     });
@@ -338,12 +333,15 @@
     const el = document.getElementById(`thnum-${catId}`);
     if (el) el.value = pct;
   }
-
   function syncCatThreshRange(catId, pct) {
     const el = document.getElementById(`range-${catId}`);
     if (el) el.value = Math.max(1, Math.min(99, parseInt(pct) || 1));
   }
 
+  // ---- PCA state ----
+  let _pcaEnabled = false;
+  let _lastPcaRequest = null;  // { type: 'url'|'file', url?: string, file?: File }
+
   function togglePca() {
     _pcaEnabled = !_pcaEnabled;
     const btn = document.getElementById('pca-toggle');
@@ -353,80 +351,14 @@
     if (_pcaEnabled && _lastPcaRequest) runPca(_lastPcaRequest);
   }
 
-  async function runPca(req) {
-    const spinner = document.getElementById('pca-spinner');
-    const img     = document.getElementById('pca-img');
-    spinner.style.display = 'block';
-    img.style.display = 'none';
-    const maxSize = +document.getElementById('maxsize-input').value;
-    try {
-      const imageArg = req.type === 'url' ? req.url : await handle_file(req.file);
-      const res = await gradioApp.predict("/get_pca", { image: imageArg, max_size: maxSize });
-      img.src = "data:image/png;base64," + res.data[0];
-      img.style.display = 'block';
-    } catch (err) {
-      console.error("PCA error:", err);
-      img.style.display = 'none';
-    } finally {
-      spinner.style.display = 'none';
-    }
-  }
+  // runPca / runFromUrl / submitFile / submitFetch are replaced below by the
+  // @gradio/client module script once it loads. Stub versions here ensure
+  // the page does not error if the module hasn't finished loading yet.
+  function runPca(req) {}
+  function runFromUrl() {}
+  function submitFile(file) {}
 
-  // ---- drag & drop ----
-  const dz = document.getElementById('drop-zone');
-  dz.addEventListener('dragover',  e => { e.preventDefault(); dz.classList.add('drag-over'); });
-  dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
-  dz.addEventListener('drop', e => {
-    e.preventDefault(); dz.classList.remove('drag-over');
-    const file = e.dataTransfer.files[0];
-    if (file) submitFile(file);
-  });
-
-  function runFromFile(input) {
-    if (input.files[0]) submitFile(input.files[0]);
-  }
-
-  async function runFromUrl() {
-    const url = document.getElementById('url-input').value.trim();
-    if (!url) return;
-    setPreview(url, url);
-    _lastPcaRequest = { type: 'url', url };
-    if (_pcaEnabled) runPca(_lastPcaRequest);
-    setLoading(true);
-    try {
-      const res = await gradioApp.predict("/get_tags", {
-        image:    url,
-        max_size: +document.getElementById('maxsize-input').value,
-        floor:    globalFloor,
-      });
-      renderResults(JSON.parse(res.data[0]));
-    } catch (err) {
-      showError(String(err));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function submitFile(file) {
-    const reader = new FileReader();
-    reader.onload = e => setPreview(e.target.result, file.name);
-    reader.readAsDataURL(file);
-    _lastPcaRequest = { type: 'file', file };
-    if (_pcaEnabled) runPca(_lastPcaRequest);
-    setLoading(true);
-    try {
-      const res = await gradioApp.predict("/get_tags", {
-        image:    await handle_file(file),
-        max_size: +document.getElementById('maxsize-input').value,
-        floor:    globalFloor,
-      });
-      renderResults(JSON.parse(res.data[0]));
-    } catch (err) {
-      showError(String(err));
-    } finally {
-      setLoading(false);
-    }
-  }
+  function runFromFile(input) { if (input.files[0]) submitFile(input.files[0]); }
 
   function setPreview(src, label) {
     document.getElementById('preview-img').src = src;
@@ -436,8 +368,12 @@
 
   // ---- rendering ----
 
+  // All tags from the last response, grouped by category
+  let _lastData = null;
+
   function renderResults(data) {
     hideError();
+    _lastData = data;
 
     const container = document.getElementById('categories');
     container.innerHTML = '';
@@ -465,31 +401,31 @@
           <span class="mode-mini">
             <button id="btn-topk-${cat.id}"
                     class="${state.mode==='topk'?'active':''}"
-                    onclick="window._tagger.setCatMode(${cat.id},'topk')">top-k</button>
+                    onclick="setCatMode(${cat.id},'topk')">top-k</button>
             <button id="btn-thresh-${cat.id}"
                     class="${state.mode==='threshold'?'active':''}"
-                    onclick="window._tagger.setCatMode(${cat.id},'threshold')">&#8805;</button>
+                    onclick="setCatMode(${cat.id},'threshold')">≥</button>
           </span>
 
           <span id="ctrl-topk-${cat.id}" style="display:${state.mode==='topk'?'flex':'none'};align-items:center;gap:.3rem">
             <input type="number" id="topk-${cat.id}" value="${state.topk}" min="1" max="500"
                    style="width:52px"
-                   oninput="window._tagger.setCatTopk(${cat.id},this.value)" />
+                   oninput="setCatTopk(${cat.id},this.value)" />
           </span>
 
           <span id="ctrl-thresh-${cat.id}" style="display:${state.mode==='threshold'?'flex':'none'};align-items:center;gap:.3rem">
             <input type="range" id="range-${cat.id}" min="1" max="99" step="1"
                    value="${Math.round(state.threshold*100)}"
-                   oninput="window._tagger.setCatThreshold(${cat.id},this.value/100);window._tagger.syncCatThreshNum(${cat.id},this.value)" />
+                   oninput="setCatThreshold(${cat.id},this.value/100);syncCatThreshNum(${cat.id},this.value)" />
             <input type="number" class="cat-thresh-num" id="thnum-${cat.id}"
                    min="1" max="99" step="1" value="${Math.round(state.threshold*100)}"
-                   oninput="window._tagger.setCatThreshold(${cat.id},this.value/100);window._tagger.syncCatThreshRange(${cat.id},this.value)" />
+                   oninput="setCatThreshold(${cat.id},this.value/100);syncCatThreshRange(${cat.id},this.value)" />
             <span class="cat-thresh-val" style="display:none" id="thval-${cat.id}">${state.threshold.toFixed(2)}</span>
           </span>
         </span>
 
         <span class="cat-count" id="count-${cat.id}">0</span>
-        <span class="cat-chevron">&#9662;</span>
+        <span class="cat-chevron">▾</span>
       `;
       hdr.addEventListener('click', () => sec.classList.toggle('collapsed'));
 
@@ -500,13 +436,14 @@
       body.innerHTML = `
         <div class="cat-copy-bar">
           <div class="cat-tag-string" id="cat-copy-${cat.id}"
-               onclick="window._tagger.copyCat(${cat.id})" title="Click to copy"></div>
+               onclick="copyCat(${cat.id})" title="Click to copy"></div>
           <button class="cat-copy-btn" id="cat-btn-${cat.id}"
-                  onclick="window._tagger.copyCat(${cat.id})">Copy</button>
+                  onclick="copyCat(${cat.id})">Copy</button>
         </div>
         <div class="tag-list" id="cat-tags-${cat.id}"></div>
       `;
 
+      // build all pills (hidden ones will be toggled by applyFilter)
       const pillContainer = body.querySelector(`#cat-tags-${cat.id}`);
       for (const t of cat.tags) {
         const pill = document.createElement('span');
@@ -532,6 +469,7 @@
     updateGlobalCopyBar();
   }
 
+  // Apply topk or threshold filter to a category's pills
   function applyFilter(catId) {
     const state = getCatState(catId);
     const pills = document.querySelectorAll(`#cat-tags-${catId} .tag-pill`);
@@ -546,14 +484,17 @@
       } else {
         show = score >= state.threshold;
       }
+      // global floor is always applied on top
       if (score < globalFloor) show = false;
       pill.classList.toggle('hidden', !show);
       if (show) visible++;
     });
 
+    // update count badge
     const countEl = document.getElementById(`count-${catId}`);
     if (countEl) countEl.textContent = visible;
 
+    // update copy bar text
     const visibleTags = [...pills]
       .filter(p => !p.classList.contains('hidden'))
       .map(p => p.dataset.tag);
@@ -588,6 +529,7 @@
   }
 
   function updateGlobalCopyBar() {
+    // collect all visible tags across all categories, in category order
     const allVisible = [];
     document.querySelectorAll('.cat-section').forEach(sec => {
       sec.querySelectorAll('.tag-pill:not(.hidden)').forEach(p => {
@@ -625,21 +567,93 @@
     const el = document.getElementById('error-msg');
     el.textContent = msg; el.style.display = 'block';
   }
-
-  function hideError() {
-    document.getElementById('error-msg').style.display = 'none';
-  }
+  function hideError() { document.getElementById('error-msg').style.display = 'none'; }
 
   document.getElementById('url-input').addEventListener('keydown', e => {
     if (e.key === 'Enter') runFromUrl();
   });
 
-  // expose all functions called from onclick attributes via window._tagger namespace
-  window._tagger = {
-    runFromUrl, runFromFile, togglePca,
-    setGlobalThreshold, syncCatThreshNum, syncCatThreshRange,
-    setCatMode, setCatTopk, setCatThreshold,
-    copyAll, copyCat,
+  // drag & drop wired here so it can call submitFile after the module patches it
+  const dz = document.getElementById('drop-zone');
+  dz.addEventListener('dragover',  e => { e.preventDefault(); dz.classList.add('drag-over'); });
+  dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
+  dz.addEventListener('drop', e => {
+    e.preventDefault(); dz.classList.remove('drag-over');
+    const file = e.dataTransfer.files[0];
+    if (file) submitFile(file);
+  });
+</script>
+
+<!-- @gradio/client module: patches runFromUrl / submitFile / runPca on window
+     to route through the Gradio queue (required for ZeroGPU on HF Spaces).
+     All rendering / UI logic above is untouched. -->
+<script type="module">
+  import { client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+  const gradioApp = await client(location.origin);
+
+  // ---- tag submission ----
+
+  window.runFromUrl = async function() {
+    const url = document.getElementById('url-input').value.trim();
+    if (!url) return;
+    setPreview(url, url);
+    _lastPcaRequest = { type: 'url', url };
+    if (_pcaEnabled) runPca(_lastPcaRequest);
+    setLoading(true);
+    try {
+      const res = await gradioApp.predict("/get_tags", {
+        image:    url,
+        max_size: +document.getElementById('maxsize-input').value,
+        floor:    globalFloor,
+      });
+      renderResults(JSON.parse(res.data[0]));
+    } catch (err) {
+      showError(String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  window.submitFile = async function(file) {
+    const reader = new FileReader();
+    reader.onload = e => setPreview(e.target.result, file.name);
+    reader.readAsDataURL(file);
+    _lastPcaRequest = { type: 'file', file };
+    if (_pcaEnabled) runPca(_lastPcaRequest);
+    setLoading(true);
+    try {
+      const res = await gradioApp.predict("/get_tags", {
+        image:    await handle_file(file),
+        max_size: +document.getElementById('maxsize-input').value,
+        floor:    globalFloor,
+      });
+      renderResults(JSON.parse(res.data[0]));
+    } catch (err) {
+      showError(String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // ---- PCA ----
+
+  window.runPca = async function(req) {
+    const spinner = document.getElementById('pca-spinner');
+    const img     = document.getElementById('pca-img');
+    spinner.style.display = 'block';
+    img.style.display = 'none';
+    const maxSize = +document.getElementById('maxsize-input').value;
+    try {
+      const imageArg = req.type === 'url' ? req.url : await handle_file(req.file);
+      const res = await gradioApp.predict("/get_pca", { image: imageArg, max_size: maxSize });
+      img.src = "data:image/png;base64," + res.data[0];
+      img.style.display = 'block';
+    } catch (err) {
+      console.error("PCA error:", err);
+      img.style.display = 'none';
+    } finally {
+      spinner.style.display = 'none';
+    }
   };
 </script>
 </body>