zaidalyafeai

function getFrame()
{
    const ctx = canvas.getContext("2d");
    //get the minimum bounding box
    const mbb = getMinBox()
    imgData = ctx.getImageData(mbb.min.x, mbb.min.y, mbb.max.x - mbb.min.x, mbb.max.y - mbb.min.y);
    //get the predictions, top 5 
    const pred = model.predict(preprocess(imgData)).dataSync()
    //find the top predictiosn 
    const indices = findIndicesOfMax(pred, 5)

zaidalyafeai

function preprocess(imgData)
{
return tf.tidy(()=>{
    //convert the image data to a tensor 
    let tensor = tf.browser.fromPixels(imgData, numChannels= 1)
    //resize to 28 x 28 
    const resized = tf.image.resizeBilinear(tensor, [28, 28]).toFloat()
    // Normalize the image 
    const offset = tf.scalar(255.0);
    const normalized = tf.scalar(1.0).sub(resized.div(offset));

zaidalyafeai

//record the current drawing coordinates 	  
function recordCoor(event)
{
  //get current mouse coordinate 
  var pointer = canvas.getPointer(event.e);
  var posX = pointer.x;
  var posY = pointer.y;
  
  //record the point if withing the canvas and the mouse is pressed 
  if(posX >=0 && posY >= 0 && mousePressed)  

zaidalyafeai

$(function () {
    //setup the canvas 
    canvas = window._canvas = new fabric.Canvas('canvas');
    canvas.backgroundColor = '#ffffff';
    canvas.isDrawingMode= 0;
    canvas.freeDrawingBrush.color = "black";
    canvas.freeDrawingBrush.width = 10;
    canvas.renderAll();
    
    //event listeners

zaidalyafeai

  
//load the class names 	  
async function loadDict()
{
  await $.ajax({
  url: 'model/class_names.txt',
  dataType: 'text',}).done(success);
}
	  
//load the class names 

zaidalyafeai

model = await tf.loadLayersModel('model/model.json')

zaidalyafeai

from google.colab import files
files.download('model.zip')

zaidalyafeai

!zip -r model.zip model 

zaidalyafeai

!mkdir model
!tensorflowjs_converter --input_format keras keras.h5 model/

zaidalyafeai

!pip install tensorflowjs