less jarring initial loading of saved config values on the general tab

This commit is contained in:
Egor 2025-09-20 22:19:17 -07:00
parent 504fe809dd
commit 667d7e5ee2
2 changed files with 68 additions and 46 deletions

View file

@ -1,10 +1,21 @@
import { Stack, Text, Group, TextInput, Slider } from '@mantine/core';
import {
Stack,
Text,
Group,
TextInput,
Slider,
Transition,
} from '@mantine/core';
import { InfoTooltip } from '@/components/InfoTooltip';
import { BackendSelector } from '@/components/screens/Launch/GeneralTab/BackendSelector';
import { ModelFileField } from '@/components/screens/Launch/ModelFileField';
import { useLaunchConfig } from '@/hooks/useLaunchConfig';
export const GeneralTab = () => {
interface GeneralTabProps {
configLoaded?: boolean;
}
export const GeneralTab = ({ configLoaded = true }: GeneralTabProps) => {
const {
model,
contextSize,
@ -14,50 +25,61 @@ export const GeneralTab = () => {
} = useLaunchConfig();
return (
<Stack gap="md">
<BackendSelector />
<Transition
mounted={configLoaded}
transition="fade"
duration={100}
timingFunction="ease-out"
>
{(styles) => (
<Stack gap="md" style={styles}>
<BackendSelector />
<ModelFileField
label="Text Model File"
value={model}
placeholder="Select a .gguf model file or enter a direct URL to file"
tooltip="Select a GGUF text generation model file for chat and completion tasks."
onChange={handleModelChange}
onSelectFile={handleSelectModelFile}
showSearchHF
searchUrl="https://huggingface.co/models?pipeline_tag=text-generation&library=gguf&sort=trending"
/>
<div>
<Group justify="space-between" align="center" mb="xs">
<Group gap="xs" align="center">
<Text size="sm" fw={500}>
Context Size
</Text>
<InfoTooltip label="Controls the memory allocated for maximum context size. The larger the context, the larger the required memory." />
</Group>
<TextInput
value={contextSize?.toString() || ''}
onChange={(event) =>
handleContextSizeChangeWithStep(Number(event.target.value) || 256)
}
type="number"
min={256}
max={131072}
step={256}
size="sm"
w={100}
<ModelFileField
label="Text Model File"
value={model}
placeholder="Select a .gguf model file or enter a direct URL to file"
tooltip="Select a GGUF text generation model file for chat and completion tasks."
onChange={handleModelChange}
onSelectFile={handleSelectModelFile}
showSearchHF
searchUrl="https://huggingface.co/models?pipeline_tag=text-generation&library=gguf&sort=trending"
/>
</Group>
<Slider
value={contextSize}
min={256}
max={131072}
step={1}
onChange={handleContextSizeChangeWithStep}
style={{ marginBottom: '0.5rem' }}
/>
</div>
</Stack>
<div>
<Group justify="space-between" align="center" mb="xs">
<Group gap="xs" align="center">
<Text size="sm" fw={500}>
Context Size
</Text>
<InfoTooltip label="Controls the memory allocated for maximum context size. The larger the context, the larger the required memory." />
</Group>
<TextInput
value={contextSize?.toString() || ''}
onChange={(event) =>
handleContextSizeChangeWithStep(
Number(event.target.value) || 256
)
}
type="number"
min={256}
max={131072}
step={256}
size="sm"
w={100}
/>
</Group>
<Slider
value={contextSize}
min={256}
max={131072}
step={1}
onChange={handleContextSizeChangeWithStep}
style={{ marginBottom: '0.5rem' }}
/>
</div>
</Stack>
)}
</Transition>
);
};

View file

@ -345,7 +345,7 @@ export const LaunchScreen = ({ onLaunch }: LaunchScreenProps) => {
</Tabs.List>
<Tabs.Panel value="general">
<GeneralTab />
<GeneralTab configLoaded={configLoaded} />
</Tabs.Panel>
<Tabs.Panel value="advanced">