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

inspect_ai/_view/www/src/components/FindBand.tsx

@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useRef } from "react";
+import { ApplicationIcons } from "../appearance/icons";
+import "./FindBand.css";
+
+interface FindBandProps {
+  hideBand: () => void;
+}
+
+export const FindBand: React.FC<FindBandProps> = ({ hideBand }) => {
+  const searchBoxRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      searchBoxRef.current?.focus();
+    }, 10);
+  }, []);
+
+  const getParentExpandablePanel = useCallback(
+    (selection: Selection): HTMLElement | undefined => {
+      let node = selection.anchorNode;
+      while (node) {
+        if (
+          node instanceof HTMLElement &&
+          node.classList.contains("expandable-panel")
+        ) {
+          return node;
+        }
+        node = node.parentElement;
+      }
+      return undefined;
+    },
+    [],
+  );
+
+  const handleSearch = useCallback(
+    (back = false) => {
+      const searchTerm = searchBoxRef.current?.value ?? "";
+      const focusedElement = document.activeElement as HTMLElement;
+      // @ts-expect-error: `Window.find` is non-standard
+      const result = window.find(
+        searchTerm,
+        false,
+        back,
+        false,
+        false,
+        true,
+        false,
+      );
+      const noResultEl = document.getElementById("inspect-find-no-results");
+
+      if (!noResultEl) return;
+
+      noResultEl.style.opacity = result ? "0" : "1";
+
+      if (result) {
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+          const parentPanel = getParentExpandablePanel(selection);
+          if (parentPanel) {
+            parentPanel.style.display = "block";
+            parentPanel.style.webkitLineClamp = "";
+            parentPanel.style.webkitBoxOrient = "";
+          }
+
+          const range = selection.getRangeAt(0);
+          const element = range.startContainer.parentElement;
+
+          if (element) {
+            setTimeout(() => {
+              element.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+              });
+            }, 100);
+          }
+        }
+      }
+
+      focusedElement?.focus();
+    },
+    [getParentExpandablePanel],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Escape") {
+        hideBand();
+      } else if (e.key === "Enter") {
+        handleSearch(false);
+      }
+    },
+    [hideBand, handleSearch],
+  );
+
+  return (
+    <div className="findBand">
+      <input
+        type="text"
+        ref={searchBoxRef}
+        placeholder="Find"
+        onKeyDown={handleKeyDown}
+      />
+      <span id="inspect-find-no-results">No results</span>
+      <button
+        type="button"
+        title="Previous match"
+        className="btn next"
+        onClick={() => handleSearch(true)}
+      >
+        <i className={ApplicationIcons.arrows.up} />
+      </button>
+      <button
+        type="button"
+        title="Next match"
+        className="btn prev"
+        onClick={() => handleSearch(false)}
+      >
+        <i className={ApplicationIcons.arrows.down} />
+      </button>
+      <button
+        type="button"
+        title="Close"
+        className="btn close"
+        onClick={hideBand}
+      >
+        <i className={ApplicationIcons.close} />
+      </button>
+    </div>
+  );
+};

inspect_ai/_view/www/src/components/HumanBaselineView.css

@@ -0,0 +1,41 @@
+.asciinema-player {
+  max-height: 100vh;
+  max-width: 100vw;
+}
+
+.asciinema-player-status {
+  margin-right: 0.5em;
+}
+
+.asciinema-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.asciinema-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto auto;
+  width: 100%;
+}
+
+.asciinema-header-left {
+  justify-self: start;
+  font-size: var(--inspect-font-size-small);
+}
+
+.asciinema-header-center {
+  justify-self: center;
+  font-size: var(--inspect-font-size-small);
+}
+
+.asciinema-header-right {
+  justify-self: start;
+  font-size: var(--inspect-font-size-small);
+}
+
+.asciinema-body {
+  border-top: 1px solid var(--bs-light-border-subtle);
+  grid-column: span 3;
+  width: 100%;
+}

inspect_ai/_view/www/src/components/HumanBaselineView.tsx

@@ -0,0 +1,162 @@
+import { useEffect } from "react";
+import { formatDateTime, formatTime } from "../utils/format";
+import { AsciinemaPlayer } from "./AsciinemaPlayer";
+import "./HumanBaselineView.css";
+import { LightboxCarousel } from "./LightboxCarousel";
+
+export interface SessionLog {
+  name: string;
+  user: string;
+  input: string;
+  output: string;
+  timing: string;
+}
+
+interface HumanBaselineViewProps {
+  started?: Date;
+  running: boolean;
+  completed?: boolean;
+  runtime?: number;
+  answer?: string;
+  sessionLogs: SessionLog[];
+}
+
+/**
+ * Renders the HumanBaselineView component.
+ */
+export const HumanBaselineView: React.FC<HumanBaselineViewProps> = ({
+  started,
+  runtime,
+  answer,
+  completed,
+  running,
+  sessionLogs,
+}) => {
+  const player_fns = [];
+
+  // handle creation and revoking of these URLs
+  const revokableUrls: string[] = [];
+  const revokableUrl = (data: BlobPart) => {
+    const blob = new Blob([data], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    revokableUrls.push(url);
+    return url;
+  };
+
+  useEffect(() => {
+    return () => {
+      revokableUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, []);
+
+  // Make a player for each session log
+  let count = 1;
+  let maxCols = 0;
+
+  for (const sessionLog of sessionLogs) {
+    const rows = extractSize(sessionLog.output, "LINES", 24);
+    const cols = extractSize(sessionLog.output, "COLUMNS", 80);
+    maxCols = Math.max(maxCols, cols);
+
+    const currentCount = count;
+    const title =
+      sessionLogs.length === 1
+        ? "Terminal Session"
+        : `Terminal Session ${currentCount}`;
+
+    player_fns.push({
+      label: title,
+      render: () => (
+        <AsciinemaPlayer
+          id={`player-${currentCount}`}
+          inputUrl={revokableUrl(sessionLog.input)}
+          outputUrl={revokableUrl(sessionLog.output)}
+          timingUrl={revokableUrl(sessionLog.timing)}
+          rows={rows}
+          cols={cols}
+          className={"asciinema-player"}
+          style={{
+            height: `${rows * 2}em`,
+            width: `${cols * 2}em`,
+          }}
+          fit="both"
+        />
+      ),
+    });
+    count += 1;
+  }
+
+  interface StatusMessageProps {
+    completed?: boolean;
+    running?: boolean;
+    answer?: string;
+  }
+
+  const StatusMessage: React.FC<StatusMessageProps> = ({
+    completed,
+    running,
+    answer,
+  }) => {
+    if (running) {
+      return <span className={"text-style-label"}>Running</span>;
+    } else if (completed) {
+      return (
+        <div>
+          <span
+            className={
+              "text-style-label text-style-secondary asciinema-player-status"
+            }
+          >
+            Answer
+          </span>
+          <span>{answer}</span>
+        </div>
+      );
+    } else {
+      return "Unknown status";
+    }
+  };
+
+  return (
+    <div className={"asciinema-wrapper"}>
+      <div className={"asciinema-container"}>
+        <div className={"asciinema-header-left text-style-label"}>
+          {started ? formatDateTime(started) : ""}
+          {runtime ? ` (${formatTime(Math.floor(runtime))})` : ""}
+        </div>
+        <div className={"asciinema-header-center text-style-label"}></div>
+        <div className={"asciinema-header-right"}>
+          <StatusMessage
+            completed={completed}
+            running={running}
+            answer={answer}
+          />
+        </div>
+        <div className={"asciinema-body"}>
+          <LightboxCarousel slides={player_fns} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Extracts a numeric size value from a string based on a given label.
+ *
+ * Searches the input string for a pattern matching the format `LABEL="VALUE"`,
+ * where `LABEL` is the provided label and `VALUE` is a numeric value.
+ */
+const extractSize = (
+  value: string,
+  label: string,
+  defaultValue: number,
+): number => {
+  const regex = new RegExp(`${label}="(\\d+)"`);
+  const match = value.match(regex);
+  const size = match ? match[1] : undefined;
+  if (size) {
+    return parseInt(size);
+  } else {
+    return defaultValue;
+  }
+};

inspect_ai/_view/www/src/components/JsonPanel.css

@@ -0,0 +1,20 @@
+.json-panel {
+  width: 100%;
+  padding: 0.5em;
+}
+
+.json-panel:not(.simple) {
+  background: var(--bs-light);
+  border-radius: var(--bs-border-radius);
+}
+
+.json-panel .source-code {
+  font-size: var(--inspect-font-size-small);
+  white-space: pre-wrap;
+  word-wrap: anywhere;
+}
+
+/* Prism.js theme customizations can go here if needed */
+.language-javascript {
+  background: transparent !important;
+}

inspect_ai/_view/www/src/components/JsonPanel.tsx

@@ -0,0 +1,82 @@
+import clsx from "clsx";
+import { highlightElement } from "prismjs";
+import React, { useEffect, useMemo, useRef } from "react";
+import "./JSONPanel.css";
+
+const kPrismRenderMaxSize = 250000;
+
+interface JSONPanelProps {
+  id?: string;
+  data?: unknown;
+  json?: string;
+  simple?: boolean;
+  style?: React.CSSProperties;
+  className?: string | string[];
+}
+
+export const JSONPanel: React.FC<JSONPanelProps> = ({
+  id,
+  json,
+  data,
+  simple = false,
+  style,
+  className,
+}) => {
+  const codeRef = useRef<HTMLElement>(null);
+  const sourceCode = useMemo(() => {
+    return json || JSON.stringify(resolveBase64(data), undefined, 2);
+  }, [json, data]);
+
+  useEffect(() => {
+    if (sourceCode.length < kPrismRenderMaxSize && codeRef.current) {
+      highlightElement(codeRef.current);
+    }
+  }, [sourceCode]);
+
+  return (
+    <pre
+      className={clsx("json-panel", simple ? "simple" : "", className)}
+      style={style}
+    >
+      <code
+        id={id}
+        ref={codeRef}
+        className={clsx("source-code", "language-javascript")}
+      >
+        {sourceCode}
+      </code>
+    </pre>
+  );
+};
+
+export default JSONPanel;
+
+export const resolveBase64 = (value: any): any => {
+  const prefix = "data:image";
+
+  // Handle arrays recursively
+  if (Array.isArray(value)) {
+    return value.map((v) => resolveBase64(v));
+  }
+
+  // Handle objects recursively
+  if (value && typeof value === "object") {
+    const resolvedObject: Record<string, unknown> = {};
+    for (const key of Object.keys(value)) {
+      resolvedObject[key] = resolveBase64(value[key]);
+    }
+    return resolvedObject;
+  }
+
+  // Handle string values with protocol references
+  if (typeof value === "string") {
+    let resolvedValue = value;
+    if (resolvedValue.startsWith(prefix)) {
+      resolvedValue = "[base64 image]";
+    }
+    return resolvedValue;
+  }
+
+  // Return unchanged for other types
+  return value;
+};

inspect_ai/_view/www/src/components/LabeledValue.css

@@ -0,0 +1,20 @@
+.labeled-value-label {
+  font-size: var(--inspect-font-size-smaller);
+  margin-bottom: -0.2rem;
+}
+
+.labeled-value-value {
+  font-size: var(--inspect-font-size-base);
+}
+
+.labeled-value {
+  display: "flex";
+}
+
+.labeled-value .row {
+  flex-direction: row;
+}
+
+.labeled-value .column {
+  flex-direction: column;
+}

inspect_ai/_view/www/src/components/LabeledValue.tsx

@@ -0,0 +1,41 @@
+import clsx from "clsx";
+
+interface LabeledValueProps {
+  label: string;
+  style?: React.CSSProperties;
+  valueStyle?: React.CSSProperties;
+  layout?: "column" | "row";
+  children: React.ReactNode;
+  className?: string | string[];
+}
+
+export const LabeledValue: React.FC<LabeledValueProps> = ({
+  layout = "column",
+  style,
+  label,
+  children,
+  valueStyle,
+  className,
+}) => {
+  return (
+    <div
+      className={clsx(
+        "labeled-value",
+        layout === "column" ? "column" : "row",
+        className,
+      )}
+      style={{
+        ...style,
+      }}
+    >
+      <div
+        className={"labeled-value-label text-style-label text-style-secondary"}
+      >
+        {label}
+      </div>
+      <div className={"labeled-value-value"} style={{ ...valueStyle }}>
+        {children}
+      </div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/components/LargeModal.module.css

@@ -0,0 +1,54 @@
+.title {
+  flex: 1 1 auto;
+}
+
+.detail {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+.detailText {
+  display: flex;
+  align-items: center;
+}
+
+.close {
+  border-width: 0px;
+  font-weight: 300;
+  padding: 0em 0.5em;
+  flex: 1;
+  text-align: right;
+}
+
+.modal {
+  border-radius: var(--bs-border-radius);
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
+
+.modalBody {
+  max-width: 100%;
+  margin-left: var(--bs-modal-margin);
+  margin-right: var(--bs-modal-margin);
+}
+
+.content {
+  height: 100%;
+}
+
+.header {
+  padding: 0 0 0 1em;
+  display: flex;
+}
+
+.titleTool {
+  padding-top: 0;
+  padding-bottom: 0;
+  border: none;
+}