Skip to content

Commit

Permalink
add styling to playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@mruwnik
mruwnik committed Oct 1, 2023
1 parent 5651e2a commit 972017a
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 82 deletions.
1 change: 0 additions & 1 deletion api/src/stampy_chat/chat.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,6 @@ def talk_to_robot_internal(index, query: str, history: Prompt, session_id: str,
except Exception as e:
logger.error(e)
yield {'state': 'error', 'error': str(e)}
raise


# convert talk_to_robot_internal from dict generator into json generator
Expand Down
12 changes: 1 addition & 11 deletions api/src/stampy_chat/get_blocks.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ def parse_block(match) -> Block:
date = date,
url = metadata['url'],
tags = metadata.get('tags'),
text = strip_block(metadata['text'])
text = metadata['text']
)


Expand Down Expand Up @@ -144,13 +144,3 @@ def get_top_k_blocks(index, user_query: str, k: int) -> List[Block]:
logger.debug(f'Time to get top-k blocks: {t2-t1:.2f}s')

return join_blocks(blocks)


# we add the title and authors inside the contents of the block, so that
# searches for the title or author will be more likely to pull it up. This
# strips it back out.
def strip_block(text: str) -> str:
r = re.match(r"^\"(.*)\"\s*-\s*Title:.*$", text, re.DOTALL)
if not r:
logger.warning("couldn't strip block:\n%s", text)
return r.group(1) if r else text
127 changes: 57 additions & 70 deletions web/src/pages/playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,13 @@ type ChatSettingsParams = {
settings: LLMSettings,
updateSettings: (updater: (settings: LLMSettings) => LLMSettings) => void
}
type InputFields = {
field: string,
label: string,
min?: number,
max?: number,
parser?: (v: string) => number,
}

const ChatSettings = ({settings, updateSettings}: ChatSettingsParams) => {
const update = (setting: string) => (event) => {
Expand All @@ -86,85 +93,65 @@ const ChatSettings = ({settings, updateSettings}: ChatSettingsParams) => {
let num = parser(event.target.value)
if (isNaN(num)) {
return
} else if (min !== null && num < min) {
} else if (min !== undefined && num < min) {
num = min
} else if (max !== null && num > max) {
} else if (max !== undefined && num > max) {
num = max
}
updateSettings((prev) => ({...prev, [setting]: num}))
}
const intBetween = (setting: string, min: number, max: number) => between(setting, min, max, (v) => parseInt(v, 10))
const floatBetween = (setting: string, min: number, max: number) => between(setting, min, max, parseFloat)
return (
<div class="chat-settings w-[400px] flex-none outline-black border-2 mx-5">
<h4>Models</h4>
<div className="LLM-option">
<label for="completions-model">Completions model:</label>
<select name="completions-model" value={settings.completions} onChange={update('completions')}>
{COMPLETION_MODELS.map((name) => (
<option value={name}>{name}</option>
))}
</select>
</div>

<div className="LLM-option">
<label for="encoder">Encoder:</label>
<select name="encoder" value={settings.encoder} onChange={update('encoder')}>
{ENCODERS.map((name) => (
<option value={name}>{name}</option>
))}
</select>
</div>

<h4>Token options</h4>
<div className="LLM-option">
<label for="tokens">Tokens:</label>
<input name="tokens" value={settings.numTokens}
onChange={intBetween('numTokens', 1, null)}
type="number"
/>
</div>

<div className="LLM-option">
<label for="tokens-buffer">Number of tokens to leave as a buffer when calculating remaining tokens:</label>
<input name="tokens-buffer" value={settings.tokensBuffer}
onChange={intBetween('tokensBuffer', 0, settings.numTokens)}
type="number"
/>
</div>

<h4>Prompt options</h4>
<div className="LLM-option">
<label for="top-k-blocks">Number of blocks to use as citations:</label>
<input name="top-k-blocks" value={settings.topKBlocks}
onChange={intBetween('topKBlocks', 0, null)}
type="number"
/>
</div>
const SectionHeader = ({text}: {text: string}) => (<h4 className="text-lg font-semibold col-span-4">{text}</h4>)

<div className="LLM-option">
<label for="max-history">The max number of previous interactions to use:</label>
<input name="max-history" value={settings.maxHistory}
onChange={intBetween('maxHistory', 0, null)}
type="number"
/>
</div>

<div className="LLM-option">
<label for="context-fraction">Approximate fraction of num_tokens to use for citations text before truncating:</label>
<input name="context-fraction" value={settings.contextFraction}
onChange={floatBetween('contextFraction', 0, 1)}
type="number"
/>
</div>
const NumberInput = ({field, label, min, max, parser=(v) => parseInt(v, 10)} : InputField) => (
<>
<label for={field} className="col-span-3 inline-block">{label}: </label>
<input name={field} value={settings[field]} className="w-20"
onChange={between(field, min && parser(min), max && parser(max), parser)}
type="number"
/>
</>
)
const Slider = ({field, label, min=0, max=1, step=0.01, parser=parseFloat}: InputField) => (
<>
<label for={field} className="col-span-2">{label}:</label>
<input name={field} className="col-span-2"
value={settings[field]}
onChange={floatBetween(field, parser(min), parser(max))}
type="range" min={min} max={max} step={step}
/>
</>
)

<div className="LLM-option">
<label for="history-fraction">Approximate fraction of num_tokens to use for history text before truncating:</label>
<input name="history-fraction" value={settings.historyFraction}
onChange={floatBetween('historyFraction', 0, 1)}
type="number"
/>
</div>
return (
<div className="chat-settings w-[400px] flex-none outline-black border-2 mx-5 grid grid-cols-4 gap-4"
style={{height: "fit-content"}}>
<SectionHeader text="Models"/>
<label for="completions-model" className="col-span-2">Completions model:</label>
<select name="completions-model" className="col-span-2" value={settings.completions} onChange={update('completions')}>
{COMPLETION_MODELS.map((name) => (
<option value={name}>{name}</option>
))}
</select>

<label for="encoder" className="col-span-2">Encoder:</label>
<select name="encoder" className="col-span-2" value={settings.encoder} onChange={update('encoder')}>
{ENCODERS.map((name) => (
<option value={name}>{name}</option>
))}
</select>

<SectionHeader text="Token options"/>
<NumberInput field="numTokens" label="Tokens" min="1"/>
<NumberInput field="tokensBuffer" label="Number of tokens to leave as a buffer when calculating remaining tokens" min="0" max={settings.tokensBuffer} />

<SectionHeader text="Prompt options"/>
<NumberInput field="topKBlocks" label="Number of blocks to use as citations" min="1"/>
<NumberInput field="maxHistory" label="The max number of previous interactions to use" min="0"/>

<Slider field="contextFraction" label="Approximate fraction of num_tokens to use for citations text before truncating"/>
<Slider field="historyFraction" label="Approximate fraction of num_tokens to use for history text before truncating"/>
</div>
)
}
Expand Down

0 comments on commit 972017a

Please sign in to comment.