Skip to content

Commit 3751aa6

Browse files
author
Jicheng Lu
committed
complete
1 parent a851aef commit 3751aa6

File tree

6 files changed

+137
-26
lines changed

6 files changed

+137
-26
lines changed

‎src/lib/helpers/enums.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,4 +164,13 @@ const globalEvent = {
164164
Search: "search",
165165
Chat: "chat"
166166
};
167-
export const GlobalEvent = Object.freeze(globalEvent);
167+
export const GlobalEvent = Object.freeze(globalEvent);
168+
169+
const llmModelType = {
170+
Text: 1,
171+
Chat: 2,
172+
Image: 3,
173+
Embedding: 4,
174+
Audio: 5
175+
};
176+
export const LlmModelType = Object.freeze(llmModelType);

‎src/lib/helpers/types/commonTypes.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,19 @@
2424
* @property {T[]} items - Items.
2525
*/
2626

27+
/**
28+
* @typedef {Object} LlmConfigOption
29+
* @property {number?} [type]
30+
* @property {boolean?} [multiModal]
31+
* @property {boolean?} [imageGeneration]
32+
*/
33+
34+
/**
35+
* @typedef {Object} LlmConfig
36+
* @property {string} provider
37+
* @property {LlmModelSetting[]} models
38+
*/
39+
2740
/**
2841
* @typedef {Object} LlmModelSetting
2942
* @property {string} name

‎src/lib/services/api-endpoints.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export const endpoints = {
7474
// LLM provider
7575
llmProvidersUrl: `${host}/llm-providers`,
7676
llmProviderModelsUrl: `${host}/llm-provider/{provider}/models`,
77+
llmConfigsUrl: `${host}/llm-configs`,
7778

7879
// logging
7980
loggingFullLogUrl: `${host}/logger/full-log`,

‎src/lib/services/llm-provider-service.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,24 @@ export async function getLlmProviderModels(provider) {
2121
let url = replaceUrl(endpoints.llmProviderModelsUrl, {provider: provider});
2222
const response = await axios.get(url);
2323
return response.data;
24+
}
25+
26+
27+
/**
28+
* Get llm configs
29+
* @param {import('$commonTypes').LlmConfigOption?} [options]
30+
* @returns {Promise<import('$commonTypes').LlmConfig[]>}
31+
*/
32+
export async function getLlmConfigs(options = null) {
33+
const url = endpoints.llmConfigsUrl;
34+
const response = await axios.get(url, {
35+
params: {
36+
options: options
37+
},
38+
paramsSerializer: {
39+
dots: true,
40+
indexes: null,
41+
}
42+
});
43+
return response.data;
2444
}

‎src/routes/page/instruction/+page.svelte‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,12 @@
1313
import { getAgents } from '$lib/services/agent-service';
1414
import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
1515
import { sendChatCompletion } from '$lib/services/instruct-service';
16+
import { getLlmConfigs } from '$lib/services/llm-provider-service';
17+
import { LlmModelType } from '$lib/helpers/enums';
1618
1719
const maxLength = 64000;
20+
const DEFAULT_PROVIDER = 'openai';
21+
const DEFAULT_MODEL = 'gpt-4o-mini';
1822
1923
let isLoading = false;
2024
let isThinking = false;
@@ -27,10 +31,19 @@
2731
2832
/** @type {import('$agentTypes').AgentModel | null} */
2933
let selectedAgent = null;
34+
35+
/** @type {string | null} */
36+
let selectedProvider = null;
37+
38+
/** @type {string | null} */
39+
let selectedModel = null;
3040
3141
/** @type {import('$agentTypes').AgentModel[]} */
3242
let agents = [];
3343
44+
/** @type {import('$commonTypes').LlmConfig[]} */
45+
let llmConfigs = [];
46+
3447
/** @type {any[]} */
3548
let states = [
3649
{ key: '', value: ''}
@@ -41,6 +54,7 @@
4154
isLoading = true;
4255
const pagedAgents = await getAgents({ pager: { page: 1, size: 1000, count: 0 } });
4356
agents = pagedAgents.items || [];
57+
llmConfigs = await getLlmConfigs({ type: LlmModelType.Chat });
4458
} catch {
4559
agents = [];
4660
} finally {
@@ -56,10 +70,11 @@
5670
const formattedStates = formatStates(states);
5771
const start = new Date();
5872
sendChatCompletion({
59-
text: util.trim(text),
60-
instruction: util.trim(instruction),
61-
provider: 'openai',
62-
model: 'gpt-4o-mini',
73+
text: util.trim(text) || '',
74+
instruction: util.trim(instruction) || null,
75+
agentId: selectedAgent?.id,
76+
provider: selectedProvider || DEFAULT_PROVIDER,
77+
model: selectedModel || DEFAULT_MODEL,
6378
states: formattedStates
6479
}).then(res => {
6580
result = res || '';
@@ -108,18 +123,20 @@
108123
function onAgentSelected(e) {
109124
selectedAgent = e.detail.selectedAgent || null;
110125
instruction = selectedAgent?.instruction || '';
111-
}
112126
113-
/** @param {any} e */
114-
function onTemplateSelected(e) {
115127
const template = e.detail.selectedTemplate || null;
116-
let text = template?.content;
117-
if (!template) {
118-
text = selectedAgent?.instruction;
128+
if (!!template) {
129+
instruction = template?.content || '';
119130
}
120-
instruction = text || '';
131+
132+
onLlmSelected(e);
121133
}
122134
135+
/** @param {any} e */
136+
function onLlmSelected(e) {
137+
selectedProvider = e.detail.selectedProvider || null;
138+
selectedModel = e.detail.selectedModel || '';
139+
}
123140
</script>
124141
125142
<HeadTitle title="{$_('Instruction')}" />
@@ -196,8 +213,9 @@
196213
<InstructionSetting
197214
disabled={isThinking}
198215
agents={agents}
216+
llmConfigs={llmConfigs}
199217
on:agentSelected={e => onAgentSelected(e)}
200-
on:templateSelected={e => onTemplateSelected(e)}
218+
on:llmSelected={e => onLlmSelected(e)}
201219
/>
202220
</div>
203221
</div>

‎src/routes/page/instruction/instruction-components/instruction-setting.svelte‎

Lines changed: 63 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,14 @@
77
88
const svelteDispatch = createEventDispatcher();
99
10+
const DEFAULT_PROVIDER = 'openai';
11+
const DEFAULT_MODEL = 'gpt-4o-mini';
12+
1013
/** @type {import('$agentTypes').AgentModel[]} */
1114
export let agents = [];
1215
13-
/** @type {any[]} */
14-
export let providers = [];
16+
/** @type {import('$commonTypes').LlmConfig[]} */
17+
export let llmConfigs = [];
1518
1619
/** @type {boolean} */
1720
export let disabled = false;
@@ -28,62 +31,109 @@
2831
/** @type {any[]} */
2932
let modelOptions = [];
3033
31-
/** @type {import('$agentTypes').AgentModel | null} */
34+
/** @type {import('$agentTypes').AgentModel?} */
3235
let selectedAgent = null;
3336
/** @type {any} */
3437
let selectedTemplate = null;
35-
/** @type {any} */
38+
/** @type {import('$commonTypes').LlmConfig?} */
3639
let selectedProvider = null;
3740
/** @type {any} */
3841
let selectedModel = null;
3942
4043
$: {
41-
agentOptions = collectAgentOptions(agents);
44+
collectAgentOptions(agents);
45+
collectLlmOptions(llmConfigs);
4246
}
4347
4448
/**
4549
* @param {import('$agentTypes').AgentModel[]} agents
4650
*/
4751
function collectAgentOptions(agents) {
48-
return agents?.map(x => ({
52+
agentOptions = agents?.map(x => ({
4953
id: x.id,
5054
name: x.name
5155
}))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
5256
}
5357
58+
/** @param {import('$commonTypes').LlmConfig[]} llmConfigs */
59+
function collectLlmOptions(llmConfigs) {
60+
providerOptions = llmConfigs?.map(x => ({
61+
id: x.provider,
62+
name: x.provider
63+
}))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
64+
}
65+
5466
/** @param {any} e */
5567
function selectAgent(e) {
5668
const selected = e.target.value || null;
5769
selectedTemplate = null;
58-
selectedAgent = agents.find(x => x.id === selected) || null;
70+
selectedAgent = agents?.find(x => x.id === selected) || null;
5971
templateOptions = selectedAgent?.templates?.map(x => ({
6072
id: x.name,
6173
name: x.name,
6274
content: x.content
6375
})) || [];
6476
77+
const provider = selectedAgent?.llm_config?.provider || DEFAULT_PROVIDER;
78+
const model = selectedAgent?.llm_config?.model || DEFAULT_MODEL;
79+
selectedProvider = llmConfigs?.find(x => x.provider === provider) || null;
80+
onProviderChanged(model);
81+
6582
svelteDispatch('agentSelected', {
66-
selectedAgent: selectedAgent
83+
selectedAgent: selectedAgent,
84+
selectedTemplate: selectedTemplate,
85+
selectedProvider: selectedProvider?.provider,
86+
selectedModel: selectedModel?.name
6787
});
6888
}
6989
7090
/** @param {any} e */
7191
function selectTemplate(e) {
7292
const selected = e.target.value || null;
73-
selectedTemplate = templateOptions.find(x => x.name === selected) || null;
74-
svelteDispatch('templateSelected', {
75-
selectedTemplate: selectedTemplate
93+
selectedTemplate = templateOptions.find(x => x.id === selected) || null;
94+
svelteDispatch('agentSelected', {
95+
selectedAgent: selectedAgent,
96+
selectedTemplate: selectedTemplate,
97+
selectedProvider: selectedProvider?.provider,
98+
selectedModel: selectedModel?.name
7699
});
77100
}
78101
79102
/** @param {any} e */
80103
function selectProvider(e) {
104+
const selected = e.target.value || null;
105+
selectedProvider = llmConfigs?.find(x => x.provider === selected) || null;
106+
onProviderChanged();
81107
108+
svelteDispatch('llmSelected', {
109+
selectedProvider: selectedProvider?.provider,
110+
selectedModel: selectedModel?.name
111+
});
82112
}
83113
84114
/** @param {any} e */
85115
function selectModel(e) {
116+
const selected = e.target.value || null;
117+
selectedModel = modelOptions.find(x => x.id === selected);
118+
119+
svelteDispatch('llmSelected', {
120+
selectedProvider: selectedProvider?.provider,
121+
selectedModel: selectedModel?.name
122+
});
123+
}
124+
125+
/** @param {any?} targetModel */
126+
function onProviderChanged(targetModel = null) {
127+
modelOptions = selectedProvider?.models?.map(x => ({
128+
id: x.name,
129+
name: x.name
130+
}))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
86131
132+
if (!!targetModel) {
133+
selectedModel = modelOptions.find(x => x.name === targetModel) || null;
134+
} else {
135+
selectedModel = modelOptions.length > 0 ? modelOptions[0] : null;
136+
}
87137
}
88138
</script>
89139
@@ -153,10 +203,10 @@
153203
<div class="instruct-setting-item">
154204
<div class="instruct-setting-dropdown">
155205
<div class="text-primary fw-bold mb-1">LLM Provider</div>
156-
<select class="form-select" id="provider" value={selectedProvider?.id || null} disabled={disabled} on:change={e => selectProvider(e)}>
206+
<select class="form-select" id="provider" value={selectedProvider?.provider || null} disabled={disabled} on:change={e => selectProvider(e)}>
157207
<option value={null} disabled selected>{$_('Select Provider')}</option>
158208
{#each providerOptions as op}
159-
<option value={`${op.id}`} selected={op.id === selectedProvider?.id}>{$_(`${op.name}`)}</option>
209+
<option value={`${op.id}`} selected={op.id === selectedProvider?.provider}>{$_(`${op.name}`)}</option>
160210
{/each}
161211
</select>
162212
</div>

0 commit comments

Comments
 (0)