|
|
from anyio import to_thread |
|
|
from starlette.applications import Starlette |
|
|
from starlette.responses import HTMLResponse, JSONResponse |
|
|
from starlette.routing import Route |
|
|
|
|
|
from smolagents import CodeAgent, InferenceClientModel, MCPClient |
|
|
|
|
|
|
|
|
|
|
|
mcp_server_parameters = { |
|
|
"url": "https://evalstate-hf-mcp-server.hf.space/mcp", |
|
|
"transport": "streamable-http", |
|
|
} |
|
|
mcp_client = MCPClient(server_parameters=mcp_server_parameters) |
|
|
|
|
|
|
|
|
agent = CodeAgent( |
|
|
model=InferenceClientModel(model_id="Qwen/Qwen2.5-Coder-32B-Instruct"), |
|
|
tools=mcp_client.get_tools(), |
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
async def shutdown(): |
|
|
mcp_client.disconnect() |
|
|
|
|
|
|
|
|
async def homepage(request): |
|
|
return HTMLResponse( |
|
|
r""" |
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Smolagents Demo</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
background-color: #f5f5f5; |
|
|
} |
|
|
.container { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
padding: 30px; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
|
} |
|
|
h1 { |
|
|
color: #333; |
|
|
text-align: center; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
.chat-container { |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 8px; |
|
|
height: 400px; |
|
|
overflow-y: auto; |
|
|
padding: 15px; |
|
|
margin-bottom: 20px; |
|
|
background-color: #fafafa; |
|
|
} |
|
|
.message { |
|
|
margin-bottom: 15px; |
|
|
padding: 10px; |
|
|
border-radius: 6px; |
|
|
} |
|
|
.user-message { |
|
|
background-color: #007bff; |
|
|
color: white; |
|
|
margin-left: 50px; |
|
|
} |
|
|
.agent-message { |
|
|
background-color: #e9ecef; |
|
|
color: #333; |
|
|
margin-right: 50px; |
|
|
} |
|
|
.input-container { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
input[type="text"] { |
|
|
flex: 1; |
|
|
padding: 12px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 6px; |
|
|
font-size: 16px; |
|
|
} |
|
|
button { |
|
|
padding: 12px 24px; |
|
|
background-color: #007bff; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 6px; |
|
|
cursor: pointer; |
|
|
font-size: 16px; |
|
|
} |
|
|
button:hover { |
|
|
background-color: #0056b3; |
|
|
} |
|
|
button:disabled { |
|
|
background-color: #ccc; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
.loading { |
|
|
color: #666; |
|
|
font-style: italic; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>🤖 Smolagents Demo</h1> |
|
|
<div class="chat-container" id="chat-container"> |
|
|
<div class="message agent-message"> |
|
|
Hello! I'm a code agent with access to MCP tools. Ask me anything! |
|
|
</div> |
|
|
</div> |
|
|
<div class="input-container"> |
|
|
<input type="text" id="message-input" placeholder="Ask me anything..." autofocus> |
|
|
<button onclick="sendMessage()" id="send-button">Send</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const chatContainer = document.getElementById('chat-container'); |
|
|
const messageInput = document.getElementById('message-input'); |
|
|
const sendButton = document.getElementById('send-button'); |
|
|
|
|
|
function addMessage(content, isUser = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message ${isUser ? 'user-message' : 'agent-message'}`; |
|
|
messageDiv.textContent = content; |
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
async function sendMessage() { |
|
|
const message = messageInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
// Add user message |
|
|
addMessage(message, true); |
|
|
messageInput.value = ''; |
|
|
sendButton.disabled = true; |
|
|
sendButton.textContent = 'Sending...'; |
|
|
|
|
|
// Add loading indicator |
|
|
const loadingDiv = document.createElement('div'); |
|
|
loadingDiv.className = 'message agent-message loading'; |
|
|
loadingDiv.textContent = 'Thinking...'; |
|
|
chatContainer.appendChild(loadingDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/chat', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ message }), |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
// Remove loading indicator |
|
|
chatContainer.removeChild(loadingDiv); |
|
|
|
|
|
// Add agent response |
|
|
addMessage(data.reply); |
|
|
} catch (error) { |
|
|
// Remove loading indicator |
|
|
chatContainer.removeChild(loadingDiv); |
|
|
addMessage(`Error: ${error.message}`); |
|
|
} finally { |
|
|
sendButton.disabled = false; |
|
|
sendButton.textContent = 'Send'; |
|
|
messageInput.focus(); |
|
|
} |
|
|
} |
|
|
|
|
|
// Send message on Enter key |
|
|
messageInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
) |
|
|
|
|
|
|
|
|
async def chat(request): |
|
|
data = await request.json() |
|
|
message = data.get("message", "").strip() |
|
|
|
|
|
result = await to_thread.run_sync(agent.run, message) |
|
|
|
|
|
reply = str(result) |
|
|
return JSONResponse({"reply": reply}) |
|
|
|
|
|
|
|
|
app = Starlette( |
|
|
debug=True, |
|
|
routes=[ |
|
|
Route("/", homepage), |
|
|
Route("/chat", chat, methods=["POST"]), |
|
|
], |
|
|
on_shutdown=[shutdown], |
|
|
) |
|
|
|
