Update src/pages/model.py

src/pages/model.py

@@ -7,25 +7,109 @@ os.environ['HUGGINGFACEHUB_API_TOKEN'] = os.getenv("key")
 os.environ['HF_TOKEN'] = os.getenv("key")
 
 st.set_page_config(page_title="👨‍🏫 Multi-Mentor Chat", page_icon="🧠")
-st.title("🧠 Multi-Topic Mentor")
 
+# --- Custom CSS for styling ---
+st.markdown("""
+<style>
+    body {
+        background: linear-gradient(135deg, #1f2937, #111827);
+        color: #e0e7ff;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    h1, h2, h3 {
+        text-align: center;
+        color: #00FFFF;
+        text-shadow: 0 0 12px #00FFFFaa;
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+    }
+    .mentor-columns div {
+        text-align: center;
+        padding: 10px 0;
+        font-weight: 600;
+        font-size: 1rem;
+        border-radius: 8px;
+        user-select: none;
+    }
+    .mentor-columns .col1 { color: #00FF00; }   /* Green */
+    .mentor-columns .col2 { color: #FFA500; }   /* Orange */
+    .mentor-columns .col3 { color: #1E90FF; }   /* Dodger Blue */
+    .mentor-columns .col4 { color: #8A2BE2; }   /* BlueViolet */
+    .mentor-columns .col5 { color: #FFD700; }   /* Gold */
+    .mentor-columns .col6 { color: #FF4500; }   /* OrangeRed */
+    .selectbox-container {
+        max-width: 400px;
+        margin: 0 auto 15px auto;
+    }
+    .slider-container {
+        max-width: 400px;
+        margin: 15px auto 20px auto;
+    }
+    .input-container {
+        max-width: 700px;
+        margin: 10px auto 30px auto;
+    }
+    .button-row {
+        text-align: center;
+        margin-bottom: 30px;
+    }
+    button.stButton > button {
+        background: linear-gradient(90deg, #00FFFF, #00CCFF);
+        border: none;
+        padding: 12px 30px;
+        color: #111;
+        font-weight: 700;
+        border-radius: 25px;
+        box-shadow: 0 0 12px #00FFFFcc;
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    button.stButton > button:hover {
+        transform: scale(1.1);
+        box-shadow: 0 0 20px #00FFFFee;
+    }
+    .output-container {
+        max-width: 700px;
+        margin: 0 auto 40px auto;
+        background: rgba(0, 255, 255, 0.1);
+        padding: 20px;
+        border-radius: 15px;
+        box-shadow: 0 0 12px #00FFFF55;
+        white-space: pre-wrap;
+        font-size: 1.1rem;
+        line-height: 1.4;
+        color: #e0f7ff;
+        min-height: 80px;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# --- Title and Mentor Labels ---
+st.title("🧠 Multi-Topic Mentor")
 
-st.markdown("### Select your Mentor:")
-col1, col2, col3, col4, col5, col6 = st.columns(6)
-with col1: st.write("🟢 Python")
-with col2: st.write("🟠 ML")
-with col3: st.write("🔵 DL")
-with col4: st.write("🟣 Stats")
-with col5: st.write("🟡 Data_Anaylasis")
-with col6: st.write("🔴 sql and powerbi")
+st.markdown('<div class="mentor-columns" style="display:flex; justify-content: space-around; margin-bottom:15px;">'
+            '<div class="col1">🟢 Python</div>'
+            '<div class="col2">🟠 ML</div>'
+            '<div class="col3">🔵 DL</div>'
+            '<div class="col4">🟣 Stats</div>'
+            '<div class="col5">🟡 Data_Analysis</div>'
+            '<div class="col6">🔴 SQL & PowerBI</div>'
+            '</div>', unsafe_allow_html=True)
 
+# --- Mentor selectbox ---
+st.markdown('<div class="selectbox-container">', unsafe_allow_html=True)
 mentor_type = st.selectbox("Choose a mentor:", ["", "python", "machine_learning", "deep_learning", "stats", "data_anaylasis", "sql and powerbi"])
+st.markdown('</div>', unsafe_allow_html=True)
 
 if mentor_type:
     st.subheader(f"🧠 {mentor_type.upper()} Mentor Chat")
+
+    st.markdown('<div class="slider-container">', unsafe_allow_html=True)
     experience = st.slider("Your experience (in years):", 0, 20, 1)
-    user_input = st.text_input("Ask your question:")
+    st.markdown('</div>', unsafe_allow_html=True)
 
+    st.markdown('<div class="input-container">', unsafe_allow_html=True)
+    user_input = st.text_input("Ask your question:")
+    st.markdown('</div>', unsafe_allow_html=True)
 
     output_container = st.empty()
 
@@ -41,7 +125,7 @@ if mentor_type:
         model = HuggingFaceEndpoint(repo_id="meta-llama/Llama-3.3-70B-Instruct", provider="nebius", temperature=0.5, max_new_tokens=150, task="conversational")
     elif mentor_type == "sql and powerbi":
         model = HuggingFaceEndpoint(repo_id="meta-llama/Meta-Llama-3-70B-Instruct", provider="hyperbolic", temperature=0.5, max_new_tokens=150, task="conversational")
-    
+
     chat_model = ChatHuggingFace(
         llm=model,
         repo_id=model.repo_id,
@@ -51,7 +135,8 @@ if mentor_type:
         task="conversational"
     )
 
-
+    # Buttons row
+    st.markdown('<div class="button-row">', unsafe_allow_html=True)
     if st.button("Ask") and user_input:
         prompt = ChatPromptTemplate.from_messages([
             SystemMessagePromptTemplate.from_template(
@@ -69,3 +154,4 @@ if mentor_type:
 
     if st.button("Clear Output"):
         output_container.empty()
+    st.markdown('</div>', unsafe_allow_html=True)