Driver FixRecommendedSound, Wi-Fi or graphics acting up? Check drivers firstFind missing or outdated drivers fast.Check DriversOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PC×
Skip to content
World desk9 min

Private Skin Screening in the Browser: Building an Edge AI Vision App with WebGPU and Transformers.js

Running an image classifier in the browser with WebGPU is straightforward. Proving that skin photos stay on the device, and avoiding diagnostic claims, takes considerably more work.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Yes. Transformers.js can load a pretrained image-classification model in a browser tab and run it on the GPU through WebGPU. Two things do not follow from that. Local execution does not by itself make an app private, because model downloads, uploads, analytics, and error logging are separate parts of the data flow. And a general-purpose classifier is not a skin-screening tool, whatever its labels say. The steps below build the classifier, test the privacy claim against real network behavior, and set out the U.S. limits that apply to any health-related use.

What Transformers.js and WebGPU each contribute

Transformers.js is Hugging Face’s JavaScript library for running pretrained models in browser environments. Hugging Face describes it as functionally similar in purpose and API style to its Python Transformers library. Inference runs through ONNX Runtime, and the library includes an image-classification pipeline, which is the task this build uses.

As an Amazon Associate I earn from qualifying purchases.

WebGPU is the browser API for the device’s GPU. In Transformers.js you select it with one option, device: 'webgpu'. The library’s WebGPU guide cites Can I Use data putting global browser support at around 85% as of March 2026. That is a snapshot. It changes as browsers ship, and it says nothing about the browsers, hardware, or regions your own audience uses. The guide also warns that the API is still experimental in many browsers: “The WebGPU API is still experimental in many browsers.” Expect support to vary by browser and version, and measure it in your own traffic.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Build the classifier

  1. Create a static page and add the library, either with npm install @huggingface/transformers followed by a bundler, or as an ES module loaded from a CDN.
  2. Detect WebGPU before loading any model. navigator.gpu is absent in browsers without the API, and requestAdapter() resolves to null when no usable GPU adapter is available.
  3. Load the classifier on the selected device and show download progress. The first load fetches model files, and large files take time on slow connections.
  4. Read the image from a file input and pass it as an object URL created with URL.createObjectURL(file). Nothing in this path needs a server endpoint.
  5. Display the top three labels with their scores beside a notice that the app does not diagnose. Wording is covered in the final sections.

The code below wraps those steps. Pass the Hub ID of a MobileNetV4 checkpoint that ships ONNX weights for Transformers.js, and confirm the exact ID and its license on the Hub before you ship. The library’s WebGPU example uses MobileNetV4 to demonstrate the API; it is a general image classifier.

#1 Best Overall
Elebase USB to USB C Adapter for iPhone 18 Pro Max,USBC Car Charger Adapter | 4Pack Type C Female to A Male Cable Converter for Apple Duo 17 16 15 14 Plus,iWatch Watch 12 11 10,iPad 9 8 Air,Airpods 5 4
  • Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
  • Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
  • Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
  • Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
  • 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
import { pipeline } from '@huggingface/transformers';

async function pickDevice() {
  if (!navigator.gpu) return 'wasm';
  const adapter = await navigator.gpu.requestAdapter();
  return adapter ? 'webgpu' : 'wasm';
}

export async function loadWithFallback(modelId) {
  const preferred = await pickDevice();
  if (preferred === 'wasm') {
    const classifier = await pipeline('image-classification', modelId, { device: 'wasm' });
    return { classifier, device: 'wasm' };
  }
  try {
    const classifier = await pipeline('image-classification', modelId, { device: 'webgpu' });
    return { classifier, device: 'webgpu' };
  } catch (err) {
    console.warn('WebGPU load failed; retrying on wasm', err.message);
    const classifier = await pipeline('image-classification', modelId, { device: 'wasm' });
    return { classifier, device: 'wasm' };
  }
}

export async function classify(classifier, file) {
  const url = URL.createObjectURL(file);
  try {
    return await classifier(url, { top_k: 3 });
  } finally {
    URL.revokeObjectURL(url);
  }
}

The logging line records the failure message only. Keep image data out of any logger you add.

What “local” does and does not prove

“Edge AI” bundles three separate claims. Test each one on its own.

Question What the library does by default What your app still controls
Where does inference run? In the browser tab, through ONNX Runtime on WebGPU or a fallback backend Whether the app also sends the image to a server, for example for a second model
Where do model files come from? Fetched from Hugging Face Hub and kept in the browser cache Whether you self-host the files and turn off Hub fetches
Does any image or metadata leave the device? Model downloads are the documented network activity; the library does not send your photos Your upload code, analytics, error reporting, session replay, and hosting logs

