evals 2.0.0 → 2.1.0

package/README.md

@@ -2,10 +2,37 @@
 
 An npm package for Arize evals functionality.
 
+## About Arize AI
+
+Arize AI is a leading company in AI observability and evaluation, dedicated to ensuring that artificial intelligence systems operate reliably in real-world applications. Founded in 2019, Arize provides tools that help machine learning teams monitor, troubleshoot, and improve model performance across various domains, including structured data, computer vision, and large language models (LLMs).
+
+## Arize Phoenix
+
+**Arize Phoenix** is an open-source library designed for LLM tracing and evaluation. It enables developers to evaluate, experiment, and optimize AI products in real time. Key features include:
+
+- **Application Tracing**: Collects LLM application data with automatic instrumentation, providing comprehensive visibility into model operations
+- **Interactive Prompt Playground**: Offers a flexible environment for prompt and model iteration, allowing users to compare prompts, visualize outputs, and debug failures within their workflow
+- **Streamlined Evaluations and Annotations**: Facilitates efficient assessment and documentation of model performance
+
+Phoenix is built on OpenTelemetry, ensuring seamless setup, full transparency, and no vendor lock-in. It's perfect for teams who want to get started with LLM observability and evaluation in a fully local, open-source environment.
+
+## Arize AX
+
+**Arize AX** is the enterprise AI engineering platform that extends the capabilities of Phoenix, offering a comprehensive suite for development, evaluation, and observability. Key features include:
+
+- **Prompts**: Tools for prompt engineering, including a prompt playground, prompt hub for management and versioning, and a prompt builder powered by AI
+- **Experiments**: Systematic A/B testing of prompts against large datasets to optimize model performance
+- **Tracing**: Detailed tracing capabilities to monitor and debug AI applications effectively
+- **Evaluation**: Comprehensive evaluation metrics and tools to assess model outputs and performance
+- **Alyx**: An AI engineering agent embedded within the platform to assist with various tasks
+
+Arize AX is designed to support teams and organizations with larger data needs, providing robust support, collaboration features, and multiple deployment options including SaaS, Virtual Private Cloud (VPC), and Arize Private Connect.
+
+
 ## Installation
 
 ```bash
-npm install
+npm install evals
 ```
 
 The post-install script will automatically launch the CLI interface.

package/cli.js

@@ -1,88 +1,70 @@
 #!/usr/bin/env node
 
