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
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
import { Hono } from "https://esm.sh/hono";
import { generateImage } from "https://esm.town/v/isidentical/falImageGen";
import { thisValURL } from "https://esm.town/v/stevekrouse/thisValURL";
const app = new Hono();
app.get("/", (c) =>
c.html(
<html>
<head>
<title>Fal Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Fal Demo</h1>
<a href={thisValURL()}>view code</a>
<form action="/" method="post">
<input type="text" name="prompt" value="a frantic programmer" style={{ width: "50%" }} />
<input type="submit" value="Generate" />
</form>
</body>
</html>,
));
app.post("/", async (c) => {
const form = await c.req.formData();
const prompt = form.get("prompt");
const start = performance.now();
const { url } = await generateImage(prompt);
const duration = performance.now() - start;
return c.html(
<html>
<head>
<title>Fal Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Fal Demo</h1>
<a href={thisValURL()}>view code</a>
<form action="/" method="post">
<input type="text" name="prompt" value={prompt} style={{ width: "50%" }} />
<input type="submit" value="Generate" />
</form>
<p>Generated in: {duration / 1000} seconds</p>
<img src={url} width="300" />
</body>
</html>,
);
});
export default app.fetch;
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
stevekrouse-fal_demo.web.val.run
v22
May 27, 2024