substrate-websim.web.val.run
Readme

WebSim on Val with Substrate

🪩 To fork, sign up for Substrate to get your own API key and $50 free credits

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
import urlHeader from "https://esm.town/v/substrate/urlHeader";
import { ComputeText, GenerateImage, sb, Substrate, UpscaleImage } from "npm:substrate";
const substrate = new Substrate({ apiKey: Deno.env.get("SUBSTRATE_API_KEY") });
export default async function render(req: Request): Promise<Response> {
if (new URL(req.url).pathname === "/robots.txt") {
return new Response("User-agent: *\nDisallow: /");
}
const url = new URL(req.url);
const searchParams = url.searchParams;
const simImage = searchParams.get("image");
if (simImage) {
const prompt = new ComputeText({
prompt: sb
.interpolate`Describe an image named ${simImage}. Describe a single subject with background and style details.
We'll use this description to generate an image so include creative details like style, vibe, mood, character.`,
temperature: 0.8,
});
prompt.cache_age = 60 * 60;
const image = new GenerateImage({
prompt: prompt.future.text,
});
image.cache_age = 60 * 60 * 24;
const res = await substrate.run(image);
const imageUri = res.get(image).image_uri;
const base64Data = imageUri.split(",")[1];
const imageData = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
return new Response(imageData, {
headers: {
"Content-Type": "image/jpeg",
},
});
}
else {
let simUrl = searchParams.get("url");
if (!simUrl) {
simUrl = url.pathname + url.search;
}
if (simUrl.length <= 2) {
simUrl = "wikipedia.org/hokusai";
}
const instructions = `all images should be in the form /?image=<image description including art style>.
always use descriptive image names including the particular style (e.g. photograph, illustration).
include plenty of local urls to other pages on the same domain.
all urls must be in this format: /?url=<full url with a domain, descriptive path, and params>.
never navigate to a url with a query string, always use a full url with domain and path, e.g. /?url=https://google.com/?q=my+search+query
style every element to match the style of the website you are simulating. be creative with using the appropriate css fonts, sizing, layout, colors, and hover effects.
you are a talented web designer and you can simulate the style of any imaginary site in extraordinary detail.
never use lorem ipsum or placeholder text, your job is to imagine interesting content!
just return the website html. do not introduce with "Here is" or explain the output.`;
const html = new ComputeText({
prompt: sb.interpolate`generate an html page that simulates the content and style of this url: ${simUrl}
${instructions}`,
model: "Llama3Instruct70B",
});
const stream = await substrate.stream(html);
let { readable, writable } = new TransformStream();
let writer = writable.getWriter();
const textEncoder = new TextEncoder();
new Promise(async () => {
writer.write(textEncoder.encode(urlHeader(simUrl)));
for await (const event of stream.get(html)) {
if (event.object === "node.delta") {
writer.write(textEncoder.encode(event.data.text || ""));
}
}
writer.close();
});
return new Response(readable, {
headers: {
"Content-Type": "text/html",
},
});
}
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
August 1, 2024