Add picture

app.py

@@ -14,33 +14,38 @@ with gr.Blocks() as demo:
         *Note: We are working on connecting this tool to OFF Product Opener. 👷*  
         """)
     
-    insight_id = gr.Textbox(
-        label="Insight Id",
-        interactive=False,
-        visible=False,
-    )
-
-    original_text = gr.Textbox(
-        label="Original Text (Uneditable)",
-        info="This is the original text.",
-        interactive=False,  # Make this text box uneditable
-        lines=3
-    )
-    
-    corrected_text = gr.Textbox(
-        label="Corrected Text (Editable)",
-        info="This is the AI-corrected text. You can modify it.",
-        interactive=True,  # Make this text box editable
-        lines=3
-    )
     
-    # Diff Display using HighlightedText
-    diff_display = gr.HighlightedText(
-        label="Difference Between Original and Corrected Text",
-        combine_adjacent=True,
-        show_legend=True,
-        color_map={"+": "green", "-": "red"}  # "+" for inserted text, "-" for deleted text
-    )
+    with gr.Row():
+        with gr.Column():
+            insight_id = gr.Textbox(
+                label="Insight Id",
+                interactive=False,
+                visible=False,
+            )
+
+            original_text = gr.Textbox(
+                label="Original Text (Uneditable)",
+                info="This is the original text.",
+                interactive=False,  # Make this text box uneditable
+                lines=3
+            )
+            
+            corrected_text = gr.Textbox(
+                label="Corrected Text (Editable)",
+                info="This is the AI-corrected text. You can modify it.",
+                interactive=True,  # Make this text box editable
+                lines=3
+            )
+            
+            # Diff Display using HighlightedText
+            diff_display = gr.HighlightedText(
+                label="Difference Between Original and Corrected Text",
+                combine_adjacent=True,
+                show_legend=True,
+                color_map={"+": "green", "-": "red"}  # "+" for inserted text, "-" for deleted text
+            )
+
+        image = gr.Image()
     
     # Validate button to move to next annotation
     with gr.Row():
@@ -51,13 +56,13 @@ with gr.Blocks() as demo:
     validate_button.click(
         submit_correction,  # Function to handle submission
         inputs=[insight_id, original_text, corrected_text],  # Original and edited texts as inputs
-        outputs=[insight_id, original_text, corrected_text]  # Load next pair of texts
+        outputs=[insight_id, original_text, corrected_text, image]  # Load next pair of texts
     )
 
     skip_button.click(
         next_annotation,  # Function to handle submission
         inputs=[],  # Original and edited texts as inputs
-        outputs=[insight_id, original_text, corrected_text]  # Load next pair of texts
+        outputs=[insight_id, original_text, corrected_text, image]  # Load next pair of texts
     )
     
     # Update diff display dynamically when corrected text is modified
@@ -68,7 +73,7 @@ with gr.Blocks() as demo:
     )
     
     # Load the first set of texts when the demo starts
-    demo.load(next_annotation, inputs=[], outputs=[insight_id, original_text, corrected_text])
+    demo.load(next_annotation, inputs=[], outputs=[insight_id, original_text, corrected_text, image])
 
 
 if __name__ == "__main__":

back_end.py

@@ -1,13 +1,20 @@
 from typing import Dict, Tuple
 import requests
 
+from openfoodfacts.api import ProductResource, APIConfig
+
 
 BASE_URL = "https://robotoff.openfoodfacts.org/api/v1/"
 
 
-def next_annotation() -> Tuple[str, str, str]:
+def next_annotation() -> Tuple[str, str, str, str]:
     insight = import_random_insight()
-    return insight["id"], insight["data"]["original"], insight["data"]["correction"]
+    return (
+        insight["id"], 
+        insight["data"]["original"], 
+        insight["data"]["correction"],
+        get_image_url(insight["barcode"])
+    )
 
 
 def submit_correction(insight_id: str, original: str, correction: str) -> Tuple[str, str, str]:
@@ -40,3 +47,18 @@ def submit_to_product_opener(
         "update": update,
     }
     requests.post(url, data=data)
+
+
+def get_image_url(
+    code: str,
+    user_agent: str = "Spellcheck-Annotate",
+) -> str:
+    fields = ["image_ingredients_url"]
+    data = ProductResource(
+        api_config=APIConfig(user_agent=user_agent)
+    ).get(
+        code=code,
+        fields=fields,
+    )
+    image_url = data.get(fields[0])
+    return image_url