<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "shortcut icon" href = "{{ url_for('static', filename='favicon.ico') }}" type = "image/x-icon" >
< link rel = "icon" href = "{{ url_for('static', filename='favicon.ico') }}" type = "image/x-icon" >
< title > fabric< / title >
< link rel = "shortcut icon" type = "image/x-icon" href = "https://beehiiv-images-production.s3.amazonaws.com/uploads/asset/file/971f362a-f3fa-427f-b619-7e04cc135d17/fabric-logo-miessler-transparent.png?t=1704525002" / >
< link href = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel = "stylesheet" >
< / head >
< body class = "bg-gray-900 text-white min-h-screen" >
< div class = "container mx-auto py-10 px-4" >
< div class = "flex justify-between items-center mb-6" >
<!-- Add this line inside the div with class "flex justify - between items - center mb - 6" -->
< p > < img src = "static/fabric-logo-miessler-transparent.png" alt = "fabric logo" class = "h-20 w-auto mr-2" > < / p >
< h1 class = "text-4xl font-bold" > < code > fabric< / code > < / h1 >
< / div >
< p > Please enter your content and select the API you want to use:< / p >
< br / >
< form method = "POST" class = "space-y-4" >
< div >
< label for = "prompt" class = "block text-sm font-medium" > Content:< / label >
< input type = "text" id = "prompt" name = "prompt" required class = "w-full px-3 py-2 border border-gray-300 rounded-md text-black" >
< / div >
< div >
< label for = "api" class = "block text-sm font-medium" > API:< / label >
< select id = "api" name = "api" class = "w-full px-3 py-2 border border-gray-300 rounded-md text-black" >
< option value = "/extwis" > /extwis< / option >
<!-- Add more API endpoints here... -->
< / select >
< / div >
< button type = "submit" class = "px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-white font-medium" > Send Request< / button >
< / form >
{% if response %}
< div class = "mt-8" >
< div class = "flex justify-between items-center mb-4" >
< h2 class = "text-2xl font-bold" > API Response:< / h2 >
< button id = "copy-button" class = "bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md" > Copy to Clipboard< / button >
< / div >
< pre id = "response-output" class = "bg-gray-800 p-4 rounded-md whitespace-pre-wrap" > {{ response }}< / pre >
< / div >
{% endif %}
< / div >
< script >
document.getElementById("api").addEventListener("change", function() {
document.getElementById("response-output").textContent = "";
});
document.getElementById("copy-button").addEventListener("click", function() {
const responseOutput = document.getElementById("response-output");
const range = document.createRange();
range.selectNode(responseOutput);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
});
< / script >
< / body >
< / html >