first commit

app

@@ -0,0 +1,11 @@
+FROM python:3.10
+
+RUN apt-get update && apt-get install -y libgl1-mesa-glx
+
+WORKDIR /app
+
+COPY ./deploy /app
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+CMD ["python", "app.py", "--host", "0.0.0.0", "--port", "7860"]

deploy/app.py

@@ -0,0 +1,42 @@
+#Import Library
+from flask import Flask, request, jsonify, render_template, send_from_directory
+import os
+from tensorflow import keras
+from keras.models import load_model
+
+#Import functions and model
+from functions import predict
+
+model = load_model('model_mnist.h5')
+
+app = Flask('meu app', template_folder='templates')
+
+@app.route('/')
+def index():
+    return render_template('webpage.html')
+
+@app.route('/static/<path:filename>')
+def serve_static(filename):
+    return send_from_directory(os.path.join(app.root_path, 'static'), filename)
+
+@app.route('/process_drawing', methods=['POST'])
+def process_drawing():
+
+    data = request.json
+    image_data = data.get("imageData")
+
+    if image_data:
+
+        value_1, value_2 = predict(image_data, model)
+
+        response = {
+            "value_1": value_1,
+            "value_2": value_2
+        }
+
+        return jsonify(response)
+    
+    return jsonify({"response": "Erro: Dados de imagem não recebidos."})
+
+if __name__ == '__main__':
+    app.run()

deploy/functions.py

@@ -0,0 +1,27 @@
+import numpy as np
+import cv2
+import base64
+from PIL import Image
+import io
+
+def predict(image_input, model):
+
+    image_data_bytes = base64.b64decode(image_input)
+
+    image_stream = io.BytesIO(image_data_bytes)
+
+    image_pil = Image.open(image_stream)
+
+    image_np = np.array(image_pil)
+
+    image = cv2.resize(image_np, (28,28))[:, :, 3]
+
+    resized_image = image / 255.0
+
+    input_image = np.expand_dims(resized_image, axis=0)
+
+    predicted_probabilities = model.predict(input_image)
+
+    predicted_labels = np.argmax(predicted_probabilities, axis=1)
+
+    return predicted_labels[0].astype(str), np.around(predicted_probabilities.max()*100,3).astype(str)

deploy/model_mnist.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9235d310f346384d3f068edd3c096612d4a846bb8a7d2173cc50e650279f5d9c
+size 5493688

deploy/requirements.txt

@@ -0,0 +1,7 @@
+#Let's install all the necessary libraries, specifying their versions
+Flask==2.2.2
+Werkzeug==2.2.2
+tensorflow==2.12.0
+opencv-python==4.8.1.78
+numpy==1.23.1
+Pillow==9.3.0

deploy/static/script.js

@@ -0,0 +1,77 @@
+var canvas = document.getElementById('drawingCanvas');
+        var context = canvas.getContext('2d');
+        var isDrawing = false;
+
+        // Define a grossura da linha
+        context.lineWidth = 14.5; // Altere para o valor desejado em pixels
+
+        canvas.addEventListener('mousedown', function(e) {
+            isDrawing = true;
+            context.beginPath();
+            context.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
+        });
+
+        canvas.addEventListener('mousemove', function(e) {
+            if (!isDrawing) return;
+            context.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
+            context.stroke();
+        });
+
+        canvas.addEventListener('mouseup', function() {
+            isDrawing = false;
+        });
+
+        document.getElementById("clearCanvas").addEventListener("click", function() {
+            var canvas = document.getElementById("drawingCanvas");
+            var context = canvas.getContext("2d");
+
+            // Limpa o canvas preenchendo-o com uma cor de fundo (pode ser branco)
+            context.fillStyle = "white";  // Altere a cor de fundo desejada
+            context.clearRect(0, 0, canvas.width, canvas.height);
+
+            // Você pode adicionar outras ações de limpeza, se necessário
+        });
+        
+        document.getElementById("sendDrawing").addEventListener("click", function() {
+
+            // Obtenha a imagem em base64
+            var imageDataURL = canvas.toDataURL("image/png");
+
+            // Verifique se a imagem base64 contém dados
+            if (imageDataURL.indexOf("base64,") === -1) {
+                alert("Desenhe algo no canvas antes de enviar.");
+                return;
+            }
+
+            // Remova o prefixo "data:image/png;base64,"
+            var base64Data = imageDataURL.replace(/^data:image\/(png|jpeg);base64,/, "");
+
+            // Adicione padding de acordo com o comprimento da string
+            while (base64Data.length % 4 !== 0) {
+                base64Data += "=";
+            }
+
+            var xhr = new XMLHttpRequest();
+
+            xhr.open("POST", "/process_drawing", true);
+            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+            var data = JSON.stringify({ "imageData": base64Data });
+            xhr.send(data);
+
+            xhr.onload = function() {
+                if (xhr.status === 200) {
+
+                    var response = JSON.parse(xhr.responseText);
+
+                    var value_1 = response.value_1;
+                    var value_2 = response.value_2;
+
+                    document.getElementById("digitoValor").textContent = value_1;
+                    document.getElementById("probabilidadeValor").textContent = value_2;
+
+                } else {
+
+                    document.getElementById("responseText").textContent = "Erro na solicitação.";
+                }
+            };
+        });

