Hugging Face's logo

Spaces:
coolmanx
/
open-webui
Running

App Files
open-webui
File size: 3,257 Bytes 
bc27e65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
<script lang="ts">

	import { getContext, tick } from 'svelte';

	const i18n = getContext('i18n');



	import Tooltip from '$lib/components/common/Tooltip.svelte';

	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';

	import Cog6 from '$lib/components/icons/Cog6.svelte';

	import AddConnectionModal from '$lib/components/AddConnectionModal.svelte';

	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';



	import { connect } from 'socket.io-client';



	export let onDelete = () => {};

	export let onSubmit = () => {};



	export let pipeline = false;



	export let url = '';

	export let key = '';

	export let config = {};



	let showConfigModal = false;

	let showDeleteConfirmDialog = false;

</script>



<ConfirmDialog

	bind:show={showDeleteConfirmDialog}

	on:confirm={() => {

		onDelete();

	}}

/>



<AddConnectionModal

	edit

	bind:show={showConfigModal}

	connection={{

		url,

		key,

		config

	}}

	onDelete={() => {

		showDeleteConfirmDialog = true;

	}}

	onSubmit={(connection) => {

		url = connection.url;

		key = connection.key;

		config = connection.config;

		onSubmit(connection);

	}}

/>



<div class="flex w-full gap-2 items-center">

	<Tooltip

		className="w-full relative"

		content={$i18n.t(`WebUI will make requests to "{{url}}/chat/completions"`, {

			url

		})}

		placement="top-start"

	>

		{#if !(config?.enable ?? true)}

			<div

				class="absolute top-0 bottom-0 left-0 right-0 opacity-60 bg-white dark:bg-gray-900 z-10"

			></div>

		{/if}

		<div class="flex w-full">

			<div class="flex-1 relative">

				<input

					class=" outline-hidden w-full bg-transparent {pipeline ? 'pr-8' : ''}"

					placeholder={$i18n.t('API Base URL')}

					bind:value={url}

					autocomplete="off"

				/>



				{#if pipeline}

					<div class=" absolute top-0.5 right-2.5">

						<Tooltip content="Pipelines">

							<svg

								xmlns="http://www.w3.org/2000/svg"

								viewBox="0 0 24 24"

								fill="currentColor"

								class="size-4"

							>

								<path

									d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"

								/>

								<path

									d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"

								/>

								<path

									d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"

								/>

							</svg>

						</Tooltip>

					</div>

				{/if}

			</div>



			<SensitiveInput

				inputClassName=" outline-hidden bg-transparent w-full"

				placeholder={$i18n.t('API Key')}

				bind:value={key}

			/>

		</div>

	</Tooltip>



	<div class="flex gap-1">

		<Tooltip content={$i18n.t('Configure')} className="self-start">

			<button

				class="self-center p-1 bg-transparent hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"

				on:click={() => {

					showConfigModal = true;

				}}

				type="button"

			>

				<Cog6 />

			</button>

		</Tooltip>

	</div>

</div>