\n {\n try {\n await navigator.clipboard.writeText(location.origin + `/share/${brainrotId}`);\n e.target.textContent = \"Copied!\";\n } catch (err) {\n console.error(err);\n e.target.textContent = \"Error Copying\";\n } finally {\n setTimeout(() => {\n e.target.textContent = \"Share\";\n }, 1000);\n }\n }}\n >\n Share\n \n {\n handleSubmit(null, true);\n }}\n >\n Regenerate\n \n

,\n ],\n }),\n };\n }\n return hydrated;\n }, [brainrotExplanation, isStreaming]);\n\n const handleSubmit = async (e: any, regenerate = false) => {\n e?.preventDefault();\n if (isLoading) return;\n\n setError(\"\");\n dispatch({ type: \"SET\", value: {} });\n setIsLoading(true);\n setIsStreaming(false);\n\n try {\n const response = await fetch(location.origin, {\n method: \"POST\",\n body: JSON.stringify({ regex: regenerate ? brainrotRegex : regex, regenerate }),\n });\n\n const stream = response.body!.pipeThrough(new TextDecoderStream()).pipeThrough(new TextLineStream());\n\n for await (const line of toIt(stream)) {\n if (!line) continue;\n\n if (!isStreaming) {\n setIsStreaming(true);\n }\n\n try {\n const patch = JSON.parse(line);\n dispatch({ type: \"PATCH\", patch });\n } catch (parseError) {\n console.error(\"Error parsing patch:\", parseError);\n }\n }\n setIsStreaming(false);\n setIsLoading(false);\n } catch (err) {\n setError(\"Something went wrong 💀\");\n setIsLoading(false);\n setIsStreaming(false);\n }\n };\n\n return (\n

🧠 Regex to Brainrot 🤪

\n\n

\n );\n}\n\nfunction client() {\n React.hydrate(\n ,\n document.getElementById(\"root\")!,\n );\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const route = url.pathname.match(/^\\/(?:share\\/([^\\/]+))?$/);\n if (!route) return new Response(\"not found\", { status: 404 });\n const [\n { getRandomRegexExplanation, saveRegexExplanation, getRegexExplanationById },\n ReactMarkdown,\n { OpenAI },\n { renderToString },\n { jsx, jsxs, Fragment },\n ] = await Promise.all([\n import(\"https://esm.town/v/stainless_em/brainrotdb\"),\n import(\"npm:react-markdown@7\"),\n import(\"https://esm.town/v/std/openai\"),\n import(\"npm:react-dom@19/server.browser\"),\n import(\"npm:react@19/jsx-runtime\"),\n ]);\n setJsx(jsx, jsxs, Fragment);\n if (request.method === \"POST\") {\n try {\n let { regex, regenerate } = await request.json();\n\n if (!regex || !regex.trim()) throw \"an empty regex? are u fr rn? 😭\";\n try {\n const withFlags = regex.match(/^\\s*\\/(.*)\\/([^\\/]*)$/);\n regex = (withFlags ? new RegExp(withFlags[1], withFlags[2].trim()) : new RegExp(regex)).toString();\n } catch (e: any) {\n throw \"that regex isn't valid 💀\\n\" + String(e.message || e);\n }\n\n const cached = !regenerate && await getRandomRegexExplanation(regex);\n if (cached) {\n return new Response(\n JSON.stringify(jsonpatch.compare({}, {\n tree: (\n

\n {ReactMarkdown.default({ children: cached.explanation })}\n

\n ),\n })) + \"\\n\",\n );\n }\n\n const openai = new OpenAI();\n\n const abortController = new AbortController();\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"user\",\n content: `Explain the regex \\`${regex}\\` in the style of 2025 Gen Z social media.\n\nFirst, here's a list of things to avoid:\n- Avoid formal technical language\n- Avoid complex sentence structures\n- Avoid traditional academic tone\n- Avoid being too serious or professional\n- Avoid dated references and slang like lit, fam, sus, etc.\n- Avoid using any _bold_ or *italic* text!! Prefer inline code where appropriate or other verbal forms of emphasis.\n\nInstead, use these elements:\n- Express extreme enthusiasm about technical details\n- Explain syntax specifics and say what various syntax elements are called, we want to be silly but also teach the user!\n- Talk about the parts of the regex IN ORDER, don't skip around or summarize.\n- Treat it like you're excitedly explaining to a \"bestie\" or \"chat\"\n- Use current Gen Z slang heavily: \"chat\" as a pronoun (ex. \"hey chat, [...]\"), \"hiii bestie, [...]\", \"fr fr\", \"it's giving [x]\", \"we stan [a, an] [inclusive, etc.] [queen, king, bestie, ]\", etc.\n- Add relevant emojis after key points (🤪, ✨, 💅, 🚩)\n- Format like a TikTok/Twitter explanation:\n - Short punchy sentences\n - Add \"plssss\" and extra letters for emphasis\n - Use \"bestie\", \"sis\", and similar terms of endearment\n- Add running commentary like \"we love to see it\", \"we stan an [x] [y]\", and \"and that's the tea\"\n- Break complex concepts into \"it's giving [explanation] energy\" format\n- Use mostly lowercase with first letter Capitalization on Single words in the middle of sentences to Emphasize\n- Make sure you use the correct form of a/an!!\n\nRemember: The goal is to sound like an extremely online Gen Z person excitedly explaining this to their friend on social media in 2025. Make it feel authentic and current, not like an older person imitating youth speech.`,\n },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 2000,\n stream: true,\n }, { signal: abortController.signal });\n\n const encoder = new TextEncoder();\n return new Response(\n new ReadableStream({\n async start(controller) {\n let message = \"\";\n let previousDoc: Object = {};\n\n try {\n for await (const part of completion) {\n const content = part.choices[0].delta.content || \"\";\n message += content;\n const currentDoc = {\n tree: (\n

