| | import os |
| | import gradio as gr |
| | from groq import Groq |
| |
|
| | |
| | api_key = os.environ.get("GROQ_API_KEY") |
| | client = Groq(api_key=api_key) |
| |
|
| | |
| | custom_css = """ |
| | /* Standard Layout */ |
| | .gradio-container { |
| | max-width: 100% !important; |
| | height: 95vh !important; |
| | margin: 0 !important; |
| | padding: 10px 20px !important; |
| | } |
| | |
| | #chatbot-window { |
| | height: 70vh !important; |
| | border-radius: 12px; |
| | border: 1px solid #e0e0e0; |
| | background: white; |
| | } |
| | |
| | /* --- MOBILE RESPONSIVE LOGIC --- */ |
| | @media (max-width: 768px) { |
| | .gradio-container { |
| | padding: 5px !important; |
| | height: auto !important; |
| | } |
| | |
| | #chatbot-window { |
| | height: 60vh !important; |
| | } |
| | |
| | .sidebar-panel { |
| | min-width: 100% !important; |
| | margin-top: 20px; |
| | } |
| | |
| | h1 { font-size: 1.5rem !important; } |
| | } |
| | |
| | /* Dark Mode Overrides */ |
| | .dark #chatbot-window { |
| | background: #1a1a1a !important; |
| | border-color: #444 !important; |
| | } |
| | |
| | #system-prompt-container textarea, .scroll-input textarea { |
| | height: 45px !important; |
| | max-height: 45px !important; |
| | overflow-y: auto !important; |
| | resize: none !important; |
| | } |
| | |
| | #settings-btn { |
| | width: 44px !important; |
| | height: 44px !important; |
| | min-width: 44px !important; |
| | border-radius: 8px !important; |
| | background: #f0f0f0 !important; |
| | border: 1px solid #ddd !important; |
| | display: flex !important; |
| | align-items: center !important; |
| | justify-content: center !important; |
| | font-size: 20px !important; |
| | cursor: pointer !important; |
| | } |
| | |
| | .sidebar-panel { |
| | background-color: #f9f9f9; |
| | padding: 15px !important; |
| | border-radius: 12px; |
| | border: 1px solid #ddd; |
| | min-width: 300px !important; |
| | } |
| | |
| | .dark .sidebar-panel { |
| | background-color: #2d2d2d !important; |
| | border-color: #444 !important; |
| | } |
| | """ |
| |
|
| | |
| | def chat_with_groq(message, history, model, temperature, system_prompt): |
| | cleaned_messages = [{"role": "system", "content": system_prompt}] |
| | for msg in history: |
| | cleaned_messages.append({"role": msg["role"], "content": msg["content"]}) |
| | cleaned_messages.append({"role": "user", "content": message}) |
| | |
| | try: |
| | response = client.chat.completions.create( |
| | model=model, |
| | messages=cleaned_messages, |
| | temperature=temperature, |
| | stream=True |
| | ) |
| | partial_message = "" |
| | for chunk in response: |
| | if chunk.choices[0].delta.content: |
| | partial_message += chunk.choices[0].delta.content |
| | yield partial_message |
| | except Exception as e: |
| | yield f"⚠️ API Error: {str(e)}" |
| |
|
| | def toggle_dark_mode(current_is_dark): |
| | new_state = not current_is_dark |
| | new_label = "☀️ Light Mode" if new_state else "🌙 Dark Mode" |
| | return new_label, new_state |
| |
|
| | toggle_dark_js = """() => { document.body.classList.toggle('dark'); }""" |
| |
|
| | |
| | with gr.Blocks() as demo: |
| | sidebar_state = gr.State(False) |
| | dark_state = gr.State(False) |
| |
|
| | |
| | with gr.Row(): |
| | with gr.Column(scale=20): |
| | gr.Markdown("# 🤖 SageBot | *Developed by Hassan Naseer*") |
| | |
| | with gr.Column(scale=1, min_width=50): |
| | settings_btn = gr.Button("⚙️", elem_id="settings-btn") |
| | |
| | with gr.Row(): |
| | |
| | with gr.Column(scale=4) as chat_col: |
| | chatbot = gr.Chatbot(elem_id="chatbot-window") |
| | with gr.Row(): |
| | msg_input = gr.Textbox( |
| | placeholder="Ask me anything...", |
| | container=False, |
| | scale=9, |
| | elem_classes="scroll-input" |
| | ) |
| | submit_btn = gr.Button("Send", variant="primary", scale=1, min_width=80) |
| | |
| | |
| | with gr.Column(scale=1, visible=False, elem_classes="sidebar-panel") as sidebar_col: |
| | |
| | dark_btn = gr.Button("🌙 Dark Mode", variant="secondary") |
| | |
| | model_choice = gr.Dropdown( |
| | choices=["llama-3.3-70b-versatile", "llama-3.1-8b-instant"], |
| | value="llama-3.3-70b-versatile", label="Select Model" |
| | ) |
| | temp = gr.Slider(0.0, 1.0, 0.7, label="Temperature") |
| | sys_msg = gr.Textbox( |
| | value="You are a professional assistant.", |
| | label="System Prompt", |
| | lines=1, |
| | elem_id="system-prompt-container" |
| | ) |
| |
|
| | |
| | gr.HTML(""" |
| | <div style="text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;"> |
| | <p style="font-size: 0.85em; color: #555; margin-bottom: 12px;">Connect with the developer</p> |
| | <div style="display: flex; justify-content: center; gap: 20px; align-items: center;"> |
| | |
| | <a href="https://www.linkedin.com/in/hassan-naseer-web-developer" target="_blank"> |
| | <svg width="28" height="28" viewBox="0 0 24 24" fill="#0077b5"> |
| | <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/> |
| | </svg> |
| | </a> |
| | |
| | <a href="https://wa.me/923099702809" target="_blank"> |
| | <svg width="55" height="55" viewBox="0 0 24 24" fill="#25D366"> |
| | <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766 0-3.18-2.587-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793 0-.852.448-1.271.607-1.442.159-.171.348-.214.464-.214.116 0 .232.001.333.006.101.005.237-.038.37.284.144.35.493 1.203.536 1.29.043.087.072.188.014.304-.058.116-.087.188-.174.289-.087.101-.184.225-.261.304-.093.097-.19.202-.082.387.108.185.479.791 1.029 1.282.709.633 1.308.83 1.493.922.185.093.294.077.404-.051.11-.128.471-.548.598-.736.127-.188.253-.159.426-.096.173.063 1.096.516 1.284.609.188.093.312.139.356.215.044.076.044.439-.1.844z"/> |
| | </svg> |
| | </a> |
| | |
| | <a href="mailto:hk4960498@gmail.com" target="_blank"> |
| | <svg width="28" height="28" viewBox="0 0 24 24" fill="#555"> |
| | <path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/> |
| | </svg> |
| | </a> |
| | |
| | </div> |
| | </div> |
| | """) |
| |
|
| | |
| | settings_btn.click(lambda s: (gr.update(visible=not s), not s), [sidebar_state], [sidebar_col, sidebar_state]) |
| | dark_btn.click(toggle_dark_mode, [dark_state], [dark_btn, dark_state], js=toggle_dark_js) |
| |
|
| | def user_turn(msg, hist): |
| | if not msg: return "", hist |
| | hist.append({"role": "user", "content": msg}) |
| | return "", hist |
| |
|
| | def bot_turn(hist, m, t, s): |
| | user_msg = hist[-1]["content"] |
| | gen = chat_with_groq(user_msg, hist[:-1], m, t, s) |
| | hist.append({"role": "assistant", "content": ""}) |
| | for chunk in gen: |
| | hist[-1]["content"] = chunk |
| | yield hist |
| |
|
| | msg_input.submit(user_turn, [msg_input, chatbot], [msg_input, chatbot], queue=False).then( |
| | bot_turn, [chatbot, model_choice, temp, sys_msg], chatbot |
| | ) |
| | submit_btn.click(user_turn, [msg_input, chatbot], [msg_input, chatbot], queue=False).then( |
| | bot_turn, [chatbot, model_choice, temp, sys_msg], chatbot |
| | ) |
| |
|
| | if __name__ == "__main__": |
| | demo.launch(css=custom_css) |
