|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width" /> |
|
<title>OpenBuddy Text Generation</title> |
|
<link rel="stylesheet" href="style.css" /> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>OpenBuddy Text Generation</h1> |
|
<form id="generateForm"> |
|
<div class="form-group"> |
|
<label for="promptInput">Enter your prompt:</label> |
|
<textarea id="promptInput" rows="5" cols="50" required></textarea> |
|
</div> |
|
<button type="submit">Generate Text</button> |
|
</form> |
|
<div id="resultContainer" style="display: none;"> |
|
<h2>Generated Text:</h2> |
|
<p id="generatedText"></p> |
|
</div> |
|
<div id="debugContainer"> |
|
<h2>Debug Information:</h2> |
|
<pre id="debugOutput"></pre> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
document.getElementById('generateForm').addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
const promptInput = document.getElementById('promptInput'); |
|
const prompt = promptInput.value.trim(); |
|
if (prompt !== '') { |
|
generateText(prompt); |
|
} |
|
}); |
|
|
|
function generateText(prompt) { |
|
const apiUrl = 'https://api-inference.huggingface.co/models/OpenBuddy/openbuddy-llama3-8b-v21.1-8k'; |
|
const apiKey = '{{API_KEY}}'; |
|
|
|
const requestData = { |
|
inputs: prompt, |
|
parameters: { |
|
max_new_tokens: 100 |
|
} |
|
}; |
|
|
|
|
|
document.getElementById('debugOutput').textContent = 'Request Data:\n' + JSON.stringify(requestData, null, 2); |
|
|
|
fetch(apiUrl, { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
'Authorization': 'Bearer ' + apiKey |
|
}, |
|
body: JSON.stringify(requestData) |
|
}) |
|
.then(response => { |
|
|
|
document.getElementById('debugOutput').textContent += '\n\nResponse Status: ' + response.status; |
|
document.getElementById('debugOutput').textContent += '\nResponse Headers:\n' + JSON.stringify(Object.fromEntries(response.headers), null, 2); |
|
|
|
if (!response.ok) { |
|
throw new Error('Request failed with status: ' + response.status); |
|
} |
|
|
|
return response.json(); |
|
}) |
|
.then(data => { |
|
|
|
document.getElementById('debugOutput').textContent += '\n\nResponse Data:\n' + JSON.stringify(data, null, 2); |
|
const generatedText = data[0].generated_text; |
|
document.getElementById('generatedText').textContent = generatedText; |
|
document.getElementById('resultContainer').style.display = 'block'; |
|
}) |
|
.catch(error => { |
|
console.error('Error:', error); |
|
|
|
document.getElementById('debugOutput').textContent += '\n\nError:\n' + error.message; |
|
alert('An error occurred while generating text.'); |
|
}); |
|
} |
|
</script> |
|
</body> |
|
</html> |
