feat(sessions): getting started guide (#5592)

* feat(sessions): getting started guide * minimum working sessions example * add python getting started guide * add typescript guide * add tutorials * cleanup * fix format
Arize-ai · Dec 3, 2024 · 29dfef2 · 29dfef2
1 parent ff6d717
commit 29dfef2
Show file tree

Hide file tree

Showing 6 changed files with 652 additions and 2 deletions.
diff --git a/app/src/pages/project/PythonSessionsGuide.tsx b/app/src/pages/project/PythonSessionsGuide.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+
+import { Heading, Text, View } from "@arizeai/components";
+
+import { ExternalLink } from "@phoenix/components";
+import { CodeWrap, PythonBlockWithCopy } from "@phoenix/components/code";
+
+const INSTALL_OPENINFERENCE_INSTRUMENTATION_PYTHON = `pip install openinference-instrumentation`;
+const ADD_SESSION_ID_PYTHON = `import uuid
+
+import openai
+from openinference.instrumentation import using_session
+from openinference.semconv.trace import SpanAttributes
+from opentelemetry import trace
+
+client = openai.Client()
+session_id = str(uuid.uuid4())
+
+tracer = trace.get_tracer(__name__)
+
+@tracer.start_as_current_span(name="agent", attributes={SpanAttributes.OPENINFERENCE_SPAN_KIND: "agent"})
+def assistant(
+  messages: list[dict],
+  session_id: str = str,
+):
+  current_span = trace.get_current_span()
+  current_span.set_attribute(SpanAttributes.SESSION_ID, session_id)
+  current_span.set_attribute(SpanAttributes.INPUT_VALUE, messages[-1].get('content'))
+
+  # Propagate the session_id down to spans crated by the OpenAI instrumentation
+  # This is not strictly necessary, but it helps to correlate the spans to the same session
+  with using_session(session_id):
+   response = client.chat.completions.create(
+       model="gpt-3.5-turbo",
+       messages=[{"role": "system", "content": "You are a helpful assistant."}] + messages,
+   ).choices[0].message
+
+  current_span.set_attribute(SpanAttributes.OUTPUT_VALUE, response.content)
+  return response
+
+messages = [
+  {"role": "user", "content": "hi! im bob"}
+]
+response = assistant(
+  messages,
+  session_id=session_id,
+)
+messages = messages + [
+  response,
+  {"role": "user", "content": "what's my name?"}
+]
+response = assistant(
+  messages,
+  session_id=session_id,
+)`;
+
+export function PythonSessionsGuide() {
+  return (
+    <div>
+      <View paddingTop="size-200" paddingBottom="size-100">
+        <Heading level={2} weight="heavy">
+          Install Dependencies
+        </Heading>
+      </View>
+      <View paddingBottom="size-100">
+        <Text>
+          Sessions are tracked via the OpenTelemetry attribute <b>session.id</b>
+          . The easiest way to get started with sessions is to use the
+          OpenInference instrumentation package.
+        </Text>
+      </View>
+      <CodeWrap>
+        <PythonBlockWithCopy
+          value={INSTALL_OPENINFERENCE_INSTRUMENTATION_PYTHON}
+        />
+      </CodeWrap>
+      <View paddingTop="size-200" paddingBottom="size-100">
+        <Heading level={2} weight="heavy">
+          Add Session ID to your Traces
+        </Heading>
+      </View>
+      <View paddingBottom="size-100">
+        <Text>
+          Below is an example of how to add session IDs to a simple OpenAI
+          application.
+        </Text>
+      </View>
+      <CodeWrap>
+        <PythonBlockWithCopy value={ADD_SESSION_ID_PYTHON} />
+      </CodeWrap>
+      <View paddingBottom="size-100" paddingTop="size-100">
+        <Text>
+          For more information on how to use sessions, consult the{" "}
+          <ExternalLink href="https://docs.arize.com/phoenix/tracing/how-to-tracing/setup-sessions">
+            documentation
+          </ExternalLink>
+        </Text>
+      </View>
+    </div>
+  );
+}
diff --git a/app/src/pages/project/SessionsTableEmpty.tsx b/app/src/pages/project/SessionsTableEmpty.tsx
@@ -1,9 +1,45 @@
-import React from "react";
+import React, { ReactNode, useState } from "react";
 import { css } from "@emotion/react";
 
-import { Flex } from "@arizeai/components";
+import {
+  Button,
+  Dialog,
+  DialogContainer,
+  Flex,
+  Icon,
+  Icons,
+  View,
+} from "@arizeai/components";
 
+import { CodeLanguage, CodeLanguageRadioGroup } from "@phoenix/components/code";
+
+import { PythonSessionsGuide } from "./PythonSessionsGuide";
+import { TypeScriptSessionsGuide } from "./TypeScriptSessionsGuide";
+
+function SetupSessionsDialog() {
+  const [language, setLanguage] = useState<CodeLanguage>("Python");
+  return (
+    <Dialog title="Setup Sessions for this Project" size="L">
+      <View padding="size-400" overflow="auto">
+        <View paddingBottom="size-100">
+          <CodeLanguageRadioGroup language={language} onChange={setLanguage} />
+        </View>
+        {language === "Python" ? (
+          <PythonSessionsGuide />
+        ) : (
+          <TypeScriptSessionsGuide />
+        )}
+      </View>
+    </Dialog>
+  );
+}
 export function SessionsTableEmpty() {
+  const [dialog, setDialog] = useState<ReactNode | null>(null);
+
+  const onGettingStartedClick = () => {
+    setDialog(<SetupSessionsDialog />);
+  };
+
   return (
     <tbody className="is-empty">
       <tr>
@@ -16,9 +52,23 @@ export function SessionsTableEmpty() {
         >
           <Flex direction="column" gap="size-200" alignItems="center">
             No sessions found for this project
+            <Button
+              variant="default"
+              icon={<Icon svg={<Icons.PlayCircleOutline />} />}
+              onClick={onGettingStartedClick}
+            >
+              Setup Sessions
+            </Button>
           </Flex>
         </td>
       </tr>
+      <DialogContainer
+        onDismiss={() => setDialog(null)}
+        isDismissable
+        type="slideOver"
+      >
+        {dialog}
+      </DialogContainer>
     </tbody>
   );
 }
diff --git a/app/src/pages/project/TypeScriptSessionsGuide.tsx b/app/src/pages/project/TypeScriptSessionsGuide.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+
+import { Heading, Text, View } from "@arizeai/components";
+
+import { ExternalLink } from "@phoenix/components";
+import { CodeWrap, PythonBlockWithCopy } from "@phoenix/components/code";
+import { TypeScriptBlockWithCopy } from "@phoenix/components/code/TypeScriptBlockWithCopy";
+
+const INSTALL_OPENINFERENCE_CORE_TYPESCRIPT = `npm install @arizeai/openinference-core --save`;
+
+const ADD_SESSION_ID_TYPESCRIPT = `import { trace } from "npm:@opentelemetry/api";
+import { SemanticConventions } from "npm:@arizeai/openinference-semantic-conventions";
+import { context } from "npm:@opentelemetry/api";
+import { setSession } from "npm:@arizeai/openinference-core";
+
+const tracer = trace.getTracer("agent");
+
+const client = new OpenAI({
+  apiKey: process.env["OPENAI_API_KEY"], // This is the default and can be omitted
+});
+
+async function assistant(params: {
+  messages: { role: string; content: string }[];
+  sessionId: string;
+}) {
+  return tracer.startActiveSpan("agent", async (span: Span) => {
+    span.setAttribute(SemanticConventions.OPENINFERENCE_SPAN_KIND, "agent");
+    span.setAttribute(SemanticConventions.SESSION_ID, params.sessionId);
+    span.setAttribute(
+      SemanticConventions.INPUT_VALUE,
+      messages[messages.length - 1].content,
+    );
+    try {
+      // This is not strictly necessary but it helps propagate the session ID
+      // to all child spans
+      return context.with(
+        setSession(context.active(), { sessionId: params.sessionId }),
+        async () => {
+          // Calls within this block will generate spans with the session ID set
+          const chatCompletion = await client.chat.completions.create({
+            messages: params.messages,
+            model: "gpt-3.5-turbo",
+          });
+          const response = chatCompletion.choices[0].message;
+          span.setAttribute(SemanticConventions.OUTPUT_VALUE, response.content);
+          span.end();
+          return response;
+        },
+      );
+    } catch (e) {
+      span.error(e);
+    }
+  });
+}
+
+const sessionId = crypto.randomUUID();
+
+let messages = [{ role: "user", content: "hi! im Tim" }];
+
+const res = await assistant({
+  messages,
+  sessionId: sessionId,
+});
+
+messages = [res, { role: "assistant", content: "What is my name?" }];
+
+await assistant({
+  messages,
+  sessionId: sessionId,
+});
+`;
+
+export function TypeScriptSessionsGuide() {
+  return (
+    <div>
+      <View paddingTop="size-200" paddingBottom="size-100">
+        <Heading level={2} weight="heavy">
+          Install Dependencies
+        </Heading>
+      </View>
+      <View paddingBottom="size-100">
+        <Text>
+          Sessions are tracked via the OpenTelemetry attribute <b>session.id</b>
+          . The easiest way to get started with sessions is to use the
+          OpenInference instrumentation package.
+        </Text>
+      </View>
+      <CodeWrap>
+        <PythonBlockWithCopy value={INSTALL_OPENINFERENCE_CORE_TYPESCRIPT} />
+      </CodeWrap>
+      <View paddingTop="size-200" paddingBottom="size-100">
+        <Heading level={2} weight="heavy">
+          Add Session ID to your Traces
+        </Heading>
+      </View>
+      <View paddingBottom="size-100">
+        <Text>
+          Below is an example of how to add session IDs to a simple OpenAI
+          application.
+        </Text>
+      </View>
+      <CodeWrap>
+        <TypeScriptBlockWithCopy value={ADD_SESSION_ID_TYPESCRIPT} />
+      </CodeWrap>
+      <View paddingBottom="size-100">
+        <Text>
+          For more information on how to use sessions, consult the{" "}
+          <ExternalLink href="https://docs.arize.com/phoenix/tracing/how-to-tracing/setup-sessions">
+            documentation
+          </ExternalLink>
+        </Text>
+      </View>
+    </div>
+  );
+}
diff --git a/cspell.json b/cspell.json
@@ -56,6 +56,7 @@
         "rgba",
         "rowid",
         "seafoam",
+        "SEMRESATTRS",
         "sqlalchemy",
         "Starlette",
         "tanstack",