Integration with React about shap HOT 10 CLOSED

You can. If you look at the source of a Jupyter notebook with a visualization you will see that it prints out html with react (initjs() dumps the library code. The python from the iml library (which I made separate in case other's wanted to use it) as this code in it:

        return HTML("""
<div id='{id}'>{err_msg}</div>
 <script>
   if (window.IML) IML.ReactDom.render(
    IML.React.createElement(IML.AdditiveForceVisualizer, {data}),
    document.getElementById('{id}')
  );
</script>""".format(err_msg=err_msg, data=json.dumps(self.data), id=id_generator()))

https://github.com/interpretable-ml/iml/blob/master/iml/visualizers.py

So I am sure you could co-opt that into any react interface you want.

from shap.

Hey, thanks, I did just that a few days ago. Took a look at the source code for the ForceVisualizer JSX, and used it as a component for the application. Then I passed the parameters from the server using the Visualizer Python class, and passed those parameters as props to the ForceVisualizer. Worked like a charm!

Thanks!

from shap.

from shap.

Hi guys,

I have exactly this same need to include an Explainer during a classification real-time system. It would be awesome if you could elaborate into the @JuanCorp 's solution. Is it posible to include the Explainer's visualisation into a non-react app (maybe a Angular front-end app) ?

@slundberg Thanks for your SHAP implementation and also the discussion you included in the paper!

from shap.

from shap.

Hey, thanks, I did just that a few days ago. Took a look at the source code for the ForceVisualizer JSX, and used it as a component for the application. Then I passed the parameters from the server using the Visualizer Python class, and passed those parameters as props to the ForceVisualizer. Worked like a charm!

Thanks!

Great that you managed to do that. Could you share how did you do it? I'm trying to use it as a React component but having troubles.

Maybe an example of how does your <AdditiveForceVisualizer ... > does look like would help

from shap.

As above! Please write a documentation piece on how to integrate it with a react front-end! We're going to get it going soon so it would be great if there was something to lean on for help in integrating.

from shap.

@JuanCorp Can you please provide source code where you used parameters from shap.visualise and passed to forceVisualizer JSX in react ?

from shap.

Hello! What I did back in the day is look at the iml and shap source code and prepare the data just like the iml library expected. I think the interface has changed since then, so this approach may be wrong.

def _explicar_instancia(shap_values, feature_names=None,
                        data=None, out_names=["peso recomendacion"]):
 
    if type(data) == np.ndarray:
        data = data.flatten()

    nans = np.argwhere(np.isnan(shap_values))
    indexes = nans[:, 1]
    shap_values = shap_values[:, ~np.isnan(shap_values).all(0)]
    shap_values = shap_values[~np.isnan(shap_values).all(1)]
    feature_names = [f for i, f in enumerate(
        feature_names) if i not in indexes]
    data = np.array([d for i, d in enumerate(data) if i not in indexes])
    instance = iml.Instance(np.zeros((1, len(feature_names))), data)
    exp = iml.AdditiveExplanation(
        shap_values[0, -1],
        np.sum(shap_values[0, :]),
        shap_values[0, :-1],
        None,
        instance,
        iml.IdentityLink(),
        iml.Model(None, out_names),
        iml.DenseData(np.zeros((1, len(feature_names))), feature_names)
    )
    visualizer = iml.AdditiveForceVisualizer(exp)
    visualizer.data["labelMargin"] = 20

    return visualizer.data

Since I don't think iml exists anymore, you'll have to take a look at how SHAP generates these visualizations today.

from shap.

And how did you consume this in React Project actually ? Can you give some guidance as per current Technology context , how do we go best about it. Basically there will be diff SHAP charts for every time user predicts , through API we can send those SHAP Visualization params to UI and but how does react consume it Actually. I tried to look at React D3 component but it dint seem to have native support for SHAP Charts.
@JuanCorp

from shap.