Update app.py

app.py

@@ -1,5 +1,9 @@
 ###############################################
-##   IT Betyar - Gradio MNIST - Képpel - Mintákkal
+##   IT Betyar - A.I. Developer tanfolyam
+##
+##   https://itbetyar.hu/mesterseges-intelligencia-fejleszto-tanfolyam/
+##
+##   Gradio MNIST - Képpel - Mintákkal
 
 import tensorflow as tf
 import numpy as np
@@ -21,7 +25,7 @@ def preprocess_image(img):     # Preprocess the input image
 
     return img
 
-def predict_digit(img):        # Predict the digit in the image
+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]
@@ -30,43 +34,48 @@ def predict_digit(img):        # Predict the digit in the image
 ## Fonti a mukodteto funkcio kodok
 ## Alabb a Gradio interface resz
 
-# Custom CSS for button styles
-custom_css = """
-.custom-button {
-        background-color: #57a1a9;  /* Green background */
-        color: white;               /* White text */
-        padding: 10px 20px;         /* Padding */
-        border: none;               /* No border */
-        cursor: pointer;            /* Pointer cursor */
-        font-size: 16px;            /* Font size */
-    }
-
-.custom-button:hover {
-        background-color: #345e63;  
-}
-    
-#main-container {
-    max-width: 900px;
-    margin: 0 auto;
-}
-"""
-
 # 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;">
-    <h1 style="color: #8397aa; font-size: 2.5em;">MNIST Digit Recognition | by itbetyar.hu</h1>
-    <p style="color: #FFFFFF; font-size: 1.2em;">
-        Tölts fel egy kézzel írott szám képet (0-9) vagy használd alábbi mintákat!<br>
-        A modell megállapítja melyik szám az.
-    </p>
+<div style="max-width: 900px; margin: 0 auto; text-align: center;">
+    <div style="display: flex; justify-content: center; align-items: center;">
+        <div style="flex: 1; text-align: center;">
+            <img src="https://huggingface.co/spaces/itbetyar/MNISTClassifier/resolve/main/mnist_img.webp" alt="Header Image" style="max-width: 100%; height: auto; margin: 20px;">
+        </div>
+        <div style="flex: 1; padding-left: 30px; text-align: left;">
+            <h1 style="color: #8397aa; font-size: 3em;">MNIST Digit Recognition</h1>
+            <h3 style="color: #7CE0E1; font-size: 1.8em;">by itbetyar.hu</h3>
+        </div>
+    </div>
+    <div style="text-align: center; background-color: #1b2428; border-radius: 10px;">
+        <p style="color: #FFFFFF; padding: 5px; font-size: 1.2em; margin-top: 0px;">
+        <a href="https://itbetyar.hu/mesterseges-intelligencia-fejleszto-tanfolyam/">A.I. Developer tanfolyam minta anyag</a><br>
+            Tölts fel egy kézzel írott szám képet (0-9) vagy használd alábbi mintákat!<br>
+            A modell megállapítja melyik szám az.
+        </p>
+    </div>
+</div>
+"""
+
+footer_html = """
+<div style="max-width: 900px; margin: 0 auto; text-align: center;">
+<h3 style="color: #7CE0E1; font-size: 1.8em;">Leírás:</h3>
+<p style="font-size: 1.3em;">
+Fenti anyagunk az <a href="https://itbetyar.hu/mesterseges-intelligencia-fejleszto-tanfolyam/">A.I. Developer tanfolyamunk</a> egy minta anyaga. Az MNIST Digit Classifikáció minden A.I. és Machine learining tanfolyam alap modellje, anyaga. Egy remek kezdő projekt.
+</p>
+<p style="padding: 5px; font-size: 1.3em; margin-top: 0px;">
+A lényege -mint azt fent láthatod- hogy <b>60,000 kézzel írt számkarakter</b> alapján, a diákok feltanítanak egy A.I. modellt. Miután készen van, a modell képes kézzel írt számok felismerésére
+</p>
 </div>
 """
 
+with open("styles.css", "r") as file:
+    custom_css = file.read()  # Read the external CSS file
+
 # Gradio interface with header and layout
 with gr.Blocks(css=custom_css) as ablakom:
     with gr.Column(elem_id="main-container"):
       gr.HTML(header_html)  # Add the header HTML block
+
     
       with gr.Row():
             with gr.Column(scale=1):
@@ -85,8 +94,19 @@ with gr.Blocks(css=custom_css) as ablakom:
             with gr.Column(scale=1):
                 output = gr.Label(num_top_classes=3, label="A feltöltött számjegy:")
 
+    with gr.Column():
+        gr.HTML(footer_html)
+
     # Button actions
     classify_btn.click(predict_digit, inputs=input_image, outputs=output)
     clear_btn.click(lambda: [None, None], inputs=None, outputs=[input_image, output])
 
-ablakom.launch() # az interface inditasa
+ablakom.launch() # az interface inditasa
+
+
+##   IT Betyar - A.I. Developer tanfolyam
+##
+##   https://itbetyar.hu/mesterseges-intelligencia-fejleszto-tanfolyam/
+##
+##   Gradio MNIST - Képpel - Mintákkal
+########################################################################