finally figured out altair

app.py

@@ -3,12 +3,13 @@ import transformers as tf
 import pandas as pd
 
 from overview import NQDOverview
+from fullreport import NQDFullReport
 
 
 # Function to load and cache models
 @st.experimental_singleton(show_spinner=False)
 def load_model(username, prefix, model_name):
-    p = tf.pipeline('text-classification', f'{username}/{prefix}-{model_name}')
+    p = tf.pipeline('text-classification', f'{username}/{prefix}-{model_name}', return_all_scores=True)
     return p
 
 @st.experimental_singleton(show_spinner=False)
@@ -17,9 +18,11 @@ def load_pickle(f):
 
 def get_results(model, c):
     res = model(c)[0]
-    label = float(res['label'].split('_')[1])
-    score = res['score']
-    return {'label': label, 'score': score}
+    scores = [r['score'] for r in res]
+    label = max(range(len(scores)), key=lambda i: scores[i])
+    # label = float(res['label'].split('_')[1])
+    # scores = res['score']
+    return {'label': label, 'scores': scores}
 
 def run_models(model_names, models, c):
     results = {}
@@ -80,10 +83,14 @@ with st.form('comment_form'):
         st.experimental_rerun()
     
 results = run_models(models_to_load, models, st.session_state['comment'])
-
-tab_titles = ['Overview', 'Q1 - Level of Detail', 'Q2 - Suggestion Given', 'Q3 - Suggestion Linked', 'About']
+st.write(results)
+# tab_titles = ['Overview', 'Q1 - Level of Detail', 'Q2 - Suggestion Given', 'Q3 - Suggestion Linked', 'About']
+tab_titles = ['Overview', 'Full Report']
 tabs = st.tabs(tab_titles)
 
 with tabs[0]:
     overview = NQDOverview(st, results)
     overview.draw()
+with tabs[1]:
+    fullrep = NQDFullReport(st, results)
+    fullrep.draw()

fullreport.py

@@ -0,0 +1,45 @@
+import streamlit as st 
+import altair as alt 
+import pandas as pd
+from plots import altair_gauge
+
+md_about_qual = '''
+The Quality of Assessment for Learning (QuAL) score measures three 
+components of high-quality feedback via three subscores: 
+
+1. A detailed description of the behavior observed (rated 0-3 depending on detail level)
+2. A suggestion for improvement is present (rated no = 0, yes = 1)
+3. Linkage between the behavior and the suggestion is present (rated no = 0, yes = 1)
+
+The final QuAL score is the sum of these subscores, so it ranges from 0 (lowest quality)
+to 5 (highest quality).
+'''
+class NQDFullReport(object):
+
+    def __init__(self, parent : st, results : dict):
+        self.p = parent
+        self.results = results
+
+    def draw(self):
+        st = self.p
+        st.header('Understand Your Score')
+        st.subheader('About the QuAL Score')
+        # with st.expander('About the QuAL Score', True):
+        st.markdown(md_about_qual)
+
+        st.subheader('Your Level of Detail')
+
+        gauge = altair_gauge(self.results['q1']['label'], 3, 'Level of Detail')
+        c1, c2 = st.columns(2)
+        with c1:
+            st.altair_chart(gauge, use_container_width=True)
+        with c2:
+            # st.write(self.results)
+            bar_df = (pd.DataFrame(self.results['q1']['scores'])
+                        .reset_index()
+                        .rename(columns={'index': 'Rating', 0: 'Score'}))
+            bar = alt.Chart(bar_df).mark_bar().encode(
+                x='Rating:O', y='Score',
+                color=alt.Color('Rating', scale=alt.Scale(scheme='redyellowgreen'), legend=None)
+            ).properties(height=225, title='Prediction Scores')
+            st.altair_chart(bar, use_container_width=True)

overview.py

@@ -20,10 +20,9 @@ class NQDOverview(object):
             value = self.results['qual']['label'],
             mode = "gauge+number",
             title = {'text': "QuAL"},
-            gauge = {'axis': {'range': [None, 5]},
+            gauge = {'axis': {'range': [None, 5], 'showticklabels': True, 'ticks': ""},
                     'bgcolor': 'lightgray',
-                    'bar': {'color': color, 'thickness': 1.0},
-                    
+                    'bar': {'color': color, 'thickness': 1.0}
                     }
             ),
             layout=go.Layout(margin=dict(t=0, b=135))

plots.py

@@ -0,0 +1,19 @@
+import altair as alt 
+import pandas as pd
+import matplotlib.cm as cm
+
+def altair_gauge(score, max_score, title):
+    source = pd.DataFrame({"category": [1,2], "value": [4,3], "tt": ['hello!',None]})
+    gauge_theta2 = -1 * 2 * 3.14 * 0.25 + 3.14 * score / float(max_score)
+    c = alt.layer(
+        alt.Chart(source).mark_arc(innerRadius=100, theta=0, thetaOffset=(-1*2*3.14*0.25), theta2=(-1*2*3.14*0.25 + 3.14), color='lightgray', tooltip=None),
+        alt.Chart(source).mark_arc(innerRadius=100, theta=0, thetaOffset=(-1*2*3.14*0.25), theta2=gauge_theta2, tooltip=f'{title}: {int(score)}', color=get_color(score, max_score)),
+        alt.Chart(source).mark_text(text='%.1d' % score, size=80, font='Calibri', dy=-30)
+    ).properties(title=title)
+    return c
+
+def get_color(score, max_score):
+    cmap = cm.get_cmap('RdYlGn')
+    color = cmap(score / float(max_score))
+    color = f'rgba({int(color[0]*256)}, {int(color[1]*256)}, {int(color[2]*256)}, {int(color[3]*256)})'
+    return color 

requirements.txt

@@ -4,4 +4,5 @@ torchaudio
 transformers
 plotly==5.11.0
 pandas
-spacy
+spacy
+altair