Initial commit: LangChain evolution tutorial deck (132 slides)

- Cover, TOC, 5 dividers, 3 recap slides - 5 sections (chains, langgraph, deepagents, openswe, ecosystem) - design-system.js with theme tokens + 9 helper functions - research/: timeline + sources + per-tech notes - final-compile.js + merge.js for rebuild pipeline - output/: langchain-evolution.pptx (2.3 MB) + langchain-evolution.pdf (1.1 MB) + 7 sample previews
2026-06-22 11:29:03 +03:00
parent ed5b5c91bf
commit 75601988c2
220 changed files with 13069 additions and 3 deletions
@@ -0,0 +1,153 @@
+// 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 };