Update app.py

app.py

@@ -6,114 +6,48 @@ import time
 # Set page configuration as the first Streamlit command
 st.set_page_config(page_title="Evo", page_icon="🤖", layout="wide")
 
-# Advanced CSS for a polished UI
+# Define the API endpoint
+API_URL = "https://startrz-proagents.hf.space/api/v1/prediction/cce3da9a-f1b9-4bf2-aab8-5462f52ac058"
+
+# Custom CSS for advanced styling
 st.markdown("""
     <style>
-    /* Global Styles */
-    body {
-        font-family: 'Arial', sans-serif;
-        background-color: #f5f6fa;
-    }
-    .stApp {
-        background-color: #f5f6fa;
-    }
-    
-    /* Chat Container */
     .chat-container {
-        max-height: 600px;
+        max-height: 500px;
         overflow-y: auto;
-        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;
+        border: 1px solid #e0e0e0;
+        border-radius: 10px;
+        padding: 10px;
+        background-color: #fafafa;
     }
-    
-    /* Messages */
     .user-message {
-        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);
+        background-color: #d9eaff;
+        padding: 10px;
+        border-radius: 8px;
+        margin: 5px 0;
     }
     .assistant-message {
-        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;
+        background-color: #f0f0f0;
+        padding: 10px;
+        border-radius: 8px;
+        margin: 5px 0;
     }
     .sidebar-btn {
         width: 100%;
-        margin: 8px 0;
-        background: #3498db;
+        margin: 5px 0;
+        background-color: #4CAF50;
         color: white;
         border: none;
-        padding: 10px;
-        border-radius: 8px;
+        padding: 8px;
+        border-radius: 5px;
         cursor: pointer;
-        transition: background 0.3s ease;
     }
     .sidebar-btn:hover {
-        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);
+        background-color: #45a049;
     }
     </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:
@@ -129,7 +63,7 @@ def query(payload):
 def type_response(text, delay=0.02):
     placeholder = st.empty()
     for i in range(len(text) + 1):
-        placeholder.markdown(f'<div class="assistant-message">{text[:i]}</div>', unsafe_allow_html=True)
+        placeholder.markdown(f"**Assistant**: {text[:i]}")
         time.sleep(delay)
     return placeholder
 
@@ -144,12 +78,12 @@ if 'feedback' not in st.session_state:
     st.session_state.feedback = {}
 
 # Application title and description
-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)
+st.title("Evo: Your AI Networking Assistant")
+st.write("Explore networking topics with me! Type your question or click a suggestion below.")
 
 # Sidebar with advanced suggested questions
 with st.sidebar:
-    st.markdown('<h2 style="color: white;">Suggested Questions</h2>', unsafe_allow_html=True)
+    st.header("Suggested Questions")
     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?"],
@@ -170,17 +104,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'<div class="{message["role"]}-message">**{message["role"].capitalize()} ({message["timestamp"]})**: {message["content"]}</div>', unsafe_allow_html=True)
+        st.markdown(f"**{message['role'].capitalize()} ({message['timestamp']})**: {message['content']}")
         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", type="secondary"):
+                if st.button("👍", key=f"up_{i}", help="Like this response"):
                     st.session_state.feedback[i] = "positive"
             with col2:
-                if st.button("👎", key=f"down_{i}", help="Dislike this response", type="secondary"):
+                if st.button("👎", key=f"down_{i}", help="Dislike this response"):
                     st.session_state.feedback[i] = "negative"
             if i in st.session_state.feedback:
-                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.write(f"Feedback: {'Liked' if st.session_state.feedback[i] == 'positive' else 'Disliked'}")
 st.markdown('</div>', unsafe_allow_html=True)
 
 # Function to handle queries (user input or suggestions)
@@ -188,7 +122,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'<div class="user-message">**User ({timestamp})**: {question}</div>', unsafe_allow_html=True)
+        st.markdown(f"**User ({timestamp})**: {question}")
     
     if question in st.session_state.cache:
         answer = st.session_state.cache[question]