🍃 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}",[],[172],"files",[152,170],"counts",{"_183":32,"_184":120,"_185":32,"_186":187},"pulls","branches","forks","envVars",{"_188":32,"_189":32},"count","emptyCount","contents",[],{"_103":153,"_157":140,"_154":155,"_95":99,"_163":164,"_161":162,"_100":32,"_156":-5,"_105":193,"_158":120,"_166":-5,"_98":194},["D",1738610327451],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":203,"_150":208,"_179":215,"_162":216,"_190":219,"_220":-5,"_221":-5,"_222":-5,"_223":-5,"_224":225},{"_103":104,"_95":96,"_105":204,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":120,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":205,"_134":206,"_137":207,"_149":22},["D",1746206079688],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_100":139,"_95":43,"_103":140,"_141":104,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[209,212],{"_103":153,"_95":99,"_154":155,"_156":-5,"_157":140,"_158":120,"_159":117,"_105":160,"_100":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_167":210,"_98":211},[],[99],{"_103":171,"_95":172,"_154":115,"_156":-5,"_157":140,"_158":139,"_159":117,"_105":173,"_100":174,"_161":175,"_163":176,"_165":22,"_166":-5,"_167":213,"_98":214},[],[172],[209,212],{"_103":153,"_157":140,"_154":155,"_95":99,"_163":164,"_161":162,"_100":32,"_156":-5,"_105":217,"_158":120,"_166":-5,"_98":218},["D",1738610327451],[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

gueejla

generatehaikuwebsite