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

inspect_ai/_view/www/src/usage/TokenTable.tsx

@@ -0,0 +1,91 @@
+import clsx from "clsx";
+import { ModelUsage1 } from "../types/log";
+import { ModelUsagePanel } from "./ModelUsagePanel";
+import styles from "./TokenTable.module.css";
+
+interface TokenTableProps {
+  className?: string | string[];
+  children?: React.ReactNode;
+}
+
+export const TokenTable: React.FC<TokenTableProps> = ({
+  className,
+  children,
+}) => {
+  return (
+    <table
+      className={clsx(
+        "table",
+        "table-sm",
+        "text-size-smaller",
+        styles.table,
+        className,
+      )}
+    >
+      {children}
+    </table>
+  );
+};
+
+export const TokenHeader = () => {
+  return (
+    <thead>
+      <tr>
+        <td></td>
+        <td
+          colSpan={3}
+          className={clsx(
+            "card-subheading",
+            styles.tableTokens,
+            "text-size-small",
+            "text-style-label",
+            "text-style-secondary",
+          )}
+          align="center"
+        >
+          Tokens
+        </td>
+      </tr>
+      <tr>
+        <th
+          className={clsx(
+            styles.tableH,
+            "text-sixe-small",
+            "text-style-label",
+            "text-style-secondary",
+          )}
+        >
+          Model
+        </th>
+        <th
+          className={clsx(
+            styles.tableH,
+            "text-sixe-small",
+            "text-style-label",
+            "text-style-secondary",
+          )}
+        >
+          Usage
+        </th>
+      </tr>
+    </thead>
+  );
+};
+
+interface TokenRowProps {
+  model: string;
+  usage: ModelUsage1;
+}
+
+export const TokenRow: React.FC<TokenRowProps> = ({ model, usage }) => {
+  return (
+    <tr>
+      <td>
+        <div className={styles.model}>{model}</div>
+      </td>
+      <td>
+        <ModelUsagePanel usage={usage} />
+      </td>
+    </tr>
+  );
+};

inspect_ai/_view/www/src/usage/UsageCard.module.css

@@ -0,0 +1,15 @@
+.wrapper {
+  padding-top: 0;
+  padding-bottom: 1em;
+  margin-left: 0.5em;
+  display: flex;
+}
+
+.col1 {
+  flex: 1 1 40%;
+  margin-right: 1em;
+}
+
+.col2 {
+  flex: 1 1 60%;
+}

inspect_ai/_view/www/src/usage/UsageCard.tsx

@@ -0,0 +1,67 @@
+import clsx from "clsx";
+import { FontSize } from "../appearance/fonts";
+import { ApplicationIcons } from "../appearance/icons";
+import { Card, CardBody, CardHeader } from "../components/Card";
+import { MetaDataView } from "../metadata/MetaDataView";
+import { EvalStats } from "../types/log";
+import { formatDuration } from "../utils/format";
+import { ModelTokenTable } from "./ModelTokenTable";
+
+import styles from "./UsageCard.module.css";
+
+const kUsageCardBodyId = "usage-card-body";
+
+interface UsageCardProps {
+  stats?: EvalStats;
+}
+
+/**
+ * Renders the UsageCard component.
+ */
+export const UsageCard: React.FC<UsageCardProps> = ({ stats }) => {
+  if (!stats) {
+    return null;
+  }
+
+  const totalDuration = formatDuration(
+    new Date(stats.started_at),
+    new Date(stats.completed_at),
+  );
+  const usageMetadataStyle = {
+    fontSize: FontSize.smaller,
+  };
+
+  return (
+    <Card>
+      <CardHeader icon={ApplicationIcons.usage} label="Usage" />
+      <CardBody id={kUsageCardBodyId}>
+        <div className={styles.wrapper}>
+          <div className={styles.col1}>
+            <div
+              className={clsx(
+                "text-size-smaller",
+                "text-style-label",
+                "text-style-secondary",
+              )}
+            >
+              Duration
+            </div>
+            <MetaDataView
+              entries={{
+                ["Start"]: new Date(stats.started_at).toLocaleString(),
+                ["End"]: new Date(stats.completed_at).toLocaleString(),
+                ["Duration"]: totalDuration,
+              }}
+              tableOptions="borderless,sm"
+              style={usageMetadataStyle}
+            />
+          </div>
+
+          <div className={styles.col2}>
+            <ModelTokenTable model_usage={stats.model_usage} />
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};

inspect_ai/_view/www/src/utils/attachments.ts

@@ -0,0 +1,42 @@
+/**
+ * Resolves individual value by replacing protocol references with attachment content
+ */
+export const resolveAttachments = (
+  value: any,
+  attachments: Record<string, string>,
+): any => {
+  const kContentProtocol = "tc://";
+  const kAttachmentProtocol = "attachment://";
+
+  // Handle arrays recursively
+  if (Array.isArray(value)) {
+    return value.map((v) => resolveAttachments(v, attachments));
+  }
+
+  // Handle objects recursively
+  if (value && typeof value === "object") {
+    const resolvedObject: Record<string, unknown> = {};
+    for (const key of Object.keys(value)) {
+      resolvedObject[key] = resolveAttachments(value[key], attachments);
+    }
+    return resolvedObject;
+  }
+
+  // Handle string values with protocol references
+  if (typeof value === "string") {
+    let resolvedValue = value;
+    if (resolvedValue.startsWith(kContentProtocol)) {
+      resolvedValue = resolvedValue.replace(
+        kContentProtocol,
+        kAttachmentProtocol,
+      );
+    }
+    if (resolvedValue.startsWith(kAttachmentProtocol)) {
+      return attachments[resolvedValue.replace(kAttachmentProtocol, "")];
+    }
+    return resolvedValue;
+  }
+
+  // Return unchanged for other types
+  return value;
+};

inspect_ai/_view/www/src/utils/{Base64.mjs → base64.ts}

@@ -1,12 +1,7 @@
-// @ts-check
-
 /**
  * Determines whether a string is a base64 encoded string
- *
- * @param {string} str - The string to check
- * @returns {boolean} - Whether the string is a base64 encoded string
  */
-export const isBase64 = (str) => {
+export const isBase64 = (str: string): boolean => {
   const base64Pattern =
     /^(?:[A-Za-z0-9+/]{4})*?(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
   return base64Pattern.test(str);

inspect_ai/_view/www/src/{components/Browser.mjs → utils/browser.ts}

@@ -1,4 +1,3 @@
-// @ts-check
 /**
  * Clears the current text selection in the document.
  */

inspect_ai/_view/www/src/utils/debugging.ts

@@ -0,0 +1,28 @@
+export function printCircularReferences(obj: Record<string, unknown>): void {
+  const seenObjects = new WeakMap<object, string>();
+
+  function detect(value: unknown, path: string = ""): void {
+    // Only proceed if value is an object (not null)
+    if (value !== null && typeof value === "object") {
+      // Check if we've seen this object before
+      if (seenObjects.has(value as object)) {
+        console.log(
+          `Circular reference detected at path: ${seenObjects.get(value as object)}`,
+        );
+        return;
+      }
+
+      // Store the current path for this object
+      seenObjects.set(value as object, path);
+
+      // Recursively check all properties
+      for (const key in value) {
+        if (Object.prototype.hasOwnProperty.call(value, key)) {
+          detect((value as Record<string, unknown>)[key], `${path}.${key}`);
+        }
+      }
+    }
+  }
+
+  detect(obj, "root");
+}

inspect_ai/_view/www/src/utils/dom.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+
+// Custom hook to observe size changes
+export const useResizeObserver = (
+  callback: (entry: ResizeObserverEntry) => void,
+) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    observerRef.current = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        callback(entries[0]);
+      }
+    });
+
+    observerRef.current.observe(element);
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [callback]);
+
+  return elementRef;
+};

inspect_ai/_view/www/src/utils/format.ts

