Skip to content

Commit

Permalink
feat: set system prompt at the beginning
Browse files Browse the repository at this point in the history 
Signed-off-by: Philippe Martin <phmartin@redhat.com>
  • Loading branch information
@feloy
feloy committed Mar 21, 2024
1 parent afa5656 commit 641b3cb
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 34 deletions.
11 changes: 6 additions & 5 deletions packages/backend/src/managers/playgroundV2Manager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export class PlaygroundV2Manager extends Publisher<PlaygroundV2[]> implements Di
* @param userInput the user input
* @param options the model configuration
*/
async submit(playgroundId: string, userInput: string, systemPrompt: string, options?: ModelOptions): Promise<void> {
async submit(playgroundId: string, userInput: string, systemPrompt: boolean, options?: ModelOptions): Promise<void> {
const playground = this.#playgrounds.get(playgroundId);
if (playground === undefined) throw new Error('Playground not found.');

Expand All @@ -113,20 +113,21 @@ export class PlaygroundV2Manager extends Publisher<PlaygroundV2[]> implements Di
this.#conversationRegistry.submit(conversation.id, {
content: userInput,
options: options,
role: 'user',
role: systemPrompt ? 'system' : 'user',
id: this.getUniqueId(),
timestamp: Date.now(),
} as UserChat);

if (systemPrompt) {
return;
}

const client = new OpenAI({
baseURL: `http://localhost:${server.connection.port}/v1`,
apiKey: 'dummy',
});

