ai-model-runner-light / index.html
sheikhcoders's picture
Upload index.html with huggingface_hub
3327165 verified
<!DOCTYPE html>
<html>
<head>
<title>AI Model Runner - Test</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
.test { background: #f0f0f0; padding: 20px; margin: 10px 0; border-radius: 5px; }
button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
.result { background: #e8f5e8; padding: 10px; margin-top: 10px; border-radius: 5px; }
.error { background: #ffe8e8; padding: 10px; margin-top: 10px; border-radius: 5px; }
</style>
</head>
<body>
<h1>🤖 AI Model Runner - Agentic Test</h1>
<p>Testing the Agentic Model with Interleaved Thinking and Tool Use capabilities</p>
<div class="test">
<h3>Agentic Model Test</h3>
<textarea id="task" rows="3" placeholder="Enter your task (e.g., 'Search for AI trends', 'Calculate 15 * 23 + 7')"></textarea>
<textarea id="context" rows="2" placeholder="Additional context (optional)"></textarea>
<button onclick="testAgentic()">Test Agentic Model</button>
<div id="result"></div>
</div>
<div class="test">
<h3>Direct API Test</h3>
<button onclick="testDirect()">Test Direct API Call</button>
<div id="directResult"></div>
</div>
<script>
async function testAgentic() {
const task = document.getElementById('task').value;
const context = document.getElementById('context').value;
const resultDiv = document.getElementById('result');
if (!task) {
resultDiv.className = 'error';
resultDiv.innerHTML = 'Please enter a task';
return;
}
try {
const response = await fetch('/agentic', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ task, context })
});
const data = await response.json();
resultDiv.className = response.ok ? 'result' : 'error';
resultDiv.innerHTML = `
<h4>Response:</h4>
<pre>${JSON.stringify(data, null, 2)}</pre>
`;
} catch (error) {
resultDiv.className = 'error';
resultDiv.innerHTML = `Error: ${error.message}`;
}
}
async function testDirect() {
const resultDiv = document.getElementById('directResult');
try {
const response = await fetch('/');
const data = await response.json();
resultDiv.className = 'result';
resultDiv.innerHTML = `
<h4>API Status:</h4>
<pre>${JSON.stringify(data, null, 2)}</pre>
`;
} catch (error) {
resultDiv.className = 'error';
resultDiv.innerHTML = `Error: ${error.message}`;
}
}
</script>
</body>
</html>