Upload 3 files

README.md

@@ -1,12 +1,88 @@
 ---
-title: LangGraph Chatbot
-emoji: 🌍
+title: AI Assistant — LangGraph + Groq
+emoji: ⚡
 colorFrom: indigo
-colorTo: red
+colorTo: purple
 sdk: gradio
-sdk_version: 6.11.0
+sdk_version: "4.44.0"
 app_file: app.py
 pinned: false
+license: mit
+short_description: General-purpose AI chatbot built with LangGraph and Groq
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ⚡ AI Assistant — LangGraph + Groq
+
+A sleek, production-ready general-purpose chatbot built with:
+
+- 🧠 **[LangGraph](https://github.com/langchain-ai/langgraph)** — stateful agent graph for conversation flow
+- ⚡ **[Groq](https://groq.com/)** — blazing-fast LLM inference (llama-3.3-70b-versatile)
+- 🎨 **[Gradio](https://gradio.app/)** — beautiful, interactive UI
+
+---
+
+## 🚀 Setup
+
+### Run locally
+
+```bash
+git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+cd YOUR_SPACE_NAME
+pip install -r requirements.txt
+export GROQ_API_KEY=your_key_here
+python app.py
+```
+
+### Deploy on Hugging Face Spaces
+
+1. Create a new Space on [huggingface.co/spaces](https://huggingface.co/spaces) (SDK: Gradio)
+2. Push this repo to that Space
+3. Go to **Settings → Variables and Secrets** → add `GROQ_API_KEY`
+4. Your Space will build and launch automatically ✅
+
+---
+
+## 🔑 API Key
+
+Get your free Groq API key at [console.groq.com](https://console.groq.com).
+
+---
+
+## 🗂 Project Structure
+
+```
+├── app.py            # Main app — LangGraph graph + Gradio UI
+├── requirements.txt  # Dependencies
+└── README.md         # This file
+```
+
+---
+
+## 🧩 How it works
+
+```
+User message
+     │
+     ▼
+┌────────────────┐
+│  Gradio UI     │  ← Converts chat history to LangChain messages
+└────────┬───────┘
+         │
+         ▼
+┌────────────────┐
+│  LangGraph     │  ← StateGraph with a single `chatbot` node
+│  StateGraph    │
+└────────┬───────┘
+         │
+         ▼
+┌────────────────┐
+│  Groq LLM      │  ← llama-3.3-70b-versatile (fast & smart)
+└────────────────┘
+         │
+         ▼
+    AI Response
+```
+
+---
+
+Built with ❤️ using LangGraph + Groq + Gradio

app.py

@@ -0,0 +1,334 @@
+import os
+import gradio as gr
+from typing import Annotated
+from typing_extensions import TypedDict
+from langgraph.graph import StateGraph, START, END
+from langgraph.graph.message import add_messages
+from langchain_groq import ChatGroq
+from langchain_core.messages import HumanMessage, AIMessage, SystemMessage
+
+# ── State ────────────────────────────────────────────────────────────────────
+
+class State(TypedDict):
+    messages: Annotated[list, add_messages]
+
+# ── LLM & Graph ──────────────────────────────────────────────────────────────
+
+SYSTEM_PROMPT = """You are a brilliant, friendly, and concise general-purpose AI assistant.
+You help users with anything they ask — questions, writing, analysis, coding, brainstorming, and more.
+Be warm, clear, and genuinely helpful. When you don't know something, say so honestly."""
+
+def get_llm():
+    """Return the best available Groq model."""
+    api_key = os.environ.get("GROQ_API_KEY", "")
+    # Try models in order of preference
+    for model in [
+        "llama-3.3-70b-versatile",
+        "llama-3.1-70b-versatile",
+        "mixtral-8x7b-32768",
+        "llama-3.1-8b-instant",
+    ]:
+        try:
+            llm = ChatGroq(model=model, api_key=api_key, temperature=0.7)
+            return llm, model
+        except Exception:
+            continue
+    raise RuntimeError("No Groq model available. Check your GROQ_API_KEY.")
+
+llm, active_model = get_llm()
+
+def chatbot_node(state: State):
+    """Core LangGraph node: calls the LLM with full message history."""
+    messages = [SystemMessage(content=SYSTEM_PROMPT)] + state["messages"]
+    response = llm.invoke(messages)
+    return {"messages": [response]}
+
+def build_graph():
+    builder = StateGraph(State)
+    builder.add_node("chatbot", chatbot_node)
+    builder.add_edge(START, "chatbot")
+    builder.add_edge("chatbot", END)
+    return builder.compile()
+
+graph = build_graph()
+
+# ── Chat logic ────────────────────────────────────────────────────────────────
+
+def chat(user_message: str, history: list):
+    """Convert Gradio history → LangChain messages → run graph → return reply."""
+    if not user_message.strip():
+        return "", history
+
+    # Build message list from history
+    lc_messages = []
+    for human, assistant in history:
+        lc_messages.append(HumanMessage(content=human))
+        if assistant:
+            lc_messages.append(AIMessage(content=assistant))
+    lc_messages.append(HumanMessage(content=user_message))
+
+    # Run through LangGraph
+    result = graph.invoke({"messages": lc_messages})
+    ai_reply = result["messages"][-1].content
+
+    history.append((user_message, ai_reply))
+    return "", history
+
+def clear_chat():
+    return [], []
+
+# ── Gradio UI ─────────────────────────────────────────────────────────────────
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');
+
+:root {
+    --bg-primary: #0a0a0f;
+    --bg-card: #111118;
+    --bg-input: #1a1a24;
+    --border: #2a2a3a;
+    --accent: #7c6af7;
+    --accent-soft: #9d91f8;
+    --accent-glow: rgba(124, 106, 247, 0.15);
+    --text-primary: #f0eff8;
+    --text-muted: #7a798a;
+    --user-bubble: linear-gradient(135deg, #7c6af7, #5b4fd4);
+    --bot-bubble: #1a1a24;
+    --success: #4ade80;
+    --radius: 16px;
+}
+
+* { box-sizing: border-box; }
+
+body, .gradio-container {
+    background: var(--bg-primary) !important;
+    font-family: 'DM Sans', sans-serif !important;
+    color: var(--text-primary) !important;
+}
+
+.gradio-container {
+    max-width: 860px !important;
+    margin: 0 auto !important;
+    padding: 0 !important;
+}
+
+/* Header */
+#header {
+    text-align: center;
+    padding: 48px 32px 24px;
+    position: relative;
+}
+
+#header::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 50%;
+    transform: translateX(-50%);
+    width: 300px; height: 200px;
+    background: radial-gradient(ellipse, rgba(124,106,247,0.18) 0%, transparent 70%);
+    pointer-events: none;
+}
+
+#app-title {
+    font-family: 'Syne', sans-serif !important;
+    font-size: 2.6rem !important;
+    font-weight: 800 !important;
+    letter-spacing: -0.03em !important;
+    background: linear-gradient(135deg, #f0eff8 30%, #9d91f8) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    margin: 0 0 8px !important;
+    line-height: 1.1 !important;
+}
+
+#app-subtitle {
+    color: var(--text-muted) !important;
+    font-size: 1rem !important;
+    font-weight: 300 !important;
+    margin: 0 !important;
+}
+
+/* Model badge */
+#model-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--accent-glow);
+    border: 1px solid rgba(124,106,247,0.3);
+    border-radius: 100px;
+    padding: 4px 14px;
+    margin-top: 14px;
+    font-size: 0.78rem;
+    color: var(--accent-soft);
+    font-family: 'DM Sans', monospace;
+}
+
+/* Chat area */
+#chatbot-box {
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius) !important;
+    margin: 0 24px !important;
+    overflow: hidden !important;
+}
+
+#chatbot-box .wrap {
+    background: transparent !important;
+    padding: 16px !important;
+}
+
+/* Messages */
+.message {
+    border-radius: 14px !important;
+    padding: 14px 18px !important;
+    font-size: 0.97rem !important;
+    line-height: 1.65 !important;
+    max-width: 82% !important;
+    margin-bottom: 4px !important;
+}
+
+.message.user {
+    background: var(--user-bubble) !important;
+    color: #fff !important;
+    margin-left: auto !important;
+    box-shadow: 0 4px 20px rgba(124,106,247,0.3) !important;
+}
+
+.message.bot {
+    background: var(--bot-bubble) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--border) !important;
+}
+
+/* Input row */
+#input-row {
+    display: flex;
+    gap: 10px;
+    padding: 16px 24px 12px !important;
+    align-items: flex-end;
+}
+
+#msg-input textarea {
+    background: var(--bg-input) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 12px !important;
+    color: var(--text-primary) !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.97rem !important;
+    padding: 14px 16px !important;
+    resize: none !important;
+    transition: border-color 0.2s !important;
+}
+
+#msg-input textarea:focus {
+    border-color: var(--accent) !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px var(--accent-glow) !important;
+}
+
+#msg-input textarea::placeholder { color: var(--text-muted) !important; }
+
+#msg-input label { display: none !important; }
+
+/* Buttons */
+#send-btn, #clear-btn {
+    border-radius: 12px !important;
+    font-family: 'Syne', sans-serif !important;
+    font-weight: 600 !important;
+    font-size: 0.9rem !important;
+    padding: 0 22px !important;
+    height: 50px !important;
+    transition: all 0.2s !important;
+    cursor: pointer !important;
+    white-space: nowrap !important;
+}
+
+#send-btn {
+    background: linear-gradient(135deg, #7c6af7, #5b4fd4) !important;
+    color: #fff !important;
+    border: none !important;
+    box-shadow: 0 4px 16px rgba(124,106,247,0.35) !important;
+}
+
+#send-btn:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 22px rgba(124,106,247,0.5) !important;
+}
+
+#clear-btn {
+    background: transparent !important;
+    color: var(--text-muted) !important;
+    border: 1px solid var(--border) !important;
+}
+
+#clear-btn:hover {
+    border-color: #ff6b6b !important;
+    color: #ff6b6b !important;
+    background: rgba(255,107,107,0.07) !important;
+}
+
+/* Footer */
+#footer {
+    text-align: center;
+    padding: 16px 24px 32px;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
+"""
+
+with gr.Blocks(css=CSS, title="AI Assistant", theme=gr.themes.Base()) as demo:
+
+    # ── Header ──────────────────────────────────────────────────────────────
+    with gr.Column(elem_id="header"):
+        gr.HTML(f"""
+            <h1 id="app-title">AI Assistant</h1>
+            <p id="app-subtitle">Powered by LangGraph &amp; Groq — fast, smart, always on.</p>
+            <div id="model-badge">
+                ⚡ {active_model}
+            </div>
+        """)
+
+    # ── Chat window ──────────────────────────────────────────────────────────
+    chatbot = gr.Chatbot(
+        value=[],
+        elem_id="chatbot-box",
+        label="",
+        height=460,
+        bubble_full_width=False,
+        show_label=False,
+        avatar_images=(None, "https://api.dicebear.com/7.x/bottts-neutral/svg?seed=langgraph&backgroundColor=7c6af7"),
+    )
+
+    # ── Input row ────────────────────────────────────────────────────────────
+    with gr.Row(elem_id="input-row"):
+        msg = gr.Textbox(
+            placeholder="Ask me anything…",
+            show_label=False,
+            lines=1,
+            max_lines=5,
+            elem_id="msg-input",
+            scale=8,
+        )
+        send_btn = gr.Button("Send ↑", elem_id="send-btn", scale=1)
+        clear_btn = gr.Button("Clear", elem_id="clear-btn", scale=1)
+
+    # ── Footer ───────────────────────────────────────────────────────────────
+    gr.HTML("""
+        <div id="footer">
+            Built with LangGraph · Groq · Gradio &nbsp;|&nbsp; Deploy on 🤗 Hugging Face Spaces
+        </div>
+    """)
+
+    # ── Events ───────────────────────────────────────────────────────────────
+    send_btn.click(chat, [msg, chatbot], [msg, chatbot])
+    msg.submit(chat, [msg, chatbot], [msg, chatbot])
+    clear_btn.click(clear_chat, outputs=[msg, chatbot])
+
+if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", server_port=7860)

requirements.txt

@@ -0,0 +1,4 @@
+gradio>=4.44.0
+langgraph>=0.2.0
+langchain-groq>=0.2.0
+langchain-core>=0.3.0