Update app.py

app.py

@@ -6,6 +6,42 @@ import pandas as pd
 import plotly.graph_objects as go
 import time
 
+# Custom CSS for styling
+st.markdown("""
+    <style>
+        .stApp {
+            background: #f5f5f5;
+        }
+        .header {
+            font-size: 36px;
+            font-weight: bold;
+            color: #4CAF50;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .subheader {
+            font-size: 24px;
+            font-weight: bold;
+            color: #4CAF50;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .section {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+        }
+        .footer {
+            text-align: center;
+            font-size: 14px;
+            color: #777;
+            margin-top: 20px;
+        }
+    </style>
+""", unsafe_allow_html=True)
+
 # Function to call the Together AI model
 def call_ai_model(all_message):
     url = "https://api.together.xyz/v1/chat/completions"
@@ -36,17 +72,22 @@ def call_ai_model(all_message):
     return response
 
 # Streamlit app layout
-st.title("Digital Technologies, Kinship, and Gender in Kenya")
-st.write("Analyze and visualize the impact of digital technologies on kinship and gender dynamics in Kenya.")
+st.markdown('<div class="header">Digital Technologies, Kinship, and Gender in Kenya</div>', unsafe_allow_html=True)
+st.markdown('<div class="subheader">Analyze and visualize the impact of digital technologies on kinship and gender dynamics in Kenya.</div>', unsafe_allow_html=True)
 
-# Inputs for digital technology impacts
-digital_technologies = st.multiselect("Select digital technologies:", ["Big Data Analytics", "Biometric Authentication", "Blockchain", "E-commerce", "Social Media Platforms"])
-issues = st.multiselect("Select issues of concern:", ["Trust", "Mistrust", "Data Privacy", "Fraud", "Social Classification"])
+# Input section
+with st.container():
+    st.markdown('<div class="section">', unsafe_allow_html=True)
+    st.subheader("Digital Technology Impacts")
+    digital_technologies = st.multiselect("Select digital technologies:", ["Big Data Analytics", "Biometric Authentication", "Blockchain", "E-commerce", "Social Media Platforms"])
+    issues = st.multiselect("Select issues of concern:", ["Trust", "Mistrust", "Data Privacy", "Fraud", "Social Classification"])
 
-# Kenya-specific inputs
-region = st.text_input("Enter region in Kenya:")
-gender_focus = st.multiselect("Select gender focus:", ["Male", "Female", "Non-binary", "All"])
+    st.subheader("Kenya-Specific Inputs")
+    region = st.text_input("Enter region in Kenya:")
+    gender_focus = st.multiselect("Select gender focus:", ["Male", "Female", "Non-binary", "All"])
+    st.markdown('</div>', unsafe_allow_html=True)
 
+# Button to generate analysis
 if st.button("Generate Analysis"):
     all_message = (
         f"Analyze the impact of digital technologies on kinship and gender dynamics in Kenya. "
@@ -97,8 +138,10 @@ if st.button("Generate Analysis"):
     
             st.success("Analysis completed!")
             # Display analysis
+            st.markdown('<div class="section">', unsafe_allow_html=True)
             st.subheader("Digital Technologies Impact Analysis in Kenya")
             st.markdown(analysis_text.strip())
+            st.markdown('</div>', unsafe_allow_html=True)
 
             # Prepare data for visualization
             results_data = {
@@ -108,10 +151,13 @@ if st.button("Generate Analysis"):
             results_df = pd.DataFrame(results_data)
 
             # Display results in a table
+            st.markdown('<div class="section">', unsafe_allow_html=True)
             st.subheader("Digital Technologies Summary")
             st.table(results_df)
+            st.markdown('</div>', unsafe_allow_html=True)
 
             # Create a radar chart for digital technology impacts
+            st.markdown('<div class="section">', unsafe_allow_html=True)
             fig = go.Figure(data=go.Scatterpolar(
                 r=[len(digital_technologies), len(issues)],
                 theta=["Digital Technologies", "Issues of Concern"],
@@ -124,10 +170,13 @@ if st.button("Generate Analysis"):
                 showlegend=False
             )
             st.plotly_chart(fig)
+            st.markdown('</div>', unsafe_allow_html=True)
 
             # Display raw analysis result for debugging
+            st.markdown('<div class="section">', unsafe_allow_html=True)
             with st.expander("Show Raw Analysis"):
                 st.text(analysis_text)
+            st.markdown('</div>', unsafe_allow_html=True)
 
     except ValueError as ve:
         st.error(f"Configuration error: {ve}")
@@ -135,3 +184,6 @@ if st.button("Generate Analysis"):
         st.error(f"Request error: {re}")
     except Exception as e:
         st.error(f"An unexpected error occurred: {e}")
+
+# Footer
+st.markdown('<div class="footer">Powered by Together AI and Streamlit</div>', unsafe_allow_html=True)