Update app.py

app.py

@@ -7,6 +7,7 @@ from PIL import Image
 pipe = pipeline("image-to-text", model="Salesforce/blip-image-captioning-base")  
 translator = pipeline(task="translation", model="facebook/nllb-200-distilled-600M", torch_dtype=torch.bfloat16)
 
+#process sketch input 
 def process_image(image, shouldConvert=False):
     if shouldConvert:
         new_img = Image.new('RGB', size=(image.width, image.height), color=(255, 255, 255))
@@ -22,73 +23,31 @@ def parse_input(image, sketchpad, state):
     if current_tab_index == 0:
         if image is not None:
             new_image = process_image(image)
-
     # Sketch
     elif current_tab_index == 1:
         #print(sketchpad)
         if sketchpad and sketchpad["composite"]:
             new_image = process_image(sketchpad["composite"], True)
     
+    # send to pipeline
     Eng_txt = pipe(new_image)
     to_Ar_txt = str(Eng_txt[0]['generated_text'])
     text_translated = translator(to_Ar_txt, src_lang="eng_Latn", tgt_lang="arz_Arab")
     return Eng_txt[0]['generated_text'], text_translated[0]['translation_text']
 
-
+#select tab 
 def tabs_select(e: gr.SelectData, _state):
     _state["tab_index"] = e.index
 
 example_img_paths = [["https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg"], 
                      ["https://images4.alphacoders.com/688/688832.jpg"]]
 
-
-css_code = """
-<style>
-    body {
-        font-family: Arial, sans-serif;
-        background-color: #f4f4f4;
-        margin: 0;
-        padding: 20px;
-    }
-    h1 {
-        font-size: 2.5em;
-        color: #333;
-        text-align: center;
-    }
-    p {
-        color: #666;
-        text-align: center;
-        margin: 10px 0;
-    }
-    #examples_row {
-        margin-top: 20px;
-        justify-content: center;
-    }
-    .gr-button {
-        background-color: #007bff;
-        color: white;
-        border-radius: 5px;
-        border: none;
-        padding: 10px 20px;
-        margin: 5px;
-        cursor: pointer;
-    }
-    .gr-button:hover {
-        background-color: #0056b3;
-    }
-    .gr-button:focus {
-        outline: none;
-    }
-</style>
-"""
-
-with gr.Blocks(css=css_code) as iface:
+with gr.Blocks() as iface:
     gr.HTML("""<p align="center"><img src="https://cdn-icons-png.flaticon.com/512/5853/5853758.png" style="height: 60px"/><p>""")
     gr.HTML("""<center><font size=8>Image Captioning Demo</center>""")
     gr.HTML("""<center><font size=3>In this space you can input either an image or draw a sketch of object to recieve an Arabic caption.</center>""")
-
     state = gr.State({"tab_index": 0})
-    
+
     with gr.Row():
         with gr.Column():
             with gr.Tabs() as input_tabs:
@@ -98,16 +57,13 @@ with gr.Blocks(css=css_code) as iface:
                     input_sketchpad = gr.Sketchpad(type="pil", label="Sketch", layers=False)
             input_tabs.select(fn=tabs_select, inputs=[state])
 
-
-            
-            with gr.Row(elem_id="examples_row"):
-                with gr.Column(elem_id="examples_container"):
+            with gr.Row():
+                with gr.Column():
                     gr.Markdown("### Example Prompts")
                     gr.Examples(
                         example_img_paths,
                         inputs=[input_image],
-                        cache_examples=False
-                    )
+                        cache_examples=False)
             
             with gr.Row():
                 with gr.Column():