Amazing-Python-Scripts

1
//-------------------
2
// GLOBAL variables
3
//-------------------
4
let model;
5

6
var canvasWidth           	= 150;
7
var canvasHeight 			= 150;
8
var canvasStrokeStyle		= "white";
9
var canvasLineJoin			= "round";
10
var canvasLineWidth       	= 10;
11
var canvasBackgroundColor 	= "black";
12
var canvasId              	= "canvas";
13

14
var clickX = new Array();
15
var clickY = new Array();
16
var clickD = new Array();
17
var drawing;
18

19
document.getElementById('chart_box').innerHTML = "";
20
document.getElementById('chart_box').style.display = "none";
21

22
//---------------
23
// Create canvas
24
//---------------
25
var canvasBox = document.getElementById('canvas_box');
26
var canvas    = document.createElement("canvas");
27

28
canvas.setAttribute("width", canvasWidth);
29
canvas.setAttribute("height", canvasHeight);
30
canvas.setAttribute("id", canvasId);
31
canvas.style.backgroundColor = canvasBackgroundColor;
32
canvasBox.appendChild(canvas);
33
if(typeof G_vmlCanvasManager != 'undefined') {
34
  canvas = G_vmlCanvasManager.initElement(canvas);
35
}
36

37
ctx = canvas.getContext("2d");
38

39

40
//---------------------
41
// MOUSE DOWN function
42
//---------------------
43
$("#canvas").mousedown(function(e) {
44
	var rect = canvas.getBoundingClientRect();
45
	var mouseX = e.clientX- rect.left;;
46
	var mouseY = e.clientY- rect.top;
47
	drawing = true;
48
	addUserGesture(mouseX, mouseY);
49
	drawOnCanvas();
50
});
51

52
//-----------------------
53
// TOUCH START function
54
//-----------------------
55
canvas.addEventListener("touchstart", function (e) {
56
	if (e.target == canvas) {
57
    	e.preventDefault();
58
  	}
59

60
	var rect = canvas.getBoundingClientRect();
61
	var touch = e.touches[0];
62

63
	var mouseX = touch.clientX - rect.left;
64
	var mouseY = touch.clientY - rect.top;
65

66
	drawing = true;
67
	addUserGesture(mouseX, mouseY);
68
	drawOnCanvas();
69

70
}, false);
71

72
//---------------------
73
// MOUSE MOVE function
74
//---------------------
75
$("#canvas").mousemove(function(e) {
76
	if(drawing) {
77
		var rect = canvas.getBoundingClientRect();
78
		var mouseX = e.clientX- rect.left;;
79
		var mouseY = e.clientY- rect.top;
80
		addUserGesture(mouseX, mouseY, true);
81
		drawOnCanvas();
82
	}
83
});
84

85
//---------------------
86
// TOUCH MOVE function
87
//---------------------
88
canvas.addEventListener("touchmove", function (e) {
89
	if (e.target == canvas) {
90
    	e.preventDefault();
91
  	}
92
	if(drawing) {
93
		var rect = canvas.getBoundingClientRect();
94
		var touch = e.touches[0];
95

96
		var mouseX = touch.clientX - rect.left;
97
		var mouseY = touch.clientY - rect.top;
98

99
		addUserGesture(mouseX, mouseY, true);
100
		drawOnCanvas();
101
	}
102
}, false);
103

104
//-------------------
105
// MOUSE UP function
106
//-------------------
107
$("#canvas").mouseup(function(e) {
108
	drawing = false;
109
});
110

111
//---------------------
112
// TOUCH END function
113
//---------------------
114
canvas.addEventListener("touchend", function (e) {
115
	if (e.target == canvas) {
116
    	e.preventDefault();
117
  	}
118
	drawing = false;
119
}, false);
120

121
//----------------------
122
// MOUSE LEAVE function
123
//----------------------
124
$("#canvas").mouseleave(function(e) {
125
	drawing = false;
126
});
127

128
//-----------------------
129
// TOUCH LEAVE function
130
//-----------------------
131
canvas.addEventListener("touchleave", function (e) {
132
	if (e.target == canvas) {
133
    	e.preventDefault();
134
  	}
135
	drawing = false;
136
}, false);
137

138
//--------------------
139
// ADD CLICK function
140
//--------------------
141
function addUserGesture(x, y, dragging) {
142
	clickX.push(x);
143
	clickY.push(y);
144
	clickD.push(dragging);
145
}
146

