Блог

Главная - Вопросы по программированию - Не удается рисовать на canvas html после развертывания моей модели на heroku

Не удается рисовать на canvas html после развертывания моей модели на heroku

#javascript #python #html #flask #heroku

#javascript #python #HTML #flask #heroku

Вопрос:

Я обучил простую модель распознавания цифр рукописного ввода с использованием Keras, где мы будем прогнозировать результаты на основе рисования и развертывать ее на сервере Heroku с помощью Flask. Он корректно работал на локальном сервере, но когда я развернул его на Heroku, я ничего не мог нарисовать. Может кто-нибудь, пожалуйста, найти, что я здесь делаю не так?

это файл интерфейса (main.html )

 <html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
</style>
</head>
<form action="/draw" method="GET">
    <fieldset>
        
    <input name="Tweet" type ='text' style='display:none' id='a'/>
    </fieldset>
 

<body onload="InitThis();">
<h1>Single digit recognizer using keras</h1>
<p> If you are getting wrong result then switch to large scale</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="JsCode.js"></script>
    <script>
var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
    ctx = document.getElementById('myCanvas').getContext("2d");

    $('#myCanvas').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#myCanvas').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#myCanvas').mouseup(function (e) {
        mousePressed = false;
    });
        $('#myCanvas').mouseleave(function (e) {
        mousePressed = false;
    });
}
var a1=0;
function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = $('#selColor').val();
        ctx.lineWidth = $('#selWidth').val();
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
        a1 = document.getElementById('myCanvas').toDataURL('image/png');
        document.querySelector('#a').value=a1;
    }
    lastX = x; lastY = y;
}
    
function clearArea() {
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

</script>
    <div align="center">
        <canvas id="myCanvas" width="200" height="200" style="border:2px solid black"></canvas>
        <br /><br />
        
        <button onclick="javascript:clearArea();return false;">Clear Area</button>
        Line width : <select id="selWidth">
            <option value="11" selected="selected">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
        </select>
        Color : <select id="selColor">
            <option value="black">black</option>
            <option value="blue" selected="selected">blue</option>
            <option value="red">red</option>
            <option value="green">green</option>
            <option value="yellow">yellow</option>
            <option value="gray">gray</option>
        </select>
    </div>
</body>
<div style="text-align:center">  
    <input type="submit" style="width: 300px; margin: 20 auto;" />
</div>  
</form>
<br>
<div class="result" align="center">
    {% if result %}
    <p style="font-size:50px">{{ result }}</p>
    
    {% endif %}
</div>
</html>

это внутренний файл (app.py )

 import flask
from utils import *
import tensorflow as tf
# Use pickle to load in the pre-trained model
# Initialise the Flask app
app = flask.Flask(__name__, template_folder='templates')

# Set up the main route

l=['Zero','One','Two','Three','Four','Five','Six','Seven','Eight','Nine']
@app.route('/', methods=['GET', 'POST'])
def main():
    return(flask.render_template('main.html'))


@app.route('/draw')
def draw1():
    try: 
        a1 = flask.request.args.get('Tweet')
        model=tf.keras.models.load_model('Model1.h5')
        
        img=toImage(str(a1))
        
        prediction=model.predict_classes(img)[0]
        return flask.render_template('main.html',
                                         result=l[prediction]
                                         )
    except Exception:
        return flask.render_template('main.html',
                                         result='Something went wrong please try again :)'
                                         )


if __name__ == '__main__':
    app.run()

утилиты.как преобразовать данные base64 в изображение

 import base64
from PIL import Image
import io
import numpy as np
def toImage(s):
    imgstring = s[22:]
    imgdata = base64.b64decode(imgstring)
    im = Image.open(io.BytesIO(imgdata))
    im = im.resize((28,28))
    im = im.convert('L')
    im = np.array(im)/255
    im=im.reshape(1,28,28,1)
    return im

вот модель keras «‘ https://github.com/sachin327/draw/blob/main/Model1.h5 «‘

все необходимые файлы загружаются здесь «‘ https://github.com/sachin327/draw «‘

Комментарии:

1. Вы развернули / загрузили свой JsCode.js как хорошо?

2. @FedorPetrov да, в основном весь мой код (интерфейс) был написан в одном файле main.html (включая код javascript), и я развернул этот файл на Heroku с помощью flask. У меня нет дополнительного файла javascript.

3. Пытались ли вы использовать инструменты разработчика вашего браузера, чтобы узнать, какие запросы были запущены и какие сообщения об ошибках выдаются? The JsCode.js вопрос был в том, потому что у вас все еще есть это <script type="text/javascript" src="JsCode.js"></script> в вашем main.html . Если такого файла нет, однако вы включили код в сам HTML, то это, конечно, не должно вызывать проблем.