Skip to main content

Gradio UI

Location: apps/gradio_ui/
Tech Stack: Gradio, Python
Purpose: Fast, easy-to-customize interface for prototyping and testing

🎯 Overview​

Gradio UI provides a simple, customizable web interface that's perfect for rapid prototyping, internal demos, and quick testing. Build a working UI in minutes with minimal code.

Use this when:

  • Rapid prototyping and experimentation
  • Internal demos to stakeholders
  • Quick testing of agent changes
  • Learning and exploration
  • Need something simple and fast

⚡ Quick Start​

cd apps/gradio_ui
pip install -r requirements.txt
export OPENAI_API_KEY="your-key"
python app.py

# Open: http://localhost:7860

🎨 Interface​

┌─────────────────────────────────────────────┐
│  RecoAgent - Gradio Interface              │
├─────────────────────────────────────────────┤
│                                             │
│  📝 Enter your question:                    │
│  ┌─────────────────────────────────────┐   │
│  │ What is hybrid search?              │   │
│  └─────────────────────────────────────┘   │
│                                             │
│  ⚙️ Settings:                               │
│  Temperature: ━━━━━◉━━━━━ 0.7              │
│  Top K:       ━━━◉━━━━━━ 5                 │
│  Model: [GPT-4 ▼]                          │
│                                             │
│  [Submit]  [Clear]                          │
│                                             │
│  ─────────────────────────────────────────  │
│                                             │
│  📤 Answer:                                 │
│  Hybrid search combines BM25 keyword        │
│  search with vector semantic search...      │
│                                             │
│  📊 Metadata:                               │
│  Confidence: 0.92                           │
│  Latency: 850ms                             │
│  Cost: $0.012                               │
│                                             │
│  📄 Sources:                                │
│  • hybrid_retrieval_guide.pdf (p. 3)        │
│  • rag_best_practices.md                    │
└─────────────────────────────────────────────┘

🔧 Basic Setup​

Minimal Example​

# app.py
import gradio as gr
from recoagent import RecoAgent

agent = RecoAgent()

def ask_question(question):
    response = agent.ask(question)
    return response.answer

demo = gr.Interface(
    fn=ask_question,
    inputs=gr.Textbox(label="Question"),
    outputs=gr.Textbox(label="Answer")
)

demo.launch()

With Advanced Features​

# app.py with full features
import gradio as gr
from recoagent import RecoAgent

agent = RecoAgent()

def ask_agent(question, temperature, top_k, model):
    # Update agent config
    agent.update_config(
        temperature=temperature,
        top_k=top_k,
        model=model
    )
    
    # Get response
    response = agent.ask(question)
    
    # Format output
    answer = response.answer
    metadata = f"""
**Confidence:** {response.confidence:.2f}
**Latency:** {response.latency_ms}ms
**Cost:** ${response.cost:.4f}
    """
    sources = "\n".join([f"- {s}" for s in response.sources])
    
    return answer, metadata, sources

# Create interface
with gr.Blocks() as demo:
    gr.Markdown("# RecoAgent Q&A")
    
    with gr.Row():
        with gr.Column():
            question = gr.Textbox(
                label="Your Question",
                placeholder="Ask me anything..."
            )
            
            with gr.Accordion("Advanced Settings", open=False):
                temperature = gr.Slider(0, 1, 0.7, label="Temperature")
                top_k = gr.Slider(1, 20, 5, label="Top K")
                model = gr.Dropdown(
                    ["gpt-4", "gpt-3.5-turbo"],
                    value="gpt-4",
                    label="Model"
                )
            
            submit = gr.Button("Ask", variant="primary")
            clear = gr.Button("Clear")
        
        with gr.Column():
            answer = gr.Textbox(label="Answer", lines=10)
            metadata = gr.Markdown("Metadata will appear here")
            sources = gr.Textbox(label="Sources", lines=5)
    
    submit.click(
        ask_agent,
        inputs=[question, temperature, top_k, model],
        outputs=[answer, metadata, sources]
    )
    clear.click(lambda: ["", "", ""], outputs=[answer, metadata, sources])

demo.launch()

🎨 Customization​

Themes​

# Use built-in themes
demo.launch(theme=gr.themes.Soft())

