Demos

Seeing a method run on your own photo beats reading about it. There are three demos so far: one built into this page, two embedded from Hugging Face Spaces. Each is tied to a cell of the applications map and notes what it does and doesn’t show.

In this browser: zero-shot identification (CLIP)

Zero-shot means you name the categories when you run it; the model was never trained on them. Pick a photo (a product, a part, a pile of scrap) and a set of candidate labels; CLIP scores the labels against the image. It runs entirely in this browser tab via transformers.js; the photo is never uploaded. On first use the page fetches two things: the transformers.js code from cdn.jsdelivr.net and the CLIP model from huggingface.co. To keep sensitive data in-house with bigger models, see Local AI & hardware.

Image to classifyCandidate labels, comma-separatedClassify

Pick a photo to enable Classify. The first run then loads code from cdn.jsdelivr.net and the CLIP model (≈150 MB) from huggingface.co and its download host hf.co.

What it shows: open-vocabulary recognition with labels you choose at run time; the identity column of the CV taxonomy. What it doesn’t: reliability. Scores are relative to your candidate list, and a confident-looking score proves nothing about labels you didn’t offer.

Embedded: segmentation and depth

Segment Anything (in-browser, WebGPU)

SAM segments whatever you click: the detection & segmentation step behind component-counting at end-of-life. This Space also runs fully client-side.

Segment Anything WebGPU

Upload a photo and click on it to cut out a region. The model runs on your GPU.

Open the Space on huggingface.co

What it doesn’t show: class assignment. SAM finds regions, not component types; you still need a classification step on top before you get a usable bill of components.

Depth Anything V2 (hosted)

Estimates how far each point in a single photo is from the camera, which is the start of measuring a product’s size and volume: the quantity column of the CV taxonomy. This one calls a hosted GPU, so your image leaves the browser; use test images, not confidential ones.

Depth Anything V2

Upload a photo and get a depth map back. The image is sent to a hosted GPU.

Open the Space on huggingface.co

What it doesn’t show: metric accuracy on the reflective, transparent, and thin parts that dominate real products.

Two ways to add a demo

• External app (most common): anything that calls a hosted model needs a backend, so host it separately (Hugging Face Space, an institute server, a small FastAPI app) and embed it with an <iframe>. Keep a text link too, for when the embed can’t load. For a Hugging Face Space, use SpaceEmbed as above: the Space loads only when the reader clicks, not on every page view.

  <iframe src="https://example.org/your-demo/" width="100%"
          style="height:480px;border:1px solid #ccc"
          loading="lazy" title="Demo: category name"></iframe>

• In-page island: a client-side widget ships as an Astro island and needs no backend, even for real in-browser inference via transformers.js. Copy src/components/ZeroShotDemo.tsx, then drop <YourDemo client:visible /> into an .mdx page.

When adding a demo, link it from the matching entry in src/data/applications.yaml (demo: field) so the map points to it.