Images.svelte 9.38 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
Jannik Streidl's avatar
Jannik Streidl committed
2
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
3

4
	import { createEventDispatcher, onMount } from 'svelte';
5
	import { config, user } from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
6
	import {
7
		getAUTOMATIC1111Url,
Timothy J. Baek's avatar
Timothy J. Baek committed
8
9
10
		getImageGenerationModels,
		getDefaultImageGenerationModel,
		updateDefaultImageGenerationModel,
Timothy J. Baek's avatar
Timothy J. Baek committed
11
		getImageSize,
Timothy J. Baek's avatar
Timothy J. Baek committed
12
13
		getImageGenerationConfig,
		updateImageGenerationConfig,
14
		updateAUTOMATIC1111Url,
15
		updateImageSize,
16
		getImageSteps,
Timothy J. Baek's avatar
Timothy J. Baek committed
17
18
19
		updateImageSteps,
		getOpenAIKey,
		updateOpenAIKey
Timothy J. Baek's avatar
Timothy J. Baek committed
20
	} from '$lib/apis/images';
21
	import { getBackendConfig } from '$lib/apis';
Timothy J. Baek's avatar
Timothy J. Baek committed
22
23
24
25
26
27
	const dispatch = createEventDispatcher();

	export let saveSettings: Function;

	let loading = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
28
	let imageGenerationEngine = '';
29
	let enableImageGeneration = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
30

Timothy J. Baek's avatar
Timothy J. Baek committed
31
	let AUTOMATIC1111_BASE_URL = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
32
	let OPENAI_API_KEY = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
33
34

	let selectedModel = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
35
	let models = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
36

Timothy J. Baek's avatar
Timothy J. Baek committed
37
	let imageSize = '';
38
	let steps = 50;
Timothy J. Baek's avatar
Timothy J. Baek committed
39

Timothy J. Baek's avatar
Timothy J. Baek committed
40
	const getModels = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
41
		models = await getImageGenerationModels(localStorage.token).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
42
			toast.error(error);
Timothy J. Baek's avatar
Timothy J. Baek committed
43
			return null;
Timothy J. Baek's avatar
Timothy J. Baek committed
44
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
45
		selectedModel = await getDefaultImageGenerationModel(localStorage.token).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
46
			return '';
Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
49
		});
	};

