435 long text does not fit in dashboard explanation image

dashboard/callbacks.py

@@ -17,12 +17,10 @@
 from dash import html
 from dash.exceptions import PreventUpdate
 from flask_caching import Cache
-from html2image import Html2Image
 from jupyter_dash import JupyterDash
 from layouts.fig import blank_fig
 from layouts.styles import COLORS
 from onnx_tf.backend import prepare
-from PIL import Image
 from plotly.subplots import make_subplots
 from utilities import MovieReviewsModelRunner
 from utilities import _create_html
@@ -519,8 +517,8 @@ def select_method_t(method_sel):
 # update text explanations
 @app.callback(
     dash.dependencies.Output("output-state-text", "children"),
-    dash.dependencies.Output("graph_text_rise", "figure"),
-    dash.dependencies.Output("graph_text_lime", "figure"),
+    dash.dependencies.Output("graph_text_rise", "children"),
+    dash.dependencies.Output("graph_text_lime", "children"),
     dash.dependencies.State("upload-model-text", "filename"),
     dash.dependencies.State("upload-text", "value"),
     dash.dependencies.State("signal_text", "data"),
@@ -546,7 +544,7 @@ def update_multi_options_t(fn_m, input_text, sel_methods, new_model, new_text, l
     if ctx.triggered[0]["prop_id"] == "stop_button_t.n_clicks":
         return (
             html.Div(['Explanation stopped.'], style={'margin-top': '60px'}),
-            blank_fig(), blank_fig())
+            '', '')
 
     # update text explanations
     if (fn_m and input_text) is not None and (sel_methods != []):
@@ -564,8 +562,8 @@ def update_multi_options_t(fn_m, input_text, sel_methods, new_model, new_text, l
             class_name = labelnames
             pred_class = class_name[np.argmax(predictions)]
 
-            fig_l = blank_fig()
-            fig_r = blank_fig()
+            fig_l = ''
+            fig_r = ''
 
             for m in sel_methods:
                 if m == "LIME":
@@ -574,63 +572,15 @@ def update_multi_options_t(fn_m, input_text, sel_methods, new_model, new_text, l
                         random_state=random_state)
                     output = _create_html(
                         input_tokens, relevances_lime[0], max_opacity=0.8)
-                    hti = Html2Image()
-                    expl_path = 'text_expl.jpg'
-
-                    hti.screenshot(output, save_as=expl_path)
-
-                    im = Image.open(expl_path)
-                    im = np.asarray(im).astype(np.float32)
-
-                    fig_l = px.imshow(im)
-                    fig_l.update_xaxes(
-                        showgrid=False, range=[0, 1000],
-                        showticklabels=False, zeroline=False)
-                    fig_l.update_yaxes(
-                        showgrid=False, range=[200, 0],
-                        showticklabels=False, zeroline=False)
-                    fig_l.update_layout(
-                        title='LIME explanation:',
-                        title_font_color=COLORS['blue1'],
-                        paper_bgcolor=COLORS['blue4'],
-                        plot_bgcolor=COLORS['blue4'],
-                        height=200,
-                        width=500,
-                        margin_b=40,
-                        margin_t=40,
-                        margin_l=20,
-                        margin_r=0
-                        )
+                    fig_l = html.Div(tuple(list(output)))
 
                 elif m == "RISE":
                     relevances_rise = global_store_t(
                         m, model_runner, input_text, class_name,
                         n_masks=n_masks, feature_res=feature_res, p_keep=p_keep)
                     output = _create_html(
                         input_tokens, relevances_rise[0], max_opacity=0.8)
-                    hti = Html2Image()
-                    expl_path = 'text_expl.jpg'
-                    hti.screenshot(output, save_as=expl_path)
-                    im = Image.open(expl_path)
-                    im = np.asarray(im).astype(np.float32)
-                    fig_r = px.imshow(im)
-                    fig_r.update_xaxes(
-                        showgrid=False, range=[0, 1000],
-                        showticklabels=False, zeroline=False)
-                    fig_r.update_yaxes(
-                        showgrid=False, range=[200, 0],
-                        showticklabels=False, zeroline=False)
-                    fig_r.update_layout(
-                        title='RISE explanation:',
-                        title_font_color=COLORS['blue1'],
-                        paper_bgcolor=COLORS['blue4'],
-                        plot_bgcolor=COLORS['blue4'],
-                        height=200,
-                        width=500,
-                        margin_b=50,
-                        margin_t=40,
-                        margin_l=20,
-                        margin_r=0)
+                    fig_r = html.Div(tuple(list(output)))
 
             return (html.Div(['The predicted class is: ' + pred_class], style={
                 'fontSize': 18,
@@ -643,13 +593,14 @@ def update_multi_options_t(fn_m, input_text, sel_methods, new_model, new_text, l
 
         except Exception as e:
             print(e)
-            return html.Div([
+            return (html.Div([
                 'There was an error running the model. Check either the test ' +
                 'text or the model.'
-                ]), blank_fig(), blank_fig()
+                ]), '', '')
     else:
-        return (html.Div(['Missing model, input text or XAI method.']),
-                blank_fig(), blank_fig())
+        return (html.Div([
+            'Missing model, input text or XAI method.'
+            ]), '', '')
 
 
 @app.callback(

dashboard/layouts/text.py

@@ -1,7 +1,6 @@
 import dash_bootstrap_components as dbc
 from dash import dcc
 from dash import html
-from .fig import blank_fig
 from .styles import COLORS
 from .styles import astyle
 
@@ -316,28 +315,26 @@ def get_uploads_text():
                     ),
 
             # plotting explanations
-            html.Div([
-                dcc.Graph(
-                    id='graph_text_rise',
-                    figure = blank_fig())],
-                    className = 'row',
-                    style = {
-                        'margin-top': '80',
-                        'margin-left': '140px',
-                        #'height': '100px'
-                    }),
+            html.Div(
+                id='graph_text_rise',
+                className = 'row',
+                style = {
+                    'margin-top': '80',
+                    'margin-left': '140px',
+                    'margin-right': '140px',
+                    'height': '100px'
+                }),
 
             # plotting explanations
-            html.Div([
-                dcc.Graph(
-                    id='graph_text_lime',
-                    figure = blank_fig())],
-                    className = 'row',
-                    style = {
-                        'margin-top': '80',
-                        'margin-left': '140px',
-                        #'height': '100px'
-                    })
+            html.Div(
+                id='graph_text_lime',
+                className = 'row',
+                style = {
+                    'margin-top': '80',
+                    'margin-left': '140px',
+                    'margin-right': '140px',
+                    'height': '100px'
+                })
 
         ],
         className = 'nine columns')

dashboard/utilities.py

@@ -1,6 +1,7 @@
 import os
 import warnings
 import numpy as np
+from dash import html
 from keras import utils as keras_utils
 from PIL import Image
 from PIL import ImageStat
@@ -113,30 +114,40 @@ def _create_html(input_tokens, explanation, max_opacity):
     for index, word in enumerate(input_tokens):
         # if word has an explanation, highlight based on that, otherwise
         # make it grey
+        # add spaces between words
         try:
             explained_index = explained_indices.index(index)
             importance = explanation[explained_index][2]
             highlighted_words.append(
                 _highlight_word(word, importance, max_importance, max_opacity)
                 )
         except ValueError:
-            highlighted_words.append(f'<span style="background:rgba(128, 128, 128, 0.3)">{word}</span>')
-
-    return '<html><body>' + ' '.join(highlighted_words) + '</body></html>'
+            highlighted_words.append((html.Div([
+                            html.Span(
+                                [word
+                                ], style={'background': 'rgba(128, 128, 128, 0.3)'})
+                            ], style={'fontsize':36, 'display': 'inline-block'})
+                        ))
+        highlighted_words.append(' ')
+    return tuple(highlighted_words)
 
 
 def _highlight_word(word, importance, max_importance, max_opacity):
-    """Defines how to highlight words according to importance."""
+    """Defines how to highlight individual words according to importance."""
     opacity = max_opacity * abs(importance) / max_importance
     if importance > 0:
         color = f'rgba(255, 0, 0, {opacity:.2f})'
     else:
         color = f'rgba(0, 0, 255, {opacity:2f})'
-    highlighted_word = f'<span style="background:{color}">{word}</span>'
+    highlighted_word = (html.Div([
+                            html.Span(
+                                [word
+                                ], style={'background': color})
+                            ], style={'display': 'inline-block'})
+                        )
     return highlighted_word
 
 
-
 def imagenet_class_name(idx):
     """Returns label of class index."""
     return decode_predictions(np.eye(1, 1000, idx))[0][0][1]