app.py

import numpy as np
import matplotlib.pyplot as plt
from sklearn import svm
import gradio as gr
from PIL import Image

def calculate_score(clf):
    xx, yy = np.meshgrid(np.linspace(-3, 3, 500), np.linspace(-3, 3, 500))
    X_test = np.c_[xx.ravel(), yy.ravel()]
    Y_test = np.logical_xor(xx.ravel() > 0, yy.ravel() > 0)
    return clf.score(X_test, Y_test)

def getColorMap(kernel, gamma):
    # prepare the training dataset
    np.random.seed(0)
    X = np.random.randn(300, 2)
    Y = np.logical_xor(X[:, 0] > 0, X[:, 1] > 0)

    # fit the model
    clf = svm.NuSVC(kernel=kernel, gamma=gamma)
    clf.fit(X, Y)
    
    #create a grid for the plotting the decision function
    xx, yy = np.meshgrid(np.linspace(-3, 3, 500), np.linspace(-3, 3, 500))
    
    # plot the decision function for each datapoint on the grid
    Z = clf.decision_function(np.c_[xx.ravel(), yy.ravel()])
    Z = Z.reshape(xx.shape)

    plt.figure(figsize=(10, 4))
    plt.imshow(
        Z,
        interpolation="nearest",
        extent=(xx.min(), xx.max(), yy.min(), yy.max()),
        aspect="auto",
        origin="lower",
        cmap=plt.cm.PuOr_r,
    )
    contours = plt.contour(xx, yy, Z, levels=[0], linewidths=2, linestyles="dashed")
    plt.scatter(X[:, 0], X[:, 1], s=30, c=Y, cmap=plt.cm.Paired, edgecolors='k')
    plt.title(f"Decision function for Non-Linear SVC with the {kernel} kernel and '{gamma}' gamma ", fontsize='14')	#title
    plt.xlabel("X",fontsize='13')	#adds a label in the x axis
    plt.ylabel("Y",fontsize='13')	#adds a label in the y axis
    return plt, calculate_score(clf)

#XOR_TABLE markdown text
XOR_TABLE = """
<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:10PX;width:50%;margin:auto}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-c3ow{border-color:inherit;text-align:center}
td, th {padding-left: 1rem}
</style>
<BR>
<H3>Table explaining the 'XOR' operator</H3>
<table class="tg">
<thead>
  <tr>
    <th class="tg-c3ow">A</th>
    <th class="tg-c3ow">B</th>
    <th class="tg-c3ow">A XOR B</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-c3ow">0</td>
    <td class="tg-c3ow">0</td>
    <td class="tg-c3ow">0</td>
  </tr>
  <tr>
    <td class="tg-c3ow">0</td>
    <td class="tg-c3ow">1</td>
    <td class="tg-c3ow">1</td>
  </tr>
  <tr>
    <td class="tg-c3ow">1</td>
    <td class="tg-c3ow">0</td>
    <td class="tg-c3ow">1</td>
  </tr>
  <tr>
    <td class="tg-c3ow">1</td>
    <td class="tg-c3ow">1</td>
    <td class="tg-c3ow">0</td>
  </tr>
</tbody>
</table>
"""


with gr.Blocks() as demo:
    gr.Markdown("## Learning the XOR function: An application of Binary Classification using Non-linear SVM")
    gr.Markdown("### This demo is based on this [scikit-learn example](https://scikit-learn.org/stable/auto_examples/svm/plot_svm_nonlinear.html#sphx-glr-auto-examples-svm-plot-svm-nonlinear-py).")
    gr.Markdown("### In this demo, we use a non-linear SVC (Support Vector Classifier) to learn the decision function of the XOR operator.")
                    
    gr.Markdown("### Furthermore, we observe that we get different decision function plots by varying the Kernel and Gamma hyperparameters of the non-linear SVC.")

    gr.Markdown("### Feel free to experiment with kernel and gamma values below to see how the quality of the decision function changes with the hyperparameters.")

    inp1 = gr.Radio(['poly', 'rbf', 'sigmoid'], label="Kernel", info="Choose a kernel", value="poly")
    inp2 = gr.Radio(['scale', 'auto'], label="Gamma", info="Choose a gamma value", value="scale")
    
    with gr.Row().style(equal_height=True):
        with gr.Column(scale=2):        
            plot = gr.Plot(label=f"Decision function plot")
        with gr.Column(scale=1):
            num = gr.Textbox(label="Test Accuracy")

    inp1.change(getColorMap,  inputs=[inp1, inp2], outputs=[plot, num])
    inp2.change(getColorMap,  inputs=[inp1, inp2], outputs=[plot, num])
    demo.load(getColorMap, inputs=[inp1, inp2], outputs=[plot, num])

    gr.HTML(XOR_TABLE)


if __name__ == "__main__":
    demo.launch()