/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useState } from "https://esm.sh/react@18.2.0"; function App() { const [topic, setTopic] = useState(""); const [haiku, setHaiku] = useState(""); const [showReadme, setShowReadme] = useState(false); const generateHaiku = async (e: React.FormEvent) => { e.preventDefault(); const response = await fetch("/generate", { method: "POST", body: JSON.stringify({ topic }), }); const result = await response.text(); setHaiku(result); }; return (

🍃 Haiku Generator 🍃

{showReadme && (

What is a Haiku? 📜

A haiku is a traditional Japanese poetry form characterized by its concise, evocative nature. It typically captures a fleeting moment in nature or a profound emotional experience.

Haiku Structure 📐

3 lines total
First line: 5 syllables
Second line: 7 syllables
Third line: 5 syllables

Historical Context 🕰️

Originating in Japan during the 17th century, haikus were popularized by masters like Matsuo Bashō. They emphasize simplicity, immediacy, and a connection to the natural world.

Example Haiku 🌸

            An old silent pond...
            A frog jumps into the pond,
            splash! Silence again.
            - Matsuo Bashō

)} {haiku && (

          {haiku}

)} View Source

); } const styles = { container: { fontFamily: "Arial, sans-serif", maxWidth: "600px", margin: "0 auto", padding: "20px", textAlign: "center", }, form: { display: "flex", gap: "10px", marginBottom: "20px", }, input: { flex: 1, padding: "10px", fontSize: "16px", }, button: { padding: "10px 15px", backgroundColor: "#4CAF50", color: "white", border: "none", cursor: "pointer", }, haiku: { backgroundColor: "#f0f0f0", padding: "20px", borderRadius: "10px", whiteSpace: "pre-wrap", textAlign: "center", }, sourceLink: { color: "#888", textDecoration: "none", fontSize: "12px", marginTop: "20px", display: "block", }, readmeToggle: { backgroundColor: "#3498db", color: "white", border: "none", padding: "10px 15px", borderRadius: "5px", cursor: "pointer", marginBottom: "20px", }, readme: { backgroundColor: "#f9f9f9", borderRadius: "10px", padding: "20px", marginBottom: "20px", textAlign: "left", }, exampleHaiku: { backgroundColor: "#e0e0e0", padding: "15px", borderRadius: "5px", fontStyle: "italic", }, }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST" && request.url.includes("/generate")) { const { topic } = await request.json(); const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: "You are a poet who creates traditional 5-7-5 syllable haikus. Always respond with only the haiku, no extra text.", }, { role: "user", content: `Create a haiku about: ${topic}`, }, ], model: "gpt-4o-mini", max_tokens: 100, }); const haiku = completion.choices[0].message.content || "Could not generate haiku"; return new Response(haiku, { headers: { "Content-Type": "text/plain" }, }); } return new Response( ` Haiku Generator

`, { headers: { "Content-Type": "text/html" }, }, ); }

generatehaikuwebsite

Version 2