css fixed but buttons broken

app.py

@@ -7,7 +7,7 @@ from views.intro_screen import welcome_screen
 from views.questions_screen import questions_screen, survey_completed
 from views.continue_survey import continue_survey_screen
 from css.layout import custom_css
-# st.set_page_config(layout="wide")
+st.set_page_config(layout="wide")
 
 
 load_dotenv()

css/layout.py

@@ -32,4 +32,4 @@ def custom_css():
             max-width: 600px;
         }
         </style>
-    """, unsafe_allow_html=True)
+    """, unsafe_allow_html=True)

requirements.txt

@@ -1,5 +1,5 @@
-streamlit==1.37.1
+streamlit
 pandas
 python-dotenv
 firebase-admin
-pydantic
+pydantic

views/intro_screen.py

@@ -19,18 +19,20 @@ def validate_code(input_code: str) -> bool:
 
 def welcome_screen():
     """Display the welcome screen and direct users accordingly."""
-    st.title("Welcome to the Feedback Survey")
-
-    username_input = st.text_input("Enter your First name and press TAB:")
-    validation_code_input = st.text_input("Enter the validation code to proceed and press ENTER:")
-
-    next_button = st.button("Next")
-
-    if (username_input and validation_code_input) or next_button:
-        if validate_username(username_input) and validate_code(validation_code_input):
-            st.session_state.username = username_input
-        else:
-            if not validate_username(username_input):
-                st.warning("Invalid Prolific ID. Please check and try again.")
-            if not validate_code(validation_code_input):
-                st.warning("Invalid validation code. Please check and try again.")
+    with st.container():
+        st.markdown("""<style> .st-emotion-cache-1jicfl2 {width: 50%;} </style>""", unsafe_allow_html=True)
+        st.title("Welcome to the Feedback Survey")
+
+        username_input = st.text_input("Enter your First name and press TAB:")
+        validation_code_input = st.text_input("Enter the validation code to proceed and press ENTER:")
+
+        next_button = st.button("Next")
+
+        if (username_input and validation_code_input) or next_button:
+            if validate_username(username_input) and validate_code(validation_code_input):
+                st.session_state.username = username_input
+            else:
+                if not validate_username(username_input):
+                    st.warning("Invalid username. Please check and try again.")
+                if not validate_code(validation_code_input):
+                    st.warning("Invalid validation code. Please check and try again.")

views/nav_buttons.py

@@ -25,16 +25,18 @@ def submit_feedback(current_index):
         st.error(f"An error occurred while submitting feedback: {e}")
 
 
-def any_value_zero(response):
-    return any(
-        any(value == 0 for value in query.values())
-        for query in [response.query_v, response.query_p0, response.query_p1]
-    )
+def flatten_ratings(response):
+    all_ratings = []
+    for model_ratings in response.model_ratings.values():
+        all_ratings.extend(model_ratings.query_v_ratings.values())
+        all_ratings.extend(model_ratings.query_p0_ratings.values())
+        all_ratings.extend(model_ratings.query_p1_ratings.values())
+    return all_ratings
 
 
 def navigation_buttons(data, response: Response):
     """Display navigation buttons."""
-    #TODO change the function to accept the response object
+
     current_index = st.session_state.current_index
 
     col1, col2, col3 = st.columns([1, 1, 2])
@@ -45,13 +47,8 @@ def navigation_buttons(data, response: Response):
             st.rerun()
 
     with col2:  # Next button
-        all_ratings = []
-        for model_ratings in response.model_ratings.values():
-            all_ratings.extend(model_ratings.query_v_ratings.values())
-            all_ratings.extend(model_ratings.query_p0_ratings.values())
-            all_ratings.extend(model_ratings.query_p1_ratings.values())
-
         if st.button("Next"):
+            all_ratings = flatten_ratings(response)
             if any(rating == 0 for rating in all_ratings):
                 st.warning("Please provide a rating before proceeding.")
             else:
