Update app.py

app.py

@@ -1,15 +1,13 @@
 ###############################################
-##   IT Betyar - Gradio MNIST - Képpel
+##   IT Betyar - Gradio MNIST - Képpel - Mintákkal
 
 import tensorflow as tf
 import numpy as np
 import gradio as gr
 
-# Load the MNIST model
-model = tf.keras.models.load_model('mnist.keras')
+model = tf.keras.models.load_model('mnist.keras') # a modell betoltese
 
-# Preprocess the input image
-def preprocess_image(img):
+def preprocess_image(img):     # Preprocess the input image
     if len(img.shape) == 3 and img.shape[-1] == 3:
         img = tf.image.rgb_to_grayscale(img).numpy().squeeze()
 
@@ -23,19 +21,18 @@ def preprocess_image(img):
 
     return img
 
-# Predict the digit in the image
-def predict_digit(img):
+def predict_digit(img):        # Predict the digit in the image
     processed_img = preprocess_image(img)
     processed_img = np.expand_dims(processed_img, axis=0)  # Add batch dimension
     prediction = model.predict(processed_img)[0]
     return {str(i): float(prediction[i]) for i in range(10)}
 
-# HTML for the header
+## Fonti a mukodteto funkcio kodok
+## Alabb a Gradio interface resz
 
 # Custom CSS for button styles
 custom_css = """
-<style>
-    .custom-button {
+.custom-button {
         background-color: #57a1a9;  /* Green background */
         color: white;               /* White text */
         padding: 10px 20px;         /* Padding */
@@ -44,12 +41,12 @@ custom_css = """
         font-size: 16px;            /* Font size */
     }
 
-    .custom-button:hover {
-        background-color: #345e63;  /* Darker green on hover */
+.custom-button:hover {
+        background-color: #345e63;  /* Darker on hover */
     }
-</style>
 """
 
+# HTML for the header
 header_html = """
 <div style="text-align: center; max-width: 650px; margin: 0 auto;">
     <img src="https://huggingface.co/spaces/itbetyar/MNISTClassifier/resolve/main/mnist_img.webp" alt="Header Image" style="max-width: 100%; height: auto; margin: 20px 0;">
@@ -62,7 +59,7 @@ header_html = """
 """
 
 # Gradio interface with header and layout
-with gr.Blocks() as ablakom:
+with gr.Blocks((css=custom_css)) as ablakom:
     gr.HTML(header_html)  # Add the header HTML block
     
     with gr.Row():
@@ -86,7 +83,4 @@ with gr.Blocks() as ablakom:
     classify_btn.click(predict_digit, inputs=input_image, outputs=output)
     clear_btn.click(lambda: [None, None], inputs=None, outputs=[input_image, output])
 
-
-
-# Launch the ablakom
-ablakom.launch()
+ablakom.launch() # az interface inditasa