Underline the differences between input and output text

[thiborose]

We want that in the output box, token-wise differences with input text be highlighted.

The css classe of the highlighting style already exist, they are called delta-* in the css file.

I believe all we need is either comparing the input and the final output token-wise, or keep track of the changes during the correction process, then adding the css tags where needed..

[thiborose]

After some research, I found out that what we are looking for is nearly already implemented in Gector : Align sequences function from utils.preprocess_data. With a few tweaks, it could serve our needs

[thiborose]

Thanks, I will merge once I have highlighted the deletions in the input box.

[thiborose]

Now the input text is correctly tagged. There is still a problem: The tags in the input box are incorrect. Example:

Input sentence: "I luv the apples"

Behaviour:
returns

{
"input":"I <span class=\"delta-input-replace\">luv</span> <span class=\"delta-input-replace\">the</span> apples",
"output":"I <span class=\"delta-replace\">love</span> <span class=\"delta-replace\">apples.</span>"
}

Expected behaviour:
returns

{
"input":"I <span class=\"delta-input-replace\">luv</span> <span class=\"delta-input-delete\">the</span> apples",
"output":"I <span class=\"delta-replace\">love</span> <span class=\"delta-replace\">apples.</span>"
}