🍃 Haiku Generator 🍃

\n\n setShowReadme(!showReadme)}\n style={styles.readmeToggle}\n >\n {showReadme ? \"🔼 Hide Haiku Info\" : \"🔽 Learn About Haikus\"}\n \n\n {showReadme && (\n

What is a Haiku? 📜

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

Haiku Structure 📐

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

Historical Context 🕰️

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

Example Haiku 🌸

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

\n )}\n\n

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

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/gueejla/generatehaikuwebsite/code/main.tsx","extension","actionData","errors"]