Spaces:
Running
Running
File size: 2,884 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 VideoGenerator from '../components/VideoGenerator';
import { Button } from '../components/ui/button';
import { useToast } from '@/hooks/use-toast';
import { Loader2 } from 'lucide-react';
import { Link } from 'wouter';
export default function VideoGenPage() {
const { toast } = useToast();
const [isVideoAvailable, setIsVideoAvailable] = useState<boolean | null>(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const checkVideoStatus = async () => {
try {
const response = await fetch('/api/video-status');
if (response.ok) {
const { isAvailable } = await response.json();
setIsVideoAvailable(isAvailable);
if (!isAvailable) {
toast({
title: "Video Generation Unavailable",
description: "The video generation service is currently unavailable. You may need to add your Replicate API token.",
variant: "destructive",
});
}
} else {
throw new Error('Failed to check video generation status');
}
} catch (error) {
console.error('Error checking video generation status:', error);
setIsVideoAvailable(false);
toast({
title: "Service Error",
description: "Failed to connect to the video generation service.",
variant: "destructive",
});
} finally {
setIsLoading(false);
}
};
checkVideoStatus();
}, [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">AI Video 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>
) : isVideoAvailable ? (
<VideoGenerator />
) : (
<div className="bg-amber-50 border border-amber-200 p-6 rounded-md">
<h2 className="text-xl font-semibold text-amber-800 mb-2">Video Generation Unavailable</h2>
<p className="mb-4">
The video 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 Replicate API token</li>
<li>Service outage or rate limiting</li>
<li>Network connectivity issues</li>
</ul>
<p>
To use this feature, you need to add a valid Replicate API token with access to the Wan-AI models.
</p>
</div>
)}
</div>
);
} |