50
51
52
	const updateAUTOMATIC1111UrlHandler = async () => {
		const res = await updateAUTOMATIC1111Url(localStorage.token, AUTOMATIC1111_BASE_URL).catch(
			(error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
53
54
				toast.error(error);
				return null;
Timothy J. Baek's avatar
Timothy J. Baek committed
55
			}
56
		);
57

58
59
		if (res) {
			AUTOMATIC1111_BASE_URL = res;
60

61
			await getModels();
62

63
64
			if (models) {
				toast.success('Server connection verified');
65
			}
66
67
		} else {
			AUTOMATIC1111_BASE_URL = await getAUTOMATIC1111Url(localStorage.token);
Timothy J. Baek's avatar
Timothy J. Baek committed
68
69
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
70
71
72
73
74
75
76
77
78
	const updateImageGeneration = async () => {
		const res = await updateImageGenerationConfig(
			localStorage.token,
			imageGenerationEngine,
			enableImageGeneration
		).catch((error) => {
			toast.error(error);
			return null;
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
79

Timothy J. Baek's avatar
Timothy J. Baek committed
80
81
82
83
84
85
86
87
		if (res) {
			imageGenerationEngine = res.engine;
			enableImageGeneration = res.enabled;
		}

		if (enableImageGeneration) {
			config.set(await getBackendConfig(localStorage.token));
			getModels();
88
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
89
90
91
92
	};

	onMount(async () => {
		if ($user.role === 'admin') {
Timothy J. Baek's avatar
Timothy J. Baek committed
93
94
95
96
97
98
99
100
101
			const res = await getImageGenerationConfig(localStorage.token).catch((error) => {
				toast.error(error);
				return null;
			});

			if (res) {
				imageGenerationEngine = res.engine;
				enableImageGeneration = res.enabled;
			}
102
			AUTOMATIC1111_BASE_URL = await getAUTOMATIC1111Url(localStorage.token);
Timothy J. Baek's avatar
Timothy J. Baek committed
103
			OPENAI_API_KEY = await getOpenAIKey(localStorage.token);
Timothy J. Baek's avatar
Timothy J. Baek committed
104

Timothy J. Baek's avatar
Timothy J. Baek committed
105
106
107
108
			imageSize = await getImageSize(localStorage.token);
			steps = await getImageSteps(localStorage.token);

			if (enableImageGeneration) {
Timothy J. Baek's avatar
Timothy J. Baek committed
109
				getModels();
Timothy J. Baek's avatar
Timothy J. Baek committed
110
111
112
113
114
115
116
117
118
			}
		}
	});
</script>

<form
	class="flex flex-col h-full justify-between space-y-3 text-sm"
	on:submit|preventDefault={async () => {
		loading = true;
119
		await updateOpenAIKey(localStorage.token, OPENAI_API_KEY);
Timothy J. Baek's avatar
Timothy J. Baek committed
120

Timothy J. Baek's avatar
Timothy J. Baek committed
121
		await updateDefaultImageGenerationModel(localStorage.token, selectedModel);
122

123
		await updateDefaultImageGenerationModel(localStorage.token, selectedModel);
Timothy J. Baek's avatar
Timothy J. Baek committed
124
125
126
127
		await updateImageSize(localStorage.token, imageSize).catch((error) => {
			toast.error(error);
			return null;
		});
128
129
130
131
		await updateImageSteps(localStorage.token, steps).catch((error) => {
			toast.error(error);
			return null;
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
132
133
134
135
136

		dispatch('save');
		loading = false;
	}}
>
137
	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[20.5rem]">
Timothy J. Baek's avatar
Timothy J. Baek committed
138
		<div>
139
			<div class=" mb-1 text-sm font-medium">Image Settings</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
140

Timothy J. Baek's avatar
Timothy J. Baek committed
141
			<div class=" py-0.5 flex w-full justify-between">
142
				<div class=" self-center text-xs font-medium">Image Generation Engine</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
143
144
145
146
				<div class="flex items-center relative">
					<select
						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
						bind:value={imageGenerationEngine}
147
						placeholder="Select a mode"
Timothy J. Baek's avatar
Timothy J. Baek committed
148
149
150
151
						on:change={async () => {
							await updateImageGeneration();
						}}
					>
152
153
						<option value="">Default (Automatic1111)</option>
						<option value="openai">Open AI (Dall-E)</option>
Timothy J. Baek's avatar
Timothy J. Baek committed
154
155
156
157
					</select>
				</div>
			</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
158
159
			<div>
				<div class=" py-0.5 flex w-full justify-between">
160
					<div class=" self-center text-xs font-medium">Image Generation (Experimental)</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
161
162
163
164

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
165
							if (imageGenerationEngine === '' && AUTOMATIC1111_BASE_URL === '') {
166
								toast.error('AUTOMATIC1111 Base URL is required.');
Timothy J. Baek's avatar
Timothy J. Baek committed
167
								enableImageGeneration = false;
168
							} else if (imageGenerationEngine === 'openai' && OPENAI_API_KEY === '') {
169
								toast.error('OpenAI API Key is required.');
170
								enableImageGeneration = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
171
172
173
							} else {
								enableImageGeneration = !enableImageGeneration;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
174
175

							updateImageGeneration();
Timothy J. Baek's avatar
Timothy J. Baek committed
176
177
178
179
						}}
						type="button"
					>
						{#if enableImageGeneration === true}
180
							<span class="ml-2 self-center">On</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
181
						{:else}
182
							<span class="ml-2 self-center">Off</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
183
184
185
186
187
						{/if}
					</button>
				</div>
			</div>
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
188
		<hr class=" dark:border-gray-700" />
Timothy J. Baek's avatar
Timothy J. Baek committed
189
190

		{#if imageGenerationEngine === ''}
191
			<div class=" mb-2.5 text-sm font-medium">AUTOMATIC1111 Base URL</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
192
193
194
			<div class="flex w-full">
				<div class="flex-1 mr-2">
					<input
Timothy J. Baek's avatar
Timothy J. Baek committed
195
						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
196
						placeholder="Enter URL (e.g. http://127.0.0.1:7860/)"
Timothy J. Baek's avatar
Timothy J. Baek committed
197
						bind:value={AUTOMATIC1111_BASE_URL}
Timothy J. Baek's avatar
Timothy J. Baek committed
198
					/>
Timothy J. Baek's avatar
Timothy J. Baek committed
199
200
				</div>
				<button
201
					class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded-lg transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
202
203
					type="button"
					on:click={() => {
204
205
206
						// updateOllamaAPIUrlHandler();

						updateAUTOMATIC1111UrlHandler();
Timothy J. Baek's avatar
Timothy J. Baek committed
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
					}}
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
						class="w-4 h-4"
					>
						<path
							fill-rule="evenodd"
							d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
							clip-rule="evenodd"
						/>
					</svg>
				</button>
			</div>

			<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
225
				Include `--api` flag when running stable-diffusion-webui
Timothy J. Baek's avatar
Timothy J. Baek committed
226
227
228
229
230
				<a
					class=" text-gray-300 font-medium"
					href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3734"
					target="_blank"
				>
231
					(e.g. `sh webui.sh --api`)
Timothy J. Baek's avatar
Timothy J. Baek committed
232
233
				</a>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
234
		{:else if imageGenerationEngine === 'openai'}
235
			<div class=" mb-2.5 text-sm font-medium">OpenAI API Key</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
236
237
238
239
			<div class="flex w-full">
				<div class="flex-1 mr-2">
					<input
						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
240
						placeholder="Enter API Key"
Timothy J. Baek's avatar
Timothy J. Baek committed
241
242
243
244
						bind:value={OPENAI_API_KEY}
					/>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
245
		{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
246
247
248
249

		{#if enableImageGeneration}
			<hr class=" dark:border-gray-700" />

Timothy J. Baek's avatar
Timothy J. Baek committed
250
			<div>
251
				<div class=" mb-2.5 text-sm font-medium">Set Default Model</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
252
253
254
				<div class="flex w-full">
					<div class="flex-1 mr-2">
						<select
Timothy J. Baek's avatar
Timothy J. Baek committed
255
							class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
Timothy J. Baek's avatar
Timothy J. Baek committed
256
							bind:value={selectedModel}
257
							placeholder="Select a model"
Timothy J. Baek's avatar
Timothy J. Baek committed
258
259
						>
							{#if !selectedModel}
260
								<option value="" disabled selected>Select a model</option>
Timothy J. Baek's avatar
Timothy J. Baek committed
261
							{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
262
							{#each models ?? [] as model}
Timothy J. Baek's avatar
Timothy J. Baek committed
263
								<option value={model.id} class="bg-gray-100 dark:bg-gray-700">{model.name}</option>
Timothy J. Baek's avatar
Timothy J. Baek committed
264
265
266
267
268
							{/each}
						</select>
					</div>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
269
270

			<div>
271
				<div class=" mb-2.5 text-sm font-medium">Set Image Size</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
272
273
274
				<div class="flex w-full">
					<div class="flex-1 mr-2">
						<input
Timothy J. Baek's avatar
Timothy J. Baek committed
275
							class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
276
							placeholder="Enter Image Size (e.g. 512x512)"
Timothy J. Baek's avatar
Timothy J. Baek committed
277
278
279
280
281
							bind:value={imageSize}
						/>
					</div>
				</div>
			</div>
282
283

			<div>
284
				<div class=" mb-2.5 text-sm font-medium">Set Steps</div>
285
286
287
				<div class="flex w-full">
					<div class="flex-1 mr-2">
						<input
Timothy J. Baek's avatar
Timothy J. Baek committed
288
							class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
289
							placeholder="Enter Number of Steps (e.g. 50)"
290
291
292
293
294
							bind:value={steps}
						/>
					</div>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
295
296
297
298
299
		{/if}
	</div>

	<div class="flex justify-end pt-3 text-sm font-medium">
		<button
Timothy J. Baek's avatar
Timothy J. Baek committed
300
			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg flex flex-row space-x-1 items-center {loading
Timothy J. Baek's avatar
Timothy J. Baek committed
301
302
303
304
305
				? ' cursor-not-allowed'
				: ''}"
			type="submit"
			disabled={loading}
		>
306
			Save
Timothy J. Baek's avatar
Timothy J. Baek committed
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337

			{#if loading}
				<div class="ml-2 self-center">
					<svg
						class=" w-4 h-4"
						viewBox="0 0 24 24"
						fill="currentColor"
						xmlns="http://www.w3.org/2000/svg"
						><style>
							.spinner_ajPY {
								transform-origin: center;
								animation: spinner_AtaB 0.75s infinite linear;
							}
							@keyframes spinner_AtaB {
								100% {
									transform: rotate(360deg);
								}
							}
						</style><path
							d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
							opacity=".25"
						/><path
							d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
							class="spinner_ajPY"
						/></svg
					>
				</div>
			{/if}
		</button>
	</div>
</form>