You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
3.2 KiB
65 lines
3.2 KiB
9 months ago
|
<!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>
|
||
|
|
|
||
|
|
|