All Code
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.11/dist/tailwind.min.css" rel="stylesheet">
<title>Ask Axolotl</title>
<style>
body {
background-color: #74BEE8;
font-family: 'Courier New', monospace;
}
button {
background-color: #EC4899;
cursor: pointer;
transition: background-color 0.4s;
}
button:hover {
background-color: #BE185D;
}
</style>
</head>
<body class="flex flex-col h-screen">
<div class="text-center my-8">
<img src="axolotl_logo_white.png" width="184" height="184" alt="Axolotl Logo">
<h1 class="text-2xl font-semibold text-white">Axolotl</h1>
</div>
<form id="ask-form" class="mx-auto mb-8">
<textarea id="input-text"
class="w-full bg-transparent text-white border-white border-2 border-solid rounded opacity-80"
rows="7" placeholder="Ask something..."></textarea>
<div class="mt-4 flex justify-between">
<button type="button" class="Clear mr-2 px-2 py-1 rounded text-white">Clear</button>
<button type="button" class="Speak_Start mr-2 px-2 py-1 rounded text-white">Speak Start</button>
<button type="submit" class="Send mr-2 px-2 py-1 rounded text-white">Send your question!</button>
</div>
<textarea id="output-text"
class="mt-4 w-full bg-transparent text-white border-white border-2 border-solid rounded opacity-80"
rows="10" readonly></textarea>
<button type="button" class="Stop mt-4 mr-2 float-right px-2 py-1 rounded text-white">Stop</button>
</form>
<div class="h-10 text-center mb-4 text-xs">
<a href="#" class="text-white">Made with ❤️</a>
</div>
<script>
const askForm = document.getElementById('ask-form');
const inputText = document.getElementById('input-text');
const outputText = document.getElementById('output-text');
askForm.addEventListener('submit', async (e) => {
e.preventDefault();
const prompt = inputText.value;
const url = `https://a.picoapps.xyz/ask-ai?prompt=${encodeURIComponent(prompt)}`;
outputText.value = 'Loading...';
const response = await fetch(url);
const data = await response.json();
const result = data.response;
console.log(result);
outputText.value = result.replaceAll('\n', '\r\n');
});
</script>
</body>
</html>
]]>