Public
HTTP
Forked from stevekrouse/openaistreaminghtml
Readme
Made on Val Town livestream.
This project is a kind of a mini tribute to Websim.
To-dos:
- Spruce up styles a bit
- Write this README
Add a cache!Try moving style tag to the bottom by prompting so content appears immediately and then becomes styleddidn't work b/c CSS parsing isn't progressive- Need more prompting to get the model not to generate placeholder-y content
- Better root URL page / index page with links to some good sample generations
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
import { blob } from "https://esm.town/v/std/blob?v=12";
import OpenAI from "npm:openai";
const openai = new OpenAI();
const getCacheKey = (url: string): string => {
return `webgen-url-cache-v2:${url}`;
};
export default async (req) => {
let { readable, writable } = new TransformStream();
let writer = writable.getWriter();
const textEncoder = new TextEncoder();
const loadingSpinnerHTMLStart = `
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Spinner container */
.spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid transparent;
border-radius: 50%;
border-top-color: #a6e3e9;
border-right-color: #ffafcc;
border-bottom-color: #ffddc1;
border-left-color: #caffbf;
animation: spin 1.2s linear infinite;
}
body {
background: #111;
}
pre {
color: #fff;
line-height: 1;
padding: 1em;
}
</style>
<div class="toHide">
<div class="spinner">
</div>
<pre>
Loading...
`;
const loadingSpinnerHTMLEnd = `</pre></div>`;
const loadingSpinnerHide = `<style>
body { background: initial;}
.toHide { display: none; }
</style>`;
const linkFixerScript = `
<script>
for (const a of [...document.querySelectorAll('a')]) {
console.log(a.href)
a.href = \`/\${a.href}\`;
}
</script>
`;
// 1. get the pathname of the URL and use it as the "fake URL " to generate from
const promptURL = new URL(req.url).pathname.slice(1);
const cachedResult = await blob.getJSON(getCacheKey(promptURL));
if (cachedResult) {
return new Response(cachedResult, {
headers: {
"Content-Type": "text/html",
},
});
}
let pingInterval = setInterval(() => writer.write(textEncoder.encode("\n")), 1000);
if (promptURL.trim() === "") {
return new Response(
`Please provide a URL!\nFor example, go to "https://thesephist-webgen.web.val.run/https://thesephist.com/".`,
{
headers: {
"Content-Type": "text/plain",
},
status: 400,
},
);
}
const promptURLHost = new URL(promptURL).hostname;
let pageDescriptionInstructions = "";
let pageResult = "";
// // 2. Do one OpenAI inference to expand that URL to a longer page description
const pageDescriptionStream = await openai.chat.completions.create({
model: "gpt-4o",
messages: [{
role: "system",
content: `
You will be given a URL of an archived page whose contents have gone missing from our library.
Please, to the best of your ability, write a detailed instruction about the likely contents of this page such that a competent web developer should be able to fully reconstruct its likely contents.
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
v31
June 6, 2024
This is crazy cool