@@ -64,9 +61,9 @@ def navigation_buttons(data, response: Response):
     with col3:  # Save & Resume Later button
         if st.button("Exit & Resume Later"):
             last_response = st.session_state.responses[-1]
-            if not any_value_zero(last_response):
+            all_last_ratings = flatten_ratings(last_response)
+            if not any(rating == 0 for rating in all_last_ratings):
                 submit_feedback(current_index)
             else:
                 st.session_state.completed = True
                 st.rerun()
-            # submit_feedback(current_index)

views/questions_screen.py

@@ -1,11 +1,9 @@
 from db.schema import Response, ModelRatings
 import streamlit as st
 from datetime import datetime
-import os
 from dotenv import load_dotenv
 from views.nav_buttons import navigation_buttons
 
-st.set_page_config(layout="wide")
 load_dotenv()
 
 
@@ -23,34 +21,67 @@ def survey_completed():
     st.session_state.start_new_survey = True
 
 
-def render_query_ratings(query_label, config, query_key, current_index, has_persona_alignment=False):
+def display_ratings_row(model_name, config, current_index):
+    st.markdown(f"## {model_name.capitalize()} Ratings")
+
+    cols = st.columns(3)
+    with cols[0]:
+        query_v_ratings = render_query_ratings(model_name, "Query_v",
+                                               config, f"{model_name}_query_v", current_index,
+                                               has_persona_alignment=False)
+    with cols[1]:
+        query_p0_ratings = render_query_ratings(model_name, "Query_p0",
+                                                config, f"{model_name}_query_p0", current_index,
+                                                has_persona_alignment=True)
+    with cols[2]:
+        query_p1_ratings = render_query_ratings(model_name, "Query_p1",
+                                                config, f"{model_name}_query_p1",
+                                                current_index, has_persona_alignment=True)
+    if "persona_alignment" in query_v_ratings:
+        query_v_ratings.pop("persona_alignment")
+    return {
+        "query_v_ratings": query_v_ratings,
+        "query_p0_ratings": query_p0_ratings,
+        "query_p1_ratings": query_p1_ratings,
+    }
+
+
+def render_query_ratings(model_name, query_label, config, query_key, current_index, has_persona_alignment=False):
     """Helper function to render ratings for a given query."""
-    st.markdown(f"### {query_label}")
-    st.write(config[query_key])
-    # columns = st.columns(3 if has_persona_alignment else 2)
-    columns = st.columns(3)
-    options = [0, 1, 2, 3, 4]
-
-    persona_alignment_rating = None
-    if has_persona_alignment:
-        with columns[0]:
-            persona_alignment_rating = st.radio(
-                "Persona Alignment:", options=[0, 1, 2, 3, 4],
-                format_func=lambda x: ["N/A", "Not Aligned", "Partially Aligned", "Aligned", "Unclear"][x],
-                key=f"rating_{query_key}_persona_alignment_{current_index}"
-            )
-
-    with columns[1]:
-        relevance_rating = st.radio("Relevance:",
-                                    options, key=f"rating_{query_key}_relevance_{current_index}",
-                                    format_func=lambda x:
-                                    ["N/A", "Not Relevant", "Somewhat Relevant", "Relevant", "Unclear"][x], )
-    with columns[2]:
-        clarity_rating = st.radio("Clarity:",
-                                  options=[0, 1, 2, 3],
-                                  key=f"rating_{query_key}_clarity_{current_index}",
-                                  format_func=lambda x: ["N/A", "Not Clear", "Somewhat Clear", "Very Clear"][x])
+    if model_name == "gemini":
+        bg_color = "#e0f7fa"
+    else:
+        bg_color = "#f0f4c3"
+    with st.container():
+        st.markdown(f"""
+               <div style="background-color:{bg_color}; padding:1rem;"> 
+                    <h3 style="color:blue;"> {query_label} </h3>
+                   <p style="text-align:left;">{config[query_key]}</p>
+                </div>
+           """, unsafe_allow_html=True)
+        columns = st.columns(3)
+        options = [0, 1, 2, 3, 4]
+
+        persona_alignment_rating = None
+        if has_persona_alignment:
+            with columns[0]:
+                persona_alignment_rating = st.radio(
+                    "Persona Alignment:", options=[0, 1, 2, 3, 4],
+                    format_func=lambda x: ["N/A", "Not Aligned", "Partially Aligned", "Aligned", "Unclear"][x],
+                    key=f"rating_{query_key}_persona_alignment_{current_index}",
+                )
 
+        with columns[1]:
+            relevance_rating = st.radio("Relevance:",
+                                        options, key=f"rating_{query_key}_relevance_{current_index}",
+                                        format_func=lambda x:
+                                        ["N/A", "Not Relevant", "Somewhat Relevant", "Relevant", "Unclear"][x], )
+        with columns[2]:
+            clarity_rating = st.radio("Clarity:",
+                                      options=[0, 1, 2, 3],
+                                      key=f"rating_{query_key}_clarity_{current_index}",
+                                      format_func=lambda x: ["N/A", "Not Clear", "Somewhat Clear", "Very Clear"][x],
+                                      )
     return {
         "clarity": clarity_rating,
         "relevance": relevance_rating,
@@ -80,39 +111,25 @@ def questions_screen(data):
         with st.expander("Full Context", expanded=False):
             st.text_area("", config['context'], height=300, disabled=False)
 
-        # Render queries and collect ratings
-        g_query_v_ratings = render_query_ratings("Query_v", config, "gemini_query_v", current_index)
-        g_query_p0_ratings = render_query_ratings("Query_p0",
-                                                  config, "gemini_query_p0", current_index, has_persona_alignment=True)
-        g_query_p1_ratings = render_query_ratings("Query_p1",
-                                                  config, "gemini_query_p1",
-                                                  current_index, has_persona_alignment=True)
-
-        l_query_v_ratings = render_query_ratings("Query_v", config, "llama_query_v", current_index)
-        l_query_p0_ratings = render_query_ratings("Query_p0",
-                                                  config, "llama_query_p0", current_index, has_persona_alignment=True)
-        l_query_p1_ratings = render_query_ratings("Query_p1",
-                                                  config, "llama_query_p1",
-                                                  current_index, has_persona_alignment=True)
+        g_ratings = display_ratings_row("gemini", config, current_index)
+        l_ratings = display_ratings_row("llama", config, current_index)
 
         # Additional comments
         comment = st.text_area("Additional Comments (Optional):")
-        if "persona_alignment" in g_query_v_ratings or "persona_alignment" in l_query_v_ratings:
-            g_query_v_ratings.pop("persona_alignment")
-            l_query_v_ratings.pop("persona_alignment")
+
         # Collecting the response data
         response = Response(
             config_id=config["config_id"],
             model_ratings={
                 "gemini": ModelRatings(
-                    query_v_ratings=g_query_v_ratings,
-                    query_p0_ratings=g_query_p0_ratings,
-                    query_p1_ratings=g_query_p1_ratings,
+                    query_v_ratings=g_ratings["query_v_ratings"],
+                    query_p0_ratings=g_ratings["query_p0_ratings"],
+                    query_p1_ratings=g_ratings["query_p1_ratings"],
                 ),
                 "llama": ModelRatings(
-                    query_v_ratings=l_query_v_ratings,
-                    query_p0_ratings=l_query_p0_ratings,
-                    query_p1_ratings=l_query_p1_ratings,
+                    query_v_ratings=l_ratings["query_v_ratings"],
+                    query_p0_ratings=l_ratings["query_p0_ratings"],
+                    query_p1_ratings=l_ratings["query_p1_ratings"],
                 )
             },
             comment=comment,