1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/** @jsxImportSource npm:hono@3/jsx */
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText";
import { chat } from "https://esm.town/v/stevekrouse/openai";
import cronstrue from "npm:cronstrue";
import { Hono } from "npm:hono@3";
const examples = [
{
user: "website that shows the current time",
content: `/** @jsxImportSource npm:react */
export default function() {
return <h1>{new Date().toLocaleTimeString()}</h1>;
}`,
},
{
user: `A collaborative poem builder.
It stores each line of the poem in sqlite.
It has a textbox that lets anyone input a new line to the poem.`,
content: await fetchText("https://esm.town/v/stevekrouse/poembuilder3?v=4"),
},
{
user: "an app that uses chatgpt to convert natural language to cron syntax",
content: await fetchText("https://esm.town/v/stevekrouse/cron2"),
},
];
const app = new Hono();
export default app.fetch;
app.get("/", async (c) => {
const example = examples[Math.floor(Math.random() * examples.length)];
const description = c.req.query("description") || example.user;
let code = c.req.query("description") ? await compile(description) : example.content;
return c.html(
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com" />
<title>Val Writer</title>
</head>
<body class="flex p-6 flex-col space-y-4 max-w-2xl mx-auto">
<div>
<h1 class="text-3xl">Val Writer</h1>
<p>Compile your prompt into code</p>
</div>
<form class="flex space-x-2" hx-disabled-elt="button">
<textarea
name="description"
required
class="w-full border-2 rounded-lg p-2"
rows={5}
>
{description}
</textarea>
<button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded disabled:hidden">
Write
</button>
</form>
<div>
<pre>
{code}
</pre>
</div>
</body>
</html>,
);
});
export async function compile(description: string) {
const messages = [
{
role: "system",
content: `You are a programmer.
Convert user requests to code.
Write ONLY Deno TypeScript.
If you use Hono, use \`export default app.fetch;\` to start the server.
Only use web standard fetch.
For storage, use \`import { sqlite } from "https://esm.town/v/std/sqlite?v=5";\`. Rows are arrays, NOT objects.
For notifying the user, use: \`import { email } from "https://esm.town/v/std/email";
await email({ subject: "Subject", text: "Body" });\`
Add extensive comments.`,
},
...examples.flatMap((example) => [, {
role: "user",
content: example.user,
}, {
role: "assistant",
content: example.content,
}]),
{ role: "user", content: description },
];
const { content } = await chat(messages, {
model: "gpt-4o",
max_tokens: 4000,
});
return content;
}