This commit is contained in:
Timothy Jaeryang Baek
2026-07-26 18:26:15 -04:00
parent 301bf519ab
commit dcc7fb1e8e
3 changed files with 22 additions and 46 deletions
@@ -1,5 +1,5 @@
<script>
import { getContext, onMount } from 'svelte';
import { getContext } from 'svelte';
const i18n = getContext('i18n');
import ManageOllama from './ManageOllama.svelte';
@@ -11,12 +11,13 @@
</script>
{#if ollamaConfig}
<div class="flex-1 mb-2.5 pr-1.5 rounded-lg bg-gray-50 dark:text-gray-300 dark:bg-gray-850">
<div class=" mb-2 text-sm font-normal">{$i18n.t('Ollama')}</div>
<div class="flex-1 mb-2.5">
<SettingsSelect
bind:value={selectedUrlIdx}
className="w-full"
placeholder={$i18n.t('Select an Ollama instance')}
selectClassName="text-sm"
>
{#each ollamaConfig.OLLAMA_BASE_URLS as url, idx}
<option value={idx}>{url}</option>
@@ -67,6 +67,13 @@
let deleteModelTag = '';
const inputClass =
'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2.5 text-left text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 disabled:opacity-50 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
const textareaClass =
'w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2.5 py-2 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 disabled:opacity-50 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
const iconButtonClass =
'inline-flex h-7 items-center justify-center rounded-lg border border-gray-100/50 bg-gray-50/40 px-2.5 text-gray-700 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]';
const updateModelsHandler = async () => {
updateCancelled = false;
toast.info('Checking for model updates...');
@@ -642,7 +649,7 @@
<div class="flex w-full">
<div class="flex-1 mr-2">
<input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
class={inputClass}
placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
modelTag: 'mistral:7b'
})}
@@ -651,7 +658,7 @@
</div>
<Tooltip content={$i18n.t('Pull Model')} placement="top">
<button
class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
class={iconButtonClass}
on:click={() => {
pullModelHandler();
}}
@@ -809,14 +816,11 @@
<div>
<div class=" mb-2 text-sm font-normal">{$i18n.t('Delete a model')}</div>
<div class="flex w-full">
<div
class="flex-1 mr-2 pr-1.5 rounded-lg bg-gray-50 dark:text-gray-300 dark:bg-gray-850"
>
<div class="flex-1 mr-2">
<SettingsSelect
bind:value={deleteModelTag}
className="w-full"
placeholder={$i18n.t('Select a model')}
selectClassName="text-sm"
>
<option value="" disabled selected>{$i18n.t('Select a model')}</option>
@@ -829,7 +833,7 @@
</div>
<Tooltip content={$i18n.t('Delete Model')} placement="top">
<button
class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
class={iconButtonClass}
on:click={() => {
showModelDeleteConfirm = true;
}}
@@ -857,7 +861,7 @@
<div class="flex w-full">
<div class="flex-1 mr-2 flex flex-col gap-2">
<input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
class={inputClass}
placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
modelTag: 'my-modelfile'
})}
@@ -867,7 +871,7 @@
<textarea
bind:value={createModelObject}
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-100 dark:bg-gray-850 outline-hidden resize-none scrollbar-hidden"
class="{textareaClass} resize-none scrollbar-hidden"
rows="6"
placeholder={`e.g. {"model": "my-modelfile", "from": "ollama:7b"})`}
disabled={createModelLoading}
@@ -877,7 +881,7 @@
<div class="flex self-start">
<Tooltip content={$i18n.t('Create Model')} placement="top">
<button
class="px-2.5 py-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition disabled:cursor-not-allowed"
class={iconButtonClass}
on:click={() => {
createModelHandler();
}}
@@ -987,7 +991,7 @@
<button
type="button"
class="w-full rounded-lg text-left py-2 px-4 bg-gray-50 dark:text-gray-300 dark:bg-gray-850"
class={inputClass}
on:click={() => {
modelUploadInputElement.click();
}}
@@ -1002,10 +1006,7 @@
{:else}
<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
<input
class="w-full rounded-lg text-left py-2 px-4 bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden {modelFileUrl !==
''
? 'mr-2'
: ''}"
class={inputClass}
type="url"
required
bind:value={modelFileUrl}
@@ -1017,11 +1018,7 @@
{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
<Tooltip content={$i18n.t('Upload Model')} placement="top">
<button
class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg disabled:cursor-not-allowed transition"
type="submit"
disabled={modelLoading}
>
<button class={iconButtonClass} type="submit" disabled={modelLoading}>
{#if modelLoading}
<div class="self-center">
<svg
@@ -1080,7 +1077,7 @@
</div>
<textarea
bind:value={modelFileContent}
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-100 dark:bg-gray-850 outline-hidden resize-none"
class="{textareaClass} resize-none"
rows="6"
/>
</div>
@@ -63,28 +63,6 @@
</div>
{:else if selected !== null}
<div class=" flex w-full flex-col">
<div
class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent dark:text-gray-200"
>
<button
class="min-w-fit p-1.5 {selected === 'ollama'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
on:click={() => {
selected = 'ollama';
}}>{$i18n.t('Ollama')}</button
>
<!-- <button
class="min-w-fit p-1.5 {selected === 'llamacpp'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
on:click={() => {
selected = 'llamacpp';
}}>{$i18n.t('Llama.cpp')}</button
> -->
</div>
<div class=" px-1.5 py-1">
{#if selected === 'ollama'}
<ManageMultipleOllama {ollamaConfig} />