Skip to content

Commit

Permalink
feature: dropdown menu for OpenAI/OpenRouter in LLM settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@skeptrunedev @cdxker
skeptrunedev authored and cdxker committed Nov 21, 2024
1 parent 6fdd764 commit b5b2a4b
Showing 1 changed file with 95 additions and 42 deletions.
137 changes: 95 additions & 42 deletions frontends/dashboard/src/components/dataset-settings/LLMSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,22 @@ export const LLMSettings = (props: {
<hr class="mt-2" />
</span>

<div class="mt-4 grid grid-cols-4 gap-6">
<div class="mt-4 grid grid-cols-4 gap-x-3 gap-y-6">
<div class="col-span-4 sm:col-span-2">
<label
for="llmAPIURL"
class="block text-sm font-medium leading-6"
class="flex items-center gap-2 text-sm font-medium leading-6"
>
LLM API URL
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="Select the API URL to use for the LLM. Contact us or use the API if you need a custom URL."
/>
</label>
<input
type="text"
<select
name="llmAPIURL"
id="llmAPIURL"
class="block w-full rounded-md border-[0.5px] border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
class="block w-full rounded-md border-[0.5px] border-neutral-300 bg-white px-3 py-2 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
value={props.serverConfig().LLM_BASE_URL?.toString()}
onInput={(e) =>
props.setServerConfig((prev) => {
Expand All @@ -54,22 +57,27 @@ export const LLMSettings = (props: {
};
})
}
/>
>
<option value="https://api.openai.com/v1">
https://api.openai.com/v1
</option>
<option value="https://openrouter.ai/api/v1">
https://openrouter.ai/api/v1
</option>
</select>
</div>

<div class="col-span-4 sm:col-span-2">
<div class="flex items-center">
<label
for="llmAPIURL"
class="block pr-2 text-sm font-medium leading-6"
>
LLM API Key
</label>
<label
for="llmAPIURL"
class="flex items-center gap-2 pr-2 text-sm font-medium leading-6"
>
LLM API Key
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="LLM API Key cannot be viewed after you set it"
/>
</div>
</label>
<input
type="text"
name="llmAPIURL"
Expand All @@ -90,9 +98,13 @@ export const LLMSettings = (props: {
<div class="col-span-4 sm:col-span-2">
<label
for="llmAPIURL"
class="block text-sm font-medium leading-6"
class="flex items-center gap-2 text-sm font-medium leading-6"
>
LLM Default Model
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="Select the default model to use for the LLM. See https://openrouter.ai/models for all available LLMs you can use."
/>
</label>
<input
type="text"
Expand Down Expand Up @@ -122,7 +134,7 @@ export const LLMSettings = (props: {
<hr class="mt-2" />
</span>

<div class="mt-4 grid grid-cols-4 gap-6">
<div class="mt-4 grid grid-cols-4 gap-x-3 gap-y-6">
<div class="col-span-4 sm:col-span-2">
<label
for="temperature"
Expand Down Expand Up @@ -249,30 +261,37 @@ export const LLMSettings = (props: {
</div>
</div>

{/* Prompt Settings */}
{/* RAG Settings */}
<div class="mt-6">
<span>
<h2 class="text-lg font-semibold leading-6">Prompt Settings</h2>
<h2 class="flex items-center gap-2 text-lg font-semibold leading-6">
RAG Settings
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="Control the prompt which pairs with the user query and retrieved chunks to generate the final completion."
/>
</h2>
<hr class="mt-2" />
</span>

<div class="mt-4 grid grid-cols-4 gap-6">
<div class="mt-4 grid grid-cols-4 gap-x-3 gap-y-6">
<div class="col-span-4 sm:col-span-2">
<label
for="messageToQueryPrompt"
class="block text-sm font-medium leading-6"
class="flex items-center gap-2 text-sm font-medium leading-6"
>
Message to Query Prompt (HyDE)
System Prompt
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="System prompt is guide the system towards a high level object or goal."
/>
</label>
<textarea
value={
props.serverConfig().MESSAGE_TO_QUERY_PROMPT || undefined
}
value={props.serverConfig().SYSTEM_PROMPT ?? ""}
onInput={(e) =>
props.setServerConfig((prev) => {
return {
...prev,
MESSAGE_TO_QUERY_PROMPT: e.currentTarget.value,
SYSTEM_PROMPT: e.currentTarget.value,
};
})
}
Expand All @@ -285,18 +304,22 @@ export const LLMSettings = (props: {

<div class="col-span-4 sm:col-span-2">
<label
for="stopTokens"
class="block text-sm font-medium leading-6"
for="ragPrompt"
class="flex items-center gap-2 text-sm font-medium leading-6"
>
Stop Tokens (HyDE)
RAG Prompt
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="RAG prompt should focus on how to handle the retrieved context in combination with the user query to achieve the overall goal."
/>
</label>
<textarea
value={props.serverConfig().STOP_TOKENS?.join(",") ?? ""}
value={props.serverConfig().RAG_PROMPT || ""}
onInput={(e) =>
props.setServerConfig((prev) => {
return {
...prev,
STOP_TOKENS: e.currentTarget.value.split(","),
RAG_PROMPT: e.currentTarget.value,
};
})
}
Expand All @@ -306,21 +329,43 @@ export const LLMSettings = (props: {
class="block w-full rounded-md border-[0.5px] border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
</div>

{/* HyDE Settings */}
<div class="mt-6">
<span>
<h2 class="flex items-center gap-2 text-lg font-semibold leading-6">
HyDE (Hypothetical Document Embeddings) Settings
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="HyDE settings are used to configure the prompt which is used to transform user prompts into search queries which hit the retrieval sub-system."
/>
</h2>
<hr class="mt-2" />
</span>

<div class="mt-4 grid grid-cols-4 gap-x-6 gap-y-3">
<div class="col-span-4 sm:col-span-2">
<label
for="messageToQueryPrompt"
class="block text-sm font-medium leading-6"
class="flex items-center gap-2 text-sm font-medium leading-6"
>
System Prompt
Message to Query Prompt (HyDE)
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="Message to Query prompt is used to tell the LLM how to convert the user message into a search query."
/>
</label>
<textarea
value={props.serverConfig().SYSTEM_PROMPT ?? ""}
value={
props.serverConfig().MESSAGE_TO_QUERY_PROMPT || undefined
}
onInput={(e) =>
props.setServerConfig((prev) => {
return {
...prev,
SYSTEM_PROMPT: e.currentTarget.value,
MESSAGE_TO_QUERY_PROMPT: e.currentTarget.value,
};
})
}
Expand All @@ -333,18 +378,22 @@ export const LLMSettings = (props: {

<div class="col-span-4 sm:col-span-2">
<label
for="ragPrompt"
class="block text-sm font-medium leading-6"
for="stopTokens"
class="flex items-center gap-2 text-sm font-medium leading-6"
>
RAG Prompt
Stop Tokens (HyDE)
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="Stop tokens are used to tell the LLM when to stop generating the query. Set to common stop tokens in your chunks or leave default if you don't have any."
/>
</label>
<textarea
value={props.serverConfig().RAG_PROMPT || ""}
value={props.serverConfig().STOP_TOKENS?.join(",") ?? ""}
onInput={(e) =>
props.setServerConfig((prev) => {
return {
...prev,
RAG_PROMPT: e.currentTarget.value,
STOP_TOKENS: e.currentTarget.value.split(","),
};
})
}
Expand All @@ -355,7 +404,7 @@ export const LLMSettings = (props: {
/>
</div>

<div class="col-span-4 flex items-center space-x-2 sm:col-span-2">
<div class="col-span-4 flex items-center space-x-2">
<input
type="checkbox"
name="collisionsEnabled"
Expand All @@ -374,9 +423,13 @@ export const LLMSettings = (props: {
/>
<label
for="collisionsEnabled"
class="block text-sm font-medium leading-6"
class="flex items-center gap-2 text-sm font-medium leading-6"
>
Use Message to Query Prompt (HyDE)
<Tooltip
body={<AiOutlineInfoCircle />}
tooltipText="Must be checked in order the HyDE system to be used during RAG."
/>
</label>
</div>
</div>
Expand Down

0 comments on commit b5b2a4b

Please sign in to comment.