pages/GenAI.py

import streamlit as st
import os
from langchain_huggingface import HuggingFaceEndpoint, ChatHuggingFace
from langchain_core.messages import HumanMessage, SystemMessage

# Load Hugging Face token from environment
hf = os.getenv('HF_TOKEN')
os.environ['HUGGINGFACEHUB_API_TOKEN'] = hf
os.environ['HF_TOKEN'] = hf

# --- Page Config ---
st.set_page_config(page_title="GenAI Mentor", layout="wide")

# --- Custom CSS Styling ---
st.markdown("""
    <style>
    body {
        background-color: #1e1e2f;
        font-family: 'Segoe UI', sans-serif;
    }
    .main {
        background: linear-gradient(to right, #3e32a8, #80ffe0);
        padding: 2rem;
        border-radius: 12px;
    }
    h1, h2, h3, p, label {
        color: white !important;
        text-align: center;
    }
    .stTextInput>div>div>input {
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 0.5rem;
        font-size: 16px;
        width: 100%;
    }
    .stButton>button {
        background-color: #6a00ff;
        color: white;
        padding: 0.6rem 1.2rem;
        font-size: 16px;
        border: none;
        border-radius: 10px;
        transition: 0.3s ease;
    }
    .stButton>button:hover {
        background-color: #5300e8;
    }
    .chat-box {
        background-color: #ffffff15;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1rem;
        color: white;
        line-height: 1.6;
    }
    .user-msg {
        color: #e0e0e0;
        font-weight: 600;
    }
    .bot-msg {
        color: #ffffff;
        margin-top: 0.3rem;
    }
    hr {
        border: 0;
        height: 1px;
        background: #ffffff30;
        margin: 1.5rem 0;
    }
    </style>
""", unsafe_allow_html=True)

# --- Title ---
st.title("🤖 GenAI Mentor Chat")
st.markdown("<p style='font-size:18px;'>Empowering your AI journey—one question at a time.</p>", unsafe_allow_html=True)

# --- Sidebar ---
st.sidebar.title("Mentor Preferences")
experience_label = st.sidebar.selectbox("Choose your experience level:", ["Beginner", "Intermediate", "Expert"])

# --- Model Initialization ---
genai_skeleton = HuggingFaceEndpoint(
    repo_id='google/gemma-2-9b-it',
    provider='nebius',
    temperature=0.7,
    max_new_tokens=150,
    task='conversational'
)

genai_chat = ChatHuggingFace(
    llm=genai_skeleton,
    repo_id='google/gemma-2-9b-it',
    provider='nebius',
    temperature=0.7,
    max_new_tokens=150,
    task='conversational'
)

# --- Session Key ---
PAGE_KEY = "genai_chat_history"
if PAGE_KEY not in st.session_state:
    st.session_state[PAGE_KEY] = []

# --- Chat Form ---
with st.form(key="chat_form"):
    st.markdown("#### 💬 Ask your question:")
    user_input = st.text_input("", placeholder="Type your Generative AI question here...")
    submit = st.form_submit_button("Send")

# --- Handle Submission ---
if submit and user_input:
    system_prompt = (
        f"Act as a Generative AI mentor with {experience_label} expertise. "
        f"Explain concepts in a friendly tone, within 150 words. "
        f"If the question is not related to Generative AI, politely say it's out of scope."
    )
    messages = [SystemMessage(content=system_prompt), HumanMessage(content=user_input)]
    result = genai_chat.invoke(messages)
    st.session_state[PAGE_KEY].append((user_input, result.content))

# --- Display Chat History ---
st.subheader("🗨️ Conversation History")
for user, bot in reversed(st.session_state[PAGE_KEY]):
    st.markdown(f"""
        <div class="chat-box">
            <div class="user-msg">🧑‍💻 <strong>You:</strong> {user}</div>
            <div class="bot-msg">🤖 <strong>Mentor:</strong> {bot}</div>
        </div>
    """, unsafe_allow_html=True)