langchain-evolution-deck/slides/section1-chains/slide-01.js

// Slide 01: Section cover -- Stage 1 / Chains
// Asymmetric layout: big section number + title block on left, code-window mock on right.
// Sets the stage: "what is LangChain, why it's the foundation for everything else."

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

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

  // Left vertical accent stripe -- teal
  slide.addShape(pres.ShapeType.rect, {
    x: 0, y: 0, w: 0.25, h: 5.625,
    fill: { color: theme.palette.accent.primary },
    line: { type: 'none' },
  });

  // Top tag pill: section meta
  slide.addShape(pres.ShapeType.roundRect, {
    x: 0.7, y: 0.55, w: 2.4, h: 0.36,
    fill: { color: theme.palette.accent.primary },
    line: { type: 'none' },
    rectRadius: 0.18,
  });
  slide.addText('STAGE 1  |  CHAINS', {
    x: 0.7, y: 0.55, w: 2.4, h: 0.36,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 10, bold: true,
    color: theme.palette.bg.primary,
    align: 'center', valign: 'middle',
    charSpacing: 4, margin: 0,
  });

  // Main title -- very large, but constrained to left half so it does not
  // collide with the LCEL pipeline mock on the right.
  slide.addText('LangChain 1.0', {
    x: 0.7, y: 1.15, w: 5.9, h: 1.0,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 56, bold: true,
    color: theme.palette.text.primary,
    align: 'left', valign: 'middle',
    margin: 0,
  });

  // Subtitle
  slide.addText('chains, LCEL, agents, retrievers', {
    x: 0.7, y: 2.15, w: 9, h: 0.55,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 26,
    color: theme.palette.accent.tertiary,
    align: 'left', valign: 'middle',
    margin: 0,
  });

  // Description block -- what this section covers
  slide.addText(
    'Фундамент: композиция через LCEL (| pipe), унифицированный init_chat_model, ' +
    'output parsers, retrievers, tools, память, middleware. ' +
    'Всё, что нужно, чтобы собрать production-ready LLM-приложение ' +
    'до перехода к LangGraph и Deep Agents.',
    {
      x: 0.7, y: 2.85, w: 5.7, h: 1.6,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 13,
      color: theme.palette.text.secondary,
      align: 'left', valign: 'top',
      margin: 0,
    }
  );

  // Decorative right-side block -- abstract "LCEL pipeline" mock
  // Three boxes connected by | pipes, evoking prompt | model | parser
  const codeX = 6.7;
  const codeY = 1.55;
  const codeW = 2.85;
  const codeH = 3.05;

  slide.addShape(pres.ShapeType.roundRect, {
    x: codeX, y: codeY, w: codeW, h: codeH,
    fill: { color: theme.palette.bg.elevated },
    line: { color: theme.palette.border.subtle, width: 1 },
    rectRadius: 0.1,
  });

  // Title inside the card
  slide.addText('prompt  |  model  |  parser', {
    x: codeX + 0.15, y: codeY + 0.2, w: codeW - 0.3, h: 0.4,
    fontFace: ds.helpers.withFallback(theme.fonts.code),
    fontSize: 14, bold: true,
    color: theme.palette.accent.tertiary,
    align: 'center', valign: 'middle',
    margin: 0,
  });

  // Three mock boxes connected vertically
  const boxes = [
    { label: 'ChatPromptTemplate', color: theme.palette.accent.tertiary, y: codeY + 0.75 },
    { label: 'ChatModel',          color: theme.palette.accent.primary,  y: codeY + 1.55 },
    { label: 'OutputParser',       color: theme.palette.accent.secondary, y: codeY + 2.35 },
  ];
  boxes.forEach((b) => {
    slide.addShape(pres.ShapeType.roundRect, {
      x: codeX + 0.4, y: b.y, w: codeW - 0.8, h: 0.5,
      fill: { color: theme.palette.bg.code },
      line: { color: b.color, width: 1.25 },
      rectRadius: 0.06,
    });
    slide.addText(b.label, {
      x: codeX + 0.4, y: b.y, w: codeW - 0.8, h: 0.5,
      fontFace: ds.helpers.withFallback(theme.fonts.code),
      fontSize: 13, bold: true,
      color: b.color,
      align: 'center', valign: 'middle',
      margin: 0,
    });
  });

  // Vertical pipe marks between boxes
  const pipeXs = [codeX + 0.7, codeX + 1.4, codeX + 2.1];
  [codeY + 1.28, codeY + 2.08].forEach((yPipe) => {
    slide.addText('|', {
      x: codeX + 0.4, y: yPipe, w: codeW - 0.8, h: 0.22,
      fontFace: ds.helpers.withFallback(theme.fonts.code),
      fontSize: 16, bold: true,
      color: theme.palette.text.muted,
      align: 'center', valign: 'middle',
      margin: 0,
    });
  });

  // Caption under the mock
  slide.addText('композиция через LCEL', {
    x: codeX, y: codeY + codeH + 0.05, w: codeW, h: 0.3,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 11, italic: true,
    color: theme.palette.text.muted,
    align: 'center', valign: 'middle', margin: 0,
  });

  // Bottom meta strip
  slide.addText('27 СЛАЙДОВ  |  PYTHON >= 1.0  |  ЛЕТО 2026', {
    x: 0.7, y: 5.05, w: 9, h: 0.3,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 10,
    color: theme.palette.text.muted,
    align: 'left', valign: 'middle',
    charSpacing: 3, margin: 0,
  });

  ds.helpers.addPageNumber(slide, pres, theme, 1);
}

module.exports = { createSlide };