/** @jsxImportSource npm:hono@3/jsx */ import { unkey, type UnkeyContext } from "npm:@unkey/hono"; import { Hono } from "npm:hono"; import { createBedtimeStory, getBedtimeStoryById, getRecentBedtimeStories, } from "https://esm.town/v/dthyresson/bedtimeStoriesDb"; import type { BedtimeStory } from "https://esm.town/v/dthyresson/bedtimeStoriesDb"; import { getSortedActivities } from "https://esm.town/v/dthyresson/bedtimeStoryActivities"; import { getSortedAdjectives } from "https://esm.town/v/dthyresson/bedtimeStoryAdjectives"; import { getSortedAnimals } from "https://esm.town/v/dthyresson/bedtimeStoryAnimals"; import { getSortedColors } from "https://esm.town/v/dthyresson/bedtimeStoryColors"; import { generateOpenGraphTags, OpenGraphData } from "https://esm.town/v/dthyresson/generateOpenGraphTags"; import { ValTownLink } from "https://esm.town/v/dthyresson/viewOnValTownComponent"; import { chat } from "https://esm.town/v/stevekrouse/openai"; import * as fal from "npm:@fal-ai/serverless-client"; export const falConfig = () => { fal.config({ // Can also be auto-configured using environment variables: credentials: Deno.env.get("FAL_KEY"), }); return fal; }; const app = new Hono<{ Variables: { unkey: UnkeyContext } }>(); // app.use( // "*", // unkey({ // apiId: "rlns_2AMjVgwwMksmssLVb56LVmkpB56C", // }), // ); function parseStory(text) { // Split the text into lines and remove empty lines const lines = text.split("\n").filter(line => line.trim() !== ""); // Extract the title (first line), remove quotes, markdown and trim const title = lines[0] .replace(/^"|"$/g, "") .replace(/\*\*|\*/g, "") .replace(/\#\#|\#/g, "") .trim(); // Extract the summary (second line) and trim const summary = lines[1] .replace(/^"|"$/g, "") .replace(/\*\*|\*/g, "") .replace(/\#\#|\#/g, "") .trim(); // Join the rest of the lines as the story, replace '\n' with actual newlines const story = lines.slice(2).join("\n").replace(/\\n/g, "\n").trim(); // Return the JSON object return { title, summary, story, }; } export const generateBedtimeStory = async (options: BedtimeStory | null): BedtimeStory => { const { adjective = "funny", color = "pink", animal = "penguin", activity = "flies a kite" } = options; const { content } = await chat( [ { role: "system", content: `Write a ${adjective} bedtime story about a ${color} colored ${animal} that ${activity}. The story should have a title, be suitable for young children, give the animal a friendly name and be no longer than 300 words. Return the title on the first line, on the second line a one sentence summary of this story, and then the story. If the story mentions other animals, include them in the summary. `, }, ], { max_tokens: 1_000, model: "gpt-4o-mini" }, ); console.log(content); const parsedContent = parseStory(content); const story = { ...options, ...parsedContent }; const pictureUrl = await generateBedtimeStoryPictureUrl(story); return { ...story, pictureUrl }; }; export const generateBedtimeStoryPictureUrl = async (bedtimeStory) => { const fal = falConfig(); const { adjective, animal, color, summary } = bedtimeStory; const { content } = await chat( [ { role: "system", content: `Describe an image that depicts the ${adjective} children's story about a ${color} colored ${animal}: ${summary}. The description should be descriptive, but three short sentences. Just give me the instructions, don't make an image.`, }, ], { max_tokens: 300, model: "gpt-4o-mini" }, ); console.log("fal prompt", content); const prompt = ` Illustrate: "${content}". in ${adjective} style. paint the ${animal} the color ${color}. `; const falModel = "flux/schnell"; // "flux/schnell"; // "aura-flow"; // fast-lightning-sdxl const options = { "image_size": "square", "num_images": 1, "num_inference_steps": 6, "enable_safety_checker": true, }; // {"num_images": 1, // "guidance_scale": 9.5, // "num_inference_steps": 20, // "expand_prompt": true } const result: any = await fal.run(`fal-ai/${falModel}`, { input: { prompt }, options }); const url = result.images[0].url; return url; }; const HeadComponent = ({ title, ogData, children }) => { const og: OpenGraphData = { title: ogData?.title || "Bedtime Story Maker", description: ogData?.description || "", image: ogData?.image || "", url: ogData?.url || `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories}`, }; const ogTags = generateOpenGraphTags(og); return ( Bedtime Story Maker: {title}

{children} ); }; const ContainerComponent = ({ children }) => { return (

📒 Bedtime Story Maker

{children}

); }; const Heading1Component = ({ children }) => { return (

{children}

); }; const Heading2Component = ({ children }) => { return (

{children}

); }; const LinkComponent = ({ href, extraStyles, children }) => { return ( {children} ); }; const LoadingComponent = ({ caption }) => { return (

{caption || "Loading"}

); }; // Routes app.get("/", (c) => c.redirect("/bedtime_stories")); app.get("/bedtime_stories", async (c) => { const stories = await getRecentBedtimeStories(); return c.html(

{story.title}

{story.summary}

Another!

, ); }); app.get("/bedtime_stories/new", (c) => { return c.html( What kind of story do you want to hear?

{adj.emoji} {adj.name}

, ); }); const starters = [ "Okay", "Sure", "Alright", "Indeed", "Nice", "Gotcha", ]; const randomStarter = starters[Math.floor(Math.random() * starters.length)]; app.get("/bedtime_stories/new/:adjective", (c) => { const { adjective } = c.req.param(); return c.html( {randomStarter}! I'll tell a {adjective} story about an animal. What animal do you want?

{animal.emoji} {animal.name}

, ); }); app.get("/bedtime_stories/new/:adjective/:animal", (c) => { const { adjective, animal } = c.req.param(); return c.html( {randomStarter}! Your {animal} stars your {adjective} story. What color should should your {animal} be?

{color.name}

, ); }); app.get("/bedtime_stories/new/:adjective/:animal/:color", (c) => { const { adjective, animal, color } = c.req.param(); return c.html( {randomStarter}. Let's finish your {adjective} story. What should your {color} {animal} do?

{activity.emoji} {activity.name}

, ); }); app.get( "/bedtime_stories/create/:adjective/:animal/:color/:activity", async (c) => { const { adjective, color, animal, activity } = c.req.param(); const options = { adjective, color, animal, activity }; // const generatedStory = await generateBedtimeStory(options); // console.log("generated story", generatedStory); // const bedtimeStory = await createBedtimeStory(generatedStory); return c.html( , ); }, ); app.get( "/bedtime_stories/generate/:adjective/:animal/:color/:activity", async (c) => { const { adjective, color, animal, activity } = c.req.param(); const options = { adjective, color, animal, activity }; const generatedStory = await generateBedtimeStory(options); console.log("generated story", generatedStory); const bedtimeStory = await createBedtimeStory(generatedStory); return c.redirect(`/bedtime_stories/read/${bedtimeStory.id}`); }, ); app.get( "/bedtime_stories/read/:id", async (c) => { const { id } = c.req.param(); const bedtimeStory = await getBedtimeStoryById(id); console.log("saved story", bedtimeStory); const { adjective, color, animal, activity, title, summary, story, pictureUrl } = bedtimeStory; const ogData: OpenGraphData = { title, description: summary, image: pictureUrl, url: `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories/read/${id}`, }; return c.html(

{title} {summary}

{story.split(/(?<=[.!?])\s+(?=(?:[^"]*"[^"]*")*[^"]*$)/).map((sentence, index) => (

{sentence}

))}

, ); }, ); export default app.fetch;

bedtimeStoryMaker