// Use JS to write whatever HTML and data you want to the page
// One way of using JS to write HTML and data is with a multi-line string
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
$.getScript( "/uploads/abhi/sketch.js", console.log("Sketch imported."));
$.getScript( "/uploads/abhi/doodle_model.js", console.log("Model imported."));
$.getScript( "/uploads/abhi/doodle_preprocess.js", console.log("Dataprep imported."));
$.getScript( "/uploads/abhi/doodle_object.js", console.log( "DataObject imported."));
$.getScript( "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js", console.log( "TensorFlow imported."));
$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js", console.log( "P5 imported."));
document.write ( `
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device=width", initial-scale=1" />
<title> Doodle Classifier </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
<link rel ="stylesheet" href="https://ancientbrain.com/uploads/abhi/style.css" />
</head>
<body>
<h3> DOODLE RECOGNIZER </h3>
<div id="canvas">
<!-- sketch -->
</div>
<div>
<button class="btn btn-success" id="train">Train MY MODEL</button>
<button class="btn btn-primary" id="guess">Guess PRE-TRAINED MODEL</button>
<button class="btn btn-primary" id="mymodel">Guess MY MODEL</button>
<button class="btn btn-warning" id="clear">CLEAR</button>
</div>
<span class="alert alert-primary" id="training-alert" role="alert"></span>
<span class="output" class="alert alert-success" role="alert"></span>
<span id="output" class="alert alert-success" role="alert"></span>
</body>
</html>
` );