deploy/static/styles.css

@@ -0,0 +1,86 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, sans-serif;
+    background: linear-gradient(to bottom, #FF66A3, #007BFF);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center;
+    color: #333;
+    height: 100vh;
+}
+
+header {
+    /* background-color: #1f1f1f; */
+    color: #fff;
+    text-align: center;
+    padding: 0px 0;
+}
+
+#button-container {
+    text-align: center;
+}
+
+#button-container, #drawingCanvas{
+    flex-direction: column;
+    margin: 5px;
+}
+
+#sendDrawing, #clearCanvas {
+    display: inline-block;
+    margin: 10px; /* Espaçamento entre os botões */
+    padding: 10px 20px; /* Espaçamento interno dos botões */
+    background-color: #1265e0; /* Cor de fundo do botão */
+    color: #fff; /* Cor do texto do botão */
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s; /* Efeito de transição de cor ao passar o mouse */
+}
+
+#sendDrawing:hover, #clearCanvas:hover {
+    background-color: #023d7c; /* Cor do botão ao passar o mouse */
+}
+
+#textbox-container {
+    text-align: center;
+    margin-top: 20px; /* Espaçamento acima dos elementos de texto */
+}
+
+#bigChar {
+    font-size: 40px; /* Tamanho grande para o caracter */
+    margin-bottom: 10px; /* Espaçamento abaixo do caracter */
+}
+
+#number {
+    font-size: 24px; /* Tamanho do número */
+}
+
+.grid-container {
+    display: flex;
+    flex-direction: column; 
+    align-items: center;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    margin-top: 100px;
+}
+
+#grid-container, #textbox-container{
+    margin-left: 150px;
+    margin-right: 150px;
+}
+
+.numero-container {
+    width: 280px;
+    height: 280px;
+    background-color: #fff;
+    color: #000;
+    text-align: center;
+    line-height: 100px;
+}

deploy/templates/webpage.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
+    <title>Digit Recognizer</title>
+</head>
+<body>
+    <header>
+        <h1>Digit Recognizer</h1>
+    </header>
+
+    <div class="container">
+
+        <div class="grid-container">
+
+            <canvas id="drawingCanvas" width="280" height="280" style="border: 1px solid black; background-color: white;"></canvas>
+
+            <div id="button-container">
+
+                <button id="sendDrawing">Enviar Desenho</button>
+                <button id="clearCanvas">Limpar Desenho</button>
+                <script src="{{ url_for('static', filename='script.js') }}"></script>
+        
+            </div>
+
+        </div>
+        
+        <div id="textbox-container">
+
+                <div id="bigChar">Seu dígito é: <span id="digitoValor"></span></div>
+                <div id="number">Propabilidade da previsão: <span id="probabilidadeValor"></span>%</div>
+
+        </div>
+
+    </div>
+</body>
+</html>