Create app.py

app.py

@@ -0,0 +1,147 @@
+import os
+import gradio as gr
+from groq import Groq
+
+# -----------------------------
+# Groq Client Initialization
+# -----------------------------
+def get_groq_client():
+    api_key = os.getenv("GROQ_API_KEY")
+    if not api_key:
+        raise RuntimeError("GROQ_API_KEY not set")
+    return Groq(api_key=api_key)
+
+client = get_groq_client()
+
+# -----------------------------
+# Model Inference Logic
+# -----------------------------
+def chat_with_groq(user_message, history):
+    if not user_message or not user_message.strip():
+        return history, ""
+
+    history.append((user_message, "⚡ Groq is thinking..."))
+
+    messages = []
+    for user, assistant in history[:-1]:
+        messages.append({"role": "user", "content": user})
+        messages.append({"role": "assistant", "content": assistant})
+
+    messages.append({"role": "user", "content": user_message})
+
+    try:
+        chat_completion = client.chat.completions.create(
+            model="llama-3.3-70b-versatile",
+            messages=messages,
+        )
+
+        response = chat_completion.choices[0].message.content
+        history[-1] = (user_message, response)
+
+    except Exception as e:
+        history[-1] = (user_message, f"⚠️ Error: {str(e)}")
+
+    return history, ""
+
+# -----------------------------
+# Clear Chat Logic
+# -----------------------------
+def clear_chat():
+    return [], ""
+
+# -----------------------------
+# Neon CSS
+# -----------------------------
+custom_css = """
+body {
+    background: radial-gradient(circle at top, #020617, #020617);
+}
+
+.gradio-container {
+    max-width: 900px !important;
+    margin: auto;
+}
+
+h1 {
+    text-align: center;
+    font-size: 2.6rem;
+    background: linear-gradient(90deg, #38bdf8, #22d3ee, #818cf8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.chatbot {
+    background: rgba(15, 23, 42, 0.75);
+    backdrop-filter: blur(16px);
+    border-radius: 18px;
+    box-shadow: 0 0 35px rgba(56, 189, 248, 0.2);
+}
+
+.message {
+    animation: fadeSlide 0.35s ease-in-out;
+}
+
+textarea {
+    background: rgba(2, 6, 23, 0.85) !important;
+    color: #e5e7eb !important;
+    border: 1px solid #38bdf8 !important;
+    border-radius: 14px !important;
+}
+
+textarea:focus {
+    box-shadow: 0 0 18px #38bdf8 !important;
+}
+
+button {
+    background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
+    color: #020617 !important;
+    font-weight: 800 !important;
+    border-radius: 14px !important;
+    box-shadow: 0 0 22px rgba(56, 189, 248, 0.7);
+}
+
+button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 35px rgba(56, 189, 248, 1);
+}
+"""
+
+# -----------------------------
+# Gradio UI
+# -----------------------------
+with gr.Blocks(css=custom_css, title="Groq Neon ChatBot") as demo:
+    gr.Markdown("# ⚡ GROQ NEON CHATBOT")
+    gr.Markdown("### Ultra-fast AI • Cyber UI • LLaMA 3.3")
+
+    chatbot = gr.Chatbot(elem_classes="chatbot")
+    state = gr.State([])
+
+    with gr.Row():
+        txt = gr.Textbox(
+            placeholder="Ask anything…",
+            show_label=False,
+            scale=4,
+        )
+        send = gr.Button("🚀 Send", scale=1)
+        clear = gr.Button("🧹 Clear", scale=1)
+
+    send.click(
+        chat_with_groq,
+        inputs=[txt, state],
+        outputs=[chatbot, txt],
+    )
+
+    txt.submit(
+        chat_with_groq,
+        inputs=[txt, state],
+        outputs=[chatbot, txt],
+    )
+
+    clear.click(
+        clear_chat,
+        outputs=[chatbot, txt],
+        show_progress=False,
+    )
+
+if __name__ == "__main__":
+    demo.launch()