Log inSign up
stevekrouse avatar
Public
HTTP
Forked from stevekrouse/valwriter
Fork
0 Likes
stevekrouse-valwriter_react_clientside.web.val.run
Readme
  • streaming
    • we can't stream into an actual val - we can only write a full piece of text, i guess we can stream back the code so we don't get bored while we wait
  • send the code of the valwriter back to gpt
    • only if it's related, might need some threads
  • send errors, logs back to gpt
  • get screenshots of the output back to gpt
  • experiment with applying diffs instead of regenerating from scratch every time
    • could also have it as a conversation as the main thing and only the diffs get applied or the whole code gets replaced, maybe tool use it the key here... which does make it seem like a custom gpt may be the better fit...
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
97
98
99
100
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";
import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth?v=62";
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText";
import { chat } from "https://esm.town/v/stevekrouse/openai";
export default basicAuth(async (req) => {
const url = new URL(req.url);
if (url.pathname === "/") {
return new Response(
`<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" href="https://fav.farm/🔥" />
<title>Val Writer</title>
</head>
<body></body>
<script type="module">
import { App } from "${import.meta.url}";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
createRoot(document.body).render(jsx(App, { }));
</script>
</html>`,
{
headers: {
"content-type": "text/html",
},
},
);
}
});
export function App() {
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;
let resp;
// if (c.req.query("description")) {
// resp = await updateValByName({
// token: Deno.env.get("valtown"),
// code,
// name: "valwriter_output",
// });
// }
return (
<div className="flex p-6 flex-col space-y-4 max-w-2xl mx-auto">
<div>
<h1 className="text-3xl">Val Writer</h1>
<p>Compile your prompt into code</p>
</div>
<form className="flex space-x-2">
<textarea
name="description"
required
className="w-full border-2 rounded-lg p-2"
rows={5}
>
{description}
</textarea>
<button className="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded disabled:hidden">
Write
</button>
</form>
<div>
{resp
? (
<iframe
width="100%"
height="400px"
src="https://www.val.town/embed/stevekrouse/valwriter_output"
title="Val Town"
frameborder="0"
allow="web-share"
allowfullscreen
>
</iframe>
)
: null}
<pre>
{resp ? JSON.stringify(resp, null, 2) : code}
</pre>
</div>
</div>
);
}
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.
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Comments
Nobody has commented on this val yet: be the first!
June 12, 2024