/** * This app generates cute daily notes for a daughter using OpenAI's GPT model. * It stores the generated notes in SQLite for persistence and displays them on a simple web interface. * The app uses React for the frontend and Deno's runtime environment in Val Town for the backend. */ /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [note, setNote] = useState(""); const [loading, setLoading] = useState(true); useEffect(() => { fetchTodayNote(); }, []); const fetchTodayNote = async () => { setLoading(true); const response = await fetch("/get-note"); const data = await response.json(); setNote(data.note); setLoading(false); }; const generateNewNote = async () => { setLoading(true); await fetch("/generate-note", { method: "POST" }); await fetchTodayNote(); }; return (

Daily Note for My Daughter 💖

{loading ?

: (

{note}

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { OpenAI } = await import("https://esm.town/v/std/openai"); const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Create table if not exists await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_daughter_notes ( id INTEGER PRIMARY KEY AUTOINCREMENT, note TEXT NOT NULL, date TEXT NOT NULL UNIQUE ) `); const path = new URL(request.url).pathname; if (path === "/get-note") { const today = new Date().toISOString().split("T")[0]; const result = await sqlite.execute(`SELECT note FROM ${KEY}_daughter_notes WHERE date = ?`, [today]); if (result.rows.length > 0) { return new Response(JSON.stringify({ note: result.rows[0].note }), { headers: { "Content-Type": "application/json" }, }); } else { return new Response(JSON.stringify({ note: "No note generated for today yet. Click 'Generate New Note'!" }), { headers: { "Content-Type": "application/json" }, }); } } else if (path === "/generate-note" && request.method === "POST") { const openai = new OpenAI(); const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: "You are a loving mother writing a short, cute note to your daughter. Keep it under 50 words.", }, { role: "user", content: "Write a cute, encouraging note for my daughter." }, ], model: "gpt-4o-mini", max_tokens: 100, }); const newNote = completion.choices[0].message.content.trim(); const today = new Date().toISOString().split("T")[0]; await sqlite.execute( ` INSERT OR REPLACE INTO ${KEY}_daughter_notes (note, date) VALUES (?, ?) `, [newNote, today], ); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } return new Response( ` Daily Note for My Daughter

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .container { max-width: 600px; margin: 2rem auto; padding: 2rem; background-color: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #ff69b4; text-align: center; } .note-container { background-color: #ffe6f2; border-radius: 5px; padding: 1rem; margin: 1rem 0; } .note { font-size: 1.2rem; line-height: 1.6; color: #333; } button { display: block; width: 100%; padding: 0.8rem; background-color: #ff69b4; color: white; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #ff1493; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .footer { text-align: center; margin-top: 1rem; font-size: 0.8rem; } .footer a { color: #ff69b4; text-decoration: none; } .footer a:hover { text-decoration: underline; } `; export default server;

heathergliffin