Walkthrough: Build a Gradio UI that sends user input and displays responses

You’ve got your RAG logic working — now let’s wrap it in a friendly web app with Gradio. This makes it easy for anyone (students, teammates, customers) to chat with your assistant from any browser — no coding skills needed.

---

✅ Why Use Gradio?

• 🟢 Instant web UI for any Python function

• 🟢 Supports text, images, audio, and chat history

• 🟢 Runs locally or can be shared via a public link

• 🟢 Perfect for demos, prototypes, or teaching

---

✅ What You’ll Build

A simple Gradio app that: 1️⃣ Takes the user’s input question 2️⃣ Runs your embed ➜ retrieve ➜ generate pipeline 3️⃣ Shows the answer on screen

---

✅ Step 1️⃣ – Install Gradio

pip install gradio

---

✅ Step 2️⃣ – Define Your Answer Function

This is the backend logic your UI will call.

import gradio as gr

def answer(user_query):
    # ➜ Embed the user query
    query_embedding = embedder.encode([user_query])
    
    # ➜ Search in your FAISS index
    D, I = index.search(np.array(query_embedding), k=3)
    retrieved_chunks = [docs[idx] for idx in I[0]]
    
    # ➜ Build final prompt with retrieved context
    context = "\n\n".join(retrieved_chunks)
    prompt = f"""You are a helpful assistant. Use the context below to answer the question.

Context:
{context}

Question: {user_query}

Answer:"""
    
    # ➜ Generate the answer
    response = generator(
        prompt,
        max_length=512,
        do_sample=True,
        temperature=0.3,
    )
    return response[0]["generated_text"]

---

✅ Step 3️⃣ – Build the Gradio Interface

Use Gradio’s Interface API to link input and output:

demo = gr.Interface(
    fn=answer,
    inputs=gr.Textbox(
        lines=2,
        placeholder="Ask me something...",
        label="Your Question"
    ),
    outputs=gr.Textbox(
        label="Assistant’s Answer"
    ),
    title="📚 My RAG Assistant",
    description="Ask me questions! I’ll search my knowledge base and answer."
)

---

✅ Step 4️⃣ – Launch the App

demo.launch()

---

Run the script ➜ visit http://localhost:7860 ➜ type a question ➜ get answers!

---

✅ Optional: Use a Chat Interface

Gradio also has a built-in chatbot component if you want a chat history:

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.Button("Clear")

    def respond(message, chat_history):
        answer_text = answer(message)
        chat_history.append((message, answer_text))
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])
    clear.click(lambda: None, None, chatbot, queue=False)

demo.launch()

---

✅ How It Works

• answer function does the work: embed ➜ search ➜ prompt ➜ generate.

• Gradio handles the UI: text input, output, chat history.

• You can run this locally or share a link for testing.

---

✅ What’s Next

• Add styling or a custom theme.

• Secure it behind a login if needed.

• Deploy it on Hugging Face Spaces, Render, or any cloud server.

---

🗝️ Key Takeaway

Gradio lets you turn your Python RAG pipeline into a shareable web app in minutes — no frontend code needed!

---

➡️ Next: You’ll learn how to deploy your fine-tuned model to Hugging Face Hub or a cloud server for real-world use!