Update UI

app.py

@@ -111,7 +111,53 @@ def categorize(url):
             return {"error_message": error}
 
 # Main App
-with st.expander("See explanation"): # Explain to user why this project is only worked for CNN domain
+st.header('Classification Project')
+st.subheader
+(
+    '''
+        Unsure what category a CNN article belongs to?  
+        Our clever tool can help!  
+        Paste the URL below and press Enter. We'll sort it into one of our 5 categories in a flash! ⚡️
+    '''
+)
+
+# Define category information (modify content and bullet points as needed)
+categories = {
+    "Business": [
+        "Analyze market trends and investment opportunities.",
+        "Gain insights into company performance and industry news.",
+        "Stay informed about economic developments and regulations."
+    ],
+    "Health": [
+        "Discover healthy recipes and exercise tips.",
+        "Learn about the latest medical research and advancements.",
+        "Find resources for managing chronic conditions and improving well-being."
+    ],
+    "Sport": [
+        "Follow your favorite sports teams and athletes.",
+        "Explore news and analysis from various sports categories.",
+        "Stay updated on upcoming games and competitions."
+    ],
+    "Politics": [
+        "Get informed about current political events and policies.",
+        "Understand different perspectives on political issues.",
+        "Engage in discussions and debates about politics."
+    ],
+    "Entertainment": [
+        "Find recommendations for movies, TV shows, and music.",
+        "Explore reviews and insights from entertainment critics.",
+        "Stay updated on celebrity news and cultural trends."
+    ]
+}
+# Create expanders contain list of category can be classified
+for category, content in categories.items():
+  with st.expander(category, expanded=True):
+    # Display content as bullet points
+    for item in content:
+      st.write(f"- {item}")
+
+# Explain to user why this project is only worked for CNN domain
+with st.expander("Tips", expanded=True):
     st.write(
         '''
             This project works best with CNN articles right now. 
@@ -120,8 +166,9 @@ with st.expander("See explanation"): # Explain to user why this project is only
         '''
     )
 
-url = st.text_input("Paste your CNN Article's URL Here")
+url = st.text_input("Find your favorite CNN story! Paste the URL here.", placeholder='Ex: https://edition.cnn.com/2012/01/31/health/frank-njenga-mental-health/index.html')
 
+st.divider() # 👈 Draws a horizontal rule
 
 if url:
     result = categorize(url)
@@ -138,13 +185,13 @@ st.divider()  # 👈 Draws a horizontal rule
 categories = ["Sport", "Health", "Entertainment", "Politics", "Business"]
 counts = [5638, 4547, 2658, 2461, 1362]
 
-# Create the bar chart
-st.bar_chart(data=dict(zip(categories, counts)))
-
 # Optional: Add a chart title
 st.title("Training Data Category Distribution")
 
 # Optional: Display additional information
 st.write("Here's a breakdown of the number of articles in each category:")
 for category, count in zip(categories, counts):
-  st.write(f"- {category}: {count}")
+  st.write(f"- {category}: {count}")
+
+# Create the bar chart
+st.bar_chart(data=dict(zip(categories, counts)))