fix: add tooltips for the model paramaters in playground

Fixes #847 Signed-off-by: Jeff MAURY <[email protected]>
containers · Apr 22, 2024 · 407f043 · 407f043
1 parent 27ed4d0
commit 407f043
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 4 deletions.
diff --git a/packages/frontend/src/pages/Playground.spec.ts b/packages/frontend/src/pages/Playground.spec.ts
@@ -108,6 +108,47 @@ test('should display playground and model names in header', async () => {
   });
 });
 
+test('should display playground and parameters', async () => {
+  vi.mocked(studioClient.getCatalog).mockResolvedValue({
+    models: [
+      {
+        id: 'model-1',
+        name: 'Model 1',
+      },
+    ] as ModelInfo[],
+    recipes: [],
+    categories: [],
+  });
+  const customConversations = writable<Conversation[]>([
+    {
+      id: 'playground-1',
+      name: 'Playground 1',
+      modelId: 'model-1',
+      messages: [],
+    },
+  ]);
+  vi.mocked(conversationsStore).conversations = customConversations;
+  vi.mocked(inferenceServersStore).inferenceServers = readable([
+    {
+      models: ['model-1'],
+    } as unknown as InferenceServer,
+  ]);
+  render(Playground, {
+    playgroundId: 'playground-1',
+  });
+
+  await waitFor(async () => {
+    const parameters = await screen.findByLabelText('parameters');
+    expect(parameters.children.length).toBe(3);
+    const temperatureTooltip = await within(parameters.children[0] as HTMLElement).findByLabelText('tooltip');
+    expect(temperatureTooltip).toBeInTheDocument();
+    const maxTokensTooltip = await within(parameters.children[1] as HTMLElement).findByLabelText('tooltip');
+    expect(maxTokensTooltip).toBeInTheDocument();
+    const topPTooltip = await within(parameters.children[2] as HTMLElement).findByLabelText('tooltip');
+    expect(topPTooltip).toBeInTheDocument();
+  });
+});
+
 test('send prompt should be enabled initially', async () => {
   vi.mocked(studioClient.getCatalog).mockResolvedValue({
     models: [

diff --git a/packages/frontend/src/pages/Playground.svelte b/packages/frontend/src/pages/Playground.svelte
@@ -13,6 +13,8 @@ import Fa from 'svelte-fa';
 import ChatMessage from '../lib/conversation/ChatMessage.svelte';
 import SystemPromptBanner from '/@/lib/conversation/SystemPromptBanner.svelte';
 import { inferenceServers } from '/@/stores/inferenceServers';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+import Tooltip from '/@/lib/Tooltip.svelte';
 
 export let playgroundId: string;
 let prompt: string;
@@ -148,10 +150,31 @@ function getSendPromptTitle(sendEnabled: boolean, status?: string, health?: stri
               <div class="text-gray-800 text-xs">Next prompt will use these settings</div>
               <div class="bg-charcoal-600 w-full rounded-md text-xs p-4">
                 <div class="mb-4 flex flex-col">Model Parameters</div>
-                <div class="flex flex-col space-y-4">
-                  <RangeInput name="temperature" min="0" max="2" step="0.1" bind:value="{temperature}" />
-                  <RangeInput name="max tokens" min="-1" max="32768" step="1" bind:value="{max_tokens}" />
-                  <RangeInput name="top-p" min="0" max="1" step="0.1" bind:value="{top_p}" />
+                <div class="flex flex-col space-y-4" aria-label="parameters">
+                  <div class="flex flex-row">
+                    <div class="w-full">
+                      <RangeInput name="temperature" min="0" max="2" step="0.1" bind:value="{temperature}" />
+                    </div>
+                    <Tooltip
+                      tip="What sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic."
+                      left="{true}"><Fa icon="{faCircleInfo}" /></Tooltip>
+                  </div>
+                  <div class="flex flex-row">
+                    <div class="w-full">
+                      <RangeInput name="max tokens" min="-1" max="32768" step="1" bind:value="{max_tokens}" />
+                    </div>
+                    <Tooltip
+                      tip="The maximum number of tokens that can be generated in the chat completion."
+                      left="{true}"><Fa icon="{faCircleInfo}" /></Tooltip>
+                  </div>
+                  <div class="flex flex-row">
+                    <div class="w-full">
+                      <RangeInput name="top-p" min="0" max="1" step="0.1" bind:value="{top_p}" />
+                    </div>
+                    <Tooltip
+                      tip="An alternative to sampling with temperature, where the model considers the results of the tokens with top_p probability mass. So 0.1 means only the tokens comprising the top 10% probability mass are considered."
+                      left="{true}"><Fa icon="{faCircleInfo}" /></Tooltip>
+                  </div>
                 </div>
               </div>
             </svelte:fragment>