Where the model files come from

By default, Transformers.js downloads model files from Hugging Face Hub and stores them in the browser cache. A model download does not upload a user’s photo, but it is a request from the visitor’s browser to a third-party host. That request tells the host that a browser fetched that model, and it exposes the requester’s IP address. If that matters for your audience, self-host the model files and disable Hub fetches through the library’s env settings, which include allowRemoteModels and localModelPath. Confirm those names against the version you install. The same settings control custom model and cache locations.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
Sale
Anker USB-C Hub, 5-in-1 USB Hub for Laptops, 4K HDMI Multiport Adapter | USB C Dongle with 90W Max Power Delivery, 3×5Gbps USB A Data Ports, for MacBook, Dell, and More (Charger Not Included)
  • 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
  • 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
  • Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
  • 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
  • What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.

Privacy audit for the exact build you ship

  1. Open Chrome DevTools with F12, or with Ctrl+Shift+I on Windows and Linux or Cmd+Option+I on macOS. Open the Network tab and tick Preserve log.
  2. Load the page and wait for the model to finish downloading. Clear the log.
  3. Select a photo and run classification. Expected result: no request carries the image, whether as a multipart form, a binary body, or base64 text. Inspect the payload of every POST, PUT, and sendBeacon call.
  4. Set the throttling dropdown to Offline and classify another photo. Expected result: classification still works from cache. If it fails, something in the flow still depends on the network, often the page’s own assets, which need a service worker or a cache policy to load offline.
  5. In the Application tab, open Storage and then Cache Storage to confirm the model files are cached. Check IndexedDB and Local Storage for any image data your code may have written.
  6. Review every third-party script. Analytics, error reporters, and session-replay tools can capture what is on screen, including an uploaded image preview.
  7. Check your hosting provider’s request logs. They record page loads and IP addresses even when no image is uploaded.

A passing audit covers the flow you tested, on the browser and build you tested. Browser extensions, operating-system screenshot and sync features, and later code changes fall outside it, so repeat the audit on each release.

Why a general classifier is not a lesion assessment

The example model returns scores for its own training categories. Those labels describe general visual categories, not clinical ones. Nothing in the library’s documentation establishes that the example model was trained or validated for skin-lesion assessment. A browser app built on it cannot tell whether a mole is cancerous and cannot rule out disease, and its output should never be presented as a diagnosis.

The U.S. regulatory position

The rules in this section are U.S. rules. Other countries regulate medical software differently, so the launch geography of your app determines which rules apply.

Rank #3
Sale
Anker USB C Hub, 7in1 Multi-Port USB Adapter, 4K@60Hz USBC to HDMI Splitter | 85W Max PD, 2 USB 3.0 & 1 USBC Data Ports, SD/TF Card Reader, for Laptops/Mac and Other Type C Devices (Charger Not Included)
  • Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
  • Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
  • Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
  • Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
  • What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.

Physician-facing adjunctive devices

The U.S. Food and Drug Administration (FDA) classifies software-aided adjunctive diagnostic devices for suspicious skin lesions as prescription devices intended for physician use. The device works as an adjunctive second read. The physician first identifies a suspicious lesion, and only then is the software used. The classification states that the device is not for standalone diagnosis and not for confirming a clinical diagnosis.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

FDA’s De Novo database lists DermaSensor with a decision date of January 12, 2024, for a device in that physician-facing role. De Novo is the FDA pathway for novel devices of low-to-moderate risk that have no existing predicate. DermaSensor is useful as an example of how an authorized device in this category is scoped. It is not evidence about any other product, and its authorization does not extend to a consumer app.

Image-analysis software can be a device function

FDA’s Clinical Decision Support software policy navigator states that software which acquires, processes, or analyzes a medical image may perform a device function. Whether a particular product is regulated depends on its function and intended use. Building the product on a machine-learning library does not settle that question. A prototype that labels skin photos should not be described as diagnostic, clinically validated, or FDA-authorized, because those words need clinical evidence and a regulatory basis that a demonstration does not have. This article is not a legal determination for any specific product. FDA classifications and database entries change, so check the current records before relying on them.

Rank #4
Sale
UGREEN USB to USB C Adapter Combo 4-Pack, 10Gbps USB C Converter Space Gray | Data transfer & Fast charging for MacBook, iPhone 17/16/15, iPad, Samsung Galaxy, Apple Watch
  • Dual Converters, Infinite Potential:Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
  • Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
  • Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
  • Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
  • Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft

How the categories compare

Attribute Authorized adjunctive device (DermaSensor, per its FDA De Novo record) Browser prototype described in this article
Intended user Physicians Not defined by this project
Clinical step Used after a physician identifies a suspicious lesion None defined
Standalone use Not for standalone diagnosis Not defined; any standalone claim would need stated intended use and validation
Regulatory status Authorized through De Novo; decision date January 12, 2024 No regulatory determination exists for this app
Clinical performance evidence Not stated in this article; see the De Novo record None established
Skin-tone and lesion-type coverage Not stated in this article Not established
Data handling Not stated in this article Depends on the app’s code and network behavior

What the accuracy evidence shows

The American Academy of Dermatology (AAD) says diagnostic skin apps need stringent scientific testing before release, including evidence that they work across skin tones, and it flags privacy protections as a concern. The AAD’s consumer guidance also states: “Apps designed to diagnose melanoma, the most serious skin cancer, missed 41% of melanomas.” The AAD attributes that figure to studies it cites, and the page does not give the study details. Read the figure as a warning about melanoma-diagnosis apps as a class. It is not a current error rate for any app, including one you build.

Skin tones and lesion types in the data

FDA’s 2022 materials on AI for skin-lesion analysis note that public and proprietary datasets may have limited representation of skin types and lesion types, which can limit how well a model generalizes. They also explain that a credible evaluation requires separate training, validation, and test sets and testing in the patient groups the device is meant to serve. An aggregate accuracy number can hide weak performance in a subgroup.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A validation plan before any health claim

  1. Write the intended use first: who uses the app, where, which lesion types it covers, and what it must not be used for.
  2. Build a reference standard with clinical labels suited to each lesion type, such as histopathology where a lesion has been biopsied. Do not use labels assigned by app developers or taken from web images.
  3. Split the data into training, validation, and test sets, and keep every image from one patient within a single set.
  4. Test on data from the intended populations, with skin phototypes and lesion types represented explicitly rather than averaged away.
  5. Report sensitivity and specificity for each skin phototype and lesion type, with confidence intervals. Report missed positives separately, since the AAD figure concerns exactly that failure.
  6. Test each browser and device you claim to support, including the fallback path, and compare outputs across backends.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

When WebGPU is unavailable

A fallback is a product decision as much as a technical one. Decide what each failure shows the user before you ship.

Best Value
Sale
Anker USB C Hub, 5-in-1 USBC to HDMI Splitter with 4K Display | 85W Max PD, 1 Powered USB-C 5Gbps & 2 Powered USB-A 3.0 5Gbps Data Ports, for MacBook Pro, MacBook Air, Dell and More (Black)
  • 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
  • Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
  • Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
  • HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
  • What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
Condition What the app does Notes
navigator.gpu is undefined Select device 'wasm' and continue The browser does not expose WebGPU. Speed on the WebAssembly path is not measured here; benchmark it on your target hardware.
requestAdapter() resolves to null Same as above The API exists, but no usable GPU adapter was found. Driver and device settings are common causes.
Pipeline creation fails on WebGPU Retry once on 'wasm', then show an error if that also fails Failures can come from device memory limits, in which case a smaller model may be needed.
Model fetch fails on a first visit Show a retry message and classify nothing Later visits reuse cached files for as long as the browser keeps them.
Outputs differ between backends Compare results on each backend you support Numerical differences can reorder close predictions, so set tolerances in your tests.

The loadWithFallback function in the code above handles the first three rows.

What the app can say

For the screen itself, borrow the AAD’s consumer wording: “To protect your skin’s health, see a board-certified dermatologist for a diagnosis.” Pair it with a plain description of what the tool does, such as “This tool sorts photos into general image categories. It does not diagnose skin conditions.”

Privacy wording depends on the audit. “Image analysis runs in your browser” is accurate only for a build that passes the audit above. “100% private” is not, because it claims more than a browser-side flow can show on its own.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Decisions to make before the first release

  • Choose the model, confirm its Hub ID and license, and audit that exact model.
  • Decide whether to self-host model files, which removes the Hub request entirely.
  • Name the countries you launch in, since the regulatory position above is limited to the United States.
  • Remove or document every third-party script that touches the image flow.
  • Decide whether any accuracy claim will be published. If not, present the app only as a demonstration of browser inference.

Until a validation study covers the intended population, the app is a demonstration of browser-side inference and should be presented that way.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Outdated Drivers Are Slowing You DownFree scan - exact matches
PC Slower Than It Used to Be?Free scan - under a minute

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.