chatui-helper / app.py
milwright's picture
Integrate Crawl4AI for enhanced web scraping
f3a35a2
raw
history blame
22.3 kB
import gradio as gr
import json
import zipfile
import io
import os
from datetime import datetime
from dotenv import load_dotenv
import requests
from bs4 import BeautifulSoup
from scraping_service import get_grounding_context_crawl4ai, fetch_url_content_crawl4ai
# Load environment variables from .env file
load_dotenv()
# Template for generated space app (based on mvp_simple.py)
SPACE_TEMPLATE = '''import gradio as gr
import os
import requests
import json
import asyncio
from crawl4ai import AsyncWebCrawler
# Configuration
SPACE_NAME = "{name}"
SPACE_DESCRIPTION = "{description}"
SYSTEM_PROMPT = """{system_prompt}"""
MODEL = "{model}"
GROUNDING_URLS = {grounding_urls}
# Get API key from environment - customizable variable name
API_KEY = os.environ.get("{api_key_var}")
async def fetch_url_content_async(url, crawler):
"""Fetch and extract text content from a URL using Crawl4AI"""
try:
result = await crawler.arun(
url=url,
bypass_cache=True,
word_count_threshold=10,
excluded_tags=['script', 'style', 'nav', 'header', 'footer'],
remove_overlay_elements=True
)
if result.success:
content = result.markdown or result.cleaned_html or ""
# Truncate to ~4000 characters
if len(content) > 4000:
content = content[:4000] + "..."
return content
else:
return f"Error fetching {{url}}: Failed to retrieve content"
except Exception as e:
return f"Error fetching {{url}}: {{str(e)}}"
def fetch_url_content(url):
"""Synchronous wrapper for URL fetching"""
async def fetch():
async with AsyncWebCrawler(verbose=False) as crawler:
return await fetch_url_content_async(url, crawler)
try:
return asyncio.run(fetch())
except Exception as e:
return f"Error fetching {{url}}: {{str(e)}}"
def get_grounding_context():
"""Fetch context from grounding URLs"""
if not GROUNDING_URLS:
return ""
context_parts = []
for i, url in enumerate(GROUNDING_URLS, 1):
if url.strip():
content = fetch_url_content(url.strip())
context_parts.append(f"Context from URL {{i}} ({{url}}):\\n{{content}}")
if context_parts:
return "\\n\\n" + "\\n\\n".join(context_parts) + "\\n\\n"
return ""
def generate_response(message, history):
"""Generate response using OpenRouter API"""
if not API_KEY:
return "Please set your {api_key_var} in the Space settings."
# Get grounding context
grounding_context = get_grounding_context()
# Build enhanced system prompt with grounding context
enhanced_system_prompt = SYSTEM_PROMPT + grounding_context
# Build messages array for the API
messages = [{{"role": "system", "content": enhanced_system_prompt}}]
# Add conversation history - compatible with Gradio 5.x format
for chat in history:
if isinstance(chat, dict):
# New format: {{"role": "user", "content": "..."}} or {{"role": "assistant", "content": "..."}}
messages.append(chat)
else:
# Legacy format: ("user msg", "bot msg")
user_msg, bot_msg = chat
messages.append({{"role": "user", "content": user_msg}})
if bot_msg:
messages.append({{"role": "assistant", "content": bot_msg}})
# Add current message
messages.append({{"role": "user", "content": message}})
# Make API request
try:
response = requests.post(
url="https://openrouter.ai/api/v1/chat/completions",
headers={{
"Authorization": f"Bearer {{API_KEY}}",
"Content-Type": "application/json"
}},
json={{
"model": MODEL,
"messages": messages,
"temperature": {temperature},
"max_tokens": {max_tokens}
}}
)
if response.status_code == 200:
return response.json()['choices'][0]['message']['content']
else:
return f"Error: {{response.status_code}} - {{response.text}}"
except Exception as e:
return f"Error: {{str(e)}}"
# Create simple Gradio interface using ChatInterface
demo = gr.ChatInterface(
fn=generate_response,
title=SPACE_NAME,
description=SPACE_DESCRIPTION,
examples={examples}
)
if __name__ == "__main__":
demo.launch()
'''
# Available models
MODELS = [
"google/gemma-3-27b-it",
"google/gemini-2.0-flash-001",
"mistralai/mistral-medium",
"openai/gpt-4o-nano",
"anthropic/claude-3.5-haiku"
]
def fetch_url_content(url):
"""Fetch and extract text content from a URL"""
try:
response = requests.get(url, timeout=10)
response.raise_for_status()
soup = BeautifulSoup(response.content, 'html.parser')
# Remove script and style elements
for script in soup(["script", "style"]):
script.decompose()
# Get text content
text = soup.get_text()
# Clean up whitespace
lines = (line.strip() for line in text.splitlines())
chunks = (phrase.strip() for line in lines for phrase in line.split(" "))
text = ' '.join(chunk for chunk in chunks if chunk)
# Truncate to ~4000 characters
if len(text) > 4000:
text = text[:4000] + "..."
return text
except Exception as e:
return f"Error fetching {url}: {str(e)}"
def get_grounding_context(urls):
"""Fetch context from grounding URLs"""
if not urls:
return ""
context_parts = []
for i, url in enumerate(urls, 1):
if url and url.strip():
content = fetch_url_content(url.strip())
context_parts.append(f"Context from URL {i} ({url}):\n{content}")
if context_parts:
return "\n\n" + "\n\n".join(context_parts) + "\n\n"
return ""
def create_readme(config):
"""Generate README with deployment instructions"""
return f"""---
title: {config['name']}
emoji: 🤖
colorFrom: blue
colorTo: red
sdk: gradio
sdk_version: 4.32.0
app_file: app.py
pinned: false
---
# {config['name']}
{config['description']}
## Quick Deploy to HuggingFace Spaces
### Step 1: Create the Space
1. Go to https://huggingface.co/spaces
2. Click "Create new Space"
3. Choose a name for your Space
4. Select **Gradio** as the SDK
5. Set visibility (Public/Private)
6. Click "Create Space"
### Step 2: Upload Files
1. In your new Space, click "Files" tab
2. Upload these files from the zip:
- `app.py`
- `requirements.txt`
3. Wait for "Building" to complete
### Step 3: Add API Key
1. Go to Settings (gear icon)
2. Click "Variables and secrets"
3. Click "New secret"
4. Name: `{config['api_key_var']}`
5. Value: Your OpenRouter API key
6. Click "Add"
### Step 4: Get Your API Key
1. Go to https://openrouter.ai/keys
2. Sign up/login if needed
3. Click "Create Key"
4. Copy the key (starts with `sk-or-`)
### Step 5: Test Your Space
- Go back to "App" tab
- Your Space should be running!
- Try the example prompts or ask a question
## Configuration
- **Model**: {config['model']}
- **Temperature**: {config['temperature']}
- **Max Tokens**: {config['max_tokens']}
- **API Key Variable**: {config['api_key_var']}
## Customization
To modify your Space:
1. Edit `app.py` in your Space
2. Update configuration variables at the top
3. Changes deploy automatically
## Troubleshooting
- **"Please set your {config['api_key_var']}"**: Add the secret in Space settings
- **Error 401**: Invalid API key or no credits
- **Error 429**: Rate limit - wait and try again
- **Build failed**: Check requirements.txt formatting
## More Help
- HuggingFace Spaces: https://huggingface.co/docs/hub/spaces
- OpenRouter Docs: https://openrouter.ai/docs
- Gradio Docs: https://gradio.app/docs
---
Generated on {datetime.now().strftime('%Y-%m-%d %H:%M:%S')} with Chat U/I Helper
"""
def create_requirements():
"""Generate requirements.txt"""
return "gradio==4.44.1\nrequests==2.32.3\ncrawl4ai==0.4.245"
def generate_zip(name, description, system_prompt, model, api_key_var, temperature, max_tokens, examples_text, url1="", url2="", url3="", url4=""):
"""Generate deployable zip file"""
# Process examples
if examples_text and examples_text.strip():
examples_list = [ex.strip() for ex in examples_text.split('\n') if ex.strip()]
examples_json = json.dumps(examples_list)
else:
examples_json = json.dumps([
"Hello! How can you help me?",
"Tell me something interesting",
"What can you do?"
])
# Process grounding URLs
grounding_urls = []
for url in [url1, url2, url3, url4]:
if url and url.strip():
grounding_urls.append(url.strip())
# Create config
config = {
'name': name,
'description': description,
'system_prompt': system_prompt,
'model': model,
'api_key_var': api_key_var,
'temperature': temperature,
'max_tokens': int(max_tokens),
'examples': examples_json,
'grounding_urls': json.dumps(grounding_urls)
}
# Generate files
app_content = SPACE_TEMPLATE.format(**config)
readme_content = create_readme(config)
requirements_content = create_requirements()
# Create zip file with clean naming
filename = f"{name.lower().replace(' ', '_').replace('-', '_')}.zip"
# Create zip in memory and save to disk
zip_buffer = io.BytesIO()
with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
zip_file.writestr('app.py', app_content)
zip_file.writestr('requirements.txt', requirements_content)
zip_file.writestr('README.md', readme_content)
zip_file.writestr('config.json', json.dumps(config, indent=2))
# Write zip to file
zip_buffer.seek(0)
with open(filename, 'wb') as f:
f.write(zip_buffer.getvalue())
return filename
# Define callback functions outside the interface
def on_generate(name, description, system_prompt, model, api_key_var, temperature, max_tokens, examples_text, url1, url2, url3, url4):
if not name or not name.strip():
return gr.update(value="Error: Please provide a Space Title", visible=True), gr.update(visible=False)
if not system_prompt or not system_prompt.strip():
return gr.update(value="Error: Please provide a System Prompt", visible=True), gr.update(visible=False)
try:
filename = generate_zip(name, description, system_prompt, model, api_key_var, temperature, max_tokens, examples_text, url1, url2, url3, url4)
success_msg = f"""**Deployment package ready!**
**File**: `{filename}`
**What's included:**
- `app.py` - Ready-to-deploy chat interface
- `requirements.txt` - Dependencies
- `README.md` - Step-by-step deployment guide
- `config.json` - Configuration backup
**Next steps:**
1. Download the zip file below
2. Follow the README instructions to deploy on HuggingFace Spaces
3. Set your `{api_key_var}` secret in Space settings
**Your Space will be live in minutes!**"""
return gr.update(value=success_msg, visible=True), gr.update(value=filename, visible=True)
except Exception as e:
return gr.update(value=f"Error: {str(e)}", visible=True), gr.update(visible=False)
def respond(message, chat_history, url1="", url2="", url3="", url4=""):
# Make actual API request to OpenRouter
import os
import requests
# Get API key from environment
api_key = os.environ.get("OPENROUTER_API_KEY")
if not api_key:
response = "Please set your OPENROUTER_API_KEY in the Space settings to use the chat support."
chat_history.append([message, response])
return "", chat_history
# Get grounding context from URLs using Crawl4AI
grounding_urls = [url1, url2, url3, url4]
grounding_context = get_grounding_context_crawl4ai(grounding_urls)
# Build enhanced system prompt with grounding context
base_system_prompt = """You are an expert assistant specializing in Gradio configurations for HuggingFace Spaces. You have deep knowledge of:
- Gradio interface components and layouts
- HuggingFace Spaces configuration (YAML frontmatter, secrets, environment variables)
- Deployment best practices for Gradio apps on HuggingFace
- Space settings, SDK versions, and hardware requirements
- Troubleshooting common Gradio and HuggingFace Spaces issues
- Integration with various APIs and models through Gradio interfaces
Provide specific, technical guidance focused on Gradio implementation details and HuggingFace Spaces deployment. Include code examples when relevant. Keep responses concise and actionable."""
enhanced_system_prompt = base_system_prompt + grounding_context
# Build conversation history for API
messages = [{
"role": "system",
"content": enhanced_system_prompt
}]
# Add conversation history - Gradio 4.x uses list/tuple format
for chat in chat_history:
if isinstance(chat, (list, tuple)) and len(chat) >= 2:
user_msg, assistant_msg = chat[0], chat[1]
if user_msg:
messages.append({"role": "user", "content": user_msg})
if assistant_msg:
messages.append({"role": "assistant", "content": assistant_msg})
# Add current message
messages.append({"role": "user", "content": message})
try:
# Make API request to OpenRouter
response = requests.post(
url="https://openrouter.ai/api/v1/chat/completions",
headers={
"Authorization": f"Bearer {api_key}",
"Content-Type": "application/json"
},
json={
"model": "google/gemma-3-27b-it",
"messages": messages,
"temperature": 0.7,
"max_tokens": 500
}
)
if response.status_code == 200:
assistant_response = response.json()['choices'][0]['message']['content']
else:
assistant_response = f"Error: {response.status_code} - {response.text}"
except Exception as e:
assistant_response = f"Error: {str(e)}"
chat_history.append([message, assistant_response])
return "", chat_history
def clear_chat():
return "", []
# Create Gradio interface with proper tab structure
with gr.Blocks(title="Chat U/I Helper") as demo:
with gr.Tabs():
with gr.Tab("Spaces Configuration"):
gr.Markdown("# Spaces Configuration")
gr.Markdown("Convert custom assistants from HuggingChat into chat interfaces with HuggingFace Spaces. Configure and download everything needed to deploy a simple HF space using Gradio.")
with gr.Column():
name = gr.Textbox(
label="Space Title",
placeholder="My Course Helper",
value="My Custom Space"
)
description = gr.Textbox(
label="Space Description",
placeholder="A customizable AI chat interface for...",
lines=2,
value="An AI research assistant tailored for academic inquiry and scholarly dialogue"
)
model = gr.Dropdown(
label="Model",
choices=MODELS,
value=MODELS[0],
info="Choose based on your needs and budget"
)
api_key_var = gr.Textbox(
label="API Key Variable Name",
value="OPENROUTER_API_KEY",
info="Name for the secret in HuggingFace Space settings"
)
system_prompt = gr.Textbox(
label="System Prompt",
placeholder="You are a research assistant...",
lines=4,
value="You are a knowledgeable academic research assistant. Provide thoughtful, evidence-based guidance for scholarly work, literature reviews, and academic writing. Support students and researchers with clear explanations and critical thinking."
)
examples_text = gr.Textbox(
label="Example Prompts (one per line)",
placeholder="Hello! How can you help me?\nWhat's the weather like?\nExplain quantum computing",
lines=3,
info="These will appear as clickable examples in the chat interface"
)
gr.Markdown("### URL Grounding (Optional)")
gr.Markdown("Add up to 4 URLs to provide context. Content will be fetched and added to the system prompt.")
url1 = gr.Textbox(
label="URL 1",
placeholder="https://example.com/page1",
info="First URL for context grounding"
)
url2 = gr.Textbox(
label="URL 2",
placeholder="https://example.com/page2",
info="Second URL for context grounding"
)
url3 = gr.Textbox(
label="URL 3",
placeholder="https://example.com/page3",
info="Third URL for context grounding"
)
url4 = gr.Textbox(
label="URL 4",
placeholder="https://example.com/page4",
info="Fourth URL for context grounding"
)
with gr.Row():
temperature = gr.Slider(
label="Temperature",
minimum=0,
maximum=2,
value=0.7,
step=0.1,
info="Higher = more creative, Lower = more focused"
)
max_tokens = gr.Slider(
label="Max Response Tokens",
minimum=50,
maximum=4096,
value=1024,
step=50
)
generate_btn = gr.Button("Generate Deployment Package", variant="primary")
status = gr.Markdown(visible=False)
download_file = gr.File(label="Download your zip package", visible=False)
# Connect the generate button
generate_btn.click(
on_generate,
inputs=[name, description, system_prompt, model, api_key_var, temperature, max_tokens, examples_text, url1, url2, url3, url4],
outputs=[status, download_file]
)
with gr.Tab("Chat Support"):
gr.Markdown("# Chat Support")
gr.Markdown("Get personalized guidance on configuring chat assistants as HuggingFace Spaces for educational & research purposes.")
# Meta chat interface
with gr.Column():
chatbot = gr.Chatbot(
value=[],
label="Chat Support Assistant",
height=400
)
msg = gr.Textbox(
label="Ask about configuring chat UIs for courses, research, or custom HuggingFace Spaces",
placeholder="How can I configure a chat UI for my senior seminar?",
lines=2
)
with gr.Accordion("URL Grounding (Optional)", open=False):
gr.Markdown("Add URLs to provide additional context for more informed responses")
chat_url1 = gr.Textbox(
label="URL 1",
value="https://huggingface.co/docs/hub/en/spaces-overview",
info="HuggingFace Spaces Overview"
)
chat_url2 = gr.Textbox(
label="URL 2",
value="https://huggingface.co/docs/hub/en/spaces-config-reference",
info="Spaces Configuration Reference"
)
chat_url3 = gr.Textbox(
label="URL 3",
value="https://huggingface.co/docs/hub/en/spaces-settings",
info="Spaces Settings Documentation"
)
chat_url4 = gr.Textbox(
label="URL 4",
value="https://huggingface.co/docs/hub/en/spaces-sdks-gradio",
info="Gradio SDK for Spaces"
)
with gr.Row():
submit = gr.Button("Send", variant="primary")
clear = gr.Button("Clear")
gr.Examples(
examples=[
"How do I set up a course assistant?",
"Which model should I use?",
"What's a good system prompt?",
"Why Gradio? What is it?",
"How do I customize the chat interface?",
"Can you help me troubleshoot?",
],
inputs=msg
)
# Connect the chat functionality
submit.click(respond, [msg, chatbot, chat_url1, chat_url2, chat_url3, chat_url4], [msg, chatbot])
msg.submit(respond, [msg, chatbot, chat_url1, chat_url2, chat_url3, chat_url4], [msg, chatbot])
clear.click(clear_chat, outputs=[msg, chatbot])
if __name__ == "__main__":
demo.launch(share=True)