updated the layout

README.md

@@ -23,5 +23,7 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 ### TODO List (Human Eval)
 [ ] Check if user_id in database, then resume where they left off
 [ ] Implement save and continue later button
-[ ] Implement questions
-[ ] Back button
+[ ] Implement questions with proper buttons (with text)
+[ ] Back button
+[ ] Dataset linking
+[ ] prettify the context field with new lines and highlighting popularity etc. keywords in bold

app.py

@@ -8,6 +8,9 @@ import streamlit as st
 from datetime import datetime
 import os
 from dotenv import load_dotenv
+from views.intro_screen import username_screen
+from views.questions_screen import new_questions_screen
+from css.layout import custom_css
 
 load_dotenv()
 VALIDATION_CODE = os.getenv("VALIDATION_CODE")
@@ -91,126 +94,6 @@ def initialization():
         st.session_state.survey_state = SurveyState()
 
 
-def validate_username(username: str) -> bool:
-    return bool(username.strip())
-
-
-def validate_code(input_code: str) -> bool:
-    """Validate the entered code against the hardcoded validation code"""
-    return input_code.strip() == VALIDATION_CODE
-
-
-def username_screen():
-    """Display the Prolific ID entry screen."""
-    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:
-        # Validate Prolific ID and code
-        if validate_username(username_input) and validate_code(validation_code_input):
-            st.session_state.username = username_input
-
-            # Load previous state if exists
-            saved_state = st.session_state.survey_state.load_state(username_input)
-            if saved_state:
-                st.session_state.current_index = saved_state.get('current_index', 0)
-                st.session_state.responses = saved_state.get('responses', [])
-                st.success("Previous progress loaded! Continuing from where you left off.")
-            else:
-                st.success("Prolific ID and code validated! Starting new survey.")
-            st.rerun()
-        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.")
-
-
-def questions_screen(data):
-    """Display the questions screen."""
-    current_index = st.session_state.current_index
-    config = data.iloc[current_index]
-
-    # Progress bar
-    progress = (current_index + 1) / len(data)
-    st.progress(progress)
-    st.write(f"Question {current_index + 1} of {len(data)}")
-
-    st.subheader(f"Config ID: {config['config_id']}")
-
-    # Create tabs for better organization
-    context_tab, questions_tab = st.tabs(["Context", "Questions"])
-
-    with context_tab:
-        st.write(f"**Persona:** {config['persona']}")
-        st.write(f"**Filters:** {config['filters']}")
-        st.write(f"**Cities:** {config['city']}")
-
-        # Expandable context
-        with st.expander("Show Context", expanded=False):
-            st.write(config['context'])
-
-    options = [0, 1, 2, 3, 4, 5]
-
-    with questions_tab:
-        st.write(f"**Query_v:** {config['query_v']}")
-        rating_v = st.radio("Rate this config:", options, key=f"rating_v_{current_index}")
-
-        st.write(f"**Query_p0:** {config['query_p0']}")
-        rating_p0 = st.radio("Rate this config:", options, key=f"rating_p0_{current_index}")
-
-        st.write(f"**Query_p1:** {config['query_p1']}")
-        rating_p1 = st.radio("Rate this config:", options, key=f"rating_p1_{current_index}")
-
-        comment = st.text_area("Comments (Optional):")
-    response = Response(config_id=config["config_id"],
-                        rating_v=rating_v, rating_p0=rating_p0, rating_p1=rating_p1,
-                        comment=comment, timestamp=datetime.now().isoformat())
-    print(response)
-    if len(st.session_state.responses) > current_index:
-        st.session_state.responses[current_index] = response
-    else:
-        st.session_state.responses.append(response)
-    navigation_buttons(data, rating_v, rating_p0, rating_p1)
-
-
-def navigation_buttons(data, rating_v, rating_p0, rating_p1):
-    """Display navigation buttons."""
-    current_index = st.session_state.current_index
-
-    col1, col2, col3 = st.columns([1, 1, 2])
-
-    with col1:  # Back button
-        if st.button("Back") and current_index > 0:
-            st.session_state.current_index -= 1
-            st.rerun()
-
-    with col2:  # Next button
-        if st.button("Next"):
-            if rating_v == 0 or rating_p0 == 0 or rating_p1 == 0:
-                st.warning("Please provide a rating before proceeding.")
-            else:
-                if current_index < len(data) - 1:
-                    st.session_state.current_index += 1
-                    st.rerun()
-                else:
-                    feedback = Feedback(
-                        id=current_index + 1,
-                        user_id=st.session_state.username,
-                        time_stamp=datetime.now().isoformat(),
-                        responses=st.session_state.responses,
-                    )
-                    try:
-                        ingest(feedback)
-                        st.session_state.completed = True
-                        st.rerun()
-                    except Exception as e:
-                        st.error(f"An error occurred while submitting feedback: {e}")
-
-
 def exit_screen():
     """Display exit screen"""
     st.markdown("""
@@ -253,22 +136,18 @@ def reset_survey():
 
 def ui():
     """Main function to control the survey flow."""
+    custom_css()
     data = pd.read_csv("data/gemini_results_subset.csv")[:3]
     initialization()
 
     if st.session_state.completed:
-        # st.title("Survey Completed")
-        # st.success("Thank you! Your survey has been submitted successfully.")
-        # if st.button("Start New Survey"):
-        #     reset_survey()
-        #     st.rerun()
         exit_screen()
         return
 
     if st.session_state.username is None:
         username_screen()
     else:
-        questions_screen(data)
+        new_questions_screen(data)
 
 
 if __name__ == "__main__":

css/layout.py

@@ -0,0 +1,33 @@
+import streamlit as st
+def custom_css():
+    """Add custom CSS for layout"""
+    st.markdown("""
+        <style>
+        .split-container {
+            display: flex;
+            gap: 2rem;
+        }
+        .context-container {
+            flex: 1;
+            padding: 1rem;
+            background-color: #f8f9fa;
+            border-radius: 0.5rem;
+        }
+        .questions-container {
+            flex: 1;
+            padding: 1rem;
+        }
+        .stButton button {
+            width: 100%;
+            margin-bottom: 0.5rem;
+        }
+        .exit-container {
+            text-align: center;
+            padding: 2rem;
+            background-color: #f8f9fa;
+            border-radius: 1rem;
+            margin: 2rem auto;
+            max-width: 600px;
+        }
+        </style>
+    """, unsafe_allow_html=True)

db/schema.py

@@ -5,9 +5,9 @@ from datetime import datetime
 
 class Response(BaseModel):
     config_id: str
-    rating_v: int
-    rating_p0: int
-    rating_p1: int
+    query_v: Dict[str, int]
+    query_p0: Dict[str, int]
+    query_p1: Dict[str, int]
     comment: Optional[str]
     timestamp: str
 

views/intro_screen.py

@@ -0,0 +1,44 @@
+import streamlit as st
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+VALIDATION_CODE = os.getenv("VALIDATION_CODE")
+
+
+def validate_username(username: str) -> bool:
+    return bool(username.strip())
+
+
+def validate_code(input_code: str) -> bool:
+    """Validate the entered code against the hardcoded validation code"""
+    return input_code.strip() == VALIDATION_CODE
+
+
+def username_screen():
+    """Display the Prolific ID entry screen."""
+    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:
+        # Validate Prolific ID and code
+        if validate_username(username_input) and validate_code(validation_code_input):
+            st.session_state.username = username_input
+
+            # Load previous state if exists
+            saved_state = st.session_state.survey_state.load_state(username_input)
+            if saved_state:
+                st.session_state.current_index = saved_state.get('current_index', 0)
+                st.session_state.responses = saved_state.get('responses', [])
+                st.success("Previous progress loaded! Continuing from where you left off.")
+            else:
+                st.success("Prolific ID and code validated! Starting new survey.")
+            st.rerun()
+        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.")

views/nav_buttons.py

@@ -0,0 +1,46 @@
+import json
+from typing import Dict
+
+from db.schema import Feedback, Response
+from db.crud import ingest, read
+import pandas as pd
+import streamlit as st
+from datetime import datetime
+import os
+from dotenv import load_dotenv
+load_dotenv()
+VALIDATION_CODE = os.getenv("VALIDATION_CODE")
+
+
+def navigation_buttons(data, rating_v, rating_p0, rating_p1):
+    """Display navigation buttons."""
+    current_index = st.session_state.current_index
+
+    col1, col2, col3 = st.columns([1, 1, 2])
+
+    with col1:  # Back button
+        if st.button("Back") and current_index > 0:
+            st.session_state.current_index -= 1
+            st.rerun()
+
+    with col2:  # Next button
+        if st.button("Next"):
+            if rating_v == 0 or rating_p0 == 0 or rating_p1 == 0:
+                st.warning("Please provide a rating before proceeding.")
+            else:
+                if current_index < len(data) - 1:
+                    st.session_state.current_index += 1
+                    st.rerun()
+                else:
+                    feedback = Feedback(
+                        id=current_index + 1,
+                        user_id=st.session_state.username,
+                        time_stamp=datetime.now().isoformat(),
+                        responses=st.session_state.responses,
+                    )
+                    try:
+                        ingest(feedback)
+                        st.session_state.completed = True
+                        st.rerun()
+                    except Exception as e:
+                        st.error(f"An error occurred while submitting feedback: {e}")

views/questions_screen.py

@@ -0,0 +1,142 @@
+import json
+from typing import Dict
+
+from db.schema import Feedback, Response
+import streamlit as st
+from datetime import datetime
+import os
+from dotenv import load_dotenv
+from views.nav_buttons import navigation_buttons
+
+load_dotenv()
+VALIDATION_CODE = os.getenv("VALIDATION_CODE")
+
+
+def new_questions_screen(data):
+    """Display the questions screen with split layout"""
+    current_index = st.session_state.current_index
+    config = data.iloc[current_index]
+
+    # Progress bar
+    progress = (current_index + 1) / len(data)
+    st.progress(progress)
+    st.write(f"Question {current_index + 1} of {len(data)}")
+    st.subheader(f"Config ID: {config['config_id']}")
+
+    # Context information
+    st.markdown("### Context Information")
+
+    with st.expander("Persona", expanded=True):
+        st.write(config['persona'])
+
+    with st.expander("Filters & Cities", expanded=True):
+        st.write("**Filters:**", config['filters'])
+        st.write("**Cities:**", config['city'])
+
+    with st.expander("Full Context", expanded=False):
+        st.write(config['context'])
+
+    # Split layout for questions and ratings
+    col11, col12, col13, col14 = st.columns([1, 1, 1, 1])  # Sub-columns for query ratings
+    options = [0, 1, 2, 3, 4, 5]
+
+    # Query_v and its ratings
+    st.markdown("### Query_v")
+    st.write(config['query_v'])
+    col_v_1, col_v_2, col_v_3 = st.columns(3)
+    with col_v_1:
+        clarity_rating = st.radio("Clarity:", options, key=f"rating_v_clarity_{current_index}")
+
+    with col_v_2:
+        relevance_rating = st.radio("Relevance:", options, key=f"rating_v_relevance_{current_index}")
+
+    with col_v_3:
+        coverage_rating = st.radio("Coverage:", options, key=f"rating_v_coverage_{current_index}")
+
+    query_v_ratings = {
+        "clarity": clarity_rating,
+        "relevance": relevance_rating,
+        "coverage": coverage_rating,
+    }
+
+    # Query_p0 and its ratings
+    st.markdown("### Query_p0")
+    st.write(config['query_p0'])
+    col_p0_1, col_p0_2, col_p0_3, col_p0_4 = st.columns(4)
+
+    with col_p0_1:
+        clarity_rating = st.radio("Clarity:", options, key=f"rating_p0_clarity_{current_index}")
+
+    with col_p0_2:
+        relevance_rating = st.radio("Relevance:", options, key=f"rating_p0_relevance_{current_index}")
+
+    with col_p0_3:
+        coverage_rating = st.radio("Coverage:", options, key=f"rating_p0_coverage_{current_index}")
+
+    with col_p0_4:
+        persona_alignment_rating = st.radio(
+            "Persona Alignment:", options=[0, 1, 2, 3, 4],  # These are the values
+            format_func=lambda x: ["N/A", "Not Aligned", "Partially Aligned", "Aligned", "Unclear"][x],
+            key=f"rating_p0_persona_alignment_{current_index}"
+        )
+
+    # Collecting the ratings for query_p0
+    query_p0_ratings = {
+        "clarity": clarity_rating,
+        "relevance": relevance_rating,
+        "coverage": coverage_rating,
+        "persona_alignment": persona_alignment_rating
+    }
+
+    # Query_p1 and its ratings
+    st.markdown("### Query_p1")
+    st.write(config['query_p1'])
+    # Split the layout into 4 columns for query_p1 ratings
+    col_p1_1, col_p1_2, col_p1_3, col_p1_4 = st.columns(4)
+
+    with col_p1_1:
+        clarity_rating_p1 = st.radio("Clarity:", options, key=f"rating_p1_clarity_{current_index}")
+
+    with col_p1_2:
+        relevance_rating_p1 = st.radio("Relevance:", options, key=f"rating_p1_relevance_{current_index}")
+
+    with col_p1_3:
+        coverage_rating_p1 = st.radio("Coverage:", options, key=f"rating_p1_coverage_{current_index}")
+
+    with col_p1_4:
+        persona_alignment_rating_p1 = st.radio(
+            "Persona Alignment:", options=[0, 1, 2, 3, 4],  # These are the values
+            format_func=lambda x: ["N/A", "Not Aligned", "Partially Aligned", "Aligned", "Unclear"][x],
+            key=f"rating_p1_persona_alignment_{current_index}"
+        )
+
+    # Collecting the ratings for query_p1
+    query_p1_ratings = {
+        "clarity": clarity_rating_p1,
+        "relevance": relevance_rating_p1,
+        "coverage": coverage_rating_p1,
+        "persona_alignment": persona_alignment_rating_p1
+    }
+
+    # Additional comments
+    comment = st.text_area("Additional Comments (Optional):")
+
+    # Collecting the response data
+    response = Response(
+        config_id=config["config_id"],
+        query_v=query_v_ratings,  # Use the ratings dictionary for query_v
+        query_p0=query_p0_ratings,  # Use the ratings dictionary for query_p0
+        query_p1=query_p1_ratings,  # Use the ratings dictionary for query_p1
+        comment=comment,
+        timestamp=datetime.now().isoformat()
+    )
+
+    # Storing the response
+    print(response)
+    if len(st.session_state.responses) > current_index:
+        st.session_state.responses[current_index] = response
+    else:
+        st.session_state.responses.append(response)
+
+    # Navigation buttons
+    navigation_buttons(data, query_v_ratings["clarity"], query_p0_ratings["clarity"], query_p1_ratings["clarity"])