Spaces:
Running
Running
File size: 2,867 Bytes
27127dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
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<boolean | null>(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 (
<div className="container mx-auto py-8 px-4">
<div className="flex justify-between items-center mb-8">
<h1 className="text-4xl font-bold">FLUX Image Generator</h1>
<Link href="/">
<Button variant="outline">Back to Chat</Button>
</Link>
</div>
{isLoading ? (
<div className="flex justify-center items-center h-64">
<Loader2 className="h-8 w-8 animate-spin mr-2" />
<span>Checking service availability...</span>
</div>
) : isFluxAvailable ? (
<ImageGenerator />
) : (
<div className="bg-amber-50 border border-amber-200 p-6 rounded-md">
<h2 className="text-xl font-semibold text-amber-800 mb-2">Image Generation Unavailable</h2>
<p className="mb-4">
The FLUX image generation service is currently unavailable. This may be due to:
</p>
<ul className="list-disc pl-5 mb-4 space-y-1">
<li>Missing or invalid Hugging Face API token</li>
<li>Service outage or rate limiting</li>
<li>Network connectivity issues</li>
</ul>
<p>
To use this feature, you may need to add a valid Hugging Face API token with access to the FLUX.1-dev model.
</p>
</div>
)}
</div>
);
} |