scikit-learn-pyodide-iris

%% md
# Scikit-Learn in the browser: Iris Classification

The goal of this notebook is to show how to use Scikit-learn directly in your browser, through pyodide. This particular example, we will train a simple classifier using the Iris data. Then, we will build an HTML GUI using Iodide, which will be used to interact with the classifier and perform predictions.

## Update your inputs
<div>
	Change Sepal length: 
	<input id="sepalLengthInput" type="range" step=0.1 min=4 max=8><br>
    Change Sepal width: 
	<input id="sepalWidthInput" type="range" step=0.1 min=2 max=4.5><br>
    Change Petal length: 
	<input id="petalLengthInput" type="range" step=0.1 min=1 max=7><br>
	Change Petal width: 
	<input id="petalWidthInput" type="range" step=0.1 min=0 max=2.5><br>
</div>

## Your input values are
<div>
  <div id="sepalLengthOutput"></div>
  <div id="sepalWidthOutput"></div>
  <div id="petalLengthOutput"></div>
  <div id="petalWidthOutput"></div>
</div>

## Predicted Class
<div id="predictionOutput"></div>

%% py
# STEP 1 - TRAIN THE MODEL
from sklearn import datasets
from sklearn.linear_model import LogisticRegression
from sklearn.model_selection import train_test_split
import pandas as pd
import numpy as np

# Load the dataset
iris = datasets.load_iris()
X = iris.data
y = iris.target

# Split the dataset into train and test
X_train, X_test, y_train, y_test = train_test_split(
    X, y, test_size=0.1, random_state=42
)

# Train a classifier
clf = LogisticRegression()
clf.fit(X_train, y_train)

# Verify the score of the clf
clf.score(X_test, y_test)

%% py
# STEP 2 - CREATE THE GUI
from js import iodide, document

# Define a higher order function that will return the onchange function
def listener(name, out_id):
    def onchange(e):
    	elt = document.getElementById(out_id)
    	elt.innerText = name + ": " + str(e.target.value) + " cm"
        
    return onchange


# Retrieve the sliders as Iodide Element objects
sep_len = document.getElementById('sepalLengthInput')
sep_wid = document.getElementById('sepalWidthInput')
pet_len = document.getElementById('petalLengthInput')
pet_wid = document.getElementById('petalWidthInput')

# Assign event listeners that will update the 
sep_len.addEventListener('change', listener('Sepal Length', 'sepalLengthOutput'))
sep_wid.addEventListener('change', listener('Sepal Width', 'sepalWidthOutput'))
pet_len.addEventListener('change', listener('Petal Length', 'petalLengthOutput'))
pet_wid.addEventListener('change', listener('Petal Width', 'petalWidthOutput'))

%% py
# STEP 3 - PREDICTION
def onchange(e):
    X_inp = [[
        float(sep_len.value),
        float(sep_wid.value),
        float(pet_len.value),
        float(pet_wid.value)
    ]]

    y_pred = int(clf.predict(X_inp))
    pred_name = iris.target_names[y_pred]
    
    elt = document.getElementById("predictionOutput")
    elt.innerText = "Our model predicts: " + pred_name
    
for elt in [sep_len, sep_wid, pet_len, pet_wid]:
	elt.addEventListener('change', onchange)

Hosted version: https://alpha.iodide.io/notebooks/1836/