\n {ReactMarkdown.default({ children: message })}\n

\n ),\n };\n\n // Generate JSON patch between previous and current document\n const patch = jsonpatch.compare(\n previousDoc,\n currentDoc,\n );\n\n // Send patch if there are changes\n if (patch.length > 0) {\n controller.enqueue(encoder.encode(JSON.stringify(patch) + \"\\n\"));\n }\n\n previousDoc = currentDoc;\n }\n\n const id = await saveRegexExplanation(regex, message);\n controller.enqueue(encoder.encode(\n JSON.stringify(jsonpatch.compare(\n previousDoc,\n {\n tree: (\n

\n {ReactMarkdown.default({ children: message })}\n

\n ),\n },\n )) + \"\\n\",\n ));\n controller.close();\n } catch (err) {\n controller.enqueue(encoder.encode(\n JSON.stringify(jsonpatch.compare(\n previousDoc,\n {\n tree: (\n

\n chat, it looks like something went wrong...
\n {String(err)} 😭\n

\n ),\n },\n )) + \"\\n\",\n ));\n controller.close();\n }\n },\n cancel() {\n abortController.abort();\n },\n }),\n );\n } catch (err) {\n return new Response(\n JSON.stringify(jsonpatch.compare({}, {\n tree: (\n

\n {typeof err === \"string\" ? err : <>chat, it looks like something went wrong... 😭}\n

\n ),\n })) + \"\\n\",\n );\n }\n }\n\n const state: State = { share: null };\n if (route[1]) {\n try {\n const share = await getRegexExplanationById(route[1]);\n if (!share) throw new Error();\n state.share = {\n regex: share.regex,\n explanation: (\n

\n {ReactMarkdown.default({ children: share.explanation })}\n

\n ),\n };\n } catch {\n return new Response(\"share id not found\", { status: 404 });\n }\n }\n const initialApp = renderToString();\n\n return new Response(\n `\n \n \n \n Regex to Brainrot 🤯\n \n \n \n \n \n

${initialApp}

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