import { Head, router } from '@inertiajs/react' import StyledTable from '~/components/StyledTable' import SettingsLayout from '~/layouts/SettingsLayout' import { NomadOllamaModel, OllamaModelListing } from '../../../types/ollama' import StyledButton from '~/components/StyledButton' import useServiceInstalledStatus from '~/hooks/useServiceInstalledStatus' import Alert from '~/components/Alert' import { useNotifications } from '~/context/NotificationContext' import api from '~/lib/api' import { useModals } from '~/context/ModalContext' import StyledModal from '~/components/StyledModal' export default function ModelsPage(props: { models: { availableModels: NomadOllamaModel[]; installedModels: OllamaModelListing[] } }) { const { isInstalled } = useServiceInstalledStatus('nomad_openwebui') const { addNotification } = useNotifications() const { openModal, closeAllModals } = useModals() async function handleInstallModel(modelName: string) { try { const res = await api.downloadModel(modelName) if (res.success) { addNotification({ message: `Model download initiated for ${modelName}. It may take some time to complete.`, type: 'success', }) } } catch (error) { console.error('Error installing model:', error) addNotification({ message: `There was an error installing the model: ${modelName}. Please try again.`, type: 'error', }) } } async function handleDeleteModel(modelName: string) { try { const res = await api.deleteModel(modelName) if (res.success) { addNotification({ message: `Model deleted: ${modelName}.`, type: 'success', }) } closeAllModals() router.reload() } catch (error) { console.error('Error deleting model:', error) addNotification({ message: `There was an error deleting the model: ${modelName}. Please try again.`, type: 'error', }) } } async function confirmDeleteModel(model: string) { openModal( { handleDeleteModel(model) }} onCancel={closeAllModals} open={true} confirmText="Delete" cancelText="Cancel" confirmVariant="primary" >

Are you sure you want to delete this model? You will need to download it again if you want to use it in the future.

, 'confirm-delete-model-modal' ) } return (

AI Model Manager

Easily manage the AI models available for Open WebUI. We recommend starting with smaller models first to see how they perform on your system before moving on to larger ones.

{!isInstalled && ( )} className="font-semibold mt-8" rowLines={true} columns={[ { accessor: 'name', title: 'Name', render(record) { return (

{record.name}

{record.description}

) }, }, { accessor: 'estimated_pulls', title: 'Estimated Pulls', }, { accessor: 'model_last_updated', title: 'Last Updated', }, ]} data={props.models.availableModels || []} expandable={{ expandedRowRender: (record) => (
{record.tags.map((tag, tagIndex) => { const isInstalled = props.models.installedModels.some( (mod) => mod.name === tag.name ) return ( ) })}
Tag Input Type Context Size Model Size Action
{tag.name} {tag.input || 'N/A'} {tag.context || 'N/A'} {tag.size || 'N/A'} { if (!isInstalled) { handleInstallModel(tag.name) } else { confirmDeleteModel(tag.name) } }} icon={isInstalled ? 'TrashIcon' : 'ArrowDownTrayIcon'} > {isInstalled ? 'Delete' : 'Install'}
), }} />
) }