// This approach will use the fal.ai API to generate a custom favicon based on a user-provided prompt. // The favicon will be displayed on the page for the user to download. /** @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 [prompt, setPrompt] = useState(""); const [faviconUrl, setFaviconUrl] = useState(""); const [error, setError] = useState(""); const [loading, setLoading] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setError(""); setFaviconUrl(""); try { const response = await fetch(`/generate?prompt=${encodeURIComponent(prompt)}`); if (!response.ok) { throw new Error(`Failed to generate image: ${response.statusText}`); } const data = await response.json(); setFaviconUrl(data.imageUrl); } catch (err) { setError(err.message); } finally { setLoading(false); } }; return (

Favicon Generator

{error &&

{error}

} {faviconUrl && (

Your Favicon:

Download Favicon

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function generateImage(prompt: string) { const FAL_KEY = Deno.env.get("FAL_KEY"); if (!FAL_KEY) { throw new Error("FAL_KEY environment variable is not set"); } const response = await fetch("https://fal.run/fal-ai/flux/schnell", { method: "POST", headers: { "Authorization": `Key ${FAL_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ prompt: prompt, image_size: "square", num_inference_steps: 2, guidance_scale: 1, num_images: 1, }), }); if (!response.ok) { const errorText = await response.text(); console.error("fal.ai API error:", response.status, response.statusText, errorText); throw new Error(`Failed to generate image: ${response.status} ${response.statusText}`); } const data = await response.json(); console.log("API response:", data); if (!data.images || data.images.length === 0 || !data.images[0].url) { console.error("Unexpected API response format:", data); throw new Error("Unexpected API response format"); } return data.images[0].url; } export default async function server(request: Request): Promise { const url = new URL(request.url); const pathname = url.pathname; if (pathname === "/generate") { const prompt = url.searchParams.get("prompt"); if (!prompt) { return new Response(JSON.stringify({ error: "Prompt is required" }), { status: 400, headers: { "Content-Type": "application/json" }, }); } try { const imageUrl = await generateImage(prompt); console.log("Generated image URL:", imageUrl); return new Response(JSON.stringify({ imageUrl }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error in /generate endpoint:", error); return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response( ` Favicon Generator

`, { headers: { "content-type": "text/html", }, } ); } const css = ` body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; } button:disabled { background-color: #ccc; } `;

faviconGenerator