jjwiseman/fastvlm-webgpu

1import { useEffect, useState } from "react";2import { useVLMContext } from "../context/useVLMContext";3import GlassContainer from "./GlassContainer";4import { GLASS_EFFECTS } from "../constants";5 6interface LoadingScreenProps {7  onComplete: () => void;8}9 10export default function LoadingScreen({ onComplete }: LoadingScreenProps) {11  const [progress, setProgress] = useState(0);12  const [currentStep, setCurrentStep] = useState("Initializing...");13  const [isError, setIsError] = useState(false);14  const [hasStartedLoading, setHasStartedLoading] = useState(false);15 16  const { loadModel, isLoaded, isLoading } = useVLMContext();17 18  useEffect(() => {19    // Prevent multiple loading attempts20    if (hasStartedLoading || isLoading || isLoaded) return;21 22    const loadModelAndProgress = async () => {23      setHasStartedLoading(true);24 25      try {26        setCurrentStep("Checking WebGPU support...");27        setProgress(5);28 29        // Check for WebGPU support first30        if (!navigator.gpu) {31          setCurrentStep("WebGPU not available in this browser");32          setIsError(true);33          return;34        }35 36        // Load the actual AI model37        await loadModel((message) => {38          setCurrentStep(message);39          if (message.includes("Loading processor")) {40            setProgress(10);41          } else if (message.includes("Processor loaded")) {42            setProgress(20);43          } else if (message.includes("Model loaded")) {44            setProgress(80);45          }46        });47 48        setCurrentStep("Ready to start!");49        setProgress(100);50 51        // Small delay before completing52        await new Promise((resolve) => setTimeout(resolve, 300));53        onComplete();54      } catch (error) {55        console.error("Error loading model:", error);56        setCurrentStep(`Error loading model: ${error instanceof Error ? error.message : String(error)}`);57        setIsError(true);58      }59    };60 61    loadModelAndProgress();62  }, [hasStartedLoading, isLoading, isLoaded, loadModel, onComplete]);63 64  // Handle case where model is already loaded65  useEffect(() => {66    if (isLoaded && !hasStartedLoading) {67      setProgress(100);68      setCurrentStep("Model already loaded!");69      setTimeout(onComplete, 300);70    }71  }, [isLoaded, hasStartedLoading, onComplete]);72 73  return (74    <div className="absolute inset-0 text-white flex items-center justify-center p-8" style={{ opacity: 1 }}>75      <GlassContainer76        className="max-w-md w-full rounded-3xl shadow-2xl"77        bgColor={isError ? GLASS_EFFECTS.COLORS.ERROR_BG : GLASS_EFFECTS.COLORS.DEFAULT_BG}78      >79        <div className="p-8 text-center space-y-8">80          <div className="space-y-4">81            <div className="w-16 h-16 mx-auto">82              {isError ? (83                <div className="w-16 h-16 rounded-full bg-red-500/20 flex items-center justify-center">84                  <svg className="w-8 h-8 text-red-400" fill="currentColor" viewBox="0 0 20 20">85                    <path86                      fillRule="evenodd"87                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"88                      clipRule="evenodd"89                    />90                  </svg>91                </div>92              ) : (93                <div className="animate-spin rounded-full h-16 w-16 border-4 border-blue-500 border-t-transparent"></div>94              )}95            </div>96 97            <h2 className="text-2xl font-bold text-gray-100">{isError ? "Loading Failed" : "Loading AI Model"}</h2>98 99            <p className={`${isError ? "text-red-400" : "text-gray-400"}`}>{currentStep}</p>100          </div>101 102          {!isError && (103            <div className="space-y-2">104              <div className="w-full bg-gray-800/50 rounded-full h-3 overflow-hidden backdrop-blur-sm border border-gray-700/30">105                <div106                  className="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full transition-all duration-300 ease-out"107                  style={{ width: `${progress}%` }}108                />109              </div>110              <p className="text-sm text-gray-500">{Math.round(progress)}% complete</p>111            </div>112          )}113 114          {isError && (115            <div className="mt-4">116              <button117                onClick={() => window.location.reload()}118                className="px-6 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-white font-medium transition-colors"119              >120                Reload Page121              </button>122            </div>123          )}124        </div>125      </GlassContainer>126    </div>127  );128}129