adf-telkomuniv / tensorflowjs_tutorial Goto Github PK
View Code? Open in Web Editor NEWTensorFlow.js Tutorial
License: Apache License 2.0
TensorFlow.js Tutorial
License: Apache License 2.0
After completing the the tutorial for '[Part 3: MNIST Classification]', I tried to apply code to the script to allow the option to import an image of a handwritten digit from the PC and have the trained model predict the value of the digit in the image.
I tried to use the code in the 'handsign.js' and 'handsign.html' files given in the 'part_4' github folder, but the images I'm using all give the same result despite all being different digits.
I think it might be reading the data from the canvas incorrectly?
This is the code I added to the 'index.js' file of Part 3 from the 'handsign.js' file of Part 4:
`initCanvas('predict-canvas1')
$('#upload-btn').click(async() => {
$('#img-upload').click()
})
var imgTensor
$('#img-upload').change(async(evt) => {
var canvas = $('#predict-canvas1')[0]
var context = canvas.getContext("2d")
var img = new Image()
var file = evt.target.files[0]
if(file.type.match('image.*')) {
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(evt){
if( evt.target.readyState == FileReader.DONE) {
img.src = evt.target.result
img.onload = () => {
context.clearRect(0, 0, canvas.width, canvas.height)
context.drawImage(img, 0, 0)
}
}
}
$('#predict-btn1').prop('disabled', false)
// $('#prediction1').text( 'Predicted: ')
} else {
alert("not an image")
}
})
$('#predict-btn1').click(async() => {
// try{
// $('#predict-btn1').prop('disabled', true)
// const img = imgTensor.div(tf.scalar(255))
// var x_data = tf.cast(resized.reshape([1, 28, 28, 3]), 'float32')
// var y_pred = await model.predict(x_data)
// var predictions = Array.from(y_pred.argMax(1).dataSync())
// $('#prediction1').text( 'Predicted: '+ predictions)
// } catch (e) {
// console.log(e)
// alert('failed to predict image')
// }
var canvas = $('#predict-canvas1')[0]
var preview = $('#preview-canvas1')[0]
var img1 = tf.browser.fromPixels(imgTensor, 4)
var resized = util.cropImage(img1, canvas.width)
tf.browser.toPixels(resized, preview)
var x_data = tf.cast(resized.reshape([1, 28, 28, 1]), 'float32')
var y_pred = model.predict(x_data)
var prediction = Array.from(y_pred.argMax(1).dataSync())
$('#prediction1').text( 'Predicted: '+ prediction)
const barchartData = Array.from(y_pred.dataSync()).map((d, i) => {
return { index: i, value: d }
})
tfvis.render.barchart($('#predict-graph1')[0], barchartData, { width: 400, height: 140 })
})`
Is there a way for this part of 'handsign.js' to work with the 'index.js' file?
If not, is there an alternative way for the trained model to predict the digit contained in an image?
All the code used in this project, including the images I'm trying to use, can be found at this repository: https://github.com/Miller144/verbose-octo-carnival
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.