update

app.py

@@ -1,22 +1,31 @@
-from typing import List, Optional, Tuple
-from PIL import Image
-from playwright.sync_api import sync_playwright
 import os
+import subprocess
+
+from playwright.sync_api import sync_playwright
+from typing import List
+from PIL import Image
+
 import gradio as gr
 from gradio_client.client import DEFAULT_TEMP_DIR
 from transformers import AutoProcessor, AutoModelForCausalLM
+
+
 API_TOKEN = os.getenv("HF_AUTH_TOKEN")
 # PROCESSOR = AutoProcessor.from_pretrained(
 #     "HuggingFaceM4/img2html",
 #     token=API_TOKEN,
 # )
+# MODEL = AutoModelForCausalLM.from_pretrained(
+#     "HuggingFaceM4/img2html",
+#     token=API_TOKEN,
+# )
+
 
 IMAGE_GALLERY_PATHS = [
     f"example_images/{ex_image}"
     for ex_image in os.listdir(f"example_images")
 ]
 
-import subprocess
 
 def install_playwright():
     try:
@@ -25,19 +34,11 @@ def install_playwright():
     except subprocess.CalledProcessError as e:
         print(f"Error during Playwright installation: {e}")
 
-# Call the function to install Playwright
 install_playwright()
 
 def add_file_gallery(selected_state: gr.SelectData, gallery_list: List[str]):
-    # return (
-    #     f"example_images/{gallery_list.root[selected_state.index].image.orig_name}",
-    #     "",
-    # )
     return f"example_images/{gallery_list.root[selected_state.index].image.orig_name}"
 
-def expand_layout():
-    return gr.Column(scale=2), gr.Textbox()
-
 def render_webpage(
     html_css_code,
 ):
@@ -188,23 +189,18 @@ def model_inference(
     rendered_page = render_webpage(CAR_COMPNAY)
     return CAR_COMPNAY, rendered_page
 
-# textbox = gr.Textbox(
-#     placeholder="Upload an image and ask the AI to create a meme!",
-#     show_label=False,
-#     value="Write a meme about this image.",
-#     visible=True,
-#     container=False,
-#     label="Text input",
-#     scale=8,
-#     max_lines=5,
-# )
 
-generated_html = gr.Textbox(
-    label="IDEFICS Generated HTML",
+generated_html = gr.Code(
+    label="Extracted HTML",
     elem_id="generated_html",
 )
 rendered_html = gr.Image(
+    label="Rendered HTML"
 )
+# rendered_html = gr.HTML(
+#     label="Rendered HTML"
+# )
+
 
 css = """
 .gradio-container{max-width: 1000px!important}
@@ -212,12 +208,15 @@ h1{display: flex;align-items: center;justify-content: center;gap: .25em}
 *{transition: width 0.5s ease, flex-grow 0.5s ease}
 """
 
+
 with gr.Blocks(title="Img2html", theme=gr.themes.Base(), css=css) as demo:
     with gr.Row(equal_height=True):
-        # scale=2 when expanded
         with gr.Column(scale=4, min_width=250) as upload_area:
             imagebox = gr.Image(
-                type="filepath", label="Image to HTML", height=272, visible=True, sources=["upload", "clipboard"],
+                type="filepath",
+                label="Screenshot to extract",
+                visible=True,
+                sources=["upload", "clipboard"],
             )
             with gr.Group():
                 with gr.Row():
@@ -230,11 +229,13 @@ with gr.Blocks(title="Img2html", theme=gr.themes.Base(), css=css) as demo:
                     regenerate_btn = gr.Button(
                         value="🔄 Regenerate", visible=True, min_width=120
                     )
-        with gr.Column(scale=5) as result_area:
+        with gr.Column(scale=4) as result_area:
             rendered_html.render()
+
     with gr.Row():
         generated_html.render()
-    with gr.Row(equal_height=True):
+
+    with gr.Row():
         template_gallery = gr.Gallery(
             value=IMAGE_GALLERY_PATHS,
             label="Templates Gallery",
@@ -253,9 +254,7 @@ with gr.Blocks(title="Img2html", theme=gr.themes.Base(), css=css) as demo:
             regenerate_btn.click,
         ],
         fn=model_inference,
-        inputs=[
-            imagebox,
-        ],
+        inputs=[imagebox],
         outputs=[generated_html, rendered_html],
         queue=False,
     )
@@ -273,11 +272,7 @@ with gr.Blocks(title="Img2html", theme=gr.themes.Base(), css=css) as demo:
         outputs=[imagebox],
         queue=False,
     )
-    demo.load(
-        # fn=choose_gallery,
-        # inputs=[gallery_type_choice],
-        # outputs=[template_gallery],
-        queue=False,
-    )
+    demo.load(queue=False)
+
 demo.queue(max_size=40, api_open=False)
 demo.launch(max_threads=400)