mirror of
https://github.com/open-webui/open-webui.git
synced 2026-08-13 01:02:25 -06:00
refac
This commit is contained in:
@@ -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} />
|
||||
|
||||
Reference in New Issue
Block a user