CoolFace
Apppublic

Yunpeng-26/ai-powered-image-classification

sourceHugging Faceupdated 8d agoView on Hugging Face
0likes
App README

AI-Powered Image Classification

A small teaching mini-lab for a Creative Technology / introductory AI course.

The project shows how a pretrained model can turn image classification into a capability that can be used directly inside an application. Students do not need to train a neural network for the baseline task.

The learning story

  1. 1.Choose a tested example or upload an image.
  2. 2.Choose a browser-compatible classifier: ResNet-18, ViT-B/16, or CLIP.
  3. 3.Inspect the predicted labels and confidence scores.
  4. 4.Keep the image fixed and switch models to compare decisions.
  5. 5.For CLIP, change the candidate labels and observe how the result changes.

Model and data

  • —Recommended classroom default: Xenova/resnet-18
  • —Comparison models: Xenova/vit-base-patch16-224, Xenova/clip-vit-base-patch32
  • —Task: image classification
  • —Fixed label space: ImageNet-1K for ResNet and ViT
  • —Flexible label space: user-supplied candidate descriptions for CLIP
  • —Example bank: four reusable photographs from the scikit-image sample collection

All three models are already trained. This demo performs inference only; no training code or GPU server is required.

One project, one demo

  • —index.html — page structure and teaching flow
  • —style.css — presentation
  • —app.js — interaction, image handling, and result rendering
  • —classifier.js — the online Hugging Face model call
  • —examples/ — tested example images

Runtime

The Space is static. classifier.js imports Transformers.js from jsDelivr and creates a pipeline with a Hugging Face model ID. The first run for each model downloads its quantized model files from Hugging Face into the browser cache; later runs can reuse that cache. The selected image is processed in the browser and is not uploaded to an inference server.

This is the same online model-loading pattern used by the reference object-detection Space, with the task and models changed to image classification.

Classroom check before use

Before presenting, verify that:

  • —all four bundled examples can be selected;
  • —an uploaded image can be classified;
  • —ResNet-18 and ViT-B/16 return ImageNet labels;
  • —CLIP responds to changes in candidate labels;
  • —the top-k slider changes the number of displayed predictions;
  • —the first uncached run shows download progress;
  • —the page works at a narrow/mobile width.

Local preview

Run a local web server in this folder, for example:

bash
python -m http.server 7860

Then open http://localhost:7860. Opening index.html directly with file:// may block module loading.