import React, { useEffect, useState } from 'react'; import ImageGenerator from '../components/ImageGenerator'; import { Button } from '../components/ui/button'; import { useToast } from '@/hooks/use-toast'; import { Loader2 } from 'lucide-react'; import { Link } from 'wouter'; export default function ImageGenPage() { const { toast } = useToast(); const [isFluxAvailable, setIsFluxAvailable] = useState(null); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const checkFluxStatus = async () => { try { const response = await fetch('/api/flux-status'); if (response.ok) { const { isAvailable } = await response.json(); setIsFluxAvailable(isAvailable); if (!isAvailable) { toast({ title: "FLUX API Unavailable", description: "The image generation service is currently unavailable. You may need to add your Hugging Face API token.", variant: "destructive", }); } } else { throw new Error('Failed to check FLUX status'); } } catch (error) { console.error('Error checking FLUX status:', error); setIsFluxAvailable(false); toast({ title: "Service Error", description: "Failed to connect to the image generation service.", variant: "destructive", }); } finally { setIsLoading(false); } }; checkFluxStatus(); }, [toast]); return (

FLUX Image Generator

{isLoading ? (
Checking service availability...
) : isFluxAvailable ? ( ) : (

Image Generation Unavailable

The FLUX image generation service is currently unavailable. This may be due to:

  • Missing or invalid Hugging Face API token
  • Service outage or rate limiting
  • Network connectivity issues

To use this feature, you may need to add a valid Hugging Face API token with access to the FLUX.1-dev model.

)}
); }