🚀 Groq + Gradio: Ultimate AI Showcase Demo #
The most genius way to showcase Groq’s blazing-fast AI capabilities through interactive Gradio demos! This comprehensive guide covers building demos for reasoning, vision, audio, tool calling, and parameter experimentation.
🎯 Quick Setup #
import gradio as gr
from groq import Groq
import base64
import json
import os
# Initialize Groq client
client = Groq(api_key=os.getenv("GROQ_API_KEY"))
🧠 Demo 1: Reasoning Playground #
Interactive demo for testing different reasoning models and parameters:
def reasoning_demo(prompt, model, reasoning_effort, reasoning_format, system_prompt="You are a genius problem solver!"):
"""Showcase reasoning capabilities with different models and settings"""
try:
completion = client.chat.completions.create(
model=model,
messages=[
{"role": "system", "content": system_prompt},
{"role": "user", "content": prompt}
],
reasoning_effort=reasoning_effort,
reasoning_format=reasoning_format,
max_completion_tokens=2000,
temperature=0.7
)
response = completion.choices[0].message.content
usage = completion.usage
return response, f"Tokens: {usage.total_tokens} | Time: {usage.total_time:.2f}s"
except Exception as e:
return f"Error: {str(e)}", "N/A"
# Gradio Interface
reasoning_interface = gr.Interface(
fn=reasoning_demo,
inputs=[
gr.Textbox(label="🤔 Your Problem", placeholder="Solve this step by step: What's 15% of 240?", lines=3),
gr.Dropdown(
choices=["openai/gpt-oss-20b", "openai/gpt-oss-120b", "qwen/qwen3-32b", "deepseek-r1-distill-llama-70b"],
label="🧠 Reasoning Model",
value="openai/gpt-oss-120b"
),
gr.Dropdown(
choices=["low", "medium", "high"],
label="⚡ Reasoning Effort",
value="medium"
),
gr.Dropdown(
choices=["raw", "parsed", "hidden"],
label="📋 Reasoning Format",
value="parsed"
),
gr.Textbox(label="🎭 System Prompt", value="You are a genius problem solver!", lines=2)
],
outputs=[
gr.Textbox(label="🎯 AI Response", lines=10),
gr.Textbox(label="📊 Usage Stats")
],
title="🧠 Groq Reasoning Playground",
description="Test Groq's reasoning models with different effort levels and formats!"
)
👁️ Demo 2: Vision Analysis Studio #
Interactive image analysis with LLaVA:
def vision_demo(image, prompt, temperature=0.7):
"""Showcase vision capabilities with image analysis"""
if image is None:
return "Please upload an image!", "N/A"
try:
# Convert image to base64
import io
from PIL import Image
if isinstance(image, str):
# If it's a file path
with open(image, "rb") as img_file:
base64_image = base64.b64encode(img_file.read()).decode('utf-8')
else:
# If it's a PIL Image
buffer = io.BytesIO()
image.save(buffer, format="JPEG")
base64_image = base64.b64encode(buffer.getvalue()).decode('utf-8')
completion = client.chat.completions.create(
model="llava-v1.5-7b-4096-preview",
messages=[
{
"role": "user",
"content": [
{
"type": "image_url",
"image_url": {
"url": f"data:image/jpeg;base64,{base64_image}"
}
},
{"type": "text", "text": prompt}
]
}
],
temperature=temperature,
max_completion_tokens=1000
)
response = completion.choices[0].message.content
usage = completion.usage
return response, f"Tokens: {usage.total_tokens} | Time: {usage.total_time:.2f}s"
except Exception as e:
return f"Error: {str(e)}", "N/A"
vision_interface = gr.Interface(
fn=vision_demo,
inputs=[
gr.Image(label="📸 Upload Image", type="pil"),
gr.Textbox(
label="👁️ Analysis Prompt",
placeholder="Describe this image in detail, identify objects, colors, and mood",
lines=2
),
gr.Slider(0.1, 1.0, value=0.7, label="🌡️ Temperature")
],
outputs=[
gr.Textbox(label="🎯 Vision Analysis", lines=8),
gr.Textbox(label="📊 Usage Stats")
],
title="👁️ Groq Vision Studio",
description="Analyze images with Groq's LLaVA vision model!"
)
🎵 Demo 3: Audio Transcription Lab #
Whisper-powered audio transcription:
def audio_demo(audio_file, language="en"):
"""Showcase audio transcription with Whisper"""
if audio_file is None:
return "Please upload an audio file!", "N/A"
try:
with open(audio_file, "rb") as file:
transcription = client.audio.transcriptions.create(
file=(os.path.basename(audio_file), file, "audio/mpeg"),
model="whisper-large-v3",
language=language,
response_format="verbose_json"
)
result = {
"text": transcription.text,
"language": transcription.language,
"duration": transcription.duration
}
return transcription.text, f"Language: {transcription.language} | Duration: {transcription.duration:.2f}s"
except Exception as e:
return f"Error: {str(e)}", "N/A"
audio_interface = gr.Interface(
fn=audio_demo,
inputs=[
gr.Audio(label="🎵 Upload Audio", type="filepath"),
gr.Dropdown(
choices=["en", "es", "fr", "de", "it", "pt", "ru", "ja", "ko", "zh"],
label="🌍 Language",
value="en"
)
],
outputs=[
gr.Textbox(label="📝 Transcription", lines=6),
gr.Textbox(label="📊 Audio Stats")
],
title="🎵 Groq Audio Transcription Lab",
description="Transcribe audio files with Groq's Whisper Large V3!"
)
🛠️ Demo 4: Tool Calling Playground #
Interactive tool calling and function execution:
def tool_calling_demo(prompt, use_browser=True, use_code_interpreter=True, custom_tools=False):
"""Showcase tool calling capabilities"""
tools = []
# Built-in tools
if use_browser:
tools.append({"type": "browser_search"})
if use_code_interpreter:
tools.append({"type": "code_interpreter"})
# Custom tools example
if custom_tools:
tools.append({
"type": "function",
"function": {
"name": "calculate",
"description": "Perform mathematical calculations",
"parameters": {
"type": "object",
"properties": {
"expression": {
"type": "string",
"description": "Mathematical expression to calculate"
}
},
"required": ["expression"]
}
}
})
try:
completion = client.chat.completions.create(
model="openai/gpt-oss-120b",
messages=[
{
"role": "user",
"content": prompt
}
],
tools=tools if tools else None,
tool_choice="auto" if tools else None,
max_completion_tokens=2000
)
response = completion.choices[0].message.content
tool_calls = completion.choices[0].message.tool_calls
tool_info = ""
if tool_calls:
tool_info = f"\n\n🛠️ Tools Called: {len(tool_calls)}\n"
for i, tool_call in enumerate(tool_calls, 1):
tool_info += f"{i}. {tool_call.function.name}: {tool_call.function.arguments}\n"
usage = completion.usage
return response + tool_info, f"Tokens: {usage.total_tokens} | Time: {usage.total_time:.2f}s"
except Exception as e:
return f"Error: {str(e)}", "N/A"
tool_interface = gr.Interface(
fn=tool_calling_demo,
inputs=[
gr.Textbox(
label="🎯 Your Request",
placeholder="Search for the latest AI news and write Python code to analyze sentiment",
lines=3
),
gr.Checkbox(label="🌐 Browser Search", value=True),
gr.Checkbox(label="💻 Code Interpreter", value=True),
gr.Checkbox(label="🔧 Custom Tools", value=False)
],
outputs=[
gr.Textbox(label="🎯 AI Response", lines=10),
gr.Textbox(label="📊 Usage Stats")
],
title="🛠️ Groq Tool Calling Playground",
description="Test Groq's tool calling with browser search, code interpreter, and custom functions!"
)
🎛️ Demo 5: Parameter Experimentation Hub #
Compare different models and parameters side-by-side:
def parameter_comparison(prompt, model1, model2, temp1, temp2, max_tokens1, max_tokens2):
"""Compare two different model configurations"""
def get_response(model, temp, max_tokens):
try:
completion = client.chat.completions.create(
model=model,
messages=[{"role": "user", "content": prompt}],
temperature=temp,
max_completion_tokens=max_tokens,
stream=False
)
return completion.choices[0].message.content, completion.usage
except Exception as e:
return f"Error: {str(e)}", None
response1, usage1 = get_response(model1, temp1, max_tokens1)
response2, usage2 = get_response(model2, temp2, max_tokens2)
stats1 = f"Tokens: {usage1.total_tokens} | Time: {usage1.total_time:.2f}s" if usage1 else "N/A"
stats2 = f"Tokens: {usage2.total_tokens} | Time: {usage2.total_time:.2f}s" if usage2 else "N/A"
return response1, stats1, response2, stats2
comparison_interface = gr.Interface(
fn=parameter_comparison,
inputs=[
gr.Textbox(label="📝 Prompt", placeholder="Write a creative story about AI", lines=3),
gr.Dropdown(
choices=["openai/gpt-oss-20b", "openai/gpt-oss-120b", "llama-3.1-70b-versatile", "qwen/qwen3-32b"],
label="🤖 Model 1",
value="openai/gpt-oss-120b"
),
gr.Dropdown(
choices=["openai/gpt-oss-20b", "openai/gpt-oss-120b", "llama-3.1-70b-versatile", "qwen/qwen3-32b"],
label="🤖 Model 2",
value="llama-3.1-70b-versatile"
),
gr.Slider(0.1, 1.0, value=0.7, label="🌡️ Temperature 1"),
gr.Slider(0.1, 1.0, value=0.9, label="🌡️ Temperature 2"),
gr.Slider(100, 2000, value=500, label="📏 Max Tokens 1"),
gr.Slider(100, 2000, value=500, label="📏 Max Tokens 2")
],
outputs=[
gr.Textbox(label="🎯 Response 1", lines=8),
gr.Textbox(label="📊 Stats 1"),
gr.Textbox(label="🎯 Response 2", lines=8),
gr.Textbox(label="📊 Stats 2")
],
title="🎛️ Groq Parameter Comparison Hub",
description="Compare different Groq models and parameters side-by-side!"
)
🚀 Complete Multi-Tab Demo App #
Combine all demos into one comprehensive application:
def create_groq_showcase():
"""Create the ultimate Groq showcase with all demos"""
with gr.Blocks(title="🚀 Groq AI Showcase", theme=gr.themes.Soft()) as demo:
gr.Markdown("""
# 🚀 Groq AI Showcase: Lightning-Fast AI Demos
Explore Groq's blazing-fast AI capabilities across reasoning, vision, audio, and tool calling!
⚡ **Ultra-fast inference** | 🧠 **Advanced reasoning** | 👁️ **Vision analysis** | 🎵 **Audio transcription** | 🛠️ **Tool calling**
""")
with gr.Tabs():
with gr.TabItem("🧠 Reasoning"):
reasoning_interface.render()
with gr.TabItem("👁️ Vision"):
vision_interface.render()
with gr.TabItem("🎵 Audio"):
audio_interface.render()
with gr.TabItem("🛠️ Tools"):
tool_interface.render()
with gr.TabItem("🎛️ Compare"):
comparison_interface.render()
with gr.TabItem("📚 About"):
gr.Markdown("""
## 🎯 What This Demo Showcases
### 🧠 Reasoning Models
- **GPT-OSS 20B/120B**: OpenAI's reasoning models
- **Qwen 3 32B**: Advanced reasoning capabilities
- **DeepSeek R1**: Distilled reasoning model
### 👁️ Vision Capabilities
- **LLaVA**: Image analysis and description
- **Multimodal**: Text + image processing
### 🎵 Audio Processing
- **Whisper Large V3**: State-of-the-art transcription
- **Multi-language**: 10+ language support
### 🛠️ Tool Integration
- **Browser Search**: Real-time web search
- **Code Interpreter**: Execute Python code
- **Custom Functions**: Define your own tools
### ⚡ Performance Features
- **Ultra-low latency**: Sub-second responses
- **Streaming**: Real-time output
- **Parameter tuning**: Fine-tune behavior
## 🔧 Setup Instructions
1. Get your Groq API key from [console.groq.com](https://console.groq.com)
2. Set environment variable: `export GROQ_API_KEY='your-key'`
3. Install dependencies: `pip install groq gradio pillow`
4. Run this demo and start exploring!
## 📖 Learn More
- [Groq Documentation](https://console.groq.com/docs)
- [Groq API Cookbook](https://github.com/groq/groq-api-cookbook)
- [Gradio Documentation](https://gradio.app/docs)
""")
return demo
# Launch the complete showcase
if __name__ == "__main__":
demo = create_groq_showcase()
demo.launch(
server_name="0.0.0.0",
server_port=7860,
share=True,
show_error=True
)
🎨 Advanced Customization #
Custom Themes & Styling #
# Custom theme
custom_theme = gr.themes.Soft(
primary_hue="blue",
secondary_hue="gray",
neutral_hue="slate",
font=gr.themes.GoogleFont("Inter")
)
# Apply custom CSS
css = """
.gradio-container {
max-width: 1200px !important;
}
.tab-nav button {
font-size: 16px !important;
font-weight: 600 !important;
}
"""
Real-time Streaming Demo #
def streaming_demo(prompt, model):
"""Demonstrate real-time streaming capabilities"""
def generate():
try:
stream = client.chat.completions.create(
model=model,
messages=[{"role": "user", "content": prompt}],
stream=True,
max_completion_tokens=1000
)
full_response = ""
for chunk in stream:
if chunk.choices[0].delta.content:
full_response += chunk.choices[0].delta.content
yield full_response
except Exception as e:
yield f"Error: {str(e)}"
return generate()
streaming_interface = gr.Interface(
fn=streaming_demo,
inputs=[
gr.Textbox(label="💭 Your Prompt", lines=3),
gr.Dropdown(
choices=["openai/gpt-oss-120b", "llama-3.1-70b-versatile"],
label="🤖 Model"
)
],
outputs=gr.Textbox(label="🔄 Streaming Response", lines=10),
title="🔄 Real-time Streaming Demo"
)
🚀 Deployment Options #
Local Development #
python groq_gradio_demo.py
Docker Deployment #
FROM python:3.9-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
EXPOSE 7860
CMD ["python", "groq_gradio_demo.py"]
Hugging Face Spaces #
# app.py for HF Spaces
import os
import gradio as gr
from groq import Groq
# Your demo code here...
demo.launch()
📊 Performance Monitoring #
import time
import psutil
def monitor_performance(func):
"""Decorator to monitor API performance"""
def wrapper(*args, **kwargs):
start_time = time.time()
start_memory = psutil.Process().memory_info().rss / 1024 / 1024
result = func(*args, **kwargs)
end_time = time.time()
end_memory = psutil.Process().memory_info().rss / 1024 / 1024
performance_stats = {
"execution_time": f"{end_time - start_time:.2f}s",
"memory_used": f"{end_memory - start_memory:.2f}MB"
}
return result, performance_stats
return wrapper
🎯 Best Practices #
🚀 Performance:
- Use appropriate
max_completion_tokensfor your use case - Implement streaming for better UX
- Cache responses when possible
- Monitor API usage and costs
🎨 UX Design:
- Provide clear input examples and placeholders
- Show loading states and progress indicators
- Handle errors gracefully with user-friendly messages
- Use emojis and visual cues for better engagement
🔧 Development:
- Modularize demo components for reusability
- Implement proper error handling and logging
- Use environment variables for API keys
- Test with different input types and edge cases
🛡️ Security:
- Never hardcode API keys
- Validate user inputs
- Implement rate limiting if needed
- Use HTTPS in production
This comprehensive Groq + Gradio showcase demonstrates the full power of Groq’s AI capabilities through interactive, user-friendly demos! 🚀✨