@@ -0,0 +1,194 @@
+import {
+  ChatMessageAssistant,
+  ChatMessageSystem,
+  ChatMessageTool,
+  ChatMessageUser,
+} from "../types/log";
+
+/**
+ * Converts an array or a single value to a comma-separated string.
+ */
+export const arrayToString = (val: string | string[]): string => {
+  val = Array.isArray(val) ? val : [val];
+  return val.join(", ");
+};
+
+/**
+ * Gets a string for a sample input.
+ */
+export const inputString = (
+  input:
+    | string
+    | Array<
+        | ChatMessageUser
+        | ChatMessageSystem
+        | ChatMessageAssistant
+        | ChatMessageTool
+      >,
+): string[] => {
+  if (typeof input === "string") {
+    return [input];
+  } else {
+    return input.map((inp) => {
+      if (typeof inp === "string") {
+        return inp;
+      } else {
+        const content = inp.content;
+        if (typeof content === "string") {
+          return content;
+        } else {
+          const result = content.map((con) => {
+            if (con.type === "text") {
+              return con.text;
+            } else {
+              return "";
+            }
+          });
+          return result.join("\n");
+        }
+      }
+    });
+  }
+};
+
+/**
+ * Formats dataset information into a string.
+ */
+export const formatDataset = (
+  samples: number,
+  epochs: number,
+  name: string | null,
+): string => {
+  const perEpochSamples = epochs > 0 ? samples / epochs : samples;
+  const namePrefix = name ? `${name} — ` : "";
+
+  const terms: string[] = [
+    namePrefix,
+    String(perEpochSamples),
+    epochs > 1 ? `x ${epochs} ` : "",
+    samples === 1 ? "sample" : "samples",
+  ];
+
+  return terms.join(" ");
+};
+
+/**
+ * Formats a duration given in seconds into a human-readable string.
+ */
+export const formatTime = (seconds: number): string => {
+  if (seconds < 60) {
+    return `${seconds} sec`;
+  } else if (seconds < 60 * 60) {
+    return `${Math.floor(seconds / 60)} min ${seconds % 60} sec`;
+  } else if (seconds < 60 * 60 * 24) {
+    const hours = Math.floor(seconds / (60 * 60));
+    const minutes = Math.floor((seconds % (60 * 60)) / 60);
+    const remainingSeconds = seconds % 60;
+    return `${hours} hr ${minutes} min ${remainingSeconds} sec`;
+  } else {
+    const days = Math.floor(seconds / (60 * 60 * 24));
+    const hours = Math.floor((seconds % (60 * 60 * 24)) / (60 * 60));
+    const minutes = Math.floor((seconds % (60 * 60)) / 60);
+    const remainingSeconds = seconds % 60;
+    return `${days} days ${hours} hr ${minutes} min ${remainingSeconds} sec`;
+  }
+};
+
+/**
+ * Formats a number to a string with specific decimal places for prettiness.
+ */
+export function formatPrettyDecimal(num: number): string {
+  const numDecimalPlaces = num.toString().includes(".")
+    ? num.toString().split(".")[1].length
+    : 0;
+
+  if (numDecimalPlaces === 0) {
+    return num.toFixed(1);
+  } else if (numDecimalPlaces > 3) {
+    return num.toFixed(3);
+  } else {
+    return num.toString();
+  }
+}
+
+/**
+ * Formats a number to a string without trailing zeroes after the decimal point.
+ */
+export function formatDecimalNoTrailingZeroes(num: number): string {
+  // This isn't a number, continue
+  // TODO: Remove this, its crazy
+  if (typeof num !== "number") {
+    return num;
+  }
+
+  if (num.toString().includes(".")) {
+    const decimal = num.toString().split(".")[1];
+    const trimmed = decimal.replace(/\.?0+$/, "");
+    return num.toFixed(trimmed.length);
+  } else {
+    return num.toFixed(0);
+  }
+}
+
+/**
+ * Converts a string to title case.
+ */
+export function toTitleCase(str: string): string {
+  return str
+    .split(" ")
+    .map((w) => w[0].toUpperCase() + w.substr(1).toLowerCase())
+    .join(" ");
+}
+
+/**
+ * Formats a number to a string without trailing zeroes after the decimal point.
+ */
+export function formatNoDecimal(num: number): string {
+  // This isn't a number, continue
+  // TODO: remove This is crazy
+  if (typeof num !== "number") {
+    return num;
+  }
+
+  // Round to a whole number
+  const rounded = Math.round(num);
+  return rounded.toFixed(0);
+}
+
+/**
+ * Formats a number to a string without trailing zeroes after the decimal point.
+ */
+export function formatNumber(num: number): string {
+  return num.toLocaleString(navigator.language, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 5,
+  });
+}
+
+/**
+ * Formats a number to a string without trailing zeroes after the decimal point.
+ */
+export function formatDateTime(date: Date): string {
+  const options = {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true,
+  };
+
+  // Use the default system locale and timezone
+  // @ts-ignore
+  return new Intl.DateTimeFormat(undefined, options).format(date);
+}
+
+/**
+ * Returns the formatted duration between two dates
+ */
+export function formatDuration(start: Date, end: Date): string {
+  const durationMs = end.getTime() - start.getTime();
+  const durationSec = durationMs / 1000;
+  return formatTime(durationSec);
+}

inspect_ai/_view/www/src/utils/git.ts

@@ -0,0 +1,7 @@
+/**
+ * Generates a GitHub commit URL based on the repository origin URL and the commit hash.
+ */
+export const ghCommitUrl = (origin: string, commit: string): string => {
+  const baseUrl = origin.replace(/\.git$/, "");
+  return `${baseUrl}/commit/${commit}`;
+};

inspect_ai/_view/www/src/utils/html.ts

