From 07f548f62d61387284ba12585023f23f19984894 Mon Sep 17 00:00:00 2001 From: Anthony Powell Date: Fri, 17 Jan 2025 11:49:06 -0500 Subject: [PATCH] feat(prompts): Display basic LLM details on Prompt Details pages (#6104) * feat(prompts): Display basic LLM details on Prompt Details pages * Remove extraneous export --- app/src/pages/prompt/PromptLLM.tsx | 62 +++++++++++++++++++ .../prompt/PromptModelConfigurationCard.tsx | 6 ++ .../__generated__/PromptLLM__main.graphql.ts | 50 +++++++++++++++ ...mptModelConfigurationCard__main.graphql.ts | 27 +++++++- .../promptLoaderQuery.graphql.ts | 13 +++- .../promptVersionLoaderQuery.graphql.ts | 13 +++- 6 files changed, 162 insertions(+), 9 deletions(-) create mode 100644 app/src/pages/prompt/PromptLLM.tsx create mode 100644 app/src/pages/prompt/__generated__/PromptLLM__main.graphql.ts diff --git a/app/src/pages/prompt/PromptLLM.tsx b/app/src/pages/prompt/PromptLLM.tsx new file mode 100644 index 0000000000..ec9ca931ac --- /dev/null +++ b/app/src/pages/prompt/PromptLLM.tsx @@ -0,0 +1,62 @@ +import React, { PropsWithChildren } from "react"; +import { graphql, useFragment } from "react-relay"; + +import { List, ListItem } from "@arizeai/components"; + +import { + Disclosure, + DisclosurePanel, + DisclosureTrigger, + Flex, + Text, + View, +} from "@phoenix/components"; +import { ModelProviders } from "@phoenix/constants/generativeConstants"; +import { PromptLLM__main$key } from "@phoenix/pages/prompt/__generated__/PromptLLM__main.graphql"; + +const ModelProviderItem = ({ + keyName, + children, +}: PropsWithChildren<{ + keyName: string; +}>) => ( + + + + + {keyName} + + {children} + + + +); + +type PromptLLMProps = { + promptVersion: PromptLLM__main$key; +}; + +export function PromptLLM({ promptVersion }: PromptLLMProps) { + const data = useFragment( + graphql` + fragment PromptLLM__main on PromptVersion { + model: modelName + provider: modelProvider + } + `, + promptVersion + ); + return ( + + LLM + + + {data.model} + + {ModelProviders[data.provider as ModelProvider] ?? data.provider} + + + + + ); +} diff --git a/app/src/pages/prompt/PromptModelConfigurationCard.tsx b/app/src/pages/prompt/PromptModelConfigurationCard.tsx index 3255299cf8..007a7d93eb 100644 --- a/app/src/pages/prompt/PromptModelConfigurationCard.tsx +++ b/app/src/pages/prompt/PromptModelConfigurationCard.tsx @@ -11,6 +11,7 @@ import { } from "@phoenix/components"; import { PromptModelConfigurationCard__main$key } from "@phoenix/pages/prompt/__generated__/PromptModelConfigurationCard__main.graphql"; import { PromptInvocationParameters } from "@phoenix/pages/prompt/PromptInvocationParameters"; +import { PromptLLM } from "@phoenix/pages/prompt/PromptLLM"; import { PromptOutputSchema } from "@phoenix/pages/prompt/PromptOutputSchema"; import { PromptTools } from "@phoenix/pages/prompt/PromptTools"; @@ -22,6 +23,9 @@ export function PromptModelConfigurationCard({ const promptVersion = useFragment( graphql` fragment PromptModelConfigurationCard__main on PromptVersion { + model: modelName + provider: modelProvider + ...PromptLLM__main ...PromptInvocationParameters__main ...PromptTools__main ...PromptOutputSchemaFragment @@ -37,11 +41,13 @@ export function PromptModelConfigurationCard({ > + Invocation Parameters diff --git a/app/src/pages/prompt/__generated__/PromptLLM__main.graphql.ts b/app/src/pages/prompt/__generated__/PromptLLM__main.graphql.ts new file mode 100644 index 0000000000..d49f0d0e0e --- /dev/null +++ b/app/src/pages/prompt/__generated__/PromptLLM__main.graphql.ts @@ -0,0 +1,50 @@ +/** + * @generated SignedSource<<2336c07c556c0885df2ecde7caef0e37>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { Fragment, ReaderFragment } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type PromptLLM__main$data = { + readonly model: string; + readonly provider: string; + readonly " $fragmentType": "PromptLLM__main"; +}; +export type PromptLLM__main$key = { + readonly " $data"?: PromptLLM__main$data; + readonly " $fragmentSpreads": FragmentRefs<"PromptLLM__main">; +}; + +const node: ReaderFragment = { + "argumentDefinitions": [], + "kind": "Fragment", + "metadata": null, + "name": "PromptLLM__main", + "selections": [ + { + "alias": "model", + "args": null, + "kind": "ScalarField", + "name": "modelName", + "storageKey": null + }, + { + "alias": "provider", + "args": null, + "kind": "ScalarField", + "name": "modelProvider", + "storageKey": null + } + ], + "type": "PromptVersion", + "abstractKey": null +}; + +(node as any).hash = "acc90da43126218472d2fc19cd8d0512"; + +export default node; diff --git a/app/src/pages/prompt/__generated__/PromptModelConfigurationCard__main.graphql.ts b/app/src/pages/prompt/__generated__/PromptModelConfigurationCard__main.graphql.ts index 7e6c759395..05d3d3c50c 100644 --- a/app/src/pages/prompt/__generated__/PromptModelConfigurationCard__main.graphql.ts +++ b/app/src/pages/prompt/__generated__/PromptModelConfigurationCard__main.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<89a0965570719eab85a61133888d2666>> + * @generated SignedSource<<6b54d1dfb8ff8b872c51e9b1de590e59>> * @lightSyntaxTransform * @nogrep */ @@ -11,7 +11,9 @@ import { Fragment, ReaderFragment } from 'relay-runtime'; import { FragmentRefs } from "relay-runtime"; export type PromptModelConfigurationCard__main$data = { - readonly " $fragmentSpreads": FragmentRefs<"PromptInvocationParameters__main" | "PromptOutputSchemaFragment" | "PromptTools__main">; + readonly model: string; + readonly provider: string; + readonly " $fragmentSpreads": FragmentRefs<"PromptInvocationParameters__main" | "PromptLLM__main" | "PromptOutputSchemaFragment" | "PromptTools__main">; readonly " $fragmentType": "PromptModelConfigurationCard__main"; }; export type PromptModelConfigurationCard__main$key = { @@ -25,6 +27,25 @@ const node: ReaderFragment = { "metadata": null, "name": "PromptModelConfigurationCard__main", "selections": [ + { + "alias": "model", + "args": null, + "kind": "ScalarField", + "name": "modelName", + "storageKey": null + }, + { + "alias": "provider", + "args": null, + "kind": "ScalarField", + "name": "modelProvider", + "storageKey": null + }, + { + "args": null, + "kind": "FragmentSpread", + "name": "PromptLLM__main" + }, { "args": null, "kind": "FragmentSpread", @@ -45,6 +66,6 @@ const node: ReaderFragment = { "abstractKey": null }; -(node as any).hash = "7ec5f9f00217c6d2f622362726028683"; +(node as any).hash = "d4da6036f4ce3b8793d09dd0a78b343d"; export default node; diff --git a/app/src/pages/prompt/__generated__/promptLoaderQuery.graphql.ts b/app/src/pages/prompt/__generated__/promptLoaderQuery.graphql.ts index f7eac3e76f..47f1186cb7 100644 --- a/app/src/pages/prompt/__generated__/promptLoaderQuery.graphql.ts +++ b/app/src/pages/prompt/__generated__/promptLoaderQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<17bc2c46439679d788356b98620b8530>> + * @generated SignedSource<<299bb738c2b2dd77b49ff63dfdbf3faf>> * @lightSyntaxTransform * @nogrep */ @@ -468,6 +468,13 @@ return { "selections": (v6/*: any*/), "storageKey": null }, + { + "alias": "model", + "args": null, + "kind": "ScalarField", + "name": "modelName", + "storageKey": null + }, (v3/*: any*/) ], "storageKey": null @@ -551,12 +558,12 @@ return { ] }, "params": { - "cacheID": "a8900a35727e89d6b2196fe5e9879833", + "cacheID": "a2e6de39fe468951f20bd31f2ced2a89", "id": null, "metadata": {}, "name": "promptLoaderQuery", "operationKind": "query", - "text": "query promptLoaderQuery(\n $id: GlobalID!\n) {\n prompt: node(id: $id) {\n __typename\n id\n ... on Prompt {\n name\n ...PromptIndexPage__main\n ...PromptVersionsPageContent__main\n ...PromptLayout__main\n }\n }\n}\n\nfragment PromptChatMessagesCard__main on PromptVersion {\n provider: modelProvider\n template {\n __typename\n ... on PromptChatTemplate {\n messages {\n role\n content {\n __typename\n ... on TextContentPart {\n text {\n text\n }\n }\n ... on ImageContentPart {\n image {\n url\n }\n }\n ... on ToolCallContentPart {\n toolCall {\n toolCallId\n toolCall {\n arguments\n name\n }\n }\n }\n ... on ToolResultContentPart {\n toolResult {\n toolCallId\n result\n }\n }\n }\n }\n }\n ... on PromptStringTemplate {\n template\n }\n }\n templateType\n templateFormat\n}\n\nfragment PromptCodeExportCard__main on PromptVersion {\n invocationParameters\n modelName\n modelProvider\n outputSchema {\n definition\n }\n tools {\n definition\n }\n template {\n __typename\n ... on PromptChatTemplate {\n messages {\n role\n content {\n __typename\n ... on TextContentPart {\n __typename\n text {\n text\n }\n }\n ... on ImageContentPart {\n __typename\n image {\n url\n }\n }\n ... on ToolCallContentPart {\n __typename\n toolCall {\n toolCallId\n }\n }\n ... on ToolResultContentPart {\n __typename\n toolResult {\n toolCallId\n result\n }\n }\n }\n }\n }\n ... on PromptStringTemplate {\n template\n }\n }\n templateFormat\n templateType\n}\n\nfragment PromptIndexPage__aside on Prompt {\n description\n ...PromptLatestVersionsListFragment\n}\n\nfragment PromptIndexPage__main on Prompt {\n promptVersions {\n edges {\n node {\n ...PromptInvocationParameters__main\n ...PromptChatMessagesCard__main\n ...PromptCodeExportCard__main\n ...PromptModelConfigurationCard__main\n }\n }\n }\n ...PromptIndexPage__aside\n}\n\nfragment PromptInvocationParameters__main on PromptVersion {\n invocationParameters\n}\n\nfragment PromptLatestVersionsListFragment on Prompt {\n latestVersions: promptVersions(first: 5) {\n edges {\n version: node {\n id\n description\n createdAt\n sequenceNumber\n ...PromptVersionSummaryFragment\n }\n }\n }\n}\n\nfragment PromptLayout__main on Prompt {\n id\n name\n description\n promptVersions {\n edges {\n node {\n id\n }\n }\n }\n}\n\nfragment PromptModelConfigurationCard__main on PromptVersion {\n ...PromptInvocationParameters__main\n ...PromptTools__main\n ...PromptOutputSchemaFragment\n}\n\nfragment PromptOutputSchemaFragment on PromptVersion {\n outputSchema {\n definition\n }\n}\n\nfragment PromptTools__main on PromptVersion {\n tools {\n definition\n }\n}\n\nfragment PromptVersionSummaryFragment on PromptVersion {\n id\n description\n sequenceNumber\n createdAt\n user {\n id\n username\n profilePictureUrl\n }\n ...PromptVersionTagsList_data\n}\n\nfragment PromptVersionTagsList_data on PromptVersion {\n tags {\n id\n name\n }\n}\n\nfragment PromptVersionsList__main on Prompt {\n promptVersions {\n edges {\n version: node {\n id\n ...PromptVersionSummaryFragment\n }\n }\n }\n}\n\nfragment PromptVersionsPageContent__main on Prompt {\n ...PromptVersionsList__main\n}\n" + "text": "query promptLoaderQuery(\n $id: GlobalID!\n) {\n prompt: node(id: $id) {\n __typename\n id\n ... on Prompt {\n name\n ...PromptIndexPage__main\n ...PromptVersionsPageContent__main\n ...PromptLayout__main\n }\n }\n}\n\nfragment PromptChatMessagesCard__main on PromptVersion {\n provider: modelProvider\n template {\n __typename\n ... on PromptChatTemplate {\n messages {\n role\n content {\n __typename\n ... on TextContentPart {\n text {\n text\n }\n }\n ... on ImageContentPart {\n image {\n url\n }\n }\n ... on ToolCallContentPart {\n toolCall {\n toolCallId\n toolCall {\n arguments\n name\n }\n }\n }\n ... on ToolResultContentPart {\n toolResult {\n toolCallId\n result\n }\n }\n }\n }\n }\n ... on PromptStringTemplate {\n template\n }\n }\n templateType\n templateFormat\n}\n\nfragment PromptCodeExportCard__main on PromptVersion {\n invocationParameters\n modelName\n modelProvider\n outputSchema {\n definition\n }\n tools {\n definition\n }\n template {\n __typename\n ... on PromptChatTemplate {\n messages {\n role\n content {\n __typename\n ... on TextContentPart {\n __typename\n text {\n text\n }\n }\n ... on ImageContentPart {\n __typename\n image {\n url\n }\n }\n ... on ToolCallContentPart {\n __typename\n toolCall {\n toolCallId\n }\n }\n ... on ToolResultContentPart {\n __typename\n toolResult {\n toolCallId\n result\n }\n }\n }\n }\n }\n ... on PromptStringTemplate {\n template\n }\n }\n templateFormat\n templateType\n}\n\nfragment PromptIndexPage__aside on Prompt {\n description\n ...PromptLatestVersionsListFragment\n}\n\nfragment PromptIndexPage__main on Prompt {\n promptVersions {\n edges {\n node {\n ...PromptInvocationParameters__main\n ...PromptChatMessagesCard__main\n ...PromptCodeExportCard__main\n ...PromptModelConfigurationCard__main\n }\n }\n }\n ...PromptIndexPage__aside\n}\n\nfragment PromptInvocationParameters__main on PromptVersion {\n invocationParameters\n}\n\nfragment PromptLLM__main on PromptVersion {\n model: modelName\n provider: modelProvider\n}\n\nfragment PromptLatestVersionsListFragment on Prompt {\n latestVersions: promptVersions(first: 5) {\n edges {\n version: node {\n id\n description\n createdAt\n sequenceNumber\n ...PromptVersionSummaryFragment\n }\n }\n }\n}\n\nfragment PromptLayout__main on Prompt {\n id\n name\n description\n promptVersions {\n edges {\n node {\n id\n }\n }\n }\n}\n\nfragment PromptModelConfigurationCard__main on PromptVersion {\n model: modelName\n provider: modelProvider\n ...PromptLLM__main\n ...PromptInvocationParameters__main\n ...PromptTools__main\n ...PromptOutputSchemaFragment\n}\n\nfragment PromptOutputSchemaFragment on PromptVersion {\n outputSchema {\n definition\n }\n}\n\nfragment PromptTools__main on PromptVersion {\n tools {\n definition\n }\n}\n\nfragment PromptVersionSummaryFragment on PromptVersion {\n id\n description\n sequenceNumber\n createdAt\n user {\n id\n username\n profilePictureUrl\n }\n ...PromptVersionTagsList_data\n}\n\nfragment PromptVersionTagsList_data on PromptVersion {\n tags {\n id\n name\n }\n}\n\nfragment PromptVersionsList__main on Prompt {\n promptVersions {\n edges {\n version: node {\n id\n ...PromptVersionSummaryFragment\n }\n }\n }\n}\n\nfragment PromptVersionsPageContent__main on Prompt {\n ...PromptVersionsList__main\n}\n" } }; })(); diff --git a/app/src/pages/prompt/__generated__/promptVersionLoaderQuery.graphql.ts b/app/src/pages/prompt/__generated__/promptVersionLoaderQuery.graphql.ts index 51fddc0231..679f15acdf 100644 --- a/app/src/pages/prompt/__generated__/promptVersionLoaderQuery.graphql.ts +++ b/app/src/pages/prompt/__generated__/promptVersionLoaderQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<20b611834a86353387ff858047a0ed60>> + * @generated SignedSource<<4fc48c5c21ec6fc4401604eae9266ece>> * @lightSyntaxTransform * @nogrep */ @@ -426,6 +426,13 @@ return { "storageKey": null }, (v8/*: any*/), + { + "alias": "model", + "args": null, + "kind": "ScalarField", + "name": "modelName", + "storageKey": null + }, { "alias": null, "args": null, @@ -450,12 +457,12 @@ return { ] }, "params": { - "cacheID": "855083c07021eaf4434ff7cbff11a30a", + "cacheID": "47ab6cf09a0a5d9213f62395f9061ac2", "id": null, "metadata": {}, "name": "promptVersionLoaderQuery", "operationKind": "query", - "text": "query promptVersionLoaderQuery(\n $id: GlobalID!\n) {\n promptVersion: node(id: $id) {\n __typename\n id\n ... on PromptVersion {\n ...PromptInvocationParameters__main\n ...PromptChatMessagesCard__main\n ...PromptCodeExportCard__main\n ...PromptModelConfigurationCard__main\n ...PromptVersionTagsList_data\n description\n invocationParameters\n modelName\n tools {\n definition\n }\n tags {\n name\n }\n }\n }\n}\n\nfragment PromptChatMessagesCard__main on PromptVersion {\n provider: modelProvider\n template {\n __typename\n ... on PromptChatTemplate {\n messages {\n role\n content {\n __typename\n ... on TextContentPart {\n text {\n text\n }\n }\n ... on ImageContentPart {\n image {\n url\n }\n }\n ... on ToolCallContentPart {\n toolCall {\n toolCallId\n toolCall {\n arguments\n name\n }\n }\n }\n ... on ToolResultContentPart {\n toolResult {\n toolCallId\n result\n }\n }\n }\n }\n }\n ... on PromptStringTemplate {\n template\n }\n }\n templateType\n templateFormat\n}\n\nfragment PromptCodeExportCard__main on PromptVersion {\n invocationParameters\n modelName\n modelProvider\n outputSchema {\n definition\n }\n tools {\n definition\n }\n template {\n __typename\n ... on PromptChatTemplate {\n messages {\n role\n content {\n __typename\n ... on TextContentPart {\n __typename\n text {\n text\n }\n }\n ... on ImageContentPart {\n __typename\n image {\n url\n }\n }\n ... on ToolCallContentPart {\n __typename\n toolCall {\n toolCallId\n }\n }\n ... on ToolResultContentPart {\n __typename\n toolResult {\n toolCallId\n result\n }\n }\n }\n }\n }\n ... on PromptStringTemplate {\n template\n }\n }\n templateFormat\n templateType\n}\n\nfragment PromptInvocationParameters__main on PromptVersion {\n invocationParameters\n}\n\nfragment PromptModelConfigurationCard__main on PromptVersion {\n ...PromptInvocationParameters__main\n ...PromptTools__main\n ...PromptOutputSchemaFragment\n}\n\nfragment PromptOutputSchemaFragment on PromptVersion {\n outputSchema {\n definition\n }\n}\n\nfragment PromptTools__main on PromptVersion {\n tools {\n definition\n }\n}\n\nfragment PromptVersionTagsList_data on PromptVersion {\n tags {\n id\n name\n }\n}\n" + "text": "query promptVersionLoaderQuery(\n $id: GlobalID!\n) {\n promptVersion: node(id: $id) {\n __typename\n id\n ... on PromptVersion {\n ...PromptInvocationParameters__main\n ...PromptChatMessagesCard__main\n ...PromptCodeExportCard__main\n ...PromptModelConfigurationCard__main\n ...PromptVersionTagsList_data\n description\n invocationParameters\n modelName\n tools {\n definition\n }\n tags {\n name\n }\n }\n }\n}\n\nfragment PromptChatMessagesCard__main on PromptVersion {\n provider: modelProvider\n template {\n __typename\n ... on PromptChatTemplate {\n messages {\n role\n content {\n __typename\n ... on TextContentPart {\n text {\n text\n }\n }\n ... on ImageContentPart {\n image {\n url\n }\n }\n ... on ToolCallContentPart {\n toolCall {\n toolCallId\n toolCall {\n arguments\n name\n }\n }\n }\n ... on ToolResultContentPart {\n toolResult {\n toolCallId\n result\n }\n }\n }\n }\n }\n ... on PromptStringTemplate {\n template\n }\n }\n templateType\n templateFormat\n}\n\nfragment PromptCodeExportCard__main on PromptVersion {\n invocationParameters\n modelName\n modelProvider\n outputSchema {\n definition\n }\n tools {\n definition\n }\n template {\n __typename\n ... on PromptChatTemplate {\n messages {\n role\n content {\n __typename\n ... on TextContentPart {\n __typename\n text {\n text\n }\n }\n ... on ImageContentPart {\n __typename\n image {\n url\n }\n }\n ... on ToolCallContentPart {\n __typename\n toolCall {\n toolCallId\n }\n }\n ... on ToolResultContentPart {\n __typename\n toolResult {\n toolCallId\n result\n }\n }\n }\n }\n }\n ... on PromptStringTemplate {\n template\n }\n }\n templateFormat\n templateType\n}\n\nfragment PromptInvocationParameters__main on PromptVersion {\n invocationParameters\n}\n\nfragment PromptLLM__main on PromptVersion {\n model: modelName\n provider: modelProvider\n}\n\nfragment PromptModelConfigurationCard__main on PromptVersion {\n model: modelName\n provider: modelProvider\n ...PromptLLM__main\n ...PromptInvocationParameters__main\n ...PromptTools__main\n ...PromptOutputSchemaFragment\n}\n\nfragment PromptOutputSchemaFragment on PromptVersion {\n outputSchema {\n definition\n }\n}\n\nfragment PromptTools__main on PromptVersion {\n tools {\n definition\n }\n}\n\nfragment PromptVersionTagsList_data on PromptVersion {\n tags {\n id\n name\n }\n}\n" } }; })();