import { useState } from "react" import { useLocalStorage } from 'usehooks-ts' import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { RenderingModelVendor } from "@/types" import { Input } from "@/components/ui/input" import { Label } from "./label" import { Field } from "./field" import { localStorageKeys } from "./localStorageKeys" import { defaultSettings } from "./defaultSettings" import { Switch } from "@/components/ui/switch" import { cn } from "@/lib/utils" export function SettingsDialog() { const [isOpen, setOpen] = useState(false) const [renderingModelVendor, setRenderingModelVendor] = useLocalStorage( localStorageKeys.renderingModelVendor, defaultSettings.renderingModelVendor ) const [renderingUseTurbo, setRenderingUseTurbo] = useLocalStorage( localStorageKeys.renderingUseTurbo, defaultSettings.renderingUseTurbo ) const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage( localStorageKeys.huggingfaceApiKey, defaultSettings.huggingfaceApiKey ) const [huggingfaceInferenceApiModel, setHuggingfaceInferenceApiModel] = useLocalStorage( localStorageKeys.huggingfaceInferenceApiModel, defaultSettings.huggingfaceInferenceApiModel ) const [huggingfaceInferenceApiModelTrigger, setHuggingfaceInferenceApiModelTrigger] = useLocalStorage( localStorageKeys.huggingfaceInferenceApiModelTrigger, defaultSettings.huggingfaceInferenceApiModelTrigger ) const [huggingfaceInferenceApiFileType, setHuggingfaceInferenceApiFileType] = useLocalStorage( localStorageKeys.huggingfaceInferenceApiFileType, defaultSettings.huggingfaceInferenceApiFileType ) const [replicateApiKey, setReplicateApiKey] = useLocalStorage( localStorageKeys.replicateApiKey, defaultSettings.replicateApiKey ) const [replicateApiModel, setReplicateApiModel] = useLocalStorage( localStorageKeys.replicateApiModel, defaultSettings.replicateApiModel ) const [replicateApiModelVersion, setReplicateApiModelVersion] = useLocalStorage( localStorageKeys.replicateApiModelVersion, defaultSettings.replicateApiModelVersion ) const [replicateApiModelTrigger, setReplicateApiModelTrigger] = useLocalStorage( localStorageKeys.replicateApiModelTrigger, defaultSettings.replicateApiModelTrigger ) const [openaiApiKey, setOpenaiApiKey] = useLocalStorage( localStorageKeys.openaiApiKey, defaultSettings.openaiApiKey ) const [openaiApiModel, setOpenaiApiModel] = useLocalStorage( localStorageKeys.openaiApiModel, defaultSettings.openaiApiModel ) return ( Custom Settings

Note: most vendors have a warm-up delay when using a custom or rarely used model. Do not hesitate to try again after 5 minutes if that happens.

Security note: we do not save those settings on our side, instead they are stored inside your web browser, using the local storage.

{renderingModelVendor === "SERVER" && <>
setRenderingUseTurbo(!renderingUseTurbo)} className={cn("cursor-pointer", { "text-zinc-800": renderingUseTurbo })}>Use a fast low-quality model (default)   ⬅️ disable this for improved quality!
} {renderingModelVendor === "HUGGINGFACE" && <> { setHuggingfaceApiKey(x.target.value) }} value={huggingfaceApiKey} /> { setHuggingfaceInferenceApiModel(x.target.value) }} value={huggingfaceInferenceApiModel} /> { setHuggingfaceInferenceApiFileType(x.target.value) }} value={huggingfaceInferenceApiFileType} />

Using a LoRA? Don't forget the trigger keyword! Also you will want to use the "Neutral" style.

{ setHuggingfaceInferenceApiModelTrigger(x.target.value) }} value={huggingfaceInferenceApiModelTrigger} /> } {renderingModelVendor === "OPENAI" && <> { setOpenaiApiKey(x.target.value) }} value={openaiApiKey} /> { setOpenaiApiModel(x.target.value) }} value={openaiApiModel} /> } {renderingModelVendor === "REPLICATE" && <> { setReplicateApiKey(x.target.value) }} value={replicateApiKey} /> { setReplicateApiModel(x.target.value) }} value={replicateApiModel} /> { setReplicateApiModelVersion(x.target.value) }} value={replicateApiModelVersion} />

Using a LoRA? Don't forget the trigger keyword! Also you will want to use the "Neutral" style.

{ setReplicateApiModelTrigger(x.target.value) }} value={replicateApiModelTrigger} /> }
) }