Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import requests | |
| import json | |
| from datetime import datetime | |
| import os | |
| from dotenv import load_dotenv | |
| # Load environment variables | |
| load_dotenv() | |
| # Configuration | |
| BACKEND_URL = os.getenv("BACKEND_URL", "http://localhost:8000") | |
| # Page configuration | |
| st.set_page_config( | |
| page_title="CultureBot - Your AI Cultural Guide", | |
| page_icon="🌍", | |
| layout="wide", | |
| initial_sidebar_state="expanded" | |
| ) | |
| # Custom CSS for beautiful styling | |
| st.markdown(""" | |
| <style> | |
| .main-header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| padding: 2rem; | |
| border-radius: 10px; | |
| color: white; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .sidebar-info { | |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| color: white; | |
| margin-bottom: 1rem; | |
| } | |
| .chat-message { | |
| padding: 1rem; | |
| border-radius: 10px; | |
| margin: 0.5rem 0; | |
| } | |
| .user-message { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| margin-left: 2rem; | |
| } | |
| .bot-message { | |
| background: #f8f9fa; | |
| color:#333; | |
| border-left: 4px solid #667eea; | |
| margin-right: 2rem; | |
| } | |
| .fact-card { | |
| background: linear-gradient(135deg, #ffd3a5 0%, #fd6585 100%); | |
| color:black; | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin: 1rem 0; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .metric-card { | |
| background: white; | |
| color:black; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| } | |
| </style> | |
| """, unsafe_allow_html=True) | |
| # Sidebar with app information | |
| with st.sidebar: | |
| st.markdown(""" | |
| <div class="sidebar-info"> | |
| <h1 style="font-size: 2.5rem; font-weight: bold; margin-bottom: 1rem;">CultureBot</h1> | |
| <div style="font-size: 0.9rem; opacity: 0.9;"> | |
| <p><strong>Team:</strong> CultureCoders</p> | |
| <p><strong>Version:</strong> 1.0</p> | |
| <p><strong>Created:</strong> June 2025</p> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown("---") | |
| # Navigation | |
| st.markdown("### 🧭 Navigation") | |
| page = st.selectbox( | |
| "Choose a page:", | |
| ["🏠 Home", "💬 Chat with CultureBot", "📚 Cultural Facts", "ℹ️ About"], | |
| key="navigation" | |
| ) | |
| st.markdown("---") | |
| # Quick stats | |
| st.markdown("### 📊 Quick Stats") | |
| try: | |
| response = requests.get(f"{BACKEND_URL}/health", timeout=5) | |
| if response.status_code == 200: | |
| st.success("🟢 Backend Online") | |
| else: | |
| st.error("🔴 Backend Offline") | |
| except: | |
| st.error("🔴 Backend Offline") | |
| # Random fact | |
| st.markdown("### 🎲 Random Fact") | |
| if st.button("Get Random Fact"): | |
| try: | |
| response = requests.get(f"{BACKEND_URL}/facts/random", timeout=10) | |
| if response.status_code == 200: | |
| fact = response.json() | |
| st.markdown(f""" | |
| <div class="fact-card"> | |
| <h4>{fact['country']}</h4> | |
| <p>{fact['fact']}</p> | |
| <small>Category: {fact['category']}</small> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| except Exception as e: | |
| st.error("Unable to fetch random fact") | |
| # Main content area | |
| if page == "🏠 Home": | |
| # Home page | |
| st.markdown(""" | |
| <div class="main-header"> | |
| <h1 style="font-size: 3rem; margin-bottom: 1rem;">Welcome to CultureBot</h1> | |
| <p style="font-size: 1.2rem; opacity: 0.9;">Your AI-powered guide to understanding cultures, traditions, and social customs from around the world</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Feature cards | |
| col1, col2, col3 = st.columns(3) | |
| with col1: | |
| st.markdown(""" | |
| <div class="metric-card"> | |
| <h3>🌍 Global Insights</h3> | |
| <p>Discover fascinating cultural facts and customs from countries across all continents.</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with col2: | |
| st.markdown(""" | |
| <div class="metric-card"> | |
| <h3>🤖 AI-Powered Chat</h3> | |
| <p>Ask questions and get personalized responses about specific countries and cultural practices.</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with col3: | |
| st.markdown(""" | |
| <div class="metric-card"> | |
| <h3>📚 Learn & Explore</h3> | |
| <p>Expand your cultural awareness and become a more informed global citizen.</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown("---") | |
| # Getting started | |
| st.markdown("## 🚀 Getting Started") | |
| st.markdown(""" | |
| 1. **Chat with CultureBot**: Ask questions about any culture or country | |
| 2. **Explore Facts**: Browse our curated collection of cultural insights | |
| 3. **Learn Continuously**: Discover new perspectives and traditions | |
| """) | |
| if st.button("Start Chatting Now", type="primary"): | |
| st.session_state.navigation = "💬 Chat with CultureBot" | |
| st.rerun() | |
| elif page == "💬 Chat with CultureBot": | |
| # Chat page | |
| st.markdown(""" | |
| <div class="main-header"> | |
| <h1>Chat with CultureBot</h1> | |
| <p>Ask me about any culture, country, or tradition!</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Initialize chat history | |
| if "messages" not in st.session_state: | |
| st.session_state.messages = [] | |
| # Display chat messages | |
| for message in st.session_state.messages: | |
| if message["role"] == "user": | |
| st.markdown(f""" | |
| <div class="chat-message user-message"> | |
| <strong>You:</strong> {message["content"]} | |
| </div> | |
| """, unsafe_allow_html=True) | |
| else: | |
| st.markdown(f""" | |
| <div class="chat-message bot-message"> | |
| <strong>CultureBot:</strong> {message["content"]} | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Chat input | |
| user_input = st.chat_input("Ask about any culture or country...") | |
| if user_input: | |
| # Add user message to chat history | |
| st.session_state.messages.append({"role": "user", "content": user_input}) | |
| # Get bot response | |
| with st.spinner("CultureBot is thinking..."): | |
| try: | |
| response = requests.post( | |
| f"{BACKEND_URL}/chat", | |
| json={"message": user_input}, | |
| timeout=30 | |
| ) | |
| if response.status_code == 200: | |
| bot_response = response.json() | |
| st.session_state.messages.append({ | |
| "role": "assistant", | |
| "content": bot_response["response"] | |
| }) | |
| else: | |
| st.session_state.messages.append({ | |
| "role": "assistant", | |
| "content": "I'm sorry, I'm having trouble connecting to my knowledge base right now. Please try again later." | |
| }) | |
| except Exception as e: | |
| st.session_state.messages.append({ | |
| "role": "assistant", | |
| "content": "I'm experiencing some technical difficulties. Please make sure the backend server is running and try again." | |
| }) | |
| st.rerun() | |
| # Suggested questions | |
| st.markdown("### 💡 Try asking about:") | |
| suggestions = [ | |
| "Tell me about Japanese business etiquette", | |
| "What are some Indian greeting customs?", | |
| "How do Germans view punctuality?", | |
| "What should I know about dining in France?", | |
| "Explain Chinese lucky numbers" | |
| ] | |
| cols = st.columns(len(suggestions)) | |
| for i, suggestion in enumerate(suggestions): | |
| with cols[i]: | |
| if st.button(suggestion, key=f"suggestion_{i}"): | |
| st.session_state.messages.append({"role": "user", "content": suggestion}) | |
| st.rerun() | |
| elif page == "📚 Cultural Facts": | |
| # Cultural facts page | |
| st.markdown(""" | |
| <div class="main-header"> | |
| <h1>Cultural Facts Explorer</h1> | |
| <p>Browse our curated collection of cultural insights</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Filters | |
| col1, col2 = st.columns(2) | |
| with col1: | |
| country_filter = st.selectbox( | |
| "Filter by Country:", | |
| ["All Countries", "Japan", "India", "Brazil", "Germany", "China", "France", "South Korea", "Mexico", "Egypt", "Russia", "Thailand", "Italy"] | |
| ) | |
| with col2: | |
| category_filter = st.selectbox( | |
| "Filter by Category:", | |
| ["All Categories", "etiquette", "business", "greeting", "food", "language", "family", "beliefs", "general"] | |
| ) | |
| # Fetch and display facts | |
| try: | |
| if country_filter != "All Countries": | |
| response = requests.get(f"{BACKEND_URL}/facts/country/{country_filter}", timeout=10) | |
| elif category_filter != "All Categories": | |
| response = requests.get(f"{BACKEND_URL}/facts/category/{category_filter}", timeout=10) | |
| else: | |
| # Get random facts for display | |
| facts = [] | |
| for _ in range(10): | |
| fact_response = requests.get(f"{BACKEND_URL}/facts/random", timeout=5) | |
| if fact_response.status_code == 200: | |
| facts.append(fact_response.json()) | |
| for fact in facts: | |
| st.markdown(f""" | |
| <div class="fact-card"> | |
| <h3>{fact['country']}</h3> | |
| <p>{fact['fact']}</p> | |
| <div style="display: flex; justify-content: space-between; margin-top: 1rem;"> | |
| <small><strong>Category:</strong> {fact['category']}</small> | |
| <small><strong>Source:</strong> {fact['source']}</small> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if country_filter != "All Countries" or category_filter != "All Categories": | |
| if response.status_code == 200: | |
| facts = response.json() | |
| if facts: | |
| for fact in facts: | |
| st.markdown(f""" | |
| <div class="fact-card"> | |
| <h3>{fact['country']}</h3> | |
| <p>{fact['fact']}</p> | |
| <div style="display: flex; justify-content: space-between; margin-top: 1rem;"> | |
| <small><strong>Category:</strong> {fact['category']}</small> | |
| <small><strong>Source:</strong> {fact['source']}</small> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| else: | |
| st.info("No facts found for the selected filters.") | |
| else: | |
| st.error("Unable to fetch facts from the server.") | |
| except Exception as e: | |
| st.error("Unable to connect to the backend server. Please make sure it's running.") | |
| else: # About page | |
| st.markdown(""" | |
| <div class="main-header"> | |
| <h1>About CultureBot</h1> | |
| <p>Bridging cultures through AI-powered conversations</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Mission and features | |
| col1, col2 = st.columns(2) | |
| with col1: | |
| st.markdown(""" | |
| ### 🎯 Our Mission | |
| CultureBot was created to help people understand and appreciate the rich diversity of cultures around the world. | |
| In our increasingly connected world, cultural awareness is more important than ever. | |
| ### 🔧 Technology Stack | |
| - **Frontend**: Streamlit (Python) | |
| - **Backend**: FastAPI (Python) | |
| - **AI Engine**: OpenAI GPT-3.5-turbo | |
| - **Database**: In-memory cultural facts database | |
| """) | |
| with col2: | |
| st.markdown(""" | |
| ### ✨ Features | |
| - **Global Coverage**: Cultural insights from countries across all continents | |
| - **AI-Powered Chat**: Natural conversation interface powered by OpenAI | |
| - **Curated Content**: Carefully researched and verified cultural facts | |
| - **Smart Responses**: Context-aware answers tailored to your questions | |
| - **Real-time Interaction**: Fast and responsive chat experience | |
| """) | |
| st.markdown("---") | |
| # Technical details | |
| st.markdown("### 🏗️ Architecture") | |
| st.markdown(""" | |
| CultureBot follows a modern microservices architecture: | |
| 1. **Streamlit Frontend**: Beautiful, interactive user interface | |
| 2. **FastAPI Backend**: High-performance API server | |
| 3. **OpenAI Integration**: Advanced natural language processing | |
| 4. **Cultural Database**: Curated collection of cultural facts and insights | |
| """) | |
| # Contact and support | |
| st.markdown("### 📞 Support") | |
| st.markdown(""" | |
| For technical support or cultural content suggestions, please contact: | |
| - **Team**: Cultural AI Labs | |
| - **Version**: 2.1.0 | |
| - **Last Updated**: January 15, 2024 | |
| """) | |