app.py

import gradio as gr

from back_end import next_annotation, submit_correction, enable_buttons
from utils import compute_diff, LANGS


## COMPONENTS
with gr.Blocks() as demo:
    gr.Markdown(
        """# Ingredients Spellcheck 🍊
        ### 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.
        * Deleted whitespaces are indicated as `#` and additional whitespaces are indicated as `^`. 
        
        ### 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(
                label="Insight Id",
                visible=False,
            )

            with gr.Row():
                off_username = gr.Textbox(
                    label="OFF Username",
                )
                off_password = gr.Textbox(
                    label="OFF Password",
                    type="password",
                )
                lang = gr.Dropdown(
                    choices=LANGS.keys(),
                    value="All",
                    label="Language",
                    info="Optional: Filter a language.",
                )

            # Saved to detect change from annotator
            model_correction = gr.Text(visible=False)

            original = gr.Textbox(
                label="Original",
                info="List of ingredients stored in the database.",
                interactive=False,  # Make this text box uneditable
                lines=3,
            )

            annotator_correction = gr.Textbox(
                label="Spellcheck Correction",
                info="Is it correct",
                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"},
            )

        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, url],
    )

    skip_button.click(
        next_annotation,
        inputs=[lang],
        outputs=[insight_id, original, model_correction, annotator_correction, image, url],
    )

    annotator_correction.change(
        compute_diff,  # Call diff function
        inputs=[original, annotator_correction],
        outputs=diff_display,
    )

    off_username.change(
        enable_buttons,
        inputs=[off_username, off_password],
        outputs=[validate_button, skip_button],
    )

    off_password.change(
        enable_buttons,
        inputs=[off_username, off_password],
        outputs=[validate_button, skip_button],
    )

    lang.change(
        next_annotation,
        inputs=[lang],
        outputs=[insight_id, original, model_correction, annotator_correction, image, url],
    )

    # Load the first set of texts when the demo starts
    demo.load(
        next_annotation,
        inputs=[],
        outputs=[
            insight_id,
            original,
            model_correction,
            annotator_correction,
            image,
            url,
        ],
    )


if __name__ == "__main__":
    demo.launch()