/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [paragraphs, setParagraphs] = useState(1); const [text, setText] = useState(""); const [loading, setLoading] = useState(false); const [copied, setCopied] = useState(false); const generateText = async () => { setLoading(true); const response = await fetch(`?paragraphs=${paragraphs}`); const result = await response.text(); setText(result); setLoading(false); setCopied(false); }; const copyToClipboard = async () => { try { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (err) { console.error('Failed to copy text: ', err); } }; return (

Random Text Generator

Number of paragraphs: setParagraphs(Number(e.target.value))} />

{text && (

{text.split('\n\n').map((paragraph, index) => (

{paragraph}

))}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); const paragraphs = Number(url.searchParams.get("paragraphs")) || 1; if (url.searchParams.has("paragraphs")) { 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 random text generator. Generate coherent, interesting text without any specific theme." }, { role: "user", content: `Generate ${paragraphs} paragraph${paragraphs > 1 ? 's' : ''} of random text. Separate paragraphs with two newlines.` }, ], model: "gpt-4o-mini", max_tokens: paragraphs * 100, }); return new Response(completion.choices[0].message.content); } return new Response(` Random Text Generator

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } .container { background-color: #f9f9f9; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } h1 { color: #2c3e50; text-align: center; } .controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; } input[type="number"] { width: 60px; padding: 5px; border: 1px solid #ddd; border-radius: 4px; } button { background-color: #3498db; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #2980b9; } button:disabled { background-color: #bdc3c7; cursor: not-allowed; } .output-container { position: relative; } .output { background-color: white; border: 1px solid #ddd; border-radius: 4px; padding: 20px; margin-top: 20px; } .copy-button { position: absolute; top: 10px; right: 10px; background-color: #2ecc71; } .copy-button:hover { background-color: #27ae60; } footer { text-align: center; margin-top: 20px; font-size: 0.9em; color: #7f8c8d; } footer a { color: #3498db; text-decoration: none; } footer a:hover { text-decoration: underline; } `;

randomTextGenerator