-const blessed = require('blessed');
-const { exec } = require('child_process');
-
-const LOGO_105 = `
-{#FF008C-fg}                                                                  {black-fg} @@@@{/black-fg}                                 {/#FF008C-fg}
-{#FF008C-fg}               **                                                 {black-fg} @@@@{/black-fg}                                 {/#FF008C-fg}
-{#FF008C-fg}             ******                                                {black-fg}   {/black-fg}                                  {/#FF008C-fg}
-{#FF008C-fg}            ********                    {black-fg}@@@@@@  @@@@   @@@   @@@   @@@@  @@@@@@@@@@@@@       @@@@@@{/black-fg}     {/#FF008C-fg}
-{#FF008C-fg}           ***********               {black-fg}@@@@@@@@@@@@@@@   @@@@@@@@@   @@@@  @@@@@@@@@@@@@@   @@@@@@@@@@@@{/black-fg}  {/#FF008C-fg}
-{#FF008C-fg}         ******  ******             {black-fg}@@@@@     @@@@@@   @@@@@@@     @@@@         @@@@@@  @@@@@@    @@@@@{/black-fg} {/#FF008C-fg}
-{#FF008C-fg}        ******    ******           {black-fg}@@@@@       @@@@@   @@@@@       @@@@        @@@@@    @@@@        @@@@{/black-fg}{/#FF008C-fg}
-{#FF008C-fg}       ******       ******         {black-fg}@@@@         @@@@   @@@@        @@@@      @@@@@@     @@@@@@@@@@@@@@@@{/black-fg}{/#FF008C-fg}
-{#FF008C-fg}     ******          ******        {black-fg}@@@@        @@@@@   @@@@        @@@@     @@@@@       @@@@@@@@@@@@@@@@{/black-fg}{/#FF008C-fg}
-{#FF008C-fg}    ******            ******       {black-fg}@@@@@      @@@@@@   @@@@        @@@@   @@@@@         @@@@@           {/black-fg}{/#FF008C-fg}
-{#FF008C-fg}    *****               *****       {black-fg}@@@@@@@@@@@@@@@@   @@@@        @@@@  @@@@@@@@@@@@@@  @@@@@@@@@@@@@@{/black-fg} {/#FF008C-fg}
-{#FF008C-fg}      *       ****        *          {black-fg}@@@@@@@@@  @@@@   @@@@        @@@@  @@@@@@@@@@@@@@    @@@@@@@@@@@{/black-fg}   {/#FF008C-fg}
-{#FF008C-fg}             ******                                                                                     {/#FF008C-fg}
-{#FF008C-fg}              *****                                                                                     {/#FF008C-fg}
-`;
-
-const LOGO_75 = `
-{#FF008C-fg}                                              {black-fg}@@@@{/black-fg}                       {/#FF008C-fg}
-{#FF008C-fg}        *****                                 {black-fg}@@@@{/black-fg}                       {/#FF008C-fg}
-{#FF008C-fg}       *******            {black-fg}@@@@@@@@@@  @@@@@@@ @@@@ @@@@@@@@@@  @@@@@@@@@{/black-fg} {/#FF008C-fg}
-{#FF008C-fg}     ***** *****        {black-fg}@@@@@  @@@@@  @@@@@@@ @@@@ @@@@@@@@@  @@@@@  @@@@{/black-fg}{/#FF008C-fg}
-{#FF008C-fg}    *****   *****       {black-fg}@@@      @@@  @@@@    @@@@     @@@@  @@@@@@@@@@@@{/black-fg}{/#FF008C-fg}
-{#FF008C-fg}  *****       *****     {black-fg}@@@      @@@  @@@     @@@@  @@@@@    @@@@@@      {/black-fg}{/#FF008C-fg}
-{#FF008C-fg}  ****         *****    {black-fg}@@@@@@@@@@@@  @@@     @@@@ @@@@@@@@@@ @@@@@@@@@@@{/black-fg}{/#FF008C-fg}
-{#FF008C-fg}   *     ***     *        {black-fg}@@@@@@@@@@  @@@     @@@@ @@@@@@@@@@   @@@@@@@@{/black-fg}  {/#FF008C-fg}
-{#FF008C-fg}        *****                                                            {/#FF008C-fg}
-`
-
-const LOGO_51 = `
-{#FF008C-fg}      *                        {black-fg}@@@{/black-fg}                 {/#FF008C-fg}
-{#FF008C-fg}    ****                                           {/#FF008C-fg}
-{#FF008C-fg}   ******       {black-fg} @@@@@@@@ @@@@@ @@ @@@@@@@  @@@@@@ {/black-fg}{/#FF008C-fg}
-{#FF008C-fg} ****  ****     {black-fg}@@    @@@ @@    @@    @@@  @@@@ @@@{/black-fg}{/#FF008C-fg}
-{#FF008C-fg}****     ***    {black-fg}@@    @@@ @@    @@  @@@    @@      {/black-fg}{/#FF008C-fg}
-{#FF008C-fg}**    *   ***    {black-fg}@@@@@@@@ @@    @@ @@@@@@@  @@@@@@@{/black-fg}{/#FF008C-fg}
-{#FF008C-fg}     ***                                           {/#FF008C-fg}
-`
+import React, { useState, useEffect } from 'react';
+import { render, Box, Text, useInput, useApp, Static } from 'ink';
+import Gradient from 'ink-gradient';
+import { exec } from 'child_process';
+
+const e = React.createElement;
+
+// "ARIZE EVALS" - EXACTLY matched width (both 44 chars)
+const largeLogo = `
+ █████╗   ██████╗    ██╗  ███████╗  ███████╗
+██╔══██╗  ██╔══██╗   ██║  ╚══███╔╝  ██╔════╝
+███████║  ██████╔╝   ██║    ███╔╝   █████╗
+██╔══██║  ██╔══██╗   ██║   ███╔╝    ██╔══╝
+██║  ██║  ██║  ██║   ██║  ███████╗  ███████╗
+╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚═╝  ╚══════╝  ╚══════╝
+███████╗ ██╗   ██╗  █████╗  ██╗     ███████╗
+██╔════╝ ██║   ██║ ██╔══██╗ ██║     ██╔════╝
+█████╗   ██║   ██║ ███████║ ██║     ███████╗
+██╔══╝   ╚██╗ ██╔╝ ██╔══██║ ██║     ╚════██║
+███████╗  ╚████╔╝  ██║  ██║ ███████╗███████║
+╚══════╝   ╚═══╝   ╚═╝  ╚═╝ ╚══════╝╚══════╝`;
+
+const mediumLogo = `
+ █████╗   ██████╗    ██╗  ███████╗  ███████╗
+██╔══██╗  ██╔══██╗   ██║  ╚══███╔╝  ██╔════╝
+███████║  ██████╔╝   ██║    ███╔╝   █████╗
+██╔══██║  ██╔══██╗   ██║   ███╔╝    ██╔══╝
+██║  ██║  ██║  ██║   ██║  ███████╗  ███████╗
+╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚═╝  ╚══════╝  ╚══════╝
+█▀▀ █ █ ▄▀█ █   █▀
+██▄ ▀▄▀ █▀█ █▄▄ ▄█`;
+
+const smallLogo = `ARIZE
+EVALS`;
 
 const OPTIONS = [
-  { name: '1. Getting started with AI? Learn about evals.', value: 'option1' },
-  { name: '2. Arize is now installed! Learn how to integrate it into your app.', value: 'option2' },
-  { name: '3. I want to see what Arize does', value: 'option3' },
-  { name: '4. I want to speak to an Arize expert', value: 'option4' }
-];
-
-function detectColorMode() {
-  // COLORFGBG format is typically "foreground;background" (e.g., "15;0")
-  const colorfgbg = process.env.COLORFGBG;
-  if (!colorfgbg) {
-    // Default to dark mode if COLORFGBG is not set
-    return 'dark';
+  {
+    name: 'Evals Primer',
+    subtext: 'Learn the Craft',
+    url: 'https://arize.com/llm-evaluation/?utm_source=npmevals'
+  },
+  {
+    name: 'Arize AX SaaS',
+    subtext: 'Enterprise Agent Evaluation, Best in Class',
+    url: 'https://arize.com/docs/ax?utm_source=npmevals'
+  },
+  {
+    name: 'Arize Phoenix',
+    subtext: 'OSS Agent Evals & Traces, Fully Local',
+    url: 'https://arize.com/docs/phoenix?utm_source=npmevals'
+  },
+  {
+    name: 'Book an Eval Assessment',
+    subtext: 'Improve Your Agent Today',
+    url: 'https://arize.com/get-an-eval-assessment?utm_source=npmevals'
   }
-
-  const parts = colorfgbg.split(';');
-  if (parts.length < 2) {
-    return 'dark';
-  }
-
-  const bgColor = parseInt(parts[parts.length - 1], 10);
-  
-  // Background colors: 0 = black (dark), 7 = white (light), 15 = bright white (light)
-  // Also consider 8-15 as potentially light colors
-  if (bgColor === 0 || (bgColor >= 1 && bgColor <= 6)) {
-    return 'dark';
-  } else {
-    return 'light';
-  }
-}
+];
 
 function openUrlInBrowser(url) {
-  console.log(`\nOpening ${url} in your browser...\n`);
-  
-  // Open URL in browser (works on macOS, Linux, and Windows)
-  const command = process.platform === 'win32' 
-    ? `start ${url}` 
-    : process.platform === 'darwin' 
-      ? `open "${url}"` 
+  const command = process.platform === 'win32'
+    ? `start ${url}`
+    : process.platform === 'darwin'
+      ? `open "${url}"`
       : `xdg-open "${url}"`;
-  
+
   exec(command, (error) => {
     if (error) {
       console.error(`Failed to open browser: ${error.message}`);
@@ -91,142 +73,137 @@ function openUrlInBrowser(url) {
   });
 }
 
-function showMenu() {
-  // Create a screen object
-  const screen = blessed.screen({
-    smartCSR: true,
-    title: 'Arize Evals'
-  });
+// Header with hot pink to dark blue gradient
+function Header() {
+  const terminalWidth = process.stdout.columns || 80;
 
-  // Detect color mode from COLORFGBG
-  const colorMode = detectColorMode();
-  const isLightMode = colorMode === 'light';
-
-  // Select logo based on terminal width
-  const width = process.stdout.columns;
-  let selectedLogo;
-  let logoHeight;
-  let leftMargin;
-  if (width >= 105) {
-    selectedLogo = LOGO_105;
-    logoHeight = 16
-    leftMargin = 4
-  } else if (width >= 75) {
-    selectedLogo = LOGO_75;
-    logoHeight = 11
-    leftMargin = 2
+  let logo;
+  if (terminalWidth >= 45) {
+    logo = largeLogo;
+  } else if (terminalWidth >= 35) {
+    logo = mediumLogo;
   } else {
-    selectedLogo = LOGO_51;
-    logoHeight = 9
-    leftMargin = 0
+    logo = smallLogo;
   }
 
-  // Create a box for the ASCII art
-  const artBox = blessed.box({
-    top: 2,
-    left: 0,
-    width: '100%',
-    height: 'shrink',
-    content: selectedLogo,
-    tags: true,
-    style: {
-      bg: '#fff'
-    }
-  });
+  return e(Box, { flexDirection: 'column', marginBottom: 1 },
+    e(Gradient, { colors: ['#FF008C', '#FF1493', '#8B5CF6', '#1E3A8A'] },
+      e(Text, null, logo)
+    ),
+    e(Text, { color: 'gray', italic: true }, 'Evals and Observability for Agentic AI')
+  );
+}
 
-  // Create a box for the menu title
-  const titleBox = blessed.box({
-    top: logoHeight + 2,
-    left: leftMargin,
-    width: 'shrink',
-    height: 1,
-    content: 'Select an option:',
-    tags: true,
-    style: {
-      fg: isLightMode ? 'black' : 'white',
-      bold: true
-    }
-  });
+// Character-by-character shimmer component
+function ShimmerText({ text, shimmerPos }) {
+  const baseColor = '#FF1493';
+  const shimmerColors = ['#FF5AA7', '#FF85C0', '#FFB8D9', '#FFE0EE', '#FFB8D9', '#FF85C0', '#FF5AA7'];
+  const shimmerWidth = shimmerColors.length;
 
-  // Create a list for the menu options
-  const list = blessed.list({
-    top: logoHeight + 3,
-    left: leftMargin,
-    width: 80,
-    height: 8,
-    keys: true,
-    mouse: true,
-    vi: true,
-    items: OPTIONS.map(opt => opt.name),
-    style: {
-      selected: {
-        bg: 'blue',
-        fg: 'white',
-        bold: true
-      },
-      item: {
-        fg: isLightMode ? 'black' : 'white',
-      }
-    },
-    border: {
-      type: 'line'
+  const chars = text.split('').map((char, i) => {
+    const distanceFromShimmer = i - shimmerPos;
+
+    let color = baseColor;
+    if (distanceFromShimmer >= 0 && distanceFromShimmer < shimmerWidth) {
+      color = shimmerColors[distanceFromShimmer];
     }
-  });
 
-  // Handle selection
-  list.on('select', (item) => {
-    const selectedIndex = list.selected;
-    const selectedOption = OPTIONS[selectedIndex];
-    handleOption(selectedOption.value, screen);
+    return e(Text, { key: i, color, bold: true }, char);
   });
 
-  // Handle mouse clicks
-  list.on('click', (data) => {
-    const selectedIndex = list.selected;
-    const selectedOption = OPTIONS[selectedIndex];
-    handleOption(selectedOption.value, screen);
-  });
+  return e(Box, null, ...chars);
+}
 
-  // Quit on Escape, q, or Control-C
-  screen.key(['escape', 'q', 'C-c'], () => {
-    return screen.destroy();
-  });
+// Menu item component - single line, hot pink selected with character shimmer
+function MenuItem({ name, subtext, isSelected, shimmerPos }) {
+  if (isSelected) {
+    return e(Box, null,
+      e(Text, { bold: true, color: '#FF1493' }, '❯ '),
+      e(ShimmerText, { text: name, shimmerPos }),
+      e(Text, { color: 'gray' }, ' — ' + subtext)
+    );
+  }
 
-  // Append all the elements
-  screen.append(artBox);
-  screen.append(titleBox);
-  screen.append(list);
+  return e(Box, null,
+    e(Text, { color: 'white' }, '  ' + name),
+    e(Text, { color: 'gray' }, ' — ' + subtext)
+  );
+}
 
-  // Focus on the list so it can receive input
-  list.focus();
+// Main App component
+function App() {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [shimmerPos, setShimmerPos] = useState(-7); // Start off-screen
+  const { exit } = useApp();
+
+  const selectedName = OPTIONS[selectedIndex].name;
+
+  // Character-by-character shimmer animation
+  useEffect(() => {
+    const textLength = selectedName.length;
+    const shimmerWidth = 7;
+    const totalPositions = textLength + shimmerWidth + 5; // Extra padding for smooth loop
+
+    const timer = setInterval(() => {
+      setShimmerPos(prev => {
+        const next = prev + 1;
+        return next > totalPositions ? -shimmerWidth : next;
+      });
+    }, 120); // Speed of shimmer movement
+
+    return () => clearInterval(timer);
+  }, [selectedName]);
+
+  // Reset shimmer position when selection changes
+  useEffect(() => {
+    setShimmerPos(-7);
+  }, [selectedIndex]);
+
+  useInput((input, key) => {
+    if (input === 'q' || key.escape) {
+      exit();
+      return;
+    }
 
-  // Render the screen
-  screen.render();
-}
+    if (key.upArrow || input === 'k') {
+      setSelectedIndex(prev => (prev > 0 ? prev - 1 : OPTIONS.length - 1));
+    }
 
-function handleOption(option, screen) {
-  screen.destroy();
-  console.clear();
-  
-  if (option === 'option1') {
-    openUrlInBrowser('https://arize.com/docs/ax/evaluate/evaluators');
-  } else if (option === 'option2') {
-    openUrlInBrowser('https://arize.com/docs/ax/observe/tracing/setup');
-  } else if (option === 'option3') {
-    openUrlInBrowser('https://www.youtube.com/watch?v=QPMwpX8uzUI');
-  } else if (option === 'option4') {
-    openUrlInBrowser('?')
-  } else {
-    console.log(`\nYou selected: ${option}`);
-    console.log('(Implementation coming soon)\n');
-    process.exit(0);
-  }
-}
+    if (key.downArrow || input === 'j') {
+      setSelectedIndex(prev => (prev < OPTIONS.length - 1 ? prev + 1 : 0));
+    }
 
-// Run the CLI
-try {
-  showMenu();
-} catch (error) {
-  console.error('Error:', error);
-  process.exit(1);
+    if (key.return) {
+      const selected = OPTIONS[selectedIndex];
+      exit();
+      setTimeout(() => {
+        console.log(`\nOpening ${selected.url} in your browser...\n`);
+        openUrlInBrowser(selected.url);
+      }, 100);
+    }
+  });
+
+  return e(Box, { flexDirection: 'column', padding: 1 },
+    e(Static, { items: ['header'] }, () => e(Header)),
+    e(Box, { marginBottom: 1 },
+      e(Text, { bold: true, color: 'white' }, 'Select an option:')
+    ),
+    e(Box, { flexDirection: 'column', paddingX: 1 },
+      ...OPTIONS.map((option, index) =>
+        e(MenuItem, {
+          key: index.toString(),
+          name: option.name,
+          subtext: option.subtext,
+          isSelected: index === selectedIndex,
+          shimmerPos: shimmerPos
+        })
+      )
+    ),
+    e(Box, { marginTop: 1 },
+      e(Text, { dimColor: true }, 'Enter to select · ↑↓ to navigate · Esc to cancel')
+    )
+  );
 }
+
+// Run the app
+render(e(App), { patchConsole: false });

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "evals",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Arize evals package",
-  "main": "index.js",
+  "type": "module",
+  "main": "cli.js",
   "scripts": {
     "postinstall": "node cli.js",
     "start": "node cli.js"
   },
   "dependencies": {
     "@arizeai/phoenix-otel": "*",
-    "blessed": "^0.1.81"
+    "ink": "^6.0.0",
+    "ink-gradient": "^3.0.0",
+    "react": "^19.0.0"
   },
   "bin": {
     "evals": "./cli.js"
@@ -21,4 +24,3 @@
   "author": "",
   "license": "ISC"
 }
-