| import os |
| import streamlit as st |
| import google.generativeai as genai |
| import datetime |
| import time |
| import base64 |
|
|
| |
| from api_key import api_key |
| genai.configure(api_key=api_key) |
|
|
| SYSTEM_PROMPT_DETAILED = """ |
| You are Sami-CLearn Hub Assistant your name is Sami and the website you are assistant with its name C learn-hub — a friendly assistant that helps students choose the best learning track |
| ( AI, Data Science, Web Development, Mobile Development, Cybersecurity, etc ). |
| |
| Your job: |
| - Answer questions in a clear, helpful and friendly tone. |
| - Provide roadmaps, steps, tools, technologies. |
| - Explain code simply. When giving code, use Markdown fenced code blocks. |
| - Help with career paths, learning methods, and problem-solving. |
| - If the user asks about Sami-CLearn Hub website features, explain them. |
| |
| Keep answers helpful, structured, and correct. |
| """ |
|
|
| SYSTEM_PROMPT_SHORT = """ |
| You are Sami-CLearn Hub Assistant — a helpful assistant that guides students in choosing tech tracks and learning paths gives short and clear answer for the specific thing that user ask for. |
| """ |
|
|
| SYSTEM_PROMPT = SYSTEM_PROMPT_DETAILED |
|
|
| model = genai.GenerativeModel( |
| model_name="models/gemini-2.5-flash", |
| system_instruction=SYSTEM_PROMPT |
| ) |
|
|
|
|
| |
| st.set_page_config(page_title="Sami-CLearn Hub Assistant", page_icon='robot.png', layout="wide", initial_sidebar_state="expanded") |
|
|
|
|
| |
| st.markdown(""" |
| <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;700&display=swap" rel="stylesheet"> |
| """, unsafe_allow_html=True) |
|
|
| |
| def load_base64_image(image_path): |
| with open(image_path, "rb") as img: |
| return base64.b64encode(img.read()).decode() |
|
|
| setting_icon = load_base64_image("setting.png") |
| clear_icon = load_base64_image("clear.png") |
| export_icon = load_base64_image("export.png") |
|
|
| |
|
|
| st.markdown( |
| f""" |
| <style> |
| /* Hide default role icons */ |
| div.stChatMessage > div:first-child {{ display:none; }} |
| |
| /* User message styling */ |
| div.stChatMessage > div.stChatMessage__role-user {{ |
| justify-content: flex-end !important; |
| text-align: right; |
| background-color: #356BA0; |
| color: white; |
| padding: 10px 15px; |
| border-radius: 20px 20px 0 20px; |
| margin: 5px 0; |
| max-width: 70%; |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); |
| overflow: hidden; |
| }} |
| |
| /* Assistant message styling */ |
| div.stChatMessage > div.stChatMessage__role-assistant {{ |
| justify-content: flex-start !important; |
| text-align: left; |
| background-color: #f1f0f0; |
| color: #000; |
| padding: 10px 15px; |
| border-radius: 20px 20px 20px 0; |
| margin: 5px 0; |
| max-width: 70%; |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); |
| overflow: hidden; |
| }} |
| |
| /* Chat input glow animation — KEEPING STYLE, NO ANIMATION */ |
| .stTextInput>div>input:focus {{ |
| box-shadow: 0 0 10px #356BA0; |
| border-radius: 8px; |
| }} |
| |
| /* Title gradient text */ |
| .sami-title {{ |
| font-size: 2.8rem; |
| font-family: 'Bai Jamjuree', sans-serif !important; |
| background: linear-gradient(to right, #22d3ee, #f472b6, #22d3ee) !important; |
| -webkit-background-clip: text !important; |
| -webkit-text-fill-color: transparent !important; |
| color: transparent !important; |
| font-weight: 700; |
| margin: 0; |
| }} |
| |
| |
| .subtitle {{ |
| font-family: 'Bai Jamjuree', sans-serif !important; |
| color: gray; |
| }} |
| |
| /* Chat send button gradient */ |
| div.stTextInput>div>button {{ |
| background: linear-gradient(135deg, #00c8bd 0%, #cc74b6 100%, #000000); |
| border-radius: 50%; |
| padding: 8px; |
| border: none; |
| }} |
| |
| div.stTextInput>div>button svg {{ |
| fill: #0E0E0E !important; |
| width: 24px; |
| height: 24px; |
| }} |
| |
| div.stTextInput>div>button:hover {{ |
| transform: scale(1.1); |
| }} |
| |
| div.stButton > button, |
| div.stCheckbox > label, |
| div.stCheckbox > div {{ |
| font-family: 'Bai Jamjuree', sans-serif !important; |
| }} |
| |
| /* Sidebar buttons */ |
| div.stButton > button:first-child {{ |
| background: linear-gradient(135deg, #00c8bd 0%, #cc74b6 100%, #000000); |
| color: white; |
| font-weight: bold; |
| border: none; |
| border-radius: 8px; |
| padding: 8px 16px; |
| cursor: pointer; |
| position: relative; |
| }} |
| |
| div.stButton > button:first-child::before {{ |
| content: ""; |
| background: url(data:image/png;base64,{clear_icon}) no-repeat center; |
| opacity: 0.3; |
| position: absolute; |
| left: 10px; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 22px; |
| height: 22px; |
| }} |
| |
| div.stButton > button:last-child {{ |
| background: linear-gradient(135deg, #00c8bd 0%, #cc74b6 100%, #000000); |
| color: white; |
| font-weight: bold; |
| border: none; |
| border-radius: 8px; |
| padding: 8px 16px; |
| cursor: pointer; |
| position: relative; |
| }} |
| |
| div.stButton > button:last-child::before {{ |
| content: ""; |
| background: url(data:image/png;base64,{export_icon}) no-repeat center; |
| opacity: 0.3; |
| position: absolute; |
| left: 10px; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 22px; |
| height: 22px; |
| }} |
| |
| [data-testid="collapsed-control"] {{ |
| all: unset; |
| }} |
| |
| [data-testid="collapsed-control"] svg {{ |
| display: inline-block !important; |
| width: 24px; |
| height: 24px; |
| fill: #0E0E0E; |
| }} |
| |
| [data-testid="stCheckbox"] input[type="checkbox"] {{ |
| accent-color: #00c8bd !important; |
| width: 20px; |
| height: 20px; |
| }} |
| </style> |
| """, |
| unsafe_allow_html=True |
| ) |
|
|
| |
| col1, col2 = st.columns([0.12, 0.88]) |
| with col1: |
| if os.path.exists("robot.png"): |
| st.image("robot.png", width=72) |
| else: |
| st.markdown("<div style='font-size:40px;'>🤖</div>", unsafe_allow_html=True) |
| with col2: |
| st.markdown("<div class='sami-title'>Sami-CLearn Hub Assistant</div>", unsafe_allow_html=True) |
| st.markdown("<p class='subtitle' style='margin-top:4px;'>Ask about site help, track recommendations, or courses.</p>", unsafe_allow_html=True) |
|
|
| |
| if "messages" not in st.session_state: |
| st.session_state.messages = [] |
|
|
| |
| with st.sidebar: |
| st.markdown( |
| f""" |
| <div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;"> |
| <img src="data:image/png;base64,{setting_icon}" width="26" height="26"> |
| <h3 style="margin:0; font-family: 'Bai Jamjuree', sans-serif;">Settings</h3> |
| </div> |
| """, |
| unsafe_allow_html=True |
| ) |
|
|
| use_short_prompt = st.checkbox("Use short system prompt?", value=False) |
|
|
| if st.button("Clear Conversation", key="clear_btn"): |
| st.session_state.messages = [] |
|
|
| if st.button("Export Chat", key="export_btn"): |
| if st.session_state.messages: |
| chat_text = "" |
| for m in st.session_state.messages: |
| chat_text += f"{m['role'].upper()}:\n{m['content']}\n\n" |
| filename = f"Sami_chat_{datetime.datetime.now().strftime('%Y%m%d_%H%M%S')}.txt" |
| st.download_button(label="Download Chat", data=chat_text, file_name=filename, mime="text/plain") |
| else: |
| st.warning("No messages to export!") |
|
|
| |
| for msg in st.session_state.messages: |
| alignment = "user" if msg["role"] == "user" else "assistant" |
| with st.chat_message(alignment): |
| st.markdown(msg["content"], unsafe_allow_html=True) |
|
|
| |
| user_input = st.chat_input("Type your question...") |
|
|
| if user_input: |
| st.session_state.messages.append({"role": "user", "content": user_input}) |
|
|
| with st.chat_message("user"): |
| st.markdown(user_input, unsafe_allow_html=True) |
|
|
| model.system_instruction = SYSTEM_PROMPT_SHORT if use_short_prompt else SYSTEM_PROMPT_DETAILED |
|
|
| messages_for_llm = [] |
| for m in st.session_state.messages: |
| messages_for_llm.append({"role": "user" if m["role"]=="user" else "model", "parts": m["content"]}) |
|
|
| response = model.generate_content(messages_for_llm) |
| bot_response = response.text |
|
|
| with st.chat_message("assistant"): |
| placeholder = st.empty() |
| displayed_text = "" |
| for char in bot_response: |
| displayed_text += char |
| placeholder.markdown(displayed_text, unsafe_allow_html=True) |
| time.sleep(0.01) |
|
|
| st.session_state.messages.append({"role": "assistant", "content": bot_response}) |
|
|
