import os import requests import gradio as gr # Groq API Configuration groq_api_key = os.getenv("GROQ_API_KEY") url = "https://api.groq.com/openai/v1/chat/completions" headers = { "Authorization": f"Bearer {groq_api_key}", "Content-Type": "application/json" } # System role for the assistant system_role = "You are a Product Manager and you will answer questions as a Product Manager." # Simulated user database user_db = {"admin@example.com": "password123"} # Authentication logic def authenticate(email, password, mode): if mode == "Login": if email in user_db and user_db[email] == password: return gr.update(visible=True), gr.update(visible=False), "", "✅ Login successful" else: return gr.update(visible=False), gr.update(visible=True), "❌ Invalid email or password", "" elif mode == "Sign Up": if email in user_db: return gr.update(visible=False), gr.update(visible=True), "❌ Email already exists", "" user_db[email] = password return gr.update(visible=True), gr.update(visible=False), "", "✅ Account created" # Chat logic using OpenAI-style message format def chat(user_input, history): if not history: history = [] messages = [{"role": "system", "content": system_role}] + history messages.append({"role": "user", "content": user_input}) body = { "model": "meta-llama/llama-4-maverick-17b-128e-instruct", "messages": messages } response = requests.post(url, headers=headers, json=body) if response.status_code == 200: reply = response.json()['choices'][0]['message']['content'] history.append({"role": "user", "content": user_input}) history.append({"role": "assistant", "content": reply}) return history, history else: error = f"❌ Error: {response.status_code} - {response.text}" history.append({"role": "user", "content": user_input}) history.append({"role": "assistant", "content": error}) return history, history # Reset chat history def reset(): return [], [] # Toggle password visibility def toggle_password(view): return gr.update(type="text" if view else "password") # Gradio UI with gr.Blocks(css=""" #chat-area { height: 500px; overflow-y: auto; background: #F9FAFB; border: 1px solid #D1D5DB; border-radius: 8px; padding: 10px; } #send-chat, #reset-chat, #auth-btn { background-color: #2563EB !important; color: white !important; border-radius: 6px; padding: 10px 16px; font-weight: 600; } #send-chat:hover, #reset-chat:hover, #auth-btn:hover { background-color: #1D4ED8 !important; } """) as demo: gr.Markdown("## 💬 Product Manager Chatbot") # Login/Signup UI with gr.Column(visible=True) as login_section: gr.Markdown("### 🔐 Login or Sign Up to Continue") email = gr.Textbox(label="Email", placeholder="you@example.com") password = gr.Textbox(label="Password", type="password") show_password = gr.Checkbox(label="Show password") show_password.change(fn=toggle_password, inputs=show_password, outputs=password) mode = gr.Radio(["Login", "Sign Up"], value="Login", label="Mode") auth_btn = gr.Button("Submit", elem_id="auth-btn") auth_error = gr.Textbox(visible=True, interactive=False, show_label=False) auth_success = gr.Textbox(visible=True, interactive=False, show_label=False) # Chat UI with gr.Column(visible=False) as chat_section: chatbot = gr.Chatbot(label="Chat", elem_id="chat-area", type="messages") with gr.Row(): user_input = gr.Textbox(show_label=False, placeholder="Ask a product question...", lines=1, scale=8) send_btn = gr.Button("Send", elem_id="send-chat", scale=1) reset_btn = gr.Button("Reset Chat", elem_id="reset-chat") state = gr.State([]) # Button actions auth_btn.click(fn=authenticate, inputs=[email, password, mode], outputs=[chat_section, login_section, auth_error, auth_success]) send_btn.click(fn=chat, inputs=[user_input, state], outputs=[chatbot, state]) user_input.submit(fn=chat, inputs=[user_input, state], outputs=[chatbot, state]) reset_btn.click(fn=reset, outputs=[chatbot, state]) # Launch app demo.launch()