inspect-ai 0.3.62__py3-none-any.whl → 0.3.64__py3-none-any.whl

inspect_ai/_view/www/src/samples/scores/SampleScores.module.css

@@ -0,0 +1,5 @@
+.grid {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 1em;
+}

inspect_ai/_view/www/src/samples/scores/SampleScores.tsx

@@ -0,0 +1,37 @@
+import { Fragment } from "react";
+import { SampleSummary } from "../../api/types";
+import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
+
+import styles from "./SampleScores.module.css";
+
+interface SampleScoresProps {
+  sample: SampleSummary;
+  sampleDescriptor: SamplesDescriptor;
+  scorer: string;
+}
+
+export const SampleScores: React.FC<SampleScoresProps> = ({
+  sample,
+  sampleDescriptor,
+  scorer,
+}) => {
+  const scores = scorer
+    ? sampleDescriptor.evalDescriptor
+        .scorerDescriptor(sample, { scorer, name: scorer })
+        .scores()
+    : sampleDescriptor.selectedScorerDescriptor(sample).scores();
+
+  if (scores.length === 1) {
+    return scores[0].rendered();
+  } else {
+    const rows = scores.map((score) => {
+      return (
+        <Fragment>
+          <div style={{ opacity: "0.7" }}>{score.name}</div>
+          <div>{score.rendered()}</div>
+        </Fragment>
+      );
+    });
+    return <div className={styles.grid}>{rows}</div>;
+  }
+};

inspect_ai/_view/www/src/samples/transcript/ApprovalEventView.tsx

@@ -0,0 +1,66 @@
+import { ApplicationIcons } from "../../appearance/icons";
+import { ApprovalEvent } from "../../types/log";
+import { EventRow } from "./event/EventRow";
+
+interface ApprovalEventViewProps {
+  event: ApprovalEvent;
+  className?: string | string[];
+}
+
+/**
+ * Renders the ApprovalEventView component.
+ */
+export const ApprovalEventView: React.FC<ApprovalEventViewProps> = ({
+  event,
+  className,
+}) => {
+  return (
+    <EventRow
+      title={decisionLabel(event.decision)}
+      icon={decisionIcon(event.decision)}
+      className={className}
+    >
+      {event.explanation || ""}
+    </EventRow>
+  );
+};
+
+/**
+ * Determines the label for a decision
+ */
+const decisionLabel = (decision: string): string => {
+  switch (decision) {
+    case "approve":
+      return "Approved";
+    case "reject":
+      return "Rejected";
+    case "terminate":
+      return "Terminated";
+    case "escalate":
+      return "Escalated";
+    case "modify":
+      return "Modified";
+    default:
+      return decision;
+  }
+};
+
+/**
+ * Determines the icon for a decision
+ */
+const decisionIcon = (decision: string): string => {
+  switch (decision) {
+    case "approve":
+      return ApplicationIcons.approvals.approve;
+    case "reject":
+      return ApplicationIcons.approvals.reject;
+    case "terminate":
+      return ApplicationIcons.approvals.terminate;
+    case "escalate":
+      return ApplicationIcons.approvals.escalate;
+    case "modify":
+      return ApplicationIcons.approvals.modify;
+    default:
+      return ApplicationIcons.approve;
+  }
+};

inspect_ai/_view/www/src/samples/transcript/ErrorEventView.tsx

@@ -0,0 +1,51 @@
+import { ApplicationIcons } from "../../appearance/icons";
+import { ANSIDisplay } from "../../components/AnsiDisplay";
+import { ErrorEvent } from "../../types/log";
+import { formatDateTime } from "../../utils/format";
+import { EventPanel } from "./event/EventPanel";
+import { TranscriptEventState } from "./types";
+
+interface ErrorEventViewProps {
+  id: string;
+  event: ErrorEvent;
+  eventState: TranscriptEventState;
+  setEventState: (state: TranscriptEventState) => void;
+  className?: string | string[];
+}
+
+/**
+ * Renders the ErrorEventView component.
+ */
+export const ErrorEventView: React.FC<ErrorEventViewProps> = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  className,
+}) => {
+  return (
+    <EventPanel
+      id={id}
+      title="Error"
+      className={className}
+      subTitle={formatDateTime(new Date(event.timestamp))}
+      icon={ApplicationIcons.error}
+      selectedNav={eventState.selectedNav || ""}
+      setSelectedNav={(selectedNav: string) => {
+        setEventState({ ...eventState, selectedNav });
+      }}
+      collapsed={eventState.collapsed}
+      setCollapsed={(collapsed: boolean) => {
+        setEventState({ ...eventState, collapsed });
+      }}
+    >
+      <ANSIDisplay
+        output={event.error.traceback_ansi}
+        style={{
+          fontSize: "clamp(0.5rem, calc(0.25em + 1vw), 0.8rem)",
+          margin: "0.5em 0",
+        }}
+      />
+    </EventPanel>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/InfoEventView.module.css

@@ -0,0 +1,3 @@
+.panel {
+  margin: 0.5em 0;
+}

inspect_ai/_view/www/src/samples/transcript/InfoEventView.tsx

@@ -0,0 +1,54 @@
+import { ApplicationIcons } from "../../appearance/icons";
+import { JSONPanel } from "../../components/JsonPanel";
+import { MarkdownDiv } from "../../components/MarkdownDiv";
+import { InfoEvent } from "../../types/log";
+import { formatDateTime } from "../../utils/format";
+import { EventPanel } from "./event/EventPanel";
+import styles from "./InfoEventView.module.css";
+import { TranscriptEventState } from "./types";
+
+interface InfoEventViewProps {
+  id: string;
+  event: InfoEvent;
+  eventState: TranscriptEventState;
+  setEventState: (state: TranscriptEventState) => void;
+  className?: string | string[];
+}
+
+/**
+ * Renders the InfoEventView component.
+ */
+export const InfoEventView: React.FC<InfoEventViewProps> = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  className,
+}) => {
+  const panels = [];
+  if (typeof event.data === "string") {
+    panels.push(<MarkdownDiv markdown={event.data} className={styles.panel} />);
+  } else {
+    panels.push(<JSONPanel data={event.data} className={styles.panel} />);
+  }
+
+  return (
+    <EventPanel
+      id={id}
+      title={"Info" + (event.source ? ": " + event.source : "")}
+      className={className}
+      subTitle={formatDateTime(new Date(event.timestamp))}
+      icon={ApplicationIcons.info}
+      selectedNav={eventState.selectedNav || ""}
+      setSelectedNav={(selectedNav) => {
+        setEventState({ ...eventState, selectedNav });
+      }}
+      collapsed={eventState.collapsed}
+      setCollapsed={(collapsed) => {
+        setEventState({ ...eventState, collapsed });
+      }}
+    >
+      {panels}
+    </EventPanel>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/InputEventView.tsx

@@ -0,0 +1,48 @@
+import { ApplicationIcons } from "../../appearance/icons";
+import { ANSIDisplay } from "../../components/AnsiDisplay";
+import { InputEvent } from "../../types/log";
+import { formatDateTime } from "../../utils/format";
+import { EventPanel } from "./event/EventPanel";
+import { TranscriptEventState } from "./types";
+
+interface InputEventViewProps {
+  id: string;
+  event: InputEvent;
+  eventState: TranscriptEventState;
+  setEventState: (state: TranscriptEventState) => void;
+  className?: string | string[];
+}
+
+/**
+ * Renders the ErrorEventView component.
+ */
+export const InputEventView: React.FC<InputEventViewProps> = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  className,
+}) => {
+  return (
+    <EventPanel
+      id={id}
+      title="Input"
+      className={className}
+      subTitle={formatDateTime(new Date(event.timestamp))}
+      icon={ApplicationIcons.input}
+      selectedNav={eventState.selectedNav || ""}
+      setSelectedNav={(selectedNav) => {
+        setEventState({ ...eventState, selectedNav });
+      }}
+      collapsed={eventState.collapsed}
+      setCollapsed={(collapsed) => {
+        setEventState({ ...eventState, collapsed });
+      }}
+    >
+      <ANSIDisplay
+        output={event.input_ansi}
+        style={{ fontSize: "clamp(0.4rem, 1.15vw, 0.9rem)" }}
+      />
+    </EventPanel>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/LoggerEventView.module.css

@@ -0,0 +1,6 @@
+.grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  column-gap: 1em;
+}

inspect_ai/_view/www/src/samples/transcript/LoggerEventView.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import { ApplicationIcons } from "../../appearance/icons";
+import { LoggerEvent } from "../../types/log";
+import { EventRow } from "./event/EventRow";
+
+import styles from "./LoggerEventView.module.css";
+
+interface LoggerEventViewProps {
+  event: LoggerEvent;
+  className?: string | string[];
+}
+
+/**
+ * Renders the LoggerEventView component.
+ */
+export const LoggerEventView: React.FC<LoggerEventViewProps> = ({
+  event,
+  className,
+}) => {
+  return (
+    <EventRow
+      className={className}
+      title={event.message.level}
+      icon={ApplicationIcons.logging[event.message.level.toLowerCase()]}
+    >
+      <div className={clsx("text-size-base", styles.grid)}>
+        <div className={clsx("text-size-smaller")}>
+          ${event.message.message}
+        </div>
+        <div className={clsx("text-size-smaller", "text-style-secondary")}>
+          {event.message.filename}:{event.message.lineno}
+        </div>
+      </div>
+    </EventRow>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/ModelEventView.module.css

@@ -0,0 +1,43 @@
+.output {
+  padding-top: 1em;
+}
+
+.container {
+  margin: 0.5em 0;
+  width: 100%;
+}
+
+.all {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 1em;
+}
+
+.tableSelection {
+  width: fit-content;
+  align-self: start;
+  justify-self: start;
+}
+
+.tools {
+  grid-column: -1/1;
+}
+
+.codePre {
+  background: var(--bs-light);
+  width: 100%;
+  padding: 0.5em;
+  border-radius: var(--bs-border-radius);
+}
+
+.code {
+  white-space: pre-wrap;
+  word-wrap: anywhere;
+}
+
+.toolConfig {
+  display: grid;
+  grid-template-columns: max-content auto;
+  column-gap: 1em;
+  row-gap: 0.5em;
+}

inspect_ai/_view/www/src/samples/transcript/ModelEventView.tsx

@@ -0,0 +1,223 @@
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-python";
+
+import clsx from "clsx";
+import { Fragment, useEffect, useMemo, useRef } from "react";
+import { ApplicationIcons } from "../../appearance/icons";
+import { MetaDataGrid } from "../../metadata/MetaDataGrid";
+import {
+  ModelCall,
+  ModelEvent,
+  Request,
+  Response,
+  Tools1,
+} from "../../types/log";
+import { ModelUsagePanel } from "../../usage/ModelUsagePanel";
+import {
+  formatDateTime,
+  formatNumber,
+  formatPrettyDecimal,
+} from "../../utils/format";
+import { ChatView } from "../chat/ChatView";
+import { EventPanel } from "./event/EventPanel";
+import { EventSection } from "./event/EventSection";
+import { TranscriptEventState } from "./types";
+
+import { highlightElement } from "prismjs";
+import styles from "./ModelEventView.module.css";
+
+interface ModelEventViewProps {
+  id: string;
+  event: ModelEvent;
+  eventState: TranscriptEventState;
+  setEventState: (state: TranscriptEventState) => void;
+  className?: string | string[];
+}
+
+/**
+ * Renders the StateEventView component.
+ */
+export const ModelEventView: React.FC<ModelEventViewProps> = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  className,
+}) => {
+  const totalUsage = event.output.usage?.total_tokens;
+  const callTime = event.output.time;
+
+  const subItems = [];
+  if (totalUsage) {
+    subItems.push(`${formatNumber(totalUsage)} tokens`);
+  }
+  if (callTime) {
+    subItems.push(`${formatPrettyDecimal(callTime)} sec`);
+  }
+  const subtitle = subItems.length > 0 ? `(${subItems.join(", ")})` : "";
+
+  // Note: despite the type system saying otherwise, this has appeared empircally
+  // to sometimes be undefined
+  const outputMessages = event.output.choices?.map((choice) => {
+    return choice.message;
+  });
+
+  const entries: Record<string, unknown> = { ...event.config };
+  entries["tool_choice"] = event.tool_choice;
+  delete entries["max_connections"];
+
+  // For any user messages which immediately preceded this model call, including a
+  // panel and display those user messages (exclude tool_call messages as they
+  // are already shown in the tool call above)
+  const userMessages = [];
+  for (const msg of event.input.slice().reverse()) {
+    if (msg.role === "user" && !msg.tool_call_id) {
+      userMessages.push(msg);
+    } else {
+      break;
+    }
+  }
+
+  return (
+    <EventPanel
+      id={id}
+      className={className}
+      title={`Model Call: ${event.model} ${subtitle}`}
+      subTitle={formatDateTime(new Date(event.timestamp))}
+      icon={ApplicationIcons.model}
+      selectedNav={eventState.selectedNav || ""}
+      setSelectedNav={(selectedNav) => {
+        setEventState({ ...eventState, selectedNav });
+      }}
+      collapsed={eventState.collapsed}
+      setCollapsed={(collapsed) => {
+        setEventState({ ...eventState, collapsed });
+      }}
+    >
+      <div data-name="Summary" className={styles.container}>
+        <ChatView
+          id={`${id}-model-output`}
+          messages={[...userMessages, ...(outputMessages || [])]}
+          className={clsx(styles.output)}
+          numbered={false}
+          toolCallStyle="compact"
+        />
+      </div>
+      <div data-name="All" className={styles.container}>
+        <div className={styles.all}>
+          <EventSection title="Configuration" className={styles.tableSelection}>
+            <MetaDataGrid entries={entries} plain={true} />
+          </EventSection>
+
+          <EventSection title="Usage" className={styles.tableSelection}>
+            {event.output.usage !== null ? (
+              <ModelUsagePanel usage={event.output.usage} />
+            ) : undefined}
+          </EventSection>
+
+          <EventSection
+            title="Tools"
+            className={clsx(styles.tableSelection, styles.tools)}
+          >
+            <ToolsConfig tools={event.tools} />
+          </EventSection>
+        </div>
+
+        <EventSection title="Messages">
+          <ChatView
+            id={`${id}-model-input-full`}
+            messages={[...event.input, ...(outputMessages || [])]}
+          />
+        </EventSection>
+      </div>
+
+      {event.call ? (
+        <APIView
+          data-name="API"
+          call={event.call}
+          className={styles.container}
+        />
+      ) : (
+        ""
+      )}
+    </EventPanel>
+  );
+};
+
+interface APIViewProps {
+  call: ModelCall;
+  className?: string | string[];
+}
+
+export const APIView: React.FC<APIViewProps> = ({ call, className }) => {
+  if (!call) {
+    return null;
+  }
+
+  return (
+    <div className={clsx(className)}>
+      <EventSection title="Request">
+        <APICodeCell contents={call.request} />
+      </EventSection>
+      <EventSection title="Response">
+        <APICodeCell contents={call.response} />
+      </EventSection>
+    </div>
+  );
+};
+
+interface APICodeCellProps {
+  id?: string;
+  contents: Request | Response;
+}
+
+export const APICodeCell: React.FC<APICodeCellProps> = ({ id, contents }) => {
+  if (!contents) {
+    return null;
+  }
+
+  const codeRef = useRef<HTMLElement>(null);
+  const sourceCode = useMemo(() => {
+    return JSON.stringify(contents, undefined, 2);
+  }, [contents]);
+
+  useEffect(() => {
+    if (codeRef.current) {
+      highlightElement(codeRef.current);
+    }
+  }, [codeRef.current, contents]);
+
+  return (
+    <div>
+      <pre className={styles.codePre}>
+        <code
+          id={id}
+          ref={codeRef}
+          className={clsx("language-json", styles.code, "text-size-small")}
+        >
+          {sourceCode}
+        </code>
+      </pre>
+    </div>
+  );
+};
+
+interface ToolConfigProps {
+  tools: Tools1;
+}
+
+const ToolsConfig: React.FC<ToolConfigProps> = ({ tools }) => {
+  const toolEls = tools.map((tool, idx) => {
+    return (
+      <Fragment key={`${tool.name}-${idx}`}>
+        <div className={clsx("text-style-label", "text-style-secondary")}>
+          {tool.name}
+        </div>
+        <div>{tool.description}</div>
+      </Fragment>
+    );
+  });
+
+  return <div className={styles.toolConfig}>{toolEls}</div>;
+};

inspect_ai/_view/www/src/samples/transcript/SampleInitEventView.module.css

@@ -0,0 +1,23 @@
+.noMargin {
+  margin-bottom: 0;
+}
+
+.code {
+  background: var(--bs-light);
+  border-radius: var(--bs-border-radius);
+}
+
+.sample {
+  margin: 1em 0em;
+}
+
+.section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  overflow-wrap: break-word;
+}
+
+.metadata {
+  margin: 0.5em 0;
+}