// This app uses the fal.ai API to generate images based on user prompts. // It features a clean UI with an input field for the prompt and a button to generate the image. // The generated image is displayed below the input field. // React is used for the UI and the fal.ai serverless client for image generation. // The app measures and displays the latency for each image generation. // The background features randomly placed pixelart lightning bolts in neon yellow. /** @jsxImportSource https://esm.sh/react */ import * as fal from "https://esm.sh/@fal-ai/serverless-client"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { blob } from "https://esm.town/v/std/blob"; // Constants for background const GRID_SIZE = 100; // Size of each grid cell const BOLT_CHANCE = 0.2; // 20% chance to place a bolt in each cell const BOLT_SIZE = 40; // Width and height of each bolt const DEFAULT_PROMPT = "green grass landscape with text \"val.town\" is engraved, a townhouse in the background"; const PLACEHOLDER_IMAGE = "https://fal.media/files/penguin/PysYf1-_ddhM7JKiLrkcF.png"; const RATE_LIMIT = 15; // requests per hour const RATE_LIMIT_WINDOW = 5 * 60 * 1000; // 5 minutes in milliseconds interface RateLimitData { count: number; firstRequest: number; } function LightningBolt({ x, y }) { return ( ); } function Background() { const [bolts, setBolts] = useState([]); useEffect(() => { const newBolts = []; const numColumns = Math.ceil(window.innerWidth / GRID_SIZE); const numRows = Math.ceil(window.innerHeight / GRID_SIZE); for (let i = 0; i < numColumns; i++) { for (let j = 0; j < numRows; j++) { if (Math.random() < BOLT_CHANCE) { newBolts.push({ x: i * GRID_SIZE + Math.random() * (GRID_SIZE - BOLT_SIZE), y: j * GRID_SIZE + Math.random() * (GRID_SIZE - BOLT_SIZE), }); } } } setBolts(newBolts); }, []); return ( ); } function LoadingSpinner() { return (

); } function App() { const [prompt, setPrompt] = useState(DEFAULT_PROMPT); const [imageUrl, setImageUrl] = useState(PLACEHOLDER_IMAGE); const [latency, setLatency] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const generateImage = async () => { setLoading(true); setError(""); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt }), }); const data = await response.json(); if (!response.ok) throw new Error(data.error || "Failed to generate image"); setLatency(data.latency); setImageUrl(data.imageUrl); setError(""); // Clear any previous errors } catch (err) { setError(err.message); console.error(err); } finally { setLoading(false); } }; return ( <>

AI Image Generator

setPrompt(e.target.value)} placeholder={DEFAULT_PROMPT} className="prompt-input" />

{error &&

{error}

}

{latency !== null && (

Inference time (doesn't include network): {latency.toFixed(2)} ms

)} {loading ? : Generated image

}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function checkRateLimit(clientIP: string): Promise { const now = Date.now(); const key = `xratelimit_${clientIP}`; let clientData = await blob.getJSON(key); if (!clientData) { clientData = { count: 1, firstRequest: now }; } else { if (now - clientData.firstRequest > RATE_LIMIT_WINDOW) { // Reset if the window has passed clientData.count = 1; clientData.firstRequest = now; } else { clientData.count++; } } console.log(clientData); await blob.setJSON(key, clientData); return clientData.count <= RATE_LIMIT; } async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/generate") { const clientIP = (request.headers.get("x-forwarded-for") || "unknown").split(",")[0].trim(); const isAllowed = await checkRateLimit(clientIP); if (!isAllowed) { return new Response(JSON.stringify({ error: "Rate limit exceeded. Please try again in a couple of minutes." }), { status: 429, headers: { "Content-Type": "application/json" }, }); } const { prompt } = await request.json(); try { const result = await fal.run("fal-ai/flux/schnell", { input: { prompt, image_size: "landscape_4_3", num_inference_steps: 4, num_images: 1, enable_safety_checker: true, sync_mode: true, }, }); return new Response( JSON.stringify({ imageUrl: result.images[0].url, latency: result.timings.inference * 1000 }), { headers: { "Content-Type": "application/json" }, }, ); } catch (error) { return new Response(JSON.stringify({ error: "Failed to generate image" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response( ` AI Image Generator

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #1a1a1a; color: #fff; overflow-x: hidden; min-height: 100vh; } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.2; pointer-events: none; } .container { max-width: 800px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.15); padding: 30px; border-radius: 5px; backdrop-filter: blur(5px); } .title { text-align: center; color: #fff; font-size: 2.5em; margin-bottom: 30px; } .input-container { position: relative; margin-bottom: 20px; } .prompt-input { width: 100%; padding: 15px; border: 2px solid #FFFF00; border-radius: 25px; background-color: rgba(255, 255, 255, 0.2); color: #fff; font-size: 1em; transition: all 0.3s ease; } .prompt-input:focus { outline: none; background-color: rgba(255, 255, 255, 0.3); } .generate-btn { display: block; width: 100%; padding: 15px; background-color: #FFFF00; color: #000; border: none; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 1em; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; } .generate-btn:hover { background-color: #FFFF99; } .generate-btn:disabled { background-color: #666666; cursor: not-allowed; } .error { color: #FF6666; text-align: center; } .image-container { margin-top: 20px; text-align: center; background-color: rgba(0, 0, 0, 0.2); padding: 20px; border-radius: 10px; } .generated-image { max-width: 100%; height: auto; } .latency { font-size: 14px; color: #fff; margin-bottom: 10px; } .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 0.9em; } .source-link a { color: #fff; text-decoration: none; transition: all 0.3s ease; } .source-link a:hover { text-decoration: underline; } .powered-by { display: flex; align-items: center; gap: 10px; color: #ccc; } .fal-logo { height: 30px; transition: transform 0.3s ease; } .fal-logo:hover { transform: scale(1.1); } .loading-spinner { display: flex; justify-content: center; align-items: center; height: 200px; } .spinner { border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 4px solid #FFFF00; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 600px) { .container { padding: 15px; } .title { font-size: 2em; } .prompt-input, .generate-btn { padding: 12px; font-size: 0.9em; } .footer { flex-direction: column; gap: 10px; } .powered-by { order: -1; } .fal-logo { height: 25px; } } `; export default server;

danyslicer