Back

Version 50

8/28/2024
// 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 (
<svg x={x} y={y} width="40" height="40" viewBox="0 0 10 10">
<path d="M5,0 L3,5 L6,5 L4,10 L7,5 L4,5 Z" fill="#FFFF00" stroke="#FFFF00" strokeWidth="0.5" />
</svg>
);
}

function Background() {
isidentical-fluximagegenerator.web.val.run
Updated: August 28, 2024