Trying to modify 'part_3' of tutorial with code from 'part_4 handsign example'. Images not being read correctly.

[Miller144]

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