147
//-------------------
148
// RE DRAW function
149
//-------------------
150
function drawOnCanvas() {
151
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
152

153
	ctx.strokeStyle = canvasStrokeStyle;
154
	ctx.lineJoin    = canvasLineJoin;
155
	ctx.lineWidth   = canvasLineWidth;
156

157
	for (var i = 0; i < clickX.length; i++) {
158
		ctx.beginPath();
159
		if(clickD[i] && i) {
160
			ctx.moveTo(clickX[i-1], clickY[i-1]);
161
		} else {
162
			ctx.moveTo(clickX[i]-1, clickY[i]);
163
		}
164
		ctx.lineTo(clickX[i], clickY[i]);
165
		ctx.closePath();
166
		ctx.stroke();
167
	}
168
}
169

170
//------------------------
171
// CLEAR CANVAS function
172
//------------------------
173
$("#clear-button").click(async function () {
174
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
175
	clickX = new Array();
176
	clickY = new Array();
177
	clickD = new Array();
178
	$(".prediction-text").empty();
179
	$("#result_box").addClass('d-none');
180
});
181

182
//-------------------------------------
183
// loader for cnn model
184
//-------------------------------------
185
async function loadModel() {
186
  console.log("model loading..");
187

188
  // clear the model variable
189
  model = undefined;
190
  
191
  // load the model using a HTTPS request (where you have stored your model files)
192
  model = await tf.loadLayersModel("models/model.json");
193
  
194
  console.log("model loaded..");
195
}
196

197
loadModel();
198

199
//-----------------------------------------------
200
// preprocess the canvas
201
//-----------------------------------------------
202
function preprocessCanvas(image) {
203
	// resize the input image to target size of (1, 28, 28)
204
	let tensor = tf.browser.fromPixels(image)
205
		.resizeNearestNeighbor([28, 28])
206
		.mean(2)
207
		.expandDims(2)
208
		.expandDims()
209
		.toFloat();
210
	console.log(tensor.shape);
211
	return tensor.div(255.0);
212
}
213

214
//--------------------------------------------
215
// predict function 
216
//--------------------------------------------
217
$("#predict-button").click(async function () {
218
    // get image data from canvas
219
	var imageData = canvas.toDataURL();
220

221
	// preprocess canvas
222
	let tensor = preprocessCanvas(canvas);
223

224
	// make predictions on the preprocessed image tensor
225
	let predictions = await model.predict(tensor).data();
226

227
	// get the model's prediction results
228
	let results = Array.from(predictions);
229

230
	// display the predictions in chart
231
	$("#result_box").removeClass('d-none');
232
	displayChart(results);
233
	displayLabel(results);
234

235
	console.log(results);
236
});
237

238
//------------------------------
239
// Chart to display predictions
240
//------------------------------
241
var chart = "";
242
var firstTime = 0;
243
function loadChart(label, data, modelSelected) {
244
	var ctx = document.getElementById('chart_box').getContext('2d');
245
	chart = new Chart(ctx, {
246
	    // The type of chart we want to create
247
	    type: 'bar',
248

249
	    // The data for our dataset
250
	    data: {
251
	        labels: label,
252
	        datasets: [{
253
	            label: modelSelected + " prediction",
254
	            backgroundColor: '#f50057',
255
	            borderColor: 'rgb(255, 99, 132)',
256
	            data: data,
257
	        }]
258
	    },
259

260
	    // Configuration options go here
261
	    options: {}
262
	});
263
}
264

265
//----------------------------
266
// display chart with updated
267
// drawing from canvas
268
//----------------------------
269
function displayChart(data) {
270
	var select_model  = document.getElementById("select_model");
271
  	var select_option = "CNN";
272

273
	label = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
274
	if (firstTime == 0) {
275
		loadChart(label, data, select_option);
276
		firstTime = 1;
277
	} else {
278
		chart.destroy();
279
		loadChart(label, data, select_option);
280
	}
281
	document.getElementById('chart_box').style.display = "block";
282
}
283

284
function displayLabel(data) {
285
	var max = data[0];
286
    var maxIndex = 0;
287

288
    for (var i = 1; i < data.length; i++) {
289
        if (data[i] > max) {
290
            maxIndex = i;
291
            max = data[i];
292
        }
293
    }
294
	$(".prediction-text").html("Predicting you draw <b>"+maxIndex+"</b> with <b>"+Math.trunc( max*100 )+"%</b> confidence")
295
}
296

297