change language and add tip

deploy/app.py

@@ -1,7 +1,6 @@
 #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
@@ -9,7 +8,7 @@ from functions import predict
 
 model = load_model('model_mnist.h5')
 
-app = Flask('meu app', template_folder='templates')
+app = Flask('my app', template_folder='templates')
 
 @app.route('/')
 def index():
@@ -36,7 +35,7 @@ def process_drawing():
 
         return jsonify(response)
     
-    return jsonify({"response": "Erro: Dados de imagem não recebidos."})
+    return jsonify({"response": "Erro: Image data not received."})
 
 if __name__ == '__main__':
     app.run()

deploy/static/styles.css

@@ -14,7 +14,7 @@ body {
 }
 
 header {
-    /* background-color: #1f1f1f; */
+
     color: #fff;
     text-align: center;
     padding: 0px 0;
@@ -31,32 +31,32 @@ header {
 
 #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 */
+    margin: 10px;
+    padding: 10px 20px;
+    background-color: #1265e0;
+    color: #fff;
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.3s; /* Efeito de transição de cor ao passar o mouse */
+    transition: background-color 0.3s;
 }
 
 #sendDrawing:hover, #clearCanvas:hover {
-    background-color: #023d7c; /* Cor do botão ao passar o mouse */
+    background-color: #023d7c;
 }
 
 #textbox-container {
     text-align: center;
-    margin-top: 20px; /* Espaçamento acima dos elementos de texto */
+    margin-top: 20px; 
 }
 
 #bigChar {
-    font-size: 40px; /* Tamanho grande para o caracter */
-    margin-bottom: 10px; /* Espaçamento abaixo do caracter */
+    font-size: 40px; 
+    margin-bottom: 10px;
 }
 
 #number {
-    font-size: 24px; /* Tamanho do número */
+    font-size: 24px; 
 }
 
 .grid-container {

deploy/templates/webpage.html

@@ -19,8 +19,8 @@
 
             <div id="button-container">
 
-                <button id="sendDrawing">Enviar Desenho</button>
-                <button id="clearCanvas">Limpar Desenho</button>
+                <button id="sendDrawing">Send drawing</button>
+                <button id="clearCanvas">Clear Drawing</button>
                 <script src="{{ url_for('static', filename='script.js') }}"></script>
         
             </div>
@@ -29,8 +29,9 @@
         
         <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 id="bigChar">Your digit is: <span id="digitoValor"></span></div>
+                <div id="number">Prediction probability: <span id="probabilidadeValor"></span>%</div>
+                <div>Tip: The larger your drawing, the better the model can recognize it.</div>
 
         </div>