Skip to content
This repository has been archived by the owner on Jun 2, 2024. It is now read-only.

Commit

Permalink
[web] Move request options to separate tab (#20)
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxijonson
maxijonson committed May 19, 2023
1 parent ab67a9e commit a3f2288
Showing 1 changed file with 127 additions and 108 deletions.
235 changes: 127 additions & 108 deletions packages/web/src/components/ConversationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
Collapse,
TextInput,
Grid,
Tabs,
} from "@mantine/core";
import useSettings from "../hooks/useSettings";
import ModelSelectInput from "./ModelSelectInput";
Expand Down Expand Up @@ -84,7 +85,6 @@ export default ({ onSubmit }: ConversationFormProps) => {
}),
});
const [showAdvanced, setShowAdvanced] = React.useState(false);
const [showRequest, setShowRequest] = React.useState(false);

const handleSubmit = form.onSubmit((values) => {
onSubmit(values);
Expand All @@ -93,114 +93,133 @@ export default ({ onSubmit }: ConversationFormProps) => {
return (
<form onSubmit={handleSubmit}>
<Stack>
<ApiKeyInput {...form.getInputProps("apiKey")} />
<Group>
<ModelSelectInput {...form.getInputProps("model")} />
<Group position="center" sx={{ flexGrow: 1 }}>
<DisableModerationInput
{...form.getInputProps("disableModeration")}
/>
</Group>
<Group position="center" noWrap sx={{ flexGrow: 1 }}>
<DryInput
{...form.getInputProps("dry")}
value={!form.values.apiKey || form.values.dry}
readOnly={!form.values.apiKey}
/>
<StreamInput {...form.getInputProps("stream")} />
<SaveInput {...form.getInputProps("save")} />
</Group>
</Group>
<ContextInput {...form.getInputProps("context")} />
<Divider
labelPosition="center"
label={
<Button
variant="subtle"
onClick={() => {
setShowAdvanced(!showAdvanced);
setShowRequest(false);
}}
w={200}
>
{showAdvanced ? "Hide" : "Show"} Advanced Settings
</Button>
}
/>
<Collapse in={showAdvanced}>
<Grid align="end">
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps("max_tokens")}
label="Max Tokens"
step={1}
precision={0}
min={1}
max={Infinity}
<Tabs defaultValue="conversation">
<Tabs.List>
<Tabs.Tab value="conversation">Conversation</Tabs.Tab>
<Tabs.Tab value="request">Request</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="conversation">
<Stack>
<ApiKeyInput {...form.getInputProps("apiKey")} />
<Group>
<ModelSelectInput
{...form.getInputProps("model")}
/>
<Group position="center" sx={{ flexGrow: 1 }}>
<DisableModerationInput
{...form.getInputProps(
"disableModeration"
)}
/>
</Group>
<Group
position="center"
noWrap
sx={{ flexGrow: 1 }}
>
<DryInput
{...form.getInputProps("dry")}
value={
!form.values.apiKey ||
form.values.dry
}
readOnly={!form.values.apiKey}
/>
<StreamInput
{...form.getInputProps("stream")}
/>
<SaveInput
{...form.getInputProps("save")}
/>
</Group>
</Group>
<ContextInput {...form.getInputProps("context")} />
<Divider
labelPosition="center"
label={
<Button
variant="subtle"
onClick={() =>
setShowAdvanced(!showAdvanced)
}
w={200}
>
{showAdvanced ? "Hide" : "Show"}{" "}
Advanced Settings
</Button>
}
/>
</Grid.Col>
<Grid.Col span={4}>
<TextInput
{...form.getInputProps("user")}
value={form.values.user || ""}
label="User"
/>
</Grid.Col>
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps("temperature")}
label="Temperature"
max={2}
/>
</Grid.Col>
</Grid>
<Grid align="end">
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps("frequency_penalty")}
label="Frequency Penalty"
min={-2}
max={2}
/>
</Grid.Col>
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps("presence_penalty")}
label="Presence Penalty"
min={-2}
max={2}
/>
</Grid.Col>
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps("top_p")}
label="Top P"
/>
</Grid.Col>
</Grid>
<StopInput {...form.getInputProps("stop")} />
<LogitBiasInput {...form.getInputProps("logit_bias")} />
</Collapse>
<Divider
mt={0}
labelPosition="center"
label={
<Button
variant="subtle"
onClick={() => {
setShowRequest(!showRequest);
setShowAdvanced(false);
}}
w={200}
>
{showRequest ? "Hide" : "Show"} Request Settings
</Button>
}
/>
<Collapse in={showRequest}>
<ProxyInput {...form.getInputProps("proxy")} />
<HeadersInput {...form.getInputProps("headers")} />
</Collapse>
<Collapse in={showAdvanced}>
<Grid align="end">
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps(
"max_tokens"
)}
label="Max Tokens"
step={1}
precision={0}
min={1}
max={Infinity}
/>
</Grid.Col>
<Grid.Col span={4}>
<TextInput
{...form.getInputProps("user")}
value={form.values.user || ""}
label="User"
/>
</Grid.Col>
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps(
"temperature"
)}
label="Temperature"
max={2}
/>
</Grid.Col>
</Grid>
<Grid align="end">
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps(
"frequency_penalty"
)}
label="Frequency Penalty"
min={-2}
max={2}
/>
</Grid.Col>
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps(
"presence_penalty"
)}
label="Presence Penalty"
min={-2}
max={2}
/>
</Grid.Col>
<Grid.Col span={4}>
<OptionalNumberInput
{...form.getInputProps("top_p")}
label="Top P"
/>
</Grid.Col>
</Grid>
<StopInput {...form.getInputProps("stop")} />
<LogitBiasInput
{...form.getInputProps("logit_bias")}
/>
</Collapse>
</Stack>
</Tabs.Panel>
<Tabs.Panel value="request">
<ProxyInput {...form.getInputProps("proxy")} />
<HeadersInput {...form.getInputProps("headers")} />
</Tabs.Panel>
</Tabs>
<Button type="submit">Submit</Button>
{form.values.save && (
<Text size="xs" italic align="center">
Expand Down

0 comments on commit a3f2288

Please sign in to comment.