feat: Scaffold model invocation params form (#5040)

app/src/pages/playground/InvocationParametersForm.tsx

@@ -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>
+  );
+};

app/src/pages/playground/ModelConfigButton.tsx

@@ -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";
@@ -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}
@@ -213,6 +234,10 @@ function ModelConfigDialogContent(props: ModelConfigDialogContentProps) {
             onChange={onModelNameChange}
           />
         )}
+        <InvocationParametersForm
+          model={instance.model}
+          onChange={onInvocationParametersChange}
+        />
       </Form>
     </View>
   );

app/src/pages/playground/__tests__/playgroundUtils.test.ts

@@ -30,6 +30,7 @@ const expectedPlaygroundInstanceWithIO: PlaygroundInstance = {
   model: {
     provider: "OPENAI",
     modelName: "gpt-3.5-turbo",
+    invocationParameters: {},
   },
   input: { variableKeys: [], variablesValueCache: {} },
   tools: [],

app/src/store/playground/playgroundStore.tsx

@@ -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
@@ -202,6 +206,10 @@ export const createPlaygroundStore = (
               model: {
                 ...instance.model,
                 ...model,
+                invocationParameters: {
+                  ...instance.model.invocationParameters,
+                  ...model.invocationParameters,
+                },
               },
             };
           }

app/src/store/playground/types.ts

@@ -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";
@@ -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">>;
 };
 
 /**