WhisperSeg

The WhisperSeg component handles the data returned by the WhisperSeg API. A click on the magic wand icon opens the Models Window, in which the current state of available and trained models is visible to the user.

// When user clicks on CallWhisperSeg icon
useEffect(() => {
    // Get Models immediately
    getAllModels()

    // Set up an interval that will refresh the models every 10 seconds
    const interval = setInterval(() => {
        getAllModels()
    }, 10000)

    // Clean up the interval on component unmount
    return () => clearInterval(interval)
}, [showModelsWindow])

A useEffect hook periodically calls the function getAllModels() to update the models list.

const getAllModels = async () => {
    if (!showModelsWindow && currentlyTrainedModelsNames.length === 0) return

    setModelsAreLoading(true)

    try {
        const [inferenceModels, finetuneModels, currentlyTrainedModels] = await Promise.all([
            getModelsAvailableForInference(),
            getModelsAvailableForFinetuning(),
            getModelsCurrentlyTrained()
        ])

        setModelsAreLoading(false)
        setModelsAvailableForInference(inferenceModels)
        setModelsAvailableForFinetuning(finetuneModels)
        setModelsCurrentlyTrained(currentlyTrainedModels)

        // Set first model in list as default model
        if (!selectedInferenceModelRef.current){
            setSelectedInferenceModel(inferenceModels[0]?.model_name)
        }
        if (!selectedFinetuningModelRef.current){
            setSelectedFinetuningModel(finetuneModels[0]?.model_name)
        }

    } catch (error) {
        toast.error('An error occurred trying to access the WhisperSeg API. Check the console for more information')
        console.error('Error fetching data:', error)
        setModelsAreLoading(false)
        setShowModelsWindow(false)
    }
}

getAllModels() call three different functions (getModelsAvailableForInference, getModelsAvailableForFinetuning and getModelsCurrentlyTrained) which each make seperate request to the WhisperSeg API and returning a list of models. These three lists are fed into their respective state variables. They will be displayed in the models window.

// When currently trained models change, check if a new model has finished training and display a pop-up
useEffect( () => {
    if (!modelsCurrentlyTrained) return

    const allCurrentlyTrainedModelNames = modelsCurrentlyTrained.map(model => model.model_name)

    const updatedModelsInTrainingQueue = []

    for (const modelName of currentlyTrainedModelsNames){
        if (allCurrentlyTrainedModelNames.includes(modelName)){
            updatedModelsInTrainingQueue.push(modelName)
        } else {
            toast.success(`New custom model "${modelName}" has finished training!`)
        }
    }

    setCurrentlyTrainedModelsNames(updatedModelsInTrainingQueue)

}, [modelsCurrentlyTrained])

A separate useEffect hook keeps listening for models that have finished their training informs the user with a message when a new model has finished training, regardless whether the Models Window is open or closed