# Or create custom theme
theme = gr.themes.Base(
    primary_hue="green",
    secondary_hue="blue"
)
demo.launch(theme=theme)

Custom CSS​

css = """
.gradio-container {
    font-family: 'Arial', sans-serif;
}
.submit-button {
    background-color: #4CAF50 !important;
}
"""

demo = gr.Blocks(css=css)

📊 Example Features​

File Upload​

def process_document(file, question):
    # Add document to agent
    agent.add_documents([file.name])
    
    # Answer question
    response = agent.ask(question)
    return response.answer

gr.Interface(
    fn=process_document,
    inputs=[
        gr.File(label="Upload Document"),
        gr.Textbox(label="Question")
    ],
    outputs=gr.Textbox(label="Answer")
).launch()

Chat Interface​

def chat(message, history):
    response = agent.ask(message, history=history)
    return response.answer

gr.ChatInterface(
    chat,
    chatbot=gr.Chatbot(height=500),
    textbox=gr.Textbox(placeholder="Ask me anything...", container=False, scale=7),
    title="RecoAgent Chat",
    description="Ask questions about your knowledge base"
).launch()

Comparison Mode​

def compare_models(question):
    # GPT-4 response
    agent_gpt4 = RecoAgent(model="gpt-4")
    response_gpt4 = agent_gpt4.ask(question)
    
    # GPT-3.5 response  
    agent_gpt35 = RecoAgent(model="gpt-3.5-turbo")
    response_gpt35 = agent_gpt35.ask(question)
    
    return response_gpt4.answer, response_gpt35.answer

gr.Interface(
    fn=compare_models,
    inputs=gr.Textbox(label="Question"),
    outputs=[
        gr.Textbox(label="GPT-4 Response"),
        gr.Textbox(label="GPT-3.5 Response")
    ]
).launch()

Examples​

# Add example queries
demo = gr.Interface(
    fn=ask_question,
    inputs=gr.Textbox(label="Question"),
    outputs=gr.Textbox(label="Answer"),
    examples=[
        ["What is hybrid search?"],
        ["How do I deploy to production?"],
        ["Explain RAG architecture"]
    ]
)

🔌 Sharing​

# Create shareable public link (expires in 72 hours)
demo.launch(share=True)
# Output: Running on public URL: https://abc123.gradio.live

Authentication​

# Add password protection
demo.launch(auth=("username", "password"))

# Or function-based auth
def check_auth(username, password):
    return username == "admin" and password == "secure"

demo.launch(auth=check_auth)

Embedding​

# Generate iframe code
demo.launch(inline=True)

📱 Mobile Responsive​

Gradio interfaces are automatically mobile-responsive!

🚀 Production Tips​

Concurrent Requests​

# Handle multiple users
demo.launch(
    server_name="0.0.0.0",
    server_port=7860,
    max_threads=10
)

Caching​

# Cache responses for common questions
from functools import lru_cache

@lru_cache(maxsize=100)
def ask_cached(question):
    return agent.ask(question).answer

gr.Interface(fn=ask_cached, ...).launch()

🎯 Use Cases​

A/B Testing​

# Test different configurations
with gr.Blocks() as demo:
    with gr.Tab("Config A"):
        output_a = gr.Textbox(label="Response (Config A)")
        gr.Button("Test A").click(...)
    
    with gr.Tab("Config B"):
        output_b = gr.Textbox(label="Response (Config B)")
        gr.Button("Test B").click(...)

Batch Processing​

def process_batch(questions_file):
    questions = questions_file.readlines()
    results = []
    for q in questions:
        results.append(agent.ask(q).answer)
    return "\n\n".join(results)

gr.Interface(
    fn=process_batch,
    inputs=gr.File(label="Upload Questions (txt)"),
    outputs=gr.Textbox(label="All Answers")
).launch()

🆘 Troubleshooting​

IssueSolution
Port 7860 in useLaunch on different port: demo.launch(server_port=7861)
Interface not loadingCheck firewall settings
Slow responsesUse queue() for async processing
Share link not workingCheck network/firewall allows gradio.live

📚 Related Docs​

5-minute setup! Perfect for quick demos and prototyping! 🎨