langchain-evolution-deck/slides/section5-ecosystem/slide-02.js

// Slide 02: Why LangSmith -- three pillars (observability, eval, datasets)
// Content slide with 3 pillar cards.

const ds = require('./design-system');

function createSlide(pres, theme) {
  const slide = pres.addSlide();
  ds.helpers.slideBase(slide, pres, theme);

  ds.helpers.addHeader(slide, pres, theme, {
    eyebrow: 'STAGE 5: ECOSYSTEM',
    section: 'Зачем LangSmith',
    title: 'Три столпа поверх LangChain/LangGraph',
    sectionNumber: 5,
  });

  // Lead paragraph
  slide.addText(
    'LangSmith -- SaaS-платформа (с self-hosted вариантом) для production-наблюдения ' +
    'и оценки LLM-приложений. Три ключевые возможности покрывают весь цикл: ' +
    'отладка в dev, метрики в prod, оценка качества на датасетах.',
    {
      x: 0.5, y: 1.5, w: 9.0, h: 0.7,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 13,
      color: theme.palette.text.secondary,
      align: 'left', valign: 'top',
      margin: 0,
    }
  );

  // Three pillar cards
  const pillars = [
    {
      title: 'Tracing',
      sub: 'observability',
      body: 'Каждый вызов Runnable, графа, tool логируется как Run с input/output, ' +
            'latency, token-cost. Дерево вызовов -- в UI, и через SDK.',
    },
    {
      title: 'Datasets',
      sub: 'eval sets',
      body: 'Версионируемые наборы примеров (input + expected output). ' +
            'Используются для off-line eval, regression-тестов, few-shot examples.',
    },
    {
      title: 'Evaluators',
      sub: 'quality scoring',
      body: 'LLM-as-judge, heuristic, human -- на выбор. Прогоняются на датасете, ' +
            'результаты привязываются к эксперименту (commit, prompt version).',
    },
  ];

  const cardW = 3.0;
  const cardH = 2.2;
  const gap = 0.15;
  const startX = 0.5;
  const cardY = 2.4;

  pillars.forEach((p, i) => {
    const x = startX + i * (cardW + gap);
    slide.addShape(pres.ShapeType.roundRect, {
      x: x, y: cardY, w: cardW, h: cardH,
      fill: { color: theme.palette.bg.elevated },
      line: { color: theme.palette.border.subtle, width: 1 },
      rectRadius: 0.1,
    });
    // Left accent bar
    slide.addShape(pres.ShapeType.rect, {
      x: x, y: cardY, w: 0.08, h: cardH,
      fill: { color: theme.palette.accent.secondary },
      line: { type: 'none' },
    });
    slide.addText(p.title, {
      x: x + 0.25, y: cardY + 0.2, w: cardW - 0.4, h: 0.45,
      fontFace: ds.helpers.withFallback(theme.fonts.code),
      fontSize: 22, bold: true,
      color: theme.palette.accent.secondary,
      valign: 'middle', margin: 0,
    });
    slide.addText(p.sub, {
      x: x + 0.25, y: cardY + 0.65, w: cardW - 0.4, h: 0.3,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 10, italic: true,
      color: theme.palette.text.muted,
      valign: 'middle', margin: 0,
    });
    slide.addText(p.body, {
      x: x + 0.25, y: cardY + 1.05, w: cardW - 0.4, h: cardH - 1.2,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 12,
      color: theme.palette.text.secondary,
      valign: 'top', margin: 0,
    });
  });

  // Bottom meta strip
  slide.addText(
    'Cloud: smith.langchain.com  |  SDK: langsmith==0.8.9  |  Self-hosted v0.9 (changelog 21.01.2025)',
    {
      x: 0.5, y: 4.8, w: 9.0, h: 0.3,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 10, italic: true,
      color: theme.palette.text.muted,
      align: 'left', valign: 'middle',
      margin: 0,
    }
  );

  ds.helpers.addSourceLine(slide, pres, theme, {
    source: 'docs.smith.langchain.com + reference.langchain.com/python/langsmith',
  });
  ds.helpers.addPageNumber(slide, pres, theme, 2);
}

module.exports = { createSlide };