Skip to content

Commit

Permalink
feat: Scaffold model invocation params form (#5040)
Browse files Browse the repository at this point in the history
  • Loading branch information
cephalization committed Oct 17, 2024
1 parent 4df3f8a commit 055e1a9
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 2 deletions.
76 changes: 76 additions & 0 deletions app/src/pages/playground/InvocationParametersForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React from "react";

import { Flex, Slider, TextField } from "@arizeai/components";

import { ModelConfig } from "@phoenix/store";

export type InvocationParametersChangeHandler = <
T extends keyof ModelConfig["invocationParameters"],
>(
parameter: T,
value: ModelConfig["invocationParameters"][T]
) => void;

type InvocationParametersFormProps = {
model: ModelConfig;
onChange: InvocationParametersChangeHandler;
};

export const InvocationParametersForm = ({
model,
onChange,
}: InvocationParametersFormProps) => {
const { invocationParameters, provider, modelName } = model;
return (
<Flex direction="column" gap="size-200">
<Slider
label="Temperature"
value={invocationParameters.temperature || 0}
step={0.1}
minValue={0}
maxValue={2}
onChange={(value) => onChange("temperature", value)}
/>
<Slider
label="Top P"
value={invocationParameters.topP || 0}
step={0.1}
minValue={0}
maxValue={1}
onChange={(value) => onChange("topP", value)}
/>
{/* TODO(apowell): there's likely a better way. Do we maintain a map of provider:model to form field overrides? */}
{modelName?.startsWith("o1") && provider === "OPENAI" ? (
<TextField
label="Max Completion Tokens"
value={invocationParameters.maxCompletionTokens?.toString() || ""}
type="number"
onChange={(value) => onChange("maxCompletionTokens", Number(value))}
description="The maximum number of tokens to generate"
/>
) : (
<TextField
label="Max Tokens"
value={invocationParameters.maxTokens?.toString() || ""}
type="number"
onChange={(value) => onChange("maxTokens", Number(value))}
description="The maximum number of tokens to generate"
/>
)}
{/* TODO(apowell): Combobox / Tag input? Bespoke add/remove menu? */}
<TextField
label="Stop"
defaultValue={invocationParameters.stop?.join(", ") || ""}
onChange={(value) => onChange("stop", value.split(/, */g))}
description="Comma-separated list of tokens to stop on"
/>
<TextField
label="Seed"
value={invocationParameters.seed?.toString() || ""}
type="number"
onChange={(value) => onChange("seed", Number(value))}
description="Any integer that can be reused to produce semi-deterministic outputs"
/>
</Flex>
);
};
27 changes: 26 additions & 1 deletion app/src/pages/playground/ModelConfigButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
import { PlaygroundInstance } from "@phoenix/store";

import { ModelConfigButtonDialogQuery } from "./__generated__/ModelConfigButtonDialogQuery.graphql";
import {
InvocationParametersChangeHandler,
InvocationParametersForm,
} from "./InvocationParametersForm";
import { ModelPicker } from "./ModelPicker";
import { ModelProviderPicker } from "./ModelProviderPicker";
import { PlaygroundInstanceProps } from "./types";
Expand Down Expand Up @@ -187,8 +191,25 @@ function ModelConfigDialogContent(props: ModelConfigDialogContentProps) {
[instance.model.provider, playgroundInstanceId, updateModel]
);

const onInvocationParametersChange: InvocationParametersChangeHandler =
useCallback(
(parameter, value) => {
updateModel({
instanceId: playgroundInstanceId,
model: {
...instance.model,
invocationParameters: {
...instance.model.invocationParameters,
[parameter]: value,
},
},
});
},
[instance.model, playgroundInstanceId, updateModel]
);

return (
<View padding="size-200">
<View padding="size-200" overflow="auto">
<Form>
<ModelProviderPicker
provider={instance.model.provider}
Expand All @@ -213,6 +234,10 @@ function ModelConfigDialogContent(props: ModelConfigDialogContentProps) {
onChange={onModelNameChange}
/>
)}
<InvocationParametersForm
model={instance.model}
onChange={onInvocationParametersChange}
/>
</Form>
</View>
);
Expand Down
1 change: 1 addition & 0 deletions app/src/pages/playground/__tests__/playgroundUtils.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const expectedPlaygroundInstanceWithIO: PlaygroundInstance = {
model: {
provider: "OPENAI",
modelName: "gpt-3.5-turbo",
invocationParameters: {},
},
input: { variableKeys: [], variablesValueCache: {} },
tools: [],
Expand Down
10 changes: 9 additions & 1 deletion app/src/store/playground/playgroundStore.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,11 @@ export function createPlaygroundInstance(): PlaygroundInstance {
return {
id: generateInstanceId(),
template: generateChatCompletionTemplate(),
model: { provider: DEFAULT_MODEL_PROVIDER, modelName: "gpt-4o" },
model: {
provider: DEFAULT_MODEL_PROVIDER,
modelName: "gpt-4o",
invocationParameters: {},
},
tools: [],
toolChoice: undefined,
// TODO(apowell) - use datasetId if in dataset mode
Expand Down Expand Up @@ -202,6 +206,10 @@ export const createPlaygroundStore = (
model: {
...instance.model,
...model,
invocationParameters: {
...instance.model.invocationParameters,
...model.invocationParameters,
},
},
};
}
Expand Down
3 changes: 3 additions & 0 deletions app/src/store/playground/types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { TemplateLanguage } from "@phoenix/components/templateEditor/types";
import { InvocationParameters } from "@phoenix/pages/playground/__generated__/PlaygroundOutputSubscription.graphql";
import { ToolDefinition } from "@phoenix/schemas";

export type GenAIOperationType = "chat" | "text_completion";
Expand Down Expand Up @@ -97,6 +98,8 @@ export type ModelConfig = {
modelName: string | null;
endpoint?: string | null;
apiVersion?: string | null;
// TODO(apowell): Should we store this by provider/model? Should it be stored outside of the model config?
invocationParameters: Partial<Omit<InvocationParameters, "toolChoice">>;
};

/**
Expand Down

0 comments on commit 055e1a9

Please sign in to comment.