Skip to content

Commit 57db13d

Browse files
Keshav-writes-codeKeshav-writes-code
committed
feat(lm): initalize components for local llm config in app settings
1 parent aa3a9f0 commit 57db13d

5 files changed

Lines changed: 157 additions & 129 deletions

File tree

‎apps/app/src/components/general/app_settings/editor/lm_config/cloud/index.svelte‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<script lang="ts">
2+
import { Select } from 'bits-ui';
3+
import ListModels from './list_models.svelte';
4+
import { apply_ai_config } from './onclick';
5+
let model_providers = [
6+
{
7+
value: 'openai',
8+
label: 'Open AI',
9+
icon: 'i-ri:openai-fill',
10+
models_docs_link: '',
11+
},
12+
{ value: 'google', label: 'Google', icon: 'i-ri:google-fill' },
13+
{ value: 'anthropic', label: 'Anthropic', icon: 'i-ri:anthropic-fill' },
14+
];
15+
let sel_provider = $state<string>();
16+
let api_key = $state<string>();
17+
let model_id = $state<string>();
18+
19+
const selected_provider_label = $derived(
20+
model_providers.find((model) => model.value === sel_provider)?.label
21+
);
22+
let models_list_dialog_open = $state(false);
23+
</script>
24+
25+
<div class=" flex flex-col gap-3">
26+
<div class="flex justify-between items-center">
27+
<p>Select Model Provider</p>
28+
<Select.Root
29+
type="single"
30+
items={model_providers}
31+
onValueChange={(v) => (sel_provider = v)}
32+
allowDeselect={true}
33+
>
34+
<Select.Trigger class="input">
35+
{selected_provider_label || 'Select a Model Provider'}
36+
</Select.Trigger>
37+
<Select.Portal>
38+
<Select.Content>
39+
<Select.ScrollUpButton>
40+
<div class="i-tabler:chevrons-up size-4"></div>
41+
</Select.ScrollUpButton>
42+
<Select.Viewport class="bg-base-100 p-2 w-60 rounded-box ">
43+
{#each model_providers as model}
44+
<!-- content here -->
45+
<Select.Item
46+
value={model.value}
47+
class="flex hover:bg-gray/10 transition-all items-center rounded-field p-2 h-8 w-full"
48+
>
49+
{#snippet children({ selected })}
50+
<span class="flex gap-3 items-center">
51+
<div class={model.icon}></div>
52+
{model.label}</span
53+
>
54+
{#if selected}
55+
<div class="ml-auto">
56+
<div class="i-tabler:check size-4"></div>
57+
</div>
58+
{/if}
59+
{/snippet}
60+
</Select.Item>
61+
{/each}
62+
<Select.ScrollDownButton>
63+
<div class="i-tabler:chevrons-down size-4"></div>
64+
</Select.ScrollDownButton>
65+
</Select.Viewport>
66+
</Select.Content>
67+
</Select.Portal>
68+
</Select.Root>
69+
</div>
70+
<div class="flex justify-between items-center">
71+
<p>
72+
Enter <span class="badge badge-md {selected_provider_label || 'hidden'} "
73+
>{selected_provider_label}
74+
</span> API Key
75+
</p>
76+
77+
<label class="input">
78+
<div class="i-tabler:key size-5"></div>
79+
<input
80+
type="password"
81+
required
82+
placeholder="API Key"
83+
title="Must be more than 8 characters, including number, lowercase letter, uppercase letter"
84+
bind:value={api_key}
85+
disabled={selected_provider_label == undefined}
86+
/>
87+
</label>
88+
</div>
89+
<div class="flex justify-between items-center">
90+
<div class="">
91+
<p>
92+
Enter <span
93+
class="badge badge-md {selected_provider_label || 'hidden'} "
94+
>{selected_provider_label}
95+
</span> Model name
96+
</p>
97+
<span class="text-base-content/50 text-sm">
98+
click <button
99+
class="link link-primary"
100+
onclick={() => {
101+
models_list_dialog_open = true;
102+
}}
103+
>
104+
here</button
105+
> to see available models
106+
</span>
107+
{#if models_list_dialog_open}
108+
<ListModels
109+
model_provider={sel_provider}
110+
bind:models_list_dialog_open
111+
bind:model_name={model_id}
112+
/>
113+
{/if}
114+
</div>
115+
116+
<label class="input">
117+
<div class="i-carbon:network-1 size-5"></div>
118+
<input
119+
type="text"
120+
required
121+
bind:value={model_id}
122+
placeholder="Model name"
123+
title="Must be more than 8 characters, including number, lowercase letter, uppercase letter"
124+
disabled={!selected_provider_label || !api_key}
125+
/>
126+
</label>
127+
</div>
128+
<button
129+
class="btn btn-primary self-end"
130+
disabled={!sel_provider || !api_key || !model_id}
131+
onclick={() => {
132+
if (sel_provider && api_key && model_id)
133+
apply_ai_config(sel_provider, api_key, model_id);
134+
}}>Apply</button
135+
>
136+
</div>

apps/app/src/components/general/app_settings/editor/lm_config/list_models.svelte renamed to apps/app/src/components/general/app_settings/editor/lm_config/cloud/list_models.svelte

File renamed without changes.

apps/app/src/components/general/app_settings/editor/lm_config/onclick.ts renamed to apps/app/src/components/general/app_settings/editor/lm_config/cloud/onclick.ts

File renamed without changes.

‎apps/app/src/components/general/app_settings/editor/lm_config/index.svelte‎

Lines changed: 21 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,28 @@
11
<script lang="ts">
2-
import { Select } from 'bits-ui';
3-
import ListModels from './list_models.svelte';
4-
import { apply_ai_config } from './onclick';
5-
let model_providers = [
6-
{
7-
value: 'openai',
8-
label: 'Open AI',
9-
icon: 'i-ri:openai-fill',
10-
models_docs_link: '',
11-
},
12-
{ value: 'google', label: 'Google', icon: 'i-ri:google-fill' },
13-
{ value: 'anthropic', label: 'Anthropic', icon: 'i-ri:anthropic-fill' },
14-
];
15-
let sel_provider = $state<string>();
16-
let api_key = $state<string>();
17-
let model_id = $state<string>();
18-
19-
const selected_provider_label = $derived(
20-
model_providers.find((model) => model.value === sel_provider)?.label
21-
);
22-
let models_list_dialog_open = $state(false);
2+
import CloudInfrenceConfig from './cloud/index.svelte';
3+
import LocalInfrenceConfig from './local/index.svelte';
234
</script>
245

25-
<div class="p-6 flex flex-col gap-3">
26-
<div class="flex justify-between items-center">
27-
<p>Select Model Provider</p>
28-
<Select.Root
29-
type="single"
30-
items={model_providers}
31-
onValueChange={(v) => (sel_provider = v)}
32-
allowDeselect={true}
33-
>
34-
<Select.Trigger class="input">
35-
{selected_provider_label || 'Select a Model'}
36-
</Select.Trigger>
37-
<Select.Portal>
38-
<Select.Content>
39-
<Select.ScrollUpButton>
40-
<div class="i-tabler:chevrons-up size-4"></div>
41-
</Select.ScrollUpButton>
42-
<Select.Viewport class="bg-base-100 p-2 w-60 rounded-box ">
43-
{#each model_providers as model}
44-
<!-- content here -->
45-
<Select.Item
46-
value={model.value}
47-
class="flex hover:bg-gray/10 transition-all items-center rounded-field p-2 h-8 w-full"
48-
>
49-
{#snippet children({ selected })}
50-
<span class="flex gap-3 items-center">
51-
<div class={model.icon}></div>
52-
{model.label}</span
53-
>
54-
{#if selected}
55-
<div class="ml-auto">
56-
<div class="i-tabler:check size-4"></div>
57-
</div>
58-
{/if}
59-
{/snippet}
60-
</Select.Item>
61-
{/each}
62-
<Select.ScrollDownButton>
63-
<div class="i-tabler:chevrons-down size-4"></div>
64-
</Select.ScrollDownButton>
65-
</Select.Viewport>
66-
</Select.Content>
67-
</Select.Portal>
68-
</Select.Root>
69-
</div>
70-
<div class="flex justify-between items-center">
71-
<p>
72-
Enter <span class="badge badge-md {selected_provider_label || 'hidden'} "
73-
>{selected_provider_label}
74-
</span> API Key
75-
</p>
76-
77-
<label class="input">
78-
<div class="i-tabler:key size-5"></div>
79-
<input
80-
type="password"
81-
required
82-
placeholder="API Key"
83-
title="Must be more than 8 characters, including number, lowercase letter, uppercase letter"
84-
bind:value={api_key}
85-
disabled={selected_provider_label == undefined}
86-
/>
87-
</label>
6+
<div class="tabs bg-base-300 gap-x-2 tabs-box">
7+
<label
8+
class="tab duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:color-white transition-all flex gap-1 py-3 px-5 h-max items-center capitalize"
9+
>
10+
<input type="radio" name="infrence_selector" checked={true} />
11+
<div class="i-tabler:shield-lock size-5"></div>
12+
<span class=" ">Local Infrence</span>
13+
</label>
14+
<div class="tab-content bg-base-100 border-base-300 p-6">
15+
<LocalInfrenceConfig />
8816
</div>
89-
<div class="flex justify-between items-center">
90-
<div class="">
91-
<p>
92-
Enter <span
93-
class="badge badge-md {selected_provider_label || 'hidden'} "
94-
>{selected_provider_label}
95-
</span> Model name
96-
</p>
97-
<span class="text-base-content/50 text-sm">
98-
click <button
99-
class="link link-primary"
100-
onclick={() => {
101-
models_list_dialog_open = true;
102-
}}
103-
>
104-
here</button
105-
> to see available models
106-
</span>
107-
{#if models_list_dialog_open}
108-
<ListModels
109-
model_provider={sel_provider}
110-
bind:models_list_dialog_open
111-
bind:model_name={model_id}
112-
/>
113-
{/if}
114-
</div>
11517

116-
<label class="input">
117-
<div class="i-carbon:network-1 size-5"></div>
118-
<input
119-
type="text"
120-
required
121-
bind:value={model_id}
122-
placeholder="Model name"
123-
title="Must be more than 8 characters, including number, lowercase letter, uppercase letter"
124-
disabled={!selected_provider_label || !api_key}
125-
/>
126-
</label>
127-
</div>
128-
<button
129-
class="btn btn-primary self-end"
130-
disabled={!sel_provider || !api_key || !model_id}
131-
onclick={() => {
132-
if (sel_provider && api_key && model_id)
133-
apply_ai_config(sel_provider, api_key, model_id);
134-
}}>Apply</button
18+
<label
19+
class="tab duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:color-white transition-all flex gap-1 py-3 px-5 h-max items-center capitalize"
13520
>
21+
<input type="radio" name="infrence_selector" checked={true} />
22+
<div class="i-tabler:cloud size-5"></div>
23+
<span class=" ">Cloud Infrence</span>
24+
</label>
25+
<div class="tab-content bg-base-100 border-base-300 p-6">
26+
<CloudInfrenceConfig />
27+
</div>
13628
</div>

‎apps/app/src/components/general/app_settings/editor/lm_config/local/index.svelte‎

Whitespace-only changes.

0 commit comments

Comments
 (0)