finally got the layout right

app.py

@@ -28,8 +28,8 @@ def run_models(model_names, models, c):
     return results
 
 
-st.title('How *great* is your feedback?')
-st.markdown(
+st.header('How *great* is your feedback?')
+st.caption(
 """Medical education *requires* high-quality feedback, but evaluating feedback
 is difficult and time-consuming. This tool uses NLP/ML to predict a validated
 feedback quality metric known as the QuAL Score. *Try it for yourself!*
@@ -58,6 +58,7 @@ examples = load_pickle('test.pkl')
 
 ### Process input
 ex = examples['comment'].sample(1).tolist()[0]
+ex = ex.strip().replace('_x000D_', '').replace('nan', 'blank')
 if 'comment' not in st.session_state:
     st.session_state['comment'] = ex
 with st.form('comment_form'):
@@ -77,13 +78,10 @@ with st.form('comment_form'):
     
 results = run_models(models_to_load, models, st.session_state['comment'])
 
-tab_titles = ['Overview', 'Q1 - Level of Detail', 'Q2 - Suggestion Given', 'Q3 - Suggestion Linked']
+tab_titles = ['Overview', 'Q1 - Level of Detail', 'Q2 - Suggestion Given', 'Q3 - Suggestion Linked', 'About']
 tabs = st.tabs(tab_titles)
 
-
 with tabs[0]:
-    with st.expander('About the QuAL score?'):
-        st.markdown('**The best thing ever**!')
     cmap = cm.get_cmap('RdYlGn')
     color = cmap(results['qual']['label'] / 6.0)
     color = f'rgba({int(color[0]*256)}, {int(color[1]*256)}, {int(color[2]*256)}, {int(color[3]*256)})'
@@ -98,39 +96,44 @@ with tabs[0]:
                 'bar': {'color': color, 'thickness': 1.0},
                 
                 }
-        ), layout=go.Layout(width=750, height=375))# layout={'paper_bgcolor': 'rgb(245,245,245)'})#,
-
-    st.plotly_chart(fig)
-
-    cols = st.columns(3)
-    cols[0].markdown('#### Level of Detail')
-    q1lab = results['q1']['label']
-    if q1lab == 0:
-        md_str = '# 😥 None'
-    elif q1lab == 1:
-        md_str = '# 😐 Low'
-    elif q1lab == 2:
-        md_str = '# 😊 Medium'
-    elif q1lab == 3:
-        md_str = '# 😁 High'
-    cols[0].markdown(md_str)
-
-    cols[1].markdown('#### Suggestion Given')
-    q2lab = results['q2i']['label']
-    if q2lab == 0:
-        md_str = '# ✅ Yes'
-    else:
-        md_str = '# ❌ No'
-    cols[1].markdown(md_str)
-    # cols[1].markdown('# ✅ Yes', unsafe_allow_html=True)
-
-    cols[2].markdown('#### Suggestion Linked')
-    q3lab = results['q3i']['label']
-    if q3lab == 0:
-        md_str = '# ✅ Yes'
-    else:
-        md_str = '# ❌ No'
-    cols[2].markdown(md_str)
+        ))#, layout=go.Layout(width=750, height=300))# layout={'paper_bgcolor': 'rgb(245,245,245)'})#,
+
+    cols = st.columns([7, 3])
+    with cols[0]:
+        st.plotly_chart(fig, use_container_width=True)
+    with cols[1]:
+
+    
+        # cols = st.columns(3)
+        # cols[0].markdown('#### Level of Detail')
+        q1lab = results['q1']['label']
+        if q1lab == 0:
+            md_str = '😥 None'
+        elif q1lab == 1:
+            md_str = '😐 Low'
+        elif q1lab == 2:
+            md_str = '😊 Medium'
+        elif q1lab == 3:
+            md_str = '😁 High'
+        # cols[0].markdown(md_str)
+        cols[1].metric('Level of Detail', md_str, 
+            help='How specific was the evaluator in describing the behavior?')
+
+        q2lab = results['q2i']['label']
+        if q2lab == 0:
+            md_str = '✅ Yes'
+        else:
+            md_str = '❌ No'
+        cols[1].metric('Suggestion Given', (md_str),
+            help='Did the evaluator give a suggestion for improvement?')
+
+        q3lab = results['q3i']['label']
+        if q3lab == 0:
+            md_str = '✅ Yes'
+        else:
+            md_str = '❌ No'
+        cols[1].metric('Suggestion Linked', md_str,
+            help='Is the suggestion for improvement linked to the described behavior?')
 
 with tabs[1]:
     st.write('hello')