Skip to main content

​
Web interface overview

The Skin Cancer Detection AI features a simple, intuitive web interface built with Materialize CSS. Users can upload skin lesion images and receive instant classification results with confidence scores.

​
Interface components

The application includes several key UI elements:
1

Model loading indicator

A progress bar displays while the VGG-16 model loads from the cnn_model/model.json file:
<h4 id="loadingmodel">Loading ML Model</h4>
<div id="progressbar" class="progress">
  <div class="indeterminate"></div>
</div>
The progress bar automatically hides once the model is ready.
2

Image upload

A file input allows users to select images from their device:
<div class="file-field input-field">
  <div class="btn">
    <span>Select Image</span>
    <input type="file" accept="image/*" onchange="onFileSelected(event)">
  </div>
  <div class="file-path-wrapper">
    <input class="file-path validate" type="text">
  </div>
</div>
The interface accepts any image format supported by modern browsers.
3

Image preview

Selected images are displayed before classification:
<img id="image" width="100" height="75"></img>
4

Classification button

A prominent button triggers the prediction:
<a onclick="predict()" class="waves-effect waves-light btn">
  <i class="left material-icons">fiber_smart_record</i>
  Classify Image
</a>
5

Results display

The predicted category and confidence score appear below the button:
<h3>Prediction</h3>
<b><p id="prediction"></p></b>
<p id="probability"></p>

​
How to use the interface

1

Wait for model to load

When you first open the application, wait for the “Loading ML Model” message to change to “Loaded ML Model”. This typically takes a few seconds depending on your connection speed.
2

Select an image

Click the “Select Image” button and choose a skin lesion image from your device. The image will appear in the preview area.
3

Classify

Click the “Classify Image” button to run the prediction. The model will process the image and display results within seconds.
4

Review results

The interface displays two pieces of information:
  • Prediction: The identified skin cancer category
  • Confidence: The model’s confidence percentage for this classification

​
Classification process

When you click “Classify Image”, the following happens: 
// Initialize HTML elements
var imgtag = document.getElementById("image");
var prediction_text = document.getElementById("prediction");
var probability_text = document.getElementById("probability");
The predict() function:
  1. Validates that an image has been selected
  2. Preprocesses the image to 75x100 pixels
  3. Runs inference using the VGG-16 model
  4. Extracts the highest-probability classification
  5. Displays the result and confidence score
The entire classification process happens in your browser - no data is sent to any server.

​
Example classifications

The model can identify seven different types of skin lesions: 
var classes = [
  'Actinic Keratoses',
  'Basal Cell Carcinoma',
  'Benign Keratoses',
  'Dermatofibroma',
  'Melanoma',
  'Melanocytic Nevus',
  'Vascular Lesion'
];
Each classification includes a confidence percentage calculated from the model’s output: 
probability_text.innerHTML = 
  Math.round(prediction[predicted_class] * 100) + "% Confidence";

​
Error handling

The interface includes error handling for common issues: No image selected: 
if (imgtag.src == "") {
  alert("Select an Image to Classify");
  return;
}
Image reading errors: 
try {
  // File reading logic
} catch (error) {
  alert("Error Reading Image");
}
Classification errors: 
try {
  // Prediction logic
} catch (error) {
  alert("Error Classifying Image");
}

​
Privacy and security

Client-side processing

All image processing happens locally in your browser

No data transmission

Images are never uploaded to external servers
Because the model runs entirely with TensorFlow.js in the browser, your medical images remain private and secure on your device.
Medical disclaimer: This application is for educational and research purposes only. Always consult qualified healthcare professionals for medical diagnosis and treatment of skin conditions.

​
Technical details

Framework: Materialize CSS 1.0.0 ML Library: TensorFlow.js 2.0.0 Model format: Keras layers model (converted to TensorFlow.js) Input size: 75x100x3 pixels Output: 7-class probability distribution

​
Next steps

Quick start

Learn how to implement the classification logic

View source

Explore the complete source code

Build docs developers (and LLMs) love

Get started for freeTalk to us