Skip to content

Instantly share code, notes, and snippets.

@lockness-Ko
Created June 26, 2026 01:12
Show Gist options
  • Select an option

  • Save lockness-Ko/32fe0f68e65cbfc99f0d617cae46433b to your computer and use it in GitHub Desktop.

Select an option

Save lockness-Ko/32fe0f68e65cbfc99f0d617cae46433b to your computer and use it in GitHub Desktop.
npm create cloudflare@latest ai-html-generator -- --type=hello-world -y && cd ai-html-generator/ && echo 'export interface Env {AI: Ai;a;}export default {async fetch(request: Request, env: Env): Promise<Response> {const url = new URL(request.url);let prompt = "A simple login page, based off of the microsoft login page style.";if (url.pathname !== "/" && url.pathname.length > 1) {prompt = decodeURIComponent(url.pathname.substring(1));}try {const response = await env.AI.run("@cf/google/gemma-4-26b-a4b-it", {messages: [{role: "system",content: "You are an expert web designer. Output ONLY valid, raw, modern HTML, CSS, and inline JavaScript. Do not wrap code in markdown formatting like ```html. Start exactly with <!DOCTYPE html>."},{role: "user",content: `Generate a beautiful, responsive single-page application for this prompt: "${prompt}"`}],});let htmlContent = "";if (response && typeof response === "object" && "choices" in response && Array.isArray((response as any).choices)) {htmlContent = (response as any).choices[0]?.message?.content || "";}else if (response && typeof response === "object" && "response" in response) {htmlContent = (response as any).response;}else {htmlContent = typeof response === "string" ? response : JSON.stringify(response);}return new Response(htmlContent, {headers: {"content-type": "text/html;charset=UTF-8","x-generated-prompt": encodeURIComponent(prompt)},});} catch (error: any) {return new Response(`AI Generation Failed: ${error.message}`, { status: 500 });}},};
' > src/index.ts && echo '{"$schema":"node_modules/wrangler/config-schema.json","name":"ai-html-generator","main":"src/index.ts","compatibility_date":"2026-06-26","observability":{"enabled":true},"upload_source_maps":true,"compatibility_flags":["nodejs_compat"],"ai":{"b
inding":"AI"}}' > wrangler.jsonc && yes | npx wrangler deploy --temporary && cd .. && rm -rf ai-html-generator
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment