Function ImportURLUI

web/src/components/ImportURLUI.tsx:11–121

({
    failed_model_id,
    mutationToUse,
}: {
    failed_model_id: string
    mutationToUse: UseMutationResult<
        undefined,
        Error,
        { id_to_resolve: string; url: string; type: string },
        unknown
    >
})

import { Button } from './ui/button'

function ImportURLUI({
    failed_model_id,
    mutationToUse,
}: {
    failed_model_id: string
    mutationToUse: UseMutationResult<
        undefined,
        Error,
        { id_to_resolve: string; url: string; type: string },
        unknown
    >
}) {
    const [modelURLToImport, setModelURLToImport] = useState('')
    const [modelTypeToImport, setModelTypeToImport] = useState<
        'hf' | 'civit' | 'custom'
    >('hf')
    const [importLoading, setImportLoading] = useState(false)

    const morphingPlaceholder = () => {
        if (modelTypeToImport === 'hf') {
            return 'https://huggingface.co/h94/IP-Adapter-FaceID/blob/main/ip-adapter-faceid_sd15_lora.safetensors'
        } else if (modelTypeToImport === 'civit') {
            return 'https://civitai.com/models/4201/realistic-vision-v60-b1?modelVersionId=130072'
        } else {
            return 'custom.com'
        }
    }

    return (
        <div className="w-full flex flex-col items-start gap-2">
            <div className="flex flex-row items-center gap-2">
                <Import className="w-4 h-4 text-green-400" />
                <p className="text-white font-semibold">Or import from URL</p>
            </div>
            <div className="flex flex-row items-center space-x-4">
                <RadioGroup
                    className="flex flex-row"
                    defaultValue="hf"
                    onValueChange={(currentValue) => {
                        if (
                            currentValue === 'hf' ||
                            currentValue === 'civit' ||
                            currentValue === 'custom'
                        ) {
                            setModelTypeToImport(currentValue)
                        }
                    }}
                >
                    <div className="flex items-center space-x-2">
                        <RadioGroupItem
                            className="text-white border-white"
                            value="hf"
                            id="r1"
                        />
                        <Label className="text-white" htmlFor="r1">
                            Hugging Face
                        </Label>
                    </div>