diff --git a/app/src/components/project/PythonProjectGuide.tsx b/app/src/components/project/PythonProjectGuide.tsx index 9378c348e4..030d18402a 100644 --- a/app/src/components/project/PythonProjectGuide.tsx +++ b/app/src/components/project/PythonProjectGuide.tsx @@ -14,6 +14,9 @@ import { CodeWrap } from "@phoenix/components/code/CodeWrap"; import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy"; import { BASE_URL } from "@phoenix/config"; +import { IsAdmin } from "../auth"; + +import { HOSTED_PHOENIX_URL, IS_HOSTED_DEPLOYMENT } from "./hosting"; import { PythonIntegrations } from "./Integrations"; const PHOENIX_OTEL_DOC_LINK = @@ -27,13 +30,20 @@ const PHOENIX_ENVIRONMENT_VARIABLES_LINK = const INSTALL_PHOENIX_OTEL_PYTHON = `pip install arize-phoenix-otel`; const INSTALL_OPENAI_INSTRUMENTATION_PYTHON = `pip install openinference-instrumentation-openai openai`; -const HOSTED_PHOENIX_URL = "https://app.phoenix.arize.com"; -const LLAMATRACE_URL = "https://llamatrace.com"; - -const HOSTED_BASE_URLS = [HOSTED_PHOENIX_URL, LLAMATRACE_URL]; - -// Environment variables -const HOSTED_PHOENIX_ENVIRONMENT_VARIABLES_PYTHON = `PHOENIX_CLIENT_HEADERS='api_key='\nPHOENIX_COLLECTOR_ENDPOINT='${HOSTED_PHOENIX_URL}'`; +function getEnvironmentVariablesPython({ + isAuthEnabled, + isHosted, +}: { + isAuthEnabled: boolean; + isHosted: boolean; +}): string { + if (isHosted) { + return `PHOENIX_CLIENT_HEADERS='api_key='\nPHOENIX_COLLECTOR_ENDPOINT='${HOSTED_PHOENIX_URL}'`; + } else if (isAuthEnabled) { + return `PHOENIX_API_KEY=''\nPHOENIX_COLLECTOR_ENDPOINT='${HOSTED_PHOENIX_URL}'`; + } + return `PHOENIX_COLLECTOR_ENDPOINT='${BASE_URL}'`; +} const INSTRUMENT_OPENAI_PYTHON = `from openinference.instrumentation.openai import OpenAIInstrumentor @@ -76,7 +86,12 @@ type PythonProjectGuideProps = { projectName?: string; }; export function PythonProjectGuide(props: PythonProjectGuideProps) { - const isHosted = HOSTED_BASE_URLS.includes(BASE_URL); + const isHosted = IS_HOSTED_DEPLOYMENT; + const isAuthEnabled = window.Config.authenticationEnabled; + const environmentVariablesPython = getEnvironmentVariablesPython({ + isAuthEnabled, + isHosted, + }); const projectName = props.projectName || "your-next-llm-project"; return ( @@ -104,19 +119,31 @@ export function PythonProjectGuide(props: PythonProjectGuideProps) { arize-phoenix-otel automatically picks up your configuration - from environment variables (e.x. PHOENIX_CLIENT_HEADERS for - authentication). See{" "} + from environment variables - {isHosted ? ( - - - + + + + {isAuthEnabled ? ( + + + Personal API keys can be created and managed on your{" "} + Profile + + } + > + + System API keys can be created and managed in{" "} + Settings + + + ) : null} diff --git a/app/src/components/project/TypeScriptProjectGuide.tsx b/app/src/components/project/TypeScriptProjectGuide.tsx index 91fecda53d..9fdee1d867 100644 --- a/app/src/components/project/TypeScriptProjectGuide.tsx +++ b/app/src/components/project/TypeScriptProjectGuide.tsx @@ -3,11 +3,13 @@ import React from "react"; import { Heading, Text, View } from "@arizeai/components"; import { ExternalLink } from "@phoenix/components"; +import { IsAdmin, IsAuthenticated } from "@phoenix/components/auth"; import { CodeWrap } from "@phoenix/components/code/CodeWrap"; import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy"; import { TypeScriptBlockWithCopy } from "../code/TypeScriptBlockWithCopy"; +import { IS_HOSTED_DEPLOYMENT } from "./hosting"; import { TypeScriptIntegrations, TypeScriptPlatformIntegrations, @@ -33,8 +35,8 @@ resource: new Resource({ }; export function TypeScriptProjectGuide(props: PythonProjectGuideProps) { + const isHosted = IS_HOSTED_DEPLOYMENT; const existingProjectName = props.projectName; - const projectName = existingProjectName || "your-next-llm-project"; return (
@@ -62,22 +64,43 @@ export function TypeScriptProjectGuide(props: PythonProjectGuideProps) { - If authentication is enabled, set the{" "} - OTEL_EXPORTER_OTLP_TRACES_HEADERS. See{" "} + Set the authentication headers in the environment variable{" "} + OTEL_EXPORTER_OTLP_HEADERS. See{" "} - environment variable + environment variables '`} + value={ + isHosted + ? `OTEL_EXPORTER_OTLP_HEADERS=''` + : `OTEL_EXPORTER_OTLP_HEADERS='authorization=Bearer%20'` + } /> + + + + Your personal API keys can be created and managed on your{" "} + Profile + + } + > + + System API keys can be created and managed in{" "} + Settings + + + + Set the Project Name diff --git a/app/src/components/project/hosting.ts b/app/src/components/project/hosting.ts new file mode 100644 index 0000000000..8493d46321 --- /dev/null +++ b/app/src/components/project/hosting.ts @@ -0,0 +1,8 @@ +import { BASE_URL } from "@phoenix/config"; + +export const HOSTED_PHOENIX_URL = "https://app.phoenix.arize.com"; +export const LLAMATRACE_URL = "https://llamatrace.com"; + +export const HOSTED_BASE_URLS = [HOSTED_PHOENIX_URL, LLAMATRACE_URL]; + +export const IS_HOSTED_DEPLOYMENT = HOSTED_BASE_URLS.includes(BASE_URL); diff --git a/app/src/pages/dataset/RunExperimentButton.tsx b/app/src/pages/dataset/RunExperimentButton.tsx index a2f3e8917a..3d49f4309d 100644 --- a/app/src/pages/dataset/RunExperimentButton.tsx +++ b/app/src/pages/dataset/RunExperimentButton.tsx @@ -10,16 +10,27 @@ import { View, } from "@arizeai/components"; +import { ExternalLink } from "@phoenix/components"; +import { IsAdmin, IsAuthenticated } from "@phoenix/components/auth"; import { CodeWrap } from "@phoenix/components/code/CodeWrap"; import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy"; import { useDatasetContext } from "@phoenix/contexts/DatasetContext"; const INSTALL_PHOENIX_PYTHON = `pip install arize-phoenix>=${window.Config.platformVersion}`; // TODO: plumb though session URL from the backend -const SET_BASE_URL_PYTHON = - `import os\n` + - `# Set the phoenix collector endpoint. Commonly http://localhost:6060 \n` + - `os.environ["PHOENIX_COLLECTOR_ENDPOINT"] = ""`; +function getSetBaseUrlPython({ isAuthEnabled }: { isAuthEnabled: boolean }) { + let setBaseURLPython = + `import os\n` + + `# Set the phoenix collector endpoint. Commonly http://localhost:6060 \n` + + `os.environ["PHOENIX_COLLECTOR_ENDPOINT"] = ""`; + if (isAuthEnabled) { + setBaseURLPython += + `\n` + + `# Configure access\n` + + `os.environ["PHOENIX_API_KEY"] = ""`; + } + return setBaseURLPython; +} const TASK_PYTHON = `from phoenix.experiments.types import Example\n` + `# Define your task\n` + @@ -75,6 +86,7 @@ export function RunExperimentButton() { function RunExperimentExample() { const datasetName = useDatasetContext((state) => state.datasetName); const version = useDatasetContext((state) => state.latestVersion); + const isAuthEnabled = window.Config.authenticationEnabled; const getDatasetPythonCode = useMemo(() => { return ( @@ -98,8 +110,25 @@ function RunExperimentExample() { Point to a running instance of Phoenix - + + + + + Your personal API keys can be created and managed on your{" "} + Profile + + } + > + + System API keys can be created and managed in{" "} + Settings + + + + Pull down this dataset