const messages = this.getFormattedMessages(playground.id);
if (systemPrompt) {
messages.push({ role: 'system', content: systemPrompt });
}
client.chat.completions
.create({
messages,
Expand Down
2 changes: 1 addition & 1 deletion packages/backend/src/studio-api-impl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export class StudioApiImpl implements StudioAPI {
submitPlaygroundMessage(
containerId: string,
userInput: string,
systemPrompt: string,
systemPrompt: boolean,
options?: ModelOptions,
): Promise<void> {
return this.playgroundV2.submit(containerId, userInput, systemPrompt, options);
Expand Down
64 changes: 37 additions & 27 deletions packages/frontend/src/pages/Playground.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,29 @@ import { studioClient } from '/@/utils/client';
import {
isAssistantChat,
type ChatMessage,
type UserChat,
isPendingChat,
isUserChat,
type AssistantChat,
isSystemPrompt,
} from '@shared/src/models/IPlaygroundMessage';
import NavPage from '../lib/NavPage.svelte';
import { playgrounds } from '../stores/playgrounds-v2';
import { catalog } from '../stores/catalog';
import Button from '../lib/button/Button.svelte';
import { afterUpdate } from 'svelte';
import { afterUpdate, onMount } from 'svelte';
import ContentDetailsLayout from '../lib/ContentDetailsLayout.svelte';
import RangeInput from '../lib/RangeInput.svelte';
export let playgroundId: string;
let prompt: string;
let sendEnabled = false;
let scrollable: Element;
let lastIsUserMessage = false;
let errorMsg = '';
// settings
let askSystemPrompt = true;
let systemPrompt: string = '';
// settings
let temperature = 0.8;
let max_tokens = -1;
let top_p = 0.5;
Expand All @@ -35,18 +36,18 @@ $: playground = $playgrounds.find(playground => playground.id === playgroundId);
$: model = $catalog.models.find(model => model.id === playground?.modelId);
$: {
if (conversation?.messages.length) {
askSystemPrompt = false;
const latest = conversation.messages[conversation.messages.length - 1];
if (isAssistantChat(latest) && !isPendingChat(latest)) {
if (isSystemPrompt(latest) || (isAssistantChat(latest) && !isPendingChat(latest))) {
sendEnabled = true;
}
lastIsUserMessage = isUserChat(latest);
} else {
sendEnabled = true;
}
}
const roleNames = {
system: 'System',
system: 'System prompt',
user: 'User',
assistant: 'Assistant',
};
Expand All @@ -61,9 +62,8 @@ function getMessageParagraphs(message: ChatMessage): string[] {
.join('')
.split('\n');
}
} else if (isUserChat(message)) {
const msg = message as UserChat;
return msg.content?.split('\n') ?? [];
} else if (isUserChat(message) || isSystemPrompt(message)) {
return message.content?.split('\n') ?? [];
}
return [];
}
Expand All @@ -72,7 +72,7 @@ function askPlayground() {
errorMsg = '';
sendEnabled = false;
studioClient
.submitPlaygroundMessage(playgroundId, prompt, systemPrompt, {
.submitPlaygroundMessage(playgroundId, prompt, false, {
temperature,
max_tokens,
top_p,
Expand Down Expand Up @@ -108,6 +108,12 @@ function elapsedTime(msg: AssistantChat): string {
return '';
}
}
function setSystemPrompt() {
studioClient.submitPlaygroundMessage(playgroundId, systemPrompt, true).catch((err: unknown) => {
errorMsg = String(err);
});
}
</script>

{#if playground}
Expand All @@ -120,16 +126,31 @@ function elapsedTime(msg: AssistantChat): string {
<svelte:fragment slot="content">
<div class="flex flex-col w-full h-full">
<div aria-label="conversation" class="w-full h-full">
{#if conversation?.messages}
<ul class="p-4">
{#each conversation?.messages as message}
<ul class="p-4">
{#if askSystemPrompt}
<li>
<div class="text-lg">Define a system prompt</div>
<div class="rounded-md w-full">
<textarea
bind:value="{systemPrompt}"
class="p-2 w-full outline-none bg-charcoal-500 rounded-md text-gray-700 placeholder-gray-700"
rows="4"
placeholder="Provide system prompt to define general context, instructions or guidelines to be used with each query"
></textarea
><Button on:click="{setSystemPrompt}">set</Button>
</div>
</li>
{/if}
{#if conversation?.messages}
{#each conversation.messages as message}
<li class="m-4">
<div class="text-lg" class:text-right="{isAssistantChat(message)}">
{roleNames[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:ml-8="{isAssistantChat(message)}"
class:mr-8="{isUserChat(message)}">
Expand All @@ -145,24 +166,13 @@ function elapsedTime(msg: AssistantChat): string {
<div></div>
</li>
{/each}
</ul>
{/if}
{/if}
</ul>
</div>
</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="mb-4">System Prompt</div>
<div class="w-full">
<textarea
bind:value="{systemPrompt}"
class="p-2 w-full outline-none bg-charcoal-500 rounded-sm text-gray-700 placeholder-gray-700"
rows="4"
placeholder="Provide system prompt to define general context, instructions or guidelines to be used with each query"
></textarea>
</div>
</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">
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/src/StudioAPI.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export abstract class StudioAPI {
abstract submitPlaygroundMessage(
containerId: string,
userInput: string,
systemPrompt: string,
systemPrompt: boolean,
options?: ModelOptions,
): Promise<void>;

Expand Down
9 changes: 9 additions & 0 deletions packages/shared/src/models/IPlaygroundMessage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ export interface AssistantChat extends ChatMessage {
completed?: number;
}

export interface SystemPrompt extends ChatMessage {
role: 'system';
content: string;
}

export interface PendingChat extends AssistantChat {
completed: undefined;
choices: Choice[];
Expand Down Expand Up @@ -60,3 +65,7 @@ export function isUserChat(msg: ChatMessage): msg is UserChat {
export function isPendingChat(msg: ChatMessage): msg is PendingChat {
return isAssistantChat(msg) && !msg.completed;
}

export function isSystemPrompt(msg: ChatMessage): msg is SystemPrompt {
return msg.role === 'system';
}

0 comments on commit 641b3cb

Please sign in to comment.