Public
HTTP
Forked from substrate/spanishLesson
substrate-spanishvocablesson.web.val.run
August 1, 2024
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
import { ComputeJSON, ComputeText, GenerateImage, GenerateSpeech, sb, Substrate } from "npm:substrate";
import { z } from "npm:zod";
import { zodToJsonSchema } from "npm:zod-to-json-schema";
const input = "scuba diving";
const substrate = new Substrate({ apiKey: Deno.env.get("SUBSTRATE_API_KEY") });
const vocabLesson = z.object({
englishExample1: z.string().describe("A practical example using the topic, in english."),
englishExample2: z.string().describe("A different practical example using the word, in english."),
spanishExample1: z.string().describe("A translation of the first english example in spanish."),
spanishExample2: z.string().describe("A translation of the second english example in spanish."),
});
const lesson = new ComputeJSON({
prompt: sb.interpolate`Generate a vocabulary lesson for this topic in Spanish.
Make sure the examples are relevant to the topic.
Make sure the examples are practical phrases that you would use in real life.
Make sure the translation is in Spanish.
TOPIC: ${input}`,
json_schema: zodToJsonSchema(vocabLesson),
});
lesson.id = "lesson";
const prompt1 = new ComputeText({
prompt: sb.interpolate`Describe an image depicting this: ${
lesson.future.json_object.get("englishExample1")
}. Be creative, imagining the appropriate background and subjects.`,
});
prompt1.id = "prompt1";
const prompt2 = new ComputeText({
prompt: sb.interpolate`Describe an image depicting this: ${
lesson.future.json_object.get("englishExample2")
}. Be creative, imagining the appropriate background and subjects.`,
});
prompt2.id = "prompt2";
const image1 = new GenerateImage({ prompt: prompt1.future.text, store: "hosted" });
image1.id = "image1";
const image2 = new GenerateImage({ prompt: prompt2.future.text, store: "hosted" });
image2.id = "image2";
const speech1 = new GenerateSpeech({ // @ts-ignore
text: lesson.future.json_object.get("spanishExample1"),
store: "hosted",
language: "es",
});
speech1.id = "speech1";
const speech2 = new GenerateSpeech({ // @ts-ignore
text: lesson.future.json_object.get("spanishExample2"),
store: "hosted",
language: "es",
});
speech2.id = "speech2";
const html = new ComputeText({
prompt: sb.interpolate`generate a compact html page for a spanish vocab lesson using the following content.
The page should start with the topic in a centered h4 heading: ${input}.
Then it should have two "flash cards" in a 2-column grid layout.
The text in the cards should be black, and the background should be white.
The flash cards should start with the spanish example.
Below add an <audio> element using the matching speech url below.
Followed by the english translation, hidden within a <details> element in the format:
<details><summary>English</summary><p>{english translation}</p></details>
Finally, show the image matching the examples, using the image urls below, displayed full-width with square aspect ratio.
Style the entire webpage with emoji, colors, gradients, and fonts to match "${input}".
Do not include the image prompts, which were used to generate the images.
Just return the website html. Do not introduce with "Here is" or explain the output.
CONTENT:
${sb.jq(lesson.future.json_object, "@json")}
IMAGE 1 URL: ${image1.future.image_uri}
IMAGE 2 URL: ${image2.future.image_uri}
SPEECH 1 URL: ${speech1.future.audio_uri}
SPEECH 2 URL: ${speech2.future.audio_uri}
`,
model: "Llama3Instruct70B",
});
const stream = await substrate.stream(html);
// Render UI
export default async function handler(req: Request): Promise<Response> {
if (new URL(req.url).pathname === "/robots.txt") {
return new Response("User-agent: *\nDisallow: /");
}
const renderHTML = (await import("https://esm.town/v/substrate/renderHTML")).default;
return renderHTML(stream);
}
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