import inputHeader from "https://esm.town/v/substrate/inputHeader"; import { ComputeJSON, ComputeText, GenerateImage, GenerateSpeech, sb, Substrate } from "npm:substrate"; import { z } from "npm:zod"; import { zodToJsonSchema } from "npm:zod-to-json-schema"; export default async function handler(req: Request): Promise { const input = new URL(req.url).searchParams.get("input") || "scuba diving"; // Substrate graph 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. DO NOT generate irrelevant examples. 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 an interactive html page for a spanish vocab lesson using the following content. The page background should use a small repeated radial gradient. The page should start with the topic in a centered heading: ${input}. Then it should have two "flash cards" for the two phrases. The flashcards should be positioned in a single row, side by side horizontally. 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

spanishLesson