Update app.py

app.py

@@ -6,48 +6,114 @@ import time
 # Set page configuration as the first Streamlit command
 st.set_page_config(page_title="Evo", page_icon="🤖", layout="wide")
 
-# Define the API endpoint
-API_URL = "https://startrz-proagents.hf.space/api/v1/prediction/cce3da9a-f1b9-4bf2-aab8-5462f52ac058"
-
-# Custom CSS for advanced styling
+# Advanced CSS for a polished UI
 st.markdown("""
     <style>
+    /* Global Styles */
+    body {
+        font-family: 'Arial', sans-serif;
+        background-color: #f5f6fa;
+    }
+    .stApp {
+        background-color: #f5f6fa;
+    }
+    
+    /* Chat Container */
     .chat-container {
-        max-height: 500px;
+        max-height: 600px;
         overflow-y: auto;
-        border: 1px solid #e0e0e0;
-        border-radius: 10px;
-        padding: 10px;
-        background-color: #fafafa;
+        border-radius: 15px;
+        padding: 20px;
+        background: linear-gradient(135deg, #ffffff, #f0f2f5);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        margin: 20px 0;
     }
+    
+    /* Messages */
     .user-message {
-        background-color: #d9eaff;
-        padding: 10px;
-        border-radius: 8px;
-        margin: 5px 0;
+        background: #4a90e2;
+        color: white;
+        padding: 12px 18px;
+        border-radius: 15px 15px 0 15px;
+        margin: 10px 0;
+        max-width: 70%;
+        align-self: flex-end;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
     .assistant-message {
-        background-color: #f0f0f0;
-        padding: 10px;
-        border-radius: 8px;
-        margin: 5px 0;
+        background: #eceff1;
+        color: #333;
+        padding: 12px 18px;
+        border-radius: 15px 15px 15px 0;
+        margin: 10px 0;
+        max-width: 70%;
+        align-self: flex-start;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Sidebar */
+    .sidebar .sidebar-content {
+        background: #2c3e50;
+        color: white;
+        border-radius: 10px;
+        padding: 20px;
     }
     .sidebar-btn {
         width: 100%;
-        margin: 5px 0;
-        background-color: #4CAF50;
+        margin: 8px 0;
+        background: #3498db;
         color: white;
         border: none;
-        padding: 8px;
-        border-radius: 5px;
+        padding: 10px;
+        border-radius: 8px;
         cursor: pointer;
+        transition: background 0.3s ease;
     }
     .sidebar-btn:hover {
-        background-color: #45a049;
+        background: #2980b9;
+    }
+    
+    /* Title and Header */
+    .title {
+        font-size: 2.5em;
+        color: #2c3e50;
+        text-align: center;
+        margin-top: 20px;
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    }
+    .subtitle {
+        font-size: 1.2em;
+        color: #7f8c8d;
+        text-align: center;
+        margin-bottom: 30px;
+    }
+    
+    /* Chat Input */
+    .stTextInput > div > input {
+        border-radius: 20px;
+        padding: 10px 15px;
+        border: 1px solid #dcdcdc;
+        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+    }
+    
+    /* Feedback Buttons */
+    .feedback-btn {
+        padding: 5px 10px;
+        margin: 5px;
+        border-radius: 50%;
+        background: #ecf0f1;
+        cursor: pointer;
+        transition: transform 0.2s ease;
+    }
+    .feedback-btn:hover {
+        transform: scale(1.1);
     }
     </style>
 """, unsafe_allow_html=True)
 
+# Define the API endpoint
+API_URL = "https://startrz-proagents.hf.space/api/v1/prediction/cce3da9a-f1b9-4bf2-aab8-5462f52ac058"
+
 # Function to query the API with enhanced error handling
 def query(payload):
     try:
@@ -63,7 +129,7 @@ def query(payload):
 def type_response(text, delay=0.02):
     placeholder = st.empty()
     for i in range(len(text) + 1):
-        placeholder.markdown(f"**Assistant**: {text[:i]}")
+        placeholder.markdown(f'<div class="assistant-message">{text[:i]}</div>', unsafe_allow_html=True)
         time.sleep(delay)
     return placeholder
 
@@ -78,12 +144,12 @@ if 'feedback' not in st.session_state:
     st.session_state.feedback = {}
 
 # Application title and description
-st.title("Evo: Your AI Networking Assistant")
-st.write("Explore networking topics with me! Type your question or click a suggestion below.")
+st.markdown('<h1 class="title">Evo: Your AI Networking Assistant 🤖</h1>', unsafe_allow_html=True)
+st.markdown('<p class="subtitle">Explore networking topics with a cutting-edge AI companion</p>', unsafe_allow_html=True)
 
 # Sidebar with advanced suggested questions
 with st.sidebar:
-    st.header("Suggested Questions")
+    st.markdown('<h2 style="color: white;">Suggested Questions</h2>', unsafe_allow_html=True)
     categories = {
         "Basics": ["What is TCP/IP?", "How does DNS work?", "What is an IP address?"],
         "Advanced": ["Explain VLANs", "What is SD-WAN?", "How does BGP work?"],
@@ -104,17 +170,17 @@ with st.sidebar:
 st.markdown('<div class="chat-container">', unsafe_allow_html=True)
 for i, message in enumerate(st.session_state.messages):
     with st.chat_message(message["role"]):
-        st.markdown(f"**{message['role'].capitalize()} ({message['timestamp']})**: {message['content']}")
+        st.markdown(f'<div class="{message["role"]}-message">**{message["role"].capitalize()} ({message["timestamp"]})**: {message["content"]}</div>', unsafe_allow_html=True)
         if message["role"] == "assistant" and i > 0:  # Skip initial message
             col1, col2 = st.columns([1, 1])
             with col1:
-                if st.button("👍", key=f"up_{i}", help="Like this response"):
+                if st.button("👍", key=f"up_{i}", help="Like this response", type="secondary"):
                     st.session_state.feedback[i] = "positive"
             with col2:
-                if st.button("👎", key=f"down_{i}", help="Dislike this response"):
+                if st.button("👎", key=f"down_{i}", help="Dislike this response", type="secondary"):
                     st.session_state.feedback[i] = "negative"
             if i in st.session_state.feedback:
-                st.write(f"Feedback: {'Liked' if st.session_state.feedback[i] == 'positive' else 'Disliked'}")
+                st markdown(f'<p style="color: #7f8c8d; font-size: 0.9em;">Feedback: {"Liked" if st.session_state.feedback[i] == "positive" else "Disliked"}</p>', unsafe_allow_html=True)
 st.markdown('</div>', unsafe_allow_html=True)
 
 # Function to handle queries (user input or suggestions)
@@ -122,7 +188,7 @@ def handle_query(question):
     timestamp = datetime.now().strftime("%H:%M:%S")
     st.session_state.messages.append({"role": "user", "content": question, "timestamp": timestamp})
     with st.chat_message("user"):
-        st.markdown(f"**User ({timestamp})**: {question}")
+        st.markdown(f'<div class="user-message">**User ({timestamp})**: {question}</div>', unsafe_allow_html=True)
     
     if question in st.session_state.cache:
         answer = st.session_state.cache[question]