mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-04-03 15:26:16 +02:00
134d1642af
- Add i18next, react-i18next, i18next-browser-languagedetector packages - Configure i18n initialization with language detector in lib/i18n.ts - Created en/de translation files and moved most hard-coded strings into the files and translated them - Uses locale-aware date formatting where applicable - Added language-specific Wikipedia content files (wikipedia.en.json, wikipedia.de.json) and updated download URLs - Added NOMAD_REPO_URL env variable for fork-friendly URL resolution (easier testing and rollout independent of Crosstalk repo)
426 lines
16 KiB
TypeScript
426 lines
16 KiB
TypeScript
import { Head, router, usePage } from '@inertiajs/react'
|
|
import { useRef, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import StyledTable from '~/components/StyledTable'
|
|
import SettingsLayout from '~/layouts/SettingsLayout'
|
|
import { NomadOllamaModel } 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'
|
|
import { ModelResponse } from 'ollama'
|
|
import { SERVICE_NAMES } from '../../../constants/service_names'
|
|
import Switch from '~/components/inputs/Switch'
|
|
import StyledSectionHeader from '~/components/StyledSectionHeader'
|
|
import { useMutation, useQuery } from '@tanstack/react-query'
|
|
import Input from '~/components/inputs/Input'
|
|
import { IconSearch, IconRefresh } from '@tabler/icons-react'
|
|
import useDebounce from '~/hooks/useDebounce'
|
|
import ActiveModelDownloads from '~/components/ActiveModelDownloads'
|
|
import { useSystemInfo } from '~/hooks/useSystemInfo'
|
|
|
|
export default function ModelsPage(props: {
|
|
models: {
|
|
availableModels: NomadOllamaModel[]
|
|
installedModels: ModelResponse[]
|
|
settings: { chatSuggestionsEnabled: boolean; aiAssistantCustomName: string }
|
|
}
|
|
}) {
|
|
const { aiAssistantName } = usePage<{ aiAssistantName: string }>().props
|
|
const { isInstalled } = useServiceInstalledStatus(SERVICE_NAMES.OLLAMA)
|
|
const { addNotification } = useNotifications()
|
|
const { openModal, closeAllModals } = useModals()
|
|
const { debounce } = useDebounce()
|
|
const { data: systemInfo } = useSystemInfo({})
|
|
const { t } = useTranslation()
|
|
|
|
const [gpuBannerDismissed, setGpuBannerDismissed] = useState(() => {
|
|
try {
|
|
return localStorage.getItem('nomad:gpu-banner-dismissed') === 'true'
|
|
} catch {
|
|
return false
|
|
}
|
|
})
|
|
const [reinstalling, setReinstalling] = useState(false)
|
|
|
|
const handleDismissGpuBanner = () => {
|
|
setGpuBannerDismissed(true)
|
|
try {
|
|
localStorage.setItem('nomad:gpu-banner-dismissed', 'true')
|
|
} catch {}
|
|
}
|
|
|
|
const handleForceReinstallOllama = () => {
|
|
openModal(
|
|
<StyledModal
|
|
title={t('models.reinstallTitle')}
|
|
onConfirm={async () => {
|
|
closeAllModals()
|
|
setReinstalling(true)
|
|
try {
|
|
const response = await api.forceReinstallService('nomad_ollama')
|
|
if (!response || !response.success) {
|
|
throw new Error(response?.message || 'Force reinstall failed')
|
|
}
|
|
addNotification({
|
|
message: t('models.reinstallSuccess', { name: aiAssistantName }),
|
|
type: 'success',
|
|
})
|
|
try { localStorage.removeItem('nomad:gpu-banner-dismissed') } catch {}
|
|
setTimeout(() => window.location.reload(), 5000)
|
|
} catch (error) {
|
|
addNotification({
|
|
message: t('models.reinstallFailed', { error: error instanceof Error ? error.message : 'Unknown error' }),
|
|
type: 'error',
|
|
})
|
|
setReinstalling(false)
|
|
}
|
|
}}
|
|
onCancel={closeAllModals}
|
|
open={true}
|
|
confirmText={t('models.reinstall')}
|
|
cancelText={t('models.cancel')}
|
|
>
|
|
<p className="text-text-primary">{t('models.reinstallMessage', { name: aiAssistantName })}</p>
|
|
</StyledModal>,
|
|
'gpu-health-force-reinstall-modal'
|
|
)
|
|
}
|
|
const [chatSuggestionsEnabled, setChatSuggestionsEnabled] = useState(
|
|
props.models.settings.chatSuggestionsEnabled
|
|
)
|
|
const [aiAssistantCustomName, setAiAssistantCustomName] = useState(
|
|
props.models.settings.aiAssistantCustomName
|
|
)
|
|
|
|
const [query, setQuery] = useState('')
|
|
const [queryUI, setQueryUI] = useState('')
|
|
const [limit, setLimit] = useState(15)
|
|
|
|
const debouncedSetQuery = debounce((val: string) => {
|
|
setQuery(val)
|
|
}, 300)
|
|
|
|
const forceRefreshRef = useRef(false)
|
|
const [isForceRefreshing, setIsForceRefreshing] = useState(false)
|
|
|
|
const { data: availableModelData, isFetching, refetch } = useQuery({
|
|
queryKey: ['ollama', 'availableModels', query, limit],
|
|
queryFn: async () => {
|
|
const force = forceRefreshRef.current
|
|
forceRefreshRef.current = false
|
|
const res = await api.getAvailableModels({
|
|
query,
|
|
recommendedOnly: false,
|
|
limit,
|
|
force: force || undefined,
|
|
})
|
|
if (!res) {
|
|
return {
|
|
models: [],
|
|
hasMore: false,
|
|
}
|
|
}
|
|
return res
|
|
},
|
|
initialData: { models: props.models.availableModels, hasMore: false },
|
|
})
|
|
|
|
async function handleForceRefresh() {
|
|
forceRefreshRef.current = true
|
|
setIsForceRefreshing(true)
|
|
await refetch()
|
|
setIsForceRefreshing(false)
|
|
addNotification({ message: t('models.refreshSuccess'), type: 'success' })
|
|
}
|
|
|
|
async function handleInstallModel(modelName: string) {
|
|
try {
|
|
const res = await api.downloadModel(modelName)
|
|
if (res.success) {
|
|
addNotification({
|
|
message: t('models.downloadInitiated', { name: modelName }),
|
|
type: 'success',
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('Error installing model:', error)
|
|
addNotification({
|
|
message: t('models.downloadError', { name: modelName }),
|
|
type: 'error',
|
|
})
|
|
}
|
|
}
|
|
|
|
async function handleDeleteModel(modelName: string) {
|
|
try {
|
|
const res = await api.deleteModel(modelName)
|
|
if (res.success) {
|
|
addNotification({
|
|
message: t('models.deleteSuccess', { name: modelName }),
|
|
type: 'success',
|
|
})
|
|
}
|
|
closeAllModals()
|
|
router.reload()
|
|
} catch (error) {
|
|
console.error('Error deleting model:', error)
|
|
addNotification({
|
|
message: t('models.deleteError', { name: modelName }),
|
|
type: 'error',
|
|
})
|
|
}
|
|
}
|
|
|
|
async function confirmDeleteModel(model: string) {
|
|
openModal(
|
|
<StyledModal
|
|
title={t('models.deleteModelTitle')}
|
|
onConfirm={() => {
|
|
handleDeleteModel(model)
|
|
}}
|
|
onCancel={closeAllModals}
|
|
open={true}
|
|
confirmText={t('models.delete')}
|
|
cancelText={t('models.cancel')}
|
|
confirmVariant="primary"
|
|
>
|
|
<p className="text-text-primary">
|
|
{t('models.deleteModelMessage')}
|
|
</p>
|
|
</StyledModal>,
|
|
'confirm-delete-model-modal'
|
|
)
|
|
}
|
|
|
|
const updateSettingMutation = useMutation({
|
|
mutationFn: async ({ key, value }: { key: string; value: boolean | string }) => {
|
|
return await api.updateSetting(key, value)
|
|
},
|
|
onSuccess: () => {
|
|
addNotification({
|
|
message: t('models.settingUpdated'),
|
|
type: 'success',
|
|
})
|
|
},
|
|
onError: (error) => {
|
|
console.error('Error updating setting:', error)
|
|
addNotification({
|
|
message: t('models.settingUpdateError'),
|
|
type: 'error',
|
|
})
|
|
},
|
|
})
|
|
|
|
return (
|
|
<SettingsLayout>
|
|
<Head title={t('models.title', { name: aiAssistantName })} />
|
|
<div className="xl:pl-72 w-full">
|
|
<main className="px-12 py-6">
|
|
<h1 className="text-4xl font-semibold mb-4">{aiAssistantName}</h1>
|
|
<p className="text-text-muted mb-4">
|
|
{t('models.description', { name: aiAssistantName })}
|
|
</p>
|
|
{!isInstalled && (
|
|
<Alert
|
|
title={t('models.notInstalled', { name: aiAssistantName })}
|
|
type="warning"
|
|
variant="solid"
|
|
className="!mt-6"
|
|
/>
|
|
)}
|
|
{isInstalled && systemInfo?.gpuHealth?.status === 'passthrough_failed' && !gpuBannerDismissed && (
|
|
<Alert
|
|
type="warning"
|
|
variant="bordered"
|
|
title={t('models.gpuNotAccessible')}
|
|
message={t('models.gpuNotAccessibleMessage', { name: aiAssistantName })}
|
|
className="!mt-6"
|
|
dismissible={true}
|
|
onDismiss={handleDismissGpuBanner}
|
|
buttonProps={{
|
|
children: t('models.fixReinstall', { name: aiAssistantName }),
|
|
icon: 'IconRefresh',
|
|
variant: 'action',
|
|
size: 'sm',
|
|
onClick: handleForceReinstallOllama,
|
|
loading: reinstalling,
|
|
disabled: reinstalling,
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<StyledSectionHeader title={t('models.settings')} className="mt-8 mb-4" />
|
|
<div className="bg-surface-primary rounded-lg border-2 border-border-subtle p-6">
|
|
<div className="space-y-4">
|
|
<Switch
|
|
checked={chatSuggestionsEnabled}
|
|
onChange={(newVal) => {
|
|
setChatSuggestionsEnabled(newVal)
|
|
updateSettingMutation.mutate({ key: 'chat.suggestionsEnabled', value: newVal })
|
|
}}
|
|
label={t('models.chatSuggestions')}
|
|
description={t('models.chatSuggestionsDescription')}
|
|
/>
|
|
<Input
|
|
name="aiAssistantCustomName"
|
|
label={t('models.assistantName')}
|
|
helpText={t('models.assistantNameHelp')}
|
|
placeholder={t('models.assistantNamePlaceholder')}
|
|
value={aiAssistantCustomName}
|
|
onChange={(e) => setAiAssistantCustomName(e.target.value)}
|
|
onBlur={() =>
|
|
updateSettingMutation.mutate({
|
|
key: 'ai.assistantCustomName',
|
|
value: aiAssistantCustomName,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ActiveModelDownloads withHeader />
|
|
|
|
<StyledSectionHeader title={t('models.modelsHeading')} className="mt-12 mb-4" />
|
|
<div className="flex justify-start items-center gap-3 mt-4">
|
|
<Input
|
|
name="search"
|
|
label=""
|
|
placeholder={t('models.searchPlaceholder')}
|
|
value={queryUI}
|
|
onChange={(e) => {
|
|
setQueryUI(e.target.value)
|
|
debouncedSetQuery(e.target.value)
|
|
}}
|
|
className="w-1/3"
|
|
leftIcon={<IconSearch className="w-5 h-5 text-text-muted" />}
|
|
/>
|
|
<StyledButton
|
|
variant="secondary"
|
|
onClick={handleForceRefresh}
|
|
icon="IconRefresh"
|
|
loading={isForceRefreshing}
|
|
className='mt-1'
|
|
>
|
|
{t('models.refreshModels')}
|
|
</StyledButton>
|
|
</div>
|
|
<StyledTable<NomadOllamaModel>
|
|
className="font-semibold mt-4"
|
|
rowLines={true}
|
|
columns={[
|
|
{
|
|
accessor: 'name',
|
|
title: t('models.columns.name'),
|
|
render(record) {
|
|
return (
|
|
<div className="flex flex-col">
|
|
<p className="text-lg font-semibold">{record.name}</p>
|
|
<p className="text-sm text-text-muted">{record.description}</p>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessor: 'estimated_pulls',
|
|
title: t('models.columns.estimatedPulls'),
|
|
},
|
|
{
|
|
accessor: 'model_last_updated',
|
|
title: t('models.columns.lastUpdated'),
|
|
},
|
|
]}
|
|
data={availableModelData?.models || []}
|
|
loading={isFetching}
|
|
expandable={{
|
|
expandedRowRender: (record) => (
|
|
<div className="pl-14">
|
|
<div className="bg-surface-primary overflow-hidden">
|
|
<table className="min-w-full divide-y divide-border-subtle">
|
|
<thead className="bg-surface-primary">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
|
|
{t('models.columns.tag')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
|
|
{t('models.columns.inputType')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
|
|
{t('models.columns.contextSize')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
|
|
{t('models.columns.modelSize')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
|
|
{t('models.columns.action')}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-surface-primary divide-y divide-border-subtle">
|
|
{record.tags.map((tag, tagIndex) => {
|
|
const isInstalled = props.models.installedModels.some(
|
|
(mod) => mod.name === tag.name
|
|
)
|
|
return (
|
|
<tr key={tagIndex} className="hover:bg-surface-secondary">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className="text-sm font-medium text-text-primary">
|
|
{tag.name}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className="text-sm text-text-secondary">{tag.input || 'N/A'}</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className="text-sm text-text-secondary">
|
|
{tag.context || 'N/A'}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className="text-sm text-text-secondary">{tag.size || 'N/A'}</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<StyledButton
|
|
variant={isInstalled ? 'danger' : 'primary'}
|
|
onClick={() => {
|
|
if (!isInstalled) {
|
|
handleInstallModel(tag.name)
|
|
} else {
|
|
confirmDeleteModel(tag.name)
|
|
}
|
|
}}
|
|
icon={isInstalled ? 'IconTrash' : 'IconDownload'}
|
|
>
|
|
{isInstalled ? t('models.delete') : t('models.install')}
|
|
</StyledButton>
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
),
|
|
}}
|
|
/>
|
|
<div className="flex justify-center mt-6">
|
|
{availableModelData?.hasMore && (
|
|
<StyledButton
|
|
variant="primary"
|
|
onClick={() => {
|
|
setLimit((prev) => prev + 15)
|
|
}}
|
|
>
|
|
{t('models.loadMore')}
|
|
</StyledButton>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</SettingsLayout>
|
|
)
|
|
}
|