Update app.py

app.py

@@ -1,49 +1,49 @@
-import requests
-
 import gradio as gr
 import torch
-from timm import create_model 
-from timm.data import resolve_data_config 
+from timm import create_model
+from timm.data import resolve_data_config
 from timm.data.transforms_factory import create_transform
+import requests
 
-IMAGENET_1k_URL = "https://storage.googleapis.com/bit_models/ilsvrc2012_wordnet_lemmas.txt" 
-LABELS = requests.get(IMAGENET_1k_URL).text.strip().split('\n') 
+IMAGENET_1k_URL = "https://storage.googleapis.com/bit_models/ilsvrc2012_wordnet_lemmas.txt"
+LABELS = requests.get(IMAGENET_1k_URL).text.strip().split('\n')
 
 model = create_model('resnet50', pretrained=True)
 transform = create_transform(**resolve_data_config({}, model=model))
 model.eval()
 
-def predict_fn(img): 
-    img = img.convert('RGB') 
-    img = transform(img).unsqueeze(0) 
-
-    with torch.no_grad(): 
-        out = model(img) 
-        
-    probabilites = torch.nn.functional.softmax(out[0], dim=0) 
-
-    values, indices = torch.topk(probabilites, k=5) 
-    
+def predict_fn(img):
+    img = img.convert('RGB')
+    img = transform(img).unsqueeze(0)
+    with torch.no_grad():
+        out = model(img)
+    probabilities = torch.nn.functional.softmax(out[0], dim=0)
+    values, indices = torch.topk(probabilities, k=5)
     return {LABELS[i]: v.item() for i, v in zip(indices, values)}
 
 # HTML for the header
 header_html = """
 <div style="text-align: center; max-width: 650px; margin: 0 auto;">
-    <h1 style="color: #2c3e50; font-size: 2.5em;">IT Betyár Resnet- Image Classifier</h1>
     <img src="imgclass.webp" alt="Header Image" style="max-width: 100%; height: auto; margin: 20px 0;">
+    <h1 style="color: #2c3e50; font-size: 2.5em;">IT Betyár Resnet- Image Classifier</h1>
     <p style="color: #34495e; font-size: 1.2em;">
-        Üdvözöljük képosztályozónkban! Ez az eszköz egy ImageNeten betanított ResNet50 modellt használja
+        Üdvözöljük képosztályozónkban! Ez az eszköz egy ImageNeten betanított ResNet50 modellt használ
         a képek osztályozására. Tölts fel egy képet, és megmutatjuk az 5 legjobb előrejelzést.
     </p>
 </div>
 """
+
+with gr.Blocks() as demo:
+    gr.HTML(header_html)
     
-gr.Interface(
-    predict_fn,
-    inputs=gr.components.Image(type='pil'),
-    outputs='label',
-    title="IT Betyár - ResNet50 Image Classifier",
-    description="Tölts fel egy képet a predikcióhoz!",
-    article=header_html  # Add the header HTML here
-).launch() 
-           
+    with gr.Row():
+        with gr.Column():
+            input_image = gr.Image(type='pil')
+            classify_btn = gr.Button("Osztályozás")
+        
+        with gr.Column():
+            output = gr.Label()
+    
+    classify_btn.click(predict_fn, inputs=input_image, outputs=output)
+
+demo.launch()