import { renderToString } from "npm:react-dom/server";
import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";
import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts";
import { ModelProvider, modelProvider } from "https://esm.town/v/yawnxyz/ai";
const app = new Hono();
const assets = {
emailForm: `
<form id="emailForm" class="space-y-4">
<label for="email" class="block text-sm font-medium text-gray-700">Email:</label>
<input type="email" id="email" name="email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<button type="submit" class="mt-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo
</form>
`,
};
const Page = () => (
<html lang="en">
<head>
<title>Simple HTMX Example</title>
<script src="https://unpkg.com/htmx.org@1.9.9"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
<div class="space-y-6 max-w-lg w-full bg-white p-6 rounded-lg shadow-md">
<button hx-post="/click" hx-target="#clickResponse" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus
<button hx-get="/get-email-form" hx-target="#formResponse" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-n
<form hx-post="/generate-html" hx-target="#generatedResponse" class="space-y-4">
<label for="prompt" class="block text-sm font-medium text-gray-700">Enter prompt:</label>
<textarea id="prompt" name="prompt" rows="4" cols="50" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">a simple name form</textarea>
<button type="submit" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offse
</form>
<div id="clickResponse" class="mt-4 p-4 bg-gray-50 rounded-md"></div>
<div id="formResponse" class="mt-4 p-4 bg-gray-50 rounded-md"></div>
<div id="generatedResponse" class="mt-4 p-4 bg-gray-50 rounded-md"></div>
</div>
</body>
</html>
);
app.get("/", (c) => {
return c.html(<Page />);
});
app.get("/get", (c) => {
return c.text(showClicked());
});
app.get("/get-email-form", (c) => {
return c.html(assets.emailForm);
});
app.post("/post", async (c) => {
try {
const body = await c.req.json();
console.log('Received JSON data:', body);
return c.json({ received: body });
} catch (error) {
console.error('some error:', error)
return c.json({ error: 'Invalid JSON data' }, 400);
}
});
app.post("/form", async (c) => {
try {
const body = await c.req.parseBody();
console.log('Received form data:', body);
return c.json(body);
} catch (error) {
return c.json({ error: 'Invalid form data' }, 400);
}
});
app.post("/generate-html", async (c) => {
const body = await c.req.parseBody();
const prompt = [
"generate simple tailwind-friendly html from prompt",
"only generate the html, don't describe yourself, don't describe directions, don't wrap in markdown ````",
"only return html do not wrap in markdown or wrap in backticks:",
"ONLY IF THE USER WANTS A FORM: create a tailwinds-based form that sends data to /form endpoint; you will receive JSON back, please display it back to the user as a string; use hx-post and hx-target to not redirect, and show the message as a thanks)"
"use tailwind to make pretty",
JSON.stringify(body),
].join(',\n ')