Skip to content

Commit

Permalink
feat(animations) notify users of status of settings update
Browse files Browse the repository at this point in the history
  • Loading branch information
@rishikanthc
rishikanthc committed Oct 14, 2024
1 parent c906663 commit b236906
Showing 1 changed file with 115 additions and 59 deletions.
174 changes: 115 additions & 59 deletions src/lib/components/SettingsPane.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
import { Slider } from 'bits-ui';
import { Select } from 'bits-ui';
import { Label } from 'bits-ui';
import { Check } from 'lucide-svelte';
import { onMount } from 'svelte';
import { Check, CircleCheck, CircleX, Loader } from 'lucide-svelte';
import { onMount, tick } from 'svelte';
const models = [
{ value: 'small', label: 'Small' },
Expand Down Expand Up @@ -33,6 +33,7 @@
return currSetting;
}
let initLoad = false;
onMount(async () => {
currSettings = await getSettings();
console.log(currSettings);
Expand All @@ -45,13 +46,19 @@
return rec.value === currSettings.default_openai_model;
})[0];
console.log(selWhisperModel);
await tick();
initLoad = true;
});
let newSettings;
$: updateSettings(selWhisperModel, selSummaryModel, threads, cpus);
let updating = false;
let success = false;
let error = false;
async function updateSettings(whisper, summModel, threads, cpus) {
if (!whisper && !summModel && !threads && !cpus) {
if (!initLoad) {
updating = false;
console.log('settings not loaded yet');
} else {
const settingsUpd = {
Expand All @@ -62,17 +69,30 @@
};
try {
updating = true;
const response = await fetch('/api/settings', {
method: 'POST',
body: JSON.stringify(settingsUpd)
});
updating = false;
if (!response.ok) {
throw new Error('Request to update settings failed');
error = true;
} else {
success = true;
}
} catch (error) {
updating = false;
console.error('Error updating settings:', error);
} finally {
// Add 1-second delay before resetting flags
await new Promise((resolve) => setTimeout(resolve, 1000));
error = false;
success = false;
}
}
currSettings = await getSettings();
updating = false;
}
</script>

Expand All @@ -85,7 +105,7 @@
>
Summarizer Model
</Label.Root>
<Select.Root items={summaryModels} bind:selected={selSummaryModel}>
<Select.Root items={summaryModels} bind:selected={selSummaryModel} disabled={updating}>
<Select.Trigger
class="bg-background placeholder:text-foreground-alt/50 focus:ring-foreground focus:ring-offset-background inline-flex h-[35px] w-full items-center rounded-md border border-carbongray-200 px-[11px] text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-carbongray-600"
aria-label="Select a theme"
Expand Down Expand Up @@ -119,7 +139,7 @@
>
Whisper Model
</Label.Root>
<Select.Root items={models} bind:selected={selWhisperModel}>
<Select.Root items={models} bind:selected={selWhisperModel} disabled={updating}>
<Select.Trigger
class="bg-background placeholder:text-foreground-alt/50 focus:ring-foreground focus:ring-offset-background inline-flex h-[35px] w-full items-center rounded-md border border-carbongray-200 px-[11px] text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-carbongray-600"
aria-label="Select a theme"
Expand All @@ -145,63 +165,99 @@
</Select.Content>
</Select.Root>
</div>
<div class="flex w-[80%] flex-col justify-center gap-2">
<Label.Root
id="terms-label"
for="terms"
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
# Processors
</Label.Root>
<Slider.Root
bind:value={cpus}
min={0}
max={10}
step={1}
let:thumbs
class="relative flex w-full touch-none select-none items-center"
>
<span
class="relative h-2 w-full grow overflow-hidden rounded-full bg-carbongray-50 dark:bg-carbongray-700"
<div class="flex items-center justify-between">
<div class="flex w-[80%] flex-col justify-center gap-2">
<Label.Root
id="terms-label"
for="terms"
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
# Processors
</Label.Root>
<Slider.Root
bind:value={cpus}
min={1}
max={10}
step={1}
let:thumbs
class="relative flex w-full touch-none select-none items-center"
disabled={updating}
>
<Slider.Range class="absolute h-full bg-black dark:bg-carbonblue-500" />
</span>
{#each thumbs as thumb}
<Slider.Thumb
{thumb}
class="border-border-input active:scale-98 block size-[20px] cursor-pointer rounded-full border bg-carbongray-600 shadow transition-colors hover:border-carbongray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-carbongray-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:bg-carbongray-700"
/>
{/each}
</Slider.Root>
<span
class="relative h-2 w-full grow overflow-hidden rounded-full bg-carbongray-100 dark:bg-carbongray-600"
>
<Slider.Range class="absolute h-full bg-black dark:bg-carbonblue-500" />
</span>
{#each thumbs as thumb}
<Slider.Thumb
{thumb}
class="border-border-input active:scale-98 block size-[20px] cursor-pointer rounded-full border bg-carbongray-600 shadow transition-colors hover:border-carbongray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-carbongray-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:bg-carbongray-700"
/>
{/each}
</Slider.Root>
</div>
<div
class="flex h-[20px] w-[20px] items-center justify-center rounded-sm bg-white p-1 text-base dark:bg-carbongray-800"
>
{#if cpus}
{cpus[0]}
{/if}
</div>
</div>

<div class="flex w-[80%] flex-col justify-center gap-2">
<Label.Root
id="terms-label"
for="terms"
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
# Threads
</Label.Root>
<Slider.Root
bind:value={threads}
min={0}
max={10}
step={1}
let:thumbs
class="relative flex w-full touch-none select-none items-center"
>
<span
class="relative h-2 w-full grow overflow-hidden rounded-full bg-carbongray-50 dark:bg-carbongray-700"
<div class="flex items-center justify-between">
<div class="flex w-[80%] flex-col justify-center gap-2">
<Label.Root
id="terms-label"
for="terms"
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
<Slider.Range class="absolute h-full bg-black dark:bg-carbonblue-500" />
</span>
{#each thumbs as thumb}
<Slider.Thumb
{thumb}
class="border-border-input active:scale-98 block size-[20px] cursor-pointer rounded-full border bg-carbongray-600 shadow transition-colors hover:border-carbongray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-carbongray-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:bg-carbongray-700"
/>
{/each}
</Slider.Root>
# Threads
</Label.Root>
<Slider.Root
bind:value={threads}
min={1}
max={10}
step={1}
let:thumbs
class="relative flex w-full touch-none select-none items-center"
disabled={updating}
>
<span
class="relative h-2 w-full grow overflow-hidden rounded-full bg-carbongray-100 dark:bg-carbongray-600"
>
<Slider.Range class="absolute h-full bg-black dark:bg-carbonblue-500" />
</span>
{#each thumbs as thumb}
<Slider.Thumb
{thumb}
class="border-border-input active:scale-98 block size-[20px] cursor-pointer rounded-full border bg-carbongray-600 shadow transition-colors hover:border-carbongray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-carbongray-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:bg-carbongray-700"
/>
{/each}
</Slider.Root>
</div>
<div
class="flex h-[20px] w-[20px] items-center justify-center rounded-sm bg-white p-1 text-base dark:bg-carbongray-800"
>
{#if threads}
{threads[0]}
{/if}
</div>
</div>
{#if updating}
<div class="flex items-center justify-center gap-2">
<div class="text-base text-carbongray-600 dark:text-carbongray-200">Upating settings</div>
<Loader size={15} class="animate-spin" />
</div>
{:else if success}
<div class="flex items-center justify-center gap-2">
<div class="text-base text-carbongray-600 dark:text-carbongray-200">Updated</div>
<CircleCheck size={15} class="animate-ping" />
</div>
{:else if error}
<div class="flex items-center justify-center gap-2">
<div class="text-base text-carbongray-600 dark:text-carbongray-200">Failed</div>
<CircleX size={15} class="animate-ping" />
</div>
{/if}
</div>

0 comments on commit b236906

Please sign in to comment.