html features: preserve whitespaces about eli5

[lopuhin]

I tried some approaches for making whitespace at the end visible: changing background, adding border, replacing it with single and double underscore (https://en.wikipedia.org/wiki/Underscore), white and black square, etc., but at the end solution I like the most is to just put features having space at the start or at the end in double quotes. It's also possible to apply it to just features having space at the end (as a space at the start is visible by indentation level), but for some reason applying this rule to space both at the start and at the end feels more natural. Here is how it looks like:

[kmike]

The main problem with " is that it can be a part of a feature name, so feature names become ambiguous. Are there unambiguous options which look slightly worse, or do they all look much worse?

[lopuhin]

This was my second best, a double underscore, I almost went with it before thinking of quoting:

But it's also not strictly unambiguous (we could also just use more fancy quotes).

Let me think of something reasonably looking and really unambiguous.

[lopuhin]

Other options are adding a slight border or background, they look not terribly bad, but what I dislike is that all feature names become affected (I also use emspace here because it is larger and makes it more obvious that there is a gap).

[lopuhin]

I dislike is that all feature names become affected

I mean that it would look strange if we just apply these styles to items with space in them - it would seem that they are more important. But if we apply these styles only if there are some features with spaces, then it seems like a reasonable compromise.

[kmike]

what about highlighting only whitespaces, not features themselves?

[kmike]

Inspiration:

• http://i.stack.imgur.com/HBelb.png
• https://www.emacswiki.org/pics/static/BlankModeOn.png

[lopuhin]

Thanks for the inspiration @kmike ! In the editor context I liked dots as spaces better, but in our case I think just highlighting spaces looks better.
I use just two colors here: darker green for positive and darker red for negative. I tried adjusting highlighting color according to the current weight color (making a darker version of weight color instead of using a constant color), but it looked worse.
Here is a notebook with new space highlighting scheme: https://github.com/TeamHG-Memex/eli5/blob/visible-space/notebooks/explain_text_prediction_char.ipynb

[kmike]

Yeah, I agree highlighting looks better.
What do you think about making it less bright, e.g. using S=70% and L=70%?

If the letter which is close to a whitespace is l or other similar letter it is a bit hard to distinguish with dark highlighting:

[kmike]

What about using light shade instead of medium shade for whitespaces?

[kmike]

dots are nice, but sometimes they can look cryptic:

[lopuhin]

Yeah, light shade looks much better for text!

About the darkness of color for html: I would rather fix it by adding a little margin, because the current darkness is barely visible over red of max intensity (there is already additional margin here but not looking like I would like):

Maybe lowering the max intensity of red and green could help, I'll check that.

[lopuhin]

Agreed, dots look nice with letters but no so nice with other dots :)

[kmike]

The margin looks good, I like it. Re max. density: text also is not very visible on the darkest red, maybe we should find a lighter color.

[lopuhin]

I raised the minimal lightness, here are the new colors: https://github.com/TeamHG-Memex/eli5/blob/visible-space/notebooks/explain_text_prediction_char.ipynb

[kmike]

Hm, now it became harder to see highlighting in text: for example, is this text classified as positive or negative, and what are important features?

(it is positive)

[lopuhin]

Right, it became too pale. I partly corrected that problem 6604b2c by using different color schemes for weights in table and text, but I think this particular example is also an indicator of another problem - the longer the text, the paler will the in-text features be compared to the BIAS, which stays the same.