fluxImageGenerator

Public

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>

);

}

function Background() {

Updated: August 28, 2024