trying to make the app visually better

app.py

@@ -110,22 +110,40 @@ def save_choice(choice_index):
 # Select the current sample
 sample = dataset.iloc[st.session_state.index]
 
-# Display content
+# Title
 st.markdown("<h1 style='text-align: center; font-size: 50px;'>MAIA Sample</h1>", unsafe_allow_html=True)
-st.write(f"### User: {st.session_state.username}")
-st.write("\n\n\n")  # Add empty space
+
+# Centered user name
+st.markdown(f"<h3 style='text-align: center;'>User: {st.session_state.username}</h3>", unsafe_allow_html=True)
+
+st.write("\n\n")  # Add empty space
+
+# Instructions
 st.markdown("""
 ### Instructions:
 - Look at the video thumbnail, do not play it!
 - Select the checkbox if you think so.
 - Then choose one of the two answers.
 """)
-st.write(f"**Question Category:** {sample.get('question_category', 'No category available')}")
+
+st.write("---")  # Adds a horizontal divider for better separation
+
+# Display Video
 st.video(sample["video_url"])
 
+# Question Prompt
+st.markdown("<h4 style='text-align: center; margin-top: 20px;'>Scegli la descrizione corretta tra A e B</h4>", unsafe_allow_html=True)
+
 # Checkbox for uncertainty
+st.markdown("<div style='text-align: center;'>", unsafe_allow_html=True)
 not_enough_info = st.checkbox("The frame does not provide enough information to answer the question.", key='checkbox')
+st.markdown("</div>", unsafe_allow_html=True)
+
+st.write("\n")  # Add spacing before buttons
 
-# Buttons
-st.button(f"Answer 1: {sample.get('answer1', 'No answer1 available')}", on_click=lambda: save_choice(0))
-st.button(f"Answer 2: {sample.get('answer2', 'No answer2 available')}", on_click=lambda: save_choice(1))
+# Buttons (Centered)
+col1, col2 = st.columns(2)
+with col1:
+    st.button(f"A: {sample.get('answer1', 'No answer1 available')}", on_click=lambda: save_choice(0))
+with col2:
+    st.button(f"B: {sample.get('answer2', 'No answer2 available')}", on_click=lambda: save_choice(1))