Create app.py

app.py

@@ -0,0 +1,134 @@
+import os
+import gradio as gr
+from groq import Groq
+
+# Create Groq client
+client = Groq(
+    api_key=os.environ.get("GROQ_API_KEY")
+)
+
+def chat_fn(user_message, history):
+    messages = []
+
+    for user, bot in history:
+        messages.append({"role": "user", "content": user})
+        messages.append({"role": "assistant", "content": bot})
+
+    messages.append({"role": "user", "content": user_message})
+
+    response = client.chat.completions.create(
+        model="llama-3.3-70b-versatile",
+        messages=messages
+    )
+
+    bot_reply = response.choices[0].message.content
+    history.append((user_message, bot_reply))
+
+    return history, history
+
+custom_css = """
+body {
+    background-color: #f8fafc;
+    color: #0f172a;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.gradio-container {
+    width: 100% !important;
+    max-width: 1200px !important;
+    margin: auto;
+    padding: 20px;
+}
+
+h3 {
+    text-align: center;
+    font-weight: 600;
+    color: #0f172a;
+    margin-bottom: 16px;
+}
+
+#chatbot {
+    background-color: #ffffff;
+    border-radius: 16px;
+    padding: 20px;
+    min-height: 65vh;
+    border: 1px solid #e5e7eb;
+}
+
+.message {
+    font-size: 16px;
+    line-height: 1.6;
+    padding: 14px 16px;
+    margin-bottom: 12px;
+    max-width: 85%;
+}
+
+.message.user {
+    background-color: #e0e7ff;
+    color: #1e3a8a;
+    margin-left: auto;
+    border-radius: 14px 14px 4px 14px;
+}
+
+.message.bot {
+    background-color: #f1f5f9;
+    color: #0f172a;
+    margin-right: auto;
+    border-radius: 14px 14px 14px 4px;
+}
+
+textarea {
+    background-color: #ffffff !important;
+    color: #0f172a !important;
+    border: 1px solid #d1d5db !important;
+    border-radius: 12px !important;
+    padding: 14px !important;
+    font-size: 16px !important;
+}
+
+textarea::placeholder {
+    color: #6b7280;
+}
+
+button {
+    background-color: #2563eb !important;
+    color: #ffffff !important;
+    border-radius: 12px !important;
+    font-size: 15px !important;
+    border: none !important;
+}
+
+button:hover {
+    background-color: #1d4ed8 !important;
+}
+
+/* Mobile support */
+@media (max-width: 640px) {
+    .message {
+        max-width: 100%;
+        font-size: 15px;
+    }
+
+    #chatbot {
+        min-height: 60vh;
+    }
+}
+"""
+
+with gr.Blocks(css=custom_css) as demo:
+    gr.Markdown("### Groq Chat")
+
+    chatbot = gr.Chatbot(elem_id="chatbot")
+    state = gr.State([])
+
+    user_input = gr.Textbox(
+        placeholder="Type a message"
+    )
+
+    user_input.submit(
+        chat_fn,
+        inputs=[user_input, state],
+        outputs=[chatbot, state]
+    )
+
+demo.launch()