feat: :art: Add guidelines + Product page

app.py

@@ -4,18 +4,23 @@ from back_end import next_annotation, submit_correction, enable_buttons
 from utils import diff_texts, LANGS
 
 
-# Gradio Interface
+## COMPONENTS
 with gr.Blocks() as demo:
     gr.Markdown(
         """# Ingredients Spellcheck 🍊
-        ### Review the Spellcheck corrections.\n
-        Your precious feedback will be integrated to the Open Food Facts database!
-
-        **Important:** Authenticate yourself using your Open Food Facts username and password to add modifications to a product.
-        If you're not registered yet, you can do it [here](https://world.openfoodfacts.org/cgi/user.pl)!
+        ### Review the Spellcheck corrections. Your precious feedback will be integrated to the Open Food Facts database!
+        
+        ### Instructions:
+        * *You are provided the original list of ingredients text as stored in the Open Food Facts (OFF) database, the Spellcheck prediction, and optionally a picture of the product.*
+        * *Your task, if you accept 💣, is to review the Spellcheck prediction by either validating or correcting it.*
+        * *The picture is only here to help you during the annotation as a reference. It can happen that the language of the text and the picture are different. **Keep calm and focus on the text.***
+        * *It can happen that the Producer has made a mistake on the product packaging. Since we parse the list of ingredients to extract its information, it would be preferable if you fix the typo.*
+        
+        ### Important: 
+        * Authenticate yourself using your Open Food Facts username and password to add modifications to a product. If you're not registered yet, you can do so [here](https://world.openfoodfacts.org/cgi/user.pl)!
         """
     )
-    
+
     with gr.Row():
         with gr.Column():
             insight_id = gr.Textbox(
@@ -28,15 +33,14 @@ with gr.Blocks() as demo:
                     label="OFF Username",
                 )
                 off_password = gr.Textbox(
-                   label="OFF Password",
-                   type="password",
+                    label="OFF Password",
+                    type="password",
                 )
                 lang = gr.Dropdown(
                     choices=LANGS.keys(),
                     value="All",
-                    label="Language", 
+                    label="Language",
                     info="Optional: Filter a language.",
-                    
                 )
 
             # Saved to detect change from annotator
@@ -46,16 +50,16 @@ with gr.Blocks() as demo:
                 label="Original Text (Uneditable)",
                 info="This is the original text.",
                 interactive=False,  # Make this text box uneditable
-                lines=3
+                lines=3,
             )
-            
+
             annotator_correction = 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",
@@ -64,25 +68,36 @@ with gr.Blocks() as demo:
                 color_map={"+": "green", "-": "red"},
             )
 
-        image = gr.Image()
-    
+        with gr.Column(): 
+            url = gr.Textbox(label="Product page", show_copy_button=True)
+            image = gr.Image()
+
     # Validate button to move to next annotation
     with gr.Row():
         validate_button = gr.Button("Validate", interactive=False)
         skip_button = gr.Button("Skip", interactive=False)
-    
+
+
+    ## COMPONENT INTERACTIONS
     validate_button.click(
         submit_correction,
-        inputs=[insight_id, annotator_correction, model_correction, off_username, off_password, lang],
-        outputs=[insight_id, original, model_correction, annotator_correction, image],
+        inputs=[
+            insight_id,
+            annotator_correction,
+            model_correction,
+            off_username,
+            off_password,
+            lang,
+        ],
+        outputs=[insight_id, original, model_correction, annotator_correction, image, url],
     )
 
     skip_button.click(
         next_annotation,
         inputs=[lang],
-        outputs=[insight_id, original, model_correction, annotator_correction, image],
+        outputs=[insight_id, original, model_correction, annotator_correction, image, url],
     )
-    
+
     annotator_correction.change(
         diff_texts,  # Call diff function
         inputs=[original, annotator_correction],
@@ -90,11 +105,11 @@ with gr.Blocks() as demo:
     )
 
     off_username.change(
-        enable_buttons, 
-        inputs=[off_username, off_password], 
+        enable_buttons,
+        inputs=[off_username, off_password],
         outputs=[validate_button, skip_button],
     )
-    
+
     off_password.change(
         enable_buttons,
         inputs=[off_username, off_password],
@@ -104,7 +119,7 @@ with gr.Blocks() as demo:
     lang.change(
         next_annotation,
         inputs=[lang],
-        outputs=[insight_id, original, model_correction, annotator_correction, image],
+        outputs=[insight_id, original, model_correction, annotator_correction, image, url],
     )
 
     # Load the first set of texts when the demo starts
@@ -117,6 +132,7 @@ with gr.Blocks() as demo:
             model_correction,
             annotator_correction,
             image,
+            url,
         ],
     )
 

back_end.py

@@ -12,7 +12,7 @@ import gradio as gr
 
 logger = get_logger()
 
-BASE_URL = "https://robotoff.openfoodfacts.org/api/v1" # Prod
+BASE_URL = "https://robotoff.openfoodfacts.org/api/v1"  # Prod
 # BASE_URL = "http://localhost:5500/api/v1" # Dev
 UPDATE = 1
 
@@ -38,9 +38,10 @@ def next_annotation(lang: Optional[str]) -> Annotation:
     return (
         insight["id"],
         insight["data"]["original"],
-        insight["data"]["correction"], # Saved for comparison with annotator changes
+        insight["data"]["correction"],  # Saved for comparison with annotator changes
         insight["data"]["correction"],
-        get_image_url(insight["barcode"])
+        get_image_url(insight["barcode"]),
+        get_product_url(insight["barcode"]),
     )
 
 
@@ -50,10 +51,12 @@ def submit_correction(
     model_correction: str,
     username: str,
     password: str,
-    update: bool = UPDATE
+    update: bool = UPDATE,
 ):
     auth = Authentification(username, password)
-    correction = annotator_correction if annotator_correction != model_correction else None
+    correction = (
+        annotator_correction if annotator_correction != model_correction else None
+    )
     try:
         submit_to_product_opener(
             insight_id=insight_id,
@@ -62,14 +65,15 @@ def submit_correction(
             auth=auth,
         )
     except gr.Error as e:
-        gr.Warning(e.message) # We use gr.Warning instead of gr.Error to keep the flow 
+        gr.Warning(e.message)  # We use gr.Warning instead of gr.Error to keep the flow
         return (
             gr.update(),
             gr.update(),
             gr.update(),
             gr.update(),
             gr.update(),
-        ) # Stay unchanged
+            gr.update(),
+        )  # Stay unchanged
     gr.Info("Product successfuly updated. Many thanks!")
     return next_annotation()
 
@@ -77,9 +81,11 @@ def submit_correction(
 def import_random_insight(
     insight_type: str = "ingredient_spellcheck",
     predictor: str = "fine-tuned-mistral-7b",
-    lang_key: Optional[str] = None
+    lang_key: Optional[str] = None,
 ) -> Dict:
-    url = f"{BASE_URL}/insights/random?count=1&type={insight_type}&predictor={predictor}"
+    url = (
+        f"{BASE_URL}/insights/random?count=1&type={insight_type}&predictor={predictor}"
+    )
     if lang_key:
         url += f"&value_tag={lang_key}"
     try:
@@ -93,7 +99,7 @@ def import_random_insight(
             return import_random_insight(insight_type, predictor)
     except requests.RequestException as e:
         gr.Error(f"Import product from Product Opener failed: {e}")
-        
+
 
 def submit_to_product_opener(
     insight_id: str,
@@ -104,10 +110,13 @@ def submit_to_product_opener(
     url = f"{BASE_URL}/insights/annotate"
     headers = {
         "Authorization": f"Basic {auth.get_credentials()}",
-        'Content-Type': 'application/x-www-form-urlencoded',
+        "Content-Type": "application/x-www-form-urlencoded",
     }
     if annotator_correction:
-        logger.info("Change from annotator. New insight sent to Product Opener. New correction: %s", annotator_correction)
+        logger.info(
+            "Change from annotator. New insight sent to Product Opener. New correction: %s",
+            annotator_correction,
+        )
         payload = {
             "insight_id": insight_id,
             "annotation": 2,
@@ -115,7 +124,9 @@ def submit_to_product_opener(
             "data": json.dumps({"annotation": annotator_correction}),
         }
     else:
-        logger.info("No change from annotator. Original insight sent to Product Opener.")
+        logger.info(
+            "No change from annotator. Original insight sent to Product Opener."
+        )
         payload = {
             "insight_id": insight_id,
             "annotation": 1,
@@ -127,8 +138,10 @@ def submit_to_product_opener(
     except requests.RequestException as e:
         logger.error(e)
         logger.error(response.content)
-        raise gr.Error("Failed to submit to Product Opener. Are your username and password correct?")
-        
+        raise gr.Error(
+            "Failed to submit to Product Opener. Are your username and password correct?"
+        )
+
 
 def get_image_url(
     code: str,
@@ -147,3 +160,8 @@ def enable_buttons(username, password):
     # Return the updated button states: interactive if both username and password are filled
     state = bool(username) and bool(password)
     return gr.update(interactive=state), gr.update(interactive=state)
+
+
+def get_product_url(barcode: int) -> str:
+    return f"https://world.openfoodfacts.org/product/{barcode}"
+