@@ -0,0 +1,6 @@
+/**
+ * Escapes special characters in a string to make it safe for use in a CSS selector.
+ */
+export function escapeSelector(id: string): string {
+  return id.replace(/([ #.;,?!+*~'":^$[\]()=>|/\\])/g, "\\$1");
+}

inspect_ai/_view/www/src/utils/http.ts

@@ -0,0 +1,14 @@
+/**
+ * Fetches a range of bytes from a remote resource and returns it as a `Uint8Array`.
+ */
+export const fetchRange = async (
+  url: string,
+  start: number,
+  end: number,
+): Promise<Uint8Array> => {
+  const response = await fetch(url, {
+    headers: { Range: `bytes=${start}-${end}` },
+  });
+  const arrayBuffer = await response.arrayBuffer();
+  return new Uint8Array(arrayBuffer);
+};

inspect_ai/_view/www/src/utils/{Path.mjs → path.ts}

@@ -1,11 +1,7 @@
-// @ts-check
 /**
  * Extracts the filename without extension from a given path.
- *
- * @param {string} path - The full path of the file.
- * @returns {string} - The filename without its extension, or the original path if no extension is found.
  */
-export const filename = (path) => {
+export const filename = (path: string): string => {
   const pathparts = path.split("/");
   const basename = pathparts.slice(-1)[0];
   const match = basename.match(/(.*)\.\S+$/);
@@ -18,11 +14,8 @@ export const filename = (path) => {
 
 /**
  * Extracts the directory name from a given path.
- *
- * @param {string} path - The full path of the file.
- * @returns {string} - The directory name, or an empty string if no directory is found.
  */
-export const dirname = (path) => {
+export const dirname = (path: string): string => {
   const pathparts = path.split("/");
 
   // If the path ends with a filename (or no slashes), remove the last part (filename)

inspect_ai/_view/www/src/utils/{Print.mjs → print.ts}

@@ -1,22 +1,19 @@
 /**
  * Opens a new window and prints the provided HTML content with optional custom CSS for printing.
  *
- * @param {string} html - The HTML content to be printed in the new window.
- * @param {string} css - Custom CSS that will be applied when the print media is active.
- *
- * @example
  * // Example usage:
  * printHtml('<h1>Hello World</h1>', 'h1 { color: red; }');
  */
-export const printHtml = (html, css) => {
+export const printHtml = (html: string, css: string) => {
   // Open a new window
   const printWindow = window.open("", "", "height=600,width=800");
 
-  // Write the element's content into the new window
-  printWindow.document.write("<html><head><title>Print</title>");
+  if (printWindow !== null) {
+    // Write the element's content into the new window
+    printWindow.document.write("<html><head><title>Print</title>");
 
-  // Inject custom print CSS
-  printWindow.document.write(`
+    // Inject custom print CSS
+    printWindow.document.write(`
           <link rel="stylesheet" crossorigin="" href="./assets/index.css">
           <style>
             @media print {
@@ -25,19 +22,22 @@ export const printHtml = (html, css) => {
           </style>
         `);
 
-  printWindow.document.write("</head><body>");
-  printWindow.document.write(html);
-  printWindow.document.write("</body></html>");
+    printWindow.document.write("</head><body>");
+    printWindow.document.write(html);
+    printWindow.document.write("</body></html>");
 
-  // Close the document to complete the writing process
-  printWindow.document.close();
+    // Close the document to complete the writing process
+    printWindow.document.close();
 
-  // Wait for the window to load fully before triggering the print
-  printWindow.onload = function () {
-    printWindow.focus(); // Ensure the window is focused
-    printWindow.print(); // Trigger the print
-    printWindow.close(); // Close the window after printing
-  };
+    // Wait for the window to load fully before triggering the print
+    printWindow.onload = function () {
+      printWindow.focus(); // Ensure the window is focused
+      printWindow.print(); // Trigger the print
+      printWindow.close(); // Close the window after printing
+    };
+  } else {
+    console.error("Print window failed to open.");
+  }
 };
 
 /**
@@ -47,17 +47,25 @@ export const printHtml = (html, css) => {
  * 'task-model', and 'task-created', respectively. The generated HTML will display these elements in a
  * three-column grid with custom styling.
  *
- * @returns {string} - The generated HTML string containing the task information.
- *
  * @example
  * // Example usage:
  * const headingHtml = printHeadingHtml();
  * console.log(headingHtml);
  */
-export const printHeadingHtml = () => {
-  const task = document.getElementById("task-title").innerText;
-  const model = document.getElementById("task-model").innerText;
-  const time = document.getElementById("task-created").innerText;
+export const printHeadingHtml = (): string => {
+  const taskEl = document.getElementById("task-title");
+  const modelEl = document.getElementById("task-model");
+  const timeEl = document.getElementById("task-created");
+
+  if (!taskEl || !modelEl || !timeEl) {
+    throw new Error(
+      "Failed to compute heading HTML. The task, model, or time element can't be found.",
+    );
+  }
+
+  const task = taskEl.innerText;
+  const model = modelEl.innerText;
+  const time = timeEl.innerText;
 
   // Get the task name, date, model
   const headingHtml = `