Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: enable light mode for Playground details page #1335

Merged
merged 2 commits into from
Jul 5, 2024
Merged

feat: enable light mode for Playground details page #1335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
81e2e37
feat: enable light mode for Playground details page
lstocchi Jul 4, 2024
0fefd1c
fix: fix formatter
lstocchi Jul 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/frontend/src/lib/ContentDetailsLayout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,24 @@ const toggle = () => {
<div
class:hidden="{!open}"
class:block="{open}"
class="h-fit lg:bg-charcoal-800 lg:rounded-l-md lg:mt-5 lg:py-4 max-lg:block"
class="h-fit lg:bg-[var(--pd-content-card-bg)] lg:text-[var(--pd-content-card-text)] lg:rounded-l-md lg:mt-5 lg:py-4 max-lg:block"
aria-label="{`${detailsLabel} panel`}">
<div class="flex flex-col px-4 space-y-4 mx-auto">
<div class="w-full flex flex-row justify-between max-lg:hidden">
<span class="text-base">{detailsTitle}</span>
<button on:click="{toggle}" aria-label="{`hide ${detailsLabel}`}"
><i class="fas fa-angle-right text-gray-900"></i></button>
><i class="fas fa-angle-right text-[var(--pd-content-card-icon)]"></i></button>
</div>
<slot name="details" />
</div>
</div>
<div
class:hidden="{open}"
class:block="{!open}"
class="bg-charcoal-800 mt-5 p-4 rounded-md h-fit max-lg:hidden"
class="bg-[var(--pd-content-card-bg)] mt-5 p-4 rounded-md h-fit max-lg:hidden"
aria-label="{`toggle ${detailsLabel}`}">
<button on:click="{toggle}" aria-label="{`show ${detailsLabel}`}"
><i class="fas fa-angle-left text-gray-900"></i></button>
><i class="fas fa-angle-left text-[var(--pd-content-card-icon)]"></i></button>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/frontend/src/lib/RangeInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export let value: number;

<div>
<div class="flex flex-row items-center">
<span class="w-full uppercase text-gray-700">{name}</span>
<span class="w-full uppercase text-[var(--pd-content-card-text)]">{name}</span>
<input
bind:value="{value}"
type="number"
Expand All @@ -17,7 +17,7 @@ export let value: number;
max="{max}"
step="{step}"
placeholder="{name}"
class="p-2 w-24 text-right outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700" />
class="p-2 w-24 text-right outline-none text-sm bg-[var(--pd-content-card-bg)] rounded-sm text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)]" />
</div>
<div class="w-full">
<input
Expand All @@ -29,6 +29,6 @@ export let value: number;
placeholder="{name}"
bind:value="{value}"
aria-label="{`${name} slider`}"
class="w-full h-1 bg-violet-600 rounded-lg appearance-none accent-violet-600 cursor-pointer range-xs mt-2" />
class="w-full h-1 bg-[var(--pd-button-primary-bg)] rounded-lg appearance-none accent-[var(--pd-button-primary-bg)] cursor-pointer range-xs mt-2" />
</div>
</div>
12 changes: 6 additions & 6 deletions packages/frontend/src/lib/conversation/ChatMessage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,22 +45,22 @@ function elapsedTime(msg: AssistantChat): string {
</script>

<div>
<div class="text-lg" class:text-right="{isAssistantChat(message)}">
<div class="text-lg text-[var(--pd-content-header)]" class:text-right="{isAssistantChat(message)}">
{roles[message.role]}
</div>
<div
class="p-4 rounded-md"
class:bg-charcoal-400="{isUserChat(message)}"
class:bg-charcoal-800="{isSystemPrompt(message)}"
class:bg-charcoal-900="{isAssistantChat(message)}"
class="p-4 rounded-md text-[var(--pd-content-card-text)]"
class:bg-[var(--pd-content-card-bg)]="{isUserChat(message)}"
class:bg-[var(--pd-content-bg)]="{isSystemPrompt(message)}"
class:bg-[var(--pd-content-card-inset-bg)]="{isAssistantChat(message)}"
class:ml-8="{isAssistantChat(message)}"
class:mr-8="{isUserChat(message)}">
{#each getMessageParagraphs(message) as paragraph}
<p>{paragraph}</p>
{/each}
</div>
{#if isAssistantChat(message)}
<div class="text-sm text-gray-400 text-right" aria-label="elapsed">
<div class="text-sm text-[var(--pd-content-header)] text-right" aria-label="elapsed">
{elapsedTime(message)} s
</div>
{/if}
Expand Down
3 changes: 2 additions & 1 deletion packages/frontend/src/lib/conversation/ConversationActions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
import ListItemButtonIcon from '/@/lib/button/ListItemButtonIcon.svelte';
import type { Conversation } from '@shared/src/models/IPlaygroundMessage';
export let conversation: Conversation;
export let detailed: boolean = false;

function deleteConversation() {
studioClient.requestDeleteConversation(conversation.id).catch((err: unknown) => {
Expand All @@ -12,4 +13,4 @@ function deleteConversation() {
}
</script>

<ListItemButtonIcon icon="{faTrash}" onClick="{deleteConversation}" title="Delete conversation" />
<ListItemButtonIcon icon="{faTrash}" detailed="{detailed}" onClick="{deleteConversation}" title="Delete conversation" />
8 changes: 4 additions & 4 deletions packages/frontend/src/lib/conversation/SystemPromptBanner.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ onMount(() => {
});
</script>

<div class="bg-charcoal-800 rounded-md w-full px-4 py-2">
<div class="bg-[var(--pd-content-card-bg)] text-[var(--pd-content-card-text)] rounded-md w-full px-4 py-2">
<div class="flex items-center gap-x-2">
<Fa icon="{faTerminal}" />
<span class="grow">Define a system prompt</span>
Expand All @@ -70,11 +70,11 @@ onMount(() => {
on:input="{onChange}"
aria-label="system-prompt-textarea"
bind:value="{systemPrompt}"
class="w-full p-2 mt-2 outline-none bg-charcoal-600 rounded-sm text-gray-700 placeholder-gray-700 resize-none"
class="w-full p-2 mt-2 outline-none bg-[var(--pd-content-card-inset-bg)] rounded-sm text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)] resize-none"
rows="3"
placeholder="Provide system prompt to define general context, instructions or guidelines to be used with each query"
></textarea>
<span role="alert" class="text-red-500 pt-1" class:hidden="{!error}">{error}</span>
<span role="alert" class="text-[var(--pd-input-field-error-text)] pt-1" class:hidden="{!error}">{error}</span>
</div>
<span class="mt-2 text-gray-800" class:hidden="{editing || !systemPrompt}">{systemPrompt}</span>
<span class="mt-2 text-[var(--pd-content-card-text)]" class:hidden="{editing || !systemPrompt}">{systemPrompt}</span>
</div>
33 changes: 16 additions & 17 deletions packages/frontend/src/pages/Playground.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,22 +156,20 @@ export function goToUpPage(): void {
</div>
</svelte:fragment>
<svelte:fragment slot="subtitle">
<div class="flex gap-x-2 items-center">
<div class="flex gap-x-2 items-center text-[var(--pd-content-sub-header)]">
{#if model}
<div class="text-xs" aria-label="Model name">
<a href="/model/{model.id}">{model.name}</a>
</div>
<Badge icon="{faMicrochip}" content="{model.hw}" background="bg-charcoal-700" />
<Badge icon="{faMicrochip}" content="{model.hw}" background="bg-[var(--pd-label-bg)]" />
{/if}
</div>
</svelte:fragment>
<svelte:fragment slot="actions">
<div class="bg-charcoal-800 rounded-lg">
<ConversationActions conversation="{conversation}" />
</div>
<ConversationActions detailed conversation="{conversation}" />
</svelte:fragment>
<svelte:fragment slot="content">
<div class="flex flex-col w-full h-full bg-charcoal-500">
<div class="flex flex-col w-full h-full bg-[var(--pd-content-bg)]">
<div class="h-full overflow-auto" bind:this="{scrollable}">
<ContentDetailsLayout detailsTitle="Settings" detailsLabel="settings">
<svelte:fragment slot="content">
Expand All @@ -195,18 +193,19 @@ export function goToUpPage(): void {
</div>
</svelte:fragment>
<svelte:fragment slot="details">
<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="text-[var(--pd-content-card-text)] text-xs">Next prompt will use these settings</div>
<div
class="bg-[var(--pd-content-card-inset-bg)] text-[var(--pd-content-card-text)] 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" 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 left>
<Fa icon="{faCircleInfo}" />
<Fa class="text-[var(--pd-content-card-icon)]" icon="{faCircleInfo}" />
<svelte:fragment slot="tip">
<div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs" aria-label="tooltip">
<div class="inline-block py-2 px-4 rounded-md text-xs" aria-label="tooltip">
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.
</div>
Expand All @@ -218,9 +217,9 @@ export function goToUpPage(): void {
<RangeInput name="max tokens" min="-1" max="32768" step="1" bind:value="{max_tokens}" />
</div>
<Tooltip left>
<Fa icon="{faCircleInfo}" />
<Fa class="text-[var(--pd-content-card-icon)]" icon="{faCircleInfo}" />
<svelte:fragment slot="tip">
<div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs" aria-label="tooltip">
<div class="inline-block py-2 px-4 rounded-md text-xs" aria-label="tooltip">
The maximum number of tokens that can be generated in the chat completion.
</div>
</svelte:fragment>
Expand All @@ -231,9 +230,9 @@ export function goToUpPage(): void {
<RangeInput name="top-p" min="0" max="1" step="0.1" bind:value="{top_p}" />
</div>
<Tooltip left>
<Fa icon="{faCircleInfo}" />
<Fa class="text-[var(--pd-content-card-icon)]" icon="{faCircleInfo}" />
<svelte:fragment slot="tip">
<div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs" aria-label="tooltip">
<div class="inline-block py-2 px-4 rounded-md text-xs" aria-label="tooltip">
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.
Expand All @@ -247,16 +246,16 @@ export function goToUpPage(): void {
</ContentDetailsLayout>
</div>
{#if errorMsg}
<div class="text-red-500 text-sm p-2">{errorMsg}</div>
<div class="text-[var(--pd-input-field-error-text)] text-sm p-2">{errorMsg}</div>
{/if}
<div class="flex flex-row flex-none w-full px-4 py-2 bg-charcoal-800">
<div class="flex flex-row flex-none w-full px-4 py-2 bg-[var(--pd-content-card-bg)]">
<textarea
aria-label="prompt"
bind:value="{prompt}"
use:requestFocus
on:keydown="{handleKeydown}"
rows="2"
class="w-full p-2 outline-none text-sm rounded-sm bg-charcoal-800 text-white placeholder-white"
class="w-full p-2 outline-none text-sm rounded-sm bg-[var(--pd-content-card-inset-bg)] text-[var(--pd-content-card-text)] placeholder-[var(--pd-content-card-text)]"
placeholder="Type your prompt here"
disabled="{!sendEnabled}"></textarea>

Expand Down