816-NEW-dashboard-add-text

README.md

@@ -197,9 +197,11 @@ The default hyperparameters used in DIANNA for each explainer as well as the val
 Explore the explanations of your trained model using the DIANNA dashboard (for now images, text and time series classification is supported).
 [Click here](https://github.com/dianna-ai/dianna/tree/main/dianna/dashboard) for more information.
 
-<a href="https://github.com/dianna-ai/dianna/tree/main/dianna/dashboard" target="_blank">
-  <img width="1000" align="center" alt="Dianna dashboard screenshot" src="https://raw.githubusercontent.com/dianna-ai/dianna/main/dianna/dashboard/dashboard-screenshot.png">
-</a>
+_Dianna dashboard screenshot here_
+<!-- <a href="https://github.com/dianna-ai/dianna/tree/main/dianna/dashboard" target="_blank">
+   <img width="1000" align="center" alt="Dianna dashboard screenshot" src="https://raw.githubusercontent.com/dianna-ai/dianna/main/dianna/dashboard/dashboard-screenshot.png">
+</a> 
+-->
 
 ## Datasets
 

dianna/dashboard/Home.py

@@ -38,18 +38,55 @@
 
 # Display the content of the selected page
 if selected == "Home":
-    st.image(str(data_directory / 'logo.png'))
+    st.image(str(data_directory / 'logo.png'), width = 360)
 
     st.markdown("""
-    DIANNA is a Python package that brings explainable AI (XAI) to your research project.
-    It wraps carefully selected XAI methods in a simple, uniform interface. It's built by,
-    with and for (academic) researchers and research software engineers working on machine
-    learning projects.
+    **DIANNA** (Deep Insight And Neural Network Analysis) is a Python package that brings explainable AI (XAI)
+    to your research project. <br>
+    It wraps _systematically_ selected XAI methods (**explainers**) in a simple, uniform interface.<br>
+    It's built by, with and for academic researchers and research software engineers
+    who use AI, but users not need to be XAI experts! <br>
+    DIANNA supports the de-facto standard format of neural network models - [ONNX](https://onnx.ai/:).
 
-    ### More information
+    ### Dashboard
+    The DIANNA dashboard can be used for explanation of the outcomes of several ONNX models trained for the tasks
+    and datasets presented
+    in the [DIANNA Tutorials](https://github.com/dianna-ai/dianna/tree/main/tutorials#datasets-and-tasks).
+
+    The dashboard shows the visual explanation of a models' outcome
+    on a selected data _instance_ by one or more selected explainers. <br>
+    It allows you to compare the results of different explainers, as well as explanations
+    of the top ranked predicted model outcomes.
+
+    There are separate sections for each of the different _data modalities_ supported by DIANNA:
+    :gray-background[**Image**], :gray-background[**Text**],
+    :gray-background[**Tabular**], and :gray-background[**Time series**] data. <br>
+    The visual explanation is an overlaid on the data instance :rainbow-background[**heatmap**]
+    highlighting the relevance (attribution) of each data instance _element_ to a selected model's outcome.<br>
+    The data element for images is a (super)pixel, for text - a word, for tabular data - an attribute,
+    and for time-series -  a time interval. Attributions can be positive, negative or irrelevant.<br>
+    To interpret heatmaps, note that attributions are bound between -1 and 1.
+    The maximum (positive) value is set to 1 and the minimum (negative)  value to -1.<br>
+    The dashboard uses the _bwr  (blue white red)_ colormap assigning :blue[**blue**] color to negative
+    relevances, **white** color to near-zero values, and :red[**red**] color to positive values.
+
+    """,
+                unsafe_allow_html=True)
+
+    st.image(str(data_directory / 'colormap.png'), width = 660)
+
+    st.markdown("""
+    The dashboard _primarily_ illustrates the examples from the DIANNA tutorials.
+
+    It is also possible to upload _own_ trained (ONNX) model and data item for which you would like
+    the model's decision explanation.<br>
+    You can then select the explainer you want to use and set its hyperparameters.
+
+     ### More information
 
     - [Source code](https://github.com/dianna-ai/dianna)
     - [Documentation](https://dianna.readthedocs.io/)
+    - [XAI choice](https://blog.esciencecenter.nl/how-to-find-your-artificial-intelligence-explainer-dbb1ac608009)
     """,
                 unsafe_allow_html=True)
 

dianna/dashboard/readme.md

@@ -1,6 +1,7 @@
 # DIANNA dashboard
 
-![Dianna dashboard screenshot](./dashboard-screenshot.png)
+<!-- ![Dianna dashboard screenshot](./dashboard-screenshot.png) -->  
+_Dianna dashboard screenshot here_
 
 The DIANNA dashboard can be used for simple exploration of your trained model explained by DIANNA. The dashboard produces the visual explanation of your selected XAI method. Additionally it allows you to compare the results of different XAI methods, as well as explanations of the top ranked predicted labels. The dashboard was created using [streamlit](https://streamlit.io/).
 

tests/test_dashboard_setup.py

@@ -78,8 +78,8 @@ def test_page_load(page: Page):
     expect(page).to_have_title("Dianna's dashboard")
 
     for selector in (
-            page.get_by_role('img', name='0'),
-            page.get_by_text('More information'),
+            page.get_by_role("img", name="0").first,
+            page.get_by_role("heading", name="Dashboard"),
     ):
         expect(selector).to_be_visible()
 

tests/test_dashboard_tabular.py

@@ -169,7 +169,6 @@ def test_tabular_penguin(page: Page):
     page.get_by_text('Running...').wait_for(state='detached', timeout=300_000)
 
     for selector in (
-        page.get_by_text('Predicted class:'),
         page.get_by_test_id('stMetricValue').get_by_text('Gentoo'),
         page.get_by_role('heading', name='RISE').get_by_text('RISE'),
         page.get_by_role('heading', name='KernelSHAP').get_by_text('KernelSHAP'),