From 97a1c0b1d7551d0bb7a47e0cd5f73fd4ace049dc Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Sat, 10 Oct 2026 07:46:56 +0900
Subject: [PATCH] feat(ui): tidy the start screen and the chat panel details

Start screen
- The five examples are one row of picture tiles (title under the picture); the old cards cut their descriptions off with an ellipsis
- "Open .drawio file" leaves the example grid and sits with "Start with a blank canvas" below it, both as outlined buttons
- The "Paper to diagram" example gets a thumbnail of its result (public/paper_demo.svg) like the other four
- The caption says what happens: examples use saved answers, so they appear at once and do not call the AI
- Shorter lede

Chat panel
- The version card's "</>" icon button becomes a "Show XML" text link in the summary line; the summary runs under the title row, so Undo is the card's only button
- Settings uses the gear icon; new diagram uses a file-plus icon instead of the pen that reads as "edit"
- The message box has the same side padding as the message column

Copy
- The model picker says "Server model" instead of "Default" when the server's model is in use
- The theme description no longer claims the diagram always stays on a white sheet (the canvas follows the theme)
- en, zh, ja and zh-Hant dictionaries updated together
---
 components/chat/chat-panel.tsx     | 10 ++--
 components/chat/lobby-hero.tsx     | 74 +++++++++++++-----------------
 components/chat/tool-activity.tsx  | 52 ++++++++++-----------
 components/model-selector.tsx      |  4 +-
 components/workspace/workspace.tsx |  4 +-
 lib/i18n/dictionaries/en.json      |  8 ++--
 lib/i18n/dictionaries/ja.json      |  8 ++--
 lib/i18n/dictionaries/zh-Hant.json |  8 ++--
 lib/i18n/dictionaries/zh.json      |  8 ++--
 public/paper_demo.svg              |  1 +
 10 files changed, 84 insertions(+), 93 deletions(-)
 create mode 100644 public/paper_demo.svg

diff --git a/components/chat/chat-panel.tsx b/components/chat/chat-panel.tsx
index 4ad8b395..e37c8cad 100644
--- a/components/chat/chat-panel.tsx
+++ b/components/chat/chat-panel.tsx
@@ -1,10 +1,10 @@
 import {
     ChevronDown,
     Download,
+    FilePlus,
     MessageSquareDashed,
     PanelRightClose,
-    Settings2,
-    SquarePen,
+    Settings,
 } from "lucide-react"
 import { useRef } from "react"
 import { DevXmlSimulator } from "@/components/dev-xml-simulator"
@@ -139,14 +139,14 @@ export function ChatPanel({
                         disabled={engine.isBusy}
                         data-testid="new-chat-button"
                     >
-                        <SquarePen />
+                        <FilePlus />
                     </IconButton>
                     <IconButton
                         label={dict.nav.settings}
                         onClick={() => openSettings()}
                         data-testid="settings-button"
                     >
-                        <Settings2 />
+                        <Settings />
                     </IconButton>
                     {!mobile && (
                         <IconButton
@@ -173,7 +173,7 @@ export function ChatPanel({
                 />
             )}
 
-            <div className="shrink-0 p-2.5 pt-1">
+            <div className="shrink-0 px-4 pt-1 pb-3">
                 <Composer
                     placeholder={
                         engine.messages.length > 0 &&
diff --git a/components/chat/lobby-hero.tsx b/components/chat/lobby-hero.tsx
index ec168246..542612fd 100644
--- a/components/chat/lobby-hero.tsx
+++ b/components/chat/lobby-hero.tsx
@@ -18,14 +18,18 @@ interface Example {
     file?: { path: string; name: string; type: string }
 }
 
+/** Secondary start buttons: outlined, so they read as clickable */
+const startButtonClass =
+    "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card px-3 text-[13px] text-foreground transition-colors hover:bg-accent [&_svg]:text-muted-foreground"
+
 async function loadExampleFile(file: NonNullable<Example["file"]>) {
     const response = await fetch(getAssetUrl(file.path))
     const blob = await response.blob()
     return new File([blob], file.name, { type: file.type })
 }
 
-/** One start-screen choice: a small picture, a title and one line */
-function ExampleCard({
+/** One start-screen example: a small picture over its title */
+function ExampleTile({
     onClick,
     title,
     description,
@@ -35,6 +39,7 @@ function ExampleCard({
 }: {
     onClick: () => void
     title: string
+    /** Shown as the tooltip: the title alone names the example */
     description: string
     picture: React.ReactNode
     /** An icon on a tinted tile instead of a diagram on paper */
@@ -45,24 +50,20 @@ function ExampleCard({
         <button
             type="button"
             onClick={onClick}
-            className="group/example flex min-w-0 items-center gap-2.5 rounded-xl border border-border bg-card p-1.5 pr-2.5 text-left transition-colors hover:border-foreground/25"
+            title={description}
+            className="group/example flex min-w-0 flex-col gap-2 rounded-xl border border-border bg-card p-1.5 pb-2.5 text-left transition-colors hover:border-foreground/25"
             data-testid={testId}
         >
             <span
                 className={cn(
-                    "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg",
+                    "flex h-16 w-full items-center justify-center overflow-hidden rounded-lg",
                     plain ? "bg-muted" : "sheet-light bg-white",
                 )}
             >
                 {picture}
             </span>
-            <span className="min-w-0 flex-1">
-                <span className="line-clamp-2 text-[13px] leading-snug font-medium text-foreground">
-                    {title}
-                </span>
-                <span className="mt-0.5 block truncate text-xs text-muted-foreground">
-                    {description}
-                </span>
+            <span className="px-1 text-[13px] leading-snug font-medium text-foreground">
+                {title}
             </span>
         </button>
     )
@@ -92,6 +93,7 @@ export function LobbyHero({
             key: "paper",
             title: dict.examples.paperToDiagram,
             description: dict.examples.paperDescription,
+            image: "/paper_demo.svg",
             prompt: "Summarize this paper as a diagram",
             file: {
                 path: "/chain-of-thought.txt",
@@ -185,10 +187,12 @@ export function LobbyHero({
                 placeholder={t.placeholder}
             />
 
+            {/* Examples: one row of tiles; the ways to bring your own
+                diagram follow as a separate group */}
             <div
                 className={cn(
                     "mt-5 grid gap-2",
-                    compact ? "grid-cols-1" : "grid-cols-3",
+                    compact ? "grid-cols-1" : "grid-cols-5",
                 )}
             >
                 {examples.map((example) =>
@@ -209,7 +213,7 @@ export function LobbyHero({
                             </span>
                         </button>
                     ) : (
-                        <ExampleCard
+                        <ExampleTile
                             key={example.key}
                             onClick={() => pickExample(example)}
                             title={example.title}
@@ -221,7 +225,7 @@ export function LobbyHero({
                                     <img
                                         src={getAssetUrl(example.image)}
                                         alt=""
-                                        className="max-h-10 max-w-[56px] object-contain transition-transform duration-300 group-hover/example:scale-[1.06]"
+                                        className="max-h-14 max-w-[88%] object-contain transition-transform duration-300 group-hover/example:scale-[1.06]"
                                     />
                                 ) : (
                                     <FileText className="size-5 text-muted-foreground" />
@@ -231,48 +235,34 @@ export function LobbyHero({
                         />
                     ),
                 )}
-                {!compact && (
-                    <ExampleCard
-                        onClick={onOpenFile}
-                        title={dict.workspace.openFile}
-                        description={t.openFileHint}
-                        picture={
-                            <FileUp className="size-5 text-muted-foreground" />
-                        }
-                        plain
-                    />
-                )}
             </div>
-            <p className="mt-3 text-center text-xs text-faint">
+            <p className="mt-2.5 text-center text-xs text-faint">
                 {dict.examples.cachedNote}
             </p>
 
-            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[13px] text-muted-foreground">
+            {/* Ways to start without an example, as plain buttons */}
+            <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
                 {engine.sessions.length > 0 && (
                     <SessionMenu align="center" onOpenFile={onOpenFile}>
-                        <button
-                            type="button"
-                            className="inline-flex items-center gap-1.5 hover:text-foreground"
-                        >
+                        <button type="button" className={startButtonClass}>
                             <History className="size-4" />
                             {t.recent}
                         </button>
                     </SessionMenu>
                 )}
-                {compact && (
-                    <button
-                        type="button"
-                        onClick={onOpenFile}
-                        className="inline-flex items-center gap-1.5 hover:text-foreground"
-                    >
-                        <FileUp className="size-4" />
-                        {dict.workspace.openFile}
-                    </button>
-                )}
+                <button
+                    type="button"
+                    onClick={onOpenFile}
+                    className={startButtonClass}
+                    data-testid="open-file"
+                >
+                    <FileUp className="size-4" />
+                    {dict.workspace.openFile}
+                </button>
                 <button
                     type="button"
                     onClick={onDrawYourself}
-                    className="inline-flex items-center gap-1.5 hover:text-foreground"
+                    className={startButtonClass}
                     data-testid="draw-yourself"
                 >
                     <Pencil className="size-4" />
diff --git a/components/chat/tool-activity.tsx b/components/chat/tool-activity.tsx
index 75fd76a6..d3974e62 100644
--- a/components/chat/tool-activity.tsx
+++ b/components/chat/tool-activity.tsx
@@ -2,7 +2,6 @@ import {
     AlertCircle,
     Check,
     ChevronDown,
-    Code2,
     Copy,
     Library,
     PenTool,
@@ -180,17 +179,23 @@ function VersionCard({
         </button>
     )
 
-    // What the AI wrote, on every card (main showed it on every tool call)
-    const codeButton = (
-        <button
-            type="button"
-            onClick={() => setShowCode((v) => !v)}
-            aria-label={showCode ? t.hideCode : t.showCode}
-            title={showCode ? t.hideCode : t.showCode}
-            className="inline-flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground"
-        >
-            <Code2 className="size-4" />
-        </button>
+    // What the AI wrote: a text link in the summary line, so the card's
+    // only button is the action (undo or restore)
+    const summaryLine = (
+        <div className="text-xs text-muted-foreground">
+            {summary}
+            {/* The link wraps as one unit with its separator */}
+            <span className="whitespace-nowrap">
+                <span aria-hidden> · </span>
+                <button
+                    type="button"
+                    onClick={() => setShowCode((v) => !v)}
+                    className="underline decoration-foreground/30 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+                >
+                    {showCode ? t.hideCode : t.showCode}
+                </button>
+            </span>
+        </div>
     )
     const codePanel = showCode && (
         <div className="relative border-t border-border bg-surface-1 px-3 py-2.5">
@@ -231,15 +236,12 @@ function VersionCard({
                         />
                     </button>
                     {badge}
-                    <div className="min-w-0 flex-1" title={summary}>
+                    <div className="min-w-0 flex-1">
                         <div className="truncate text-[13px] text-foreground">
                             {title}
                         </div>
-                        <div className="truncate text-xs text-muted-foreground">
-                            {summary}
-                        </div>
+                        {summaryLine}
                     </div>
-                    {codeButton}
                     {restoreButton}
                 </div>
                 {codePanel}
@@ -271,17 +273,12 @@ function VersionCard({
                     {t.compare}
                 </span>
             </button>
-            <div className="flex items-center gap-2.5 px-3 py-2.5">
+            {/* Title row with the action; the summary runs under both */}
+            <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2.5 px-3 py-2.5">
                 {badge}
-                <div className="min-w-0 flex-1" title={summary}>
-                    <div className="truncate text-[13px] font-medium text-foreground">
-                        {title}
-                    </div>
-                    <div className="line-clamp-2 text-xs text-muted-foreground">
-                        {summary}
-                    </div>
+                <div className="truncate text-[13px] font-medium text-foreground">
+                    {title}
                 </div>
-                {codeButton}
                 {canUndo ? (
                     <button
                         type="button"
@@ -300,6 +297,9 @@ function VersionCard({
                 ) : (
                     restoreButton
                 )}
+                <div className="col-span-2 col-start-2 mt-0.5">
+                    {summaryLine}
+                </div>
             </div>
             {codePanel}
         </div>
diff --git a/components/model-selector.tsx b/components/model-selector.tsx
index 1b146d66..532a4bc1 100644
--- a/components/model-selector.tsx
+++ b/components/model-selector.tsx
@@ -220,14 +220,14 @@ export function ModelSelector({
                             <span className="min-w-0 truncate text-xs">
                                 {selectedModel
                                     ? shortModelName(selectedModel.modelId)
-                                    : dict.modelConfig.default}
+                                    : dict.modelConfig.serverDefault}
                             </span>
                         ) : (
                             // Keep an sr-only label for screen readers when hidden
                             <span className="sr-only">
                                 {selectedModel
                                     ? selectedModel.modelId
-                                    : dict.modelConfig.default}
+                                    : dict.modelConfig.serverDefault}
                             </span>
                         )}
                         <ChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
diff --git a/components/workspace/workspace.tsx b/components/workspace/workspace.tsx
index 584ba636..f8d992fa 100644
--- a/components/workspace/workspace.tsx
+++ b/components/workspace/workspace.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { MessageSquare, PanelRightOpen, Settings2, Shapes } from "lucide-react"
+import { MessageSquare, PanelRightOpen, Settings, Shapes } from "lucide-react"
 import { usePathname, useRouter } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { CanvasStage } from "@/components/canvas/canvas-stage"
@@ -100,7 +100,7 @@ function StartBar({
                 onClick={() => openSettings()}
                 data-testid="settings-button"
             >
-                <Settings2 />
+                <Settings />
             </IconButton>
         </div>
     )
diff --git a/lib/i18n/dictionaries/en.json b/lib/i18n/dictionaries/en.json
index 4150ab4e..5dbe820a 100644
--- a/lib/i18n/dictionaries/en.json
+++ b/lib/i18n/dictionaries/en.json
@@ -72,7 +72,7 @@
         "replicateDescription": "Upload and replicate an existing flowchart",
         "creativeDrawing": "Creative drawing",
         "creativeDescription": "Draw something fun and creative",
-        "cachedNote": "Examples open instantly and don't use your model.",
+        "cachedNote": "Examples use saved answers: they appear instantly and don't call the AI.",
         "mcpServer": "MCP Server",
         "mcpDescription": "Use in Claude Desktop, VS Code & Cursor"
     },
@@ -96,7 +96,7 @@
         "language": "Language",
         "languageDescription": "Choose your interface language.",
         "theme": "Theme",
-        "themeDescription": "Light or dark interface. The diagram always stays on a white sheet, the way it exports.",
+        "themeDescription": "Light or dark interface. The canvas follows the same theme.",
         "diagramStyle": "Diagram style",
         "diagramStyleDescription": "How the AI draws new diagrams: Styled uses colors and icons, Minimal keeps shapes plain.",
         "sendShortcut": "Send shortcut",
@@ -400,7 +400,7 @@
         "searchModels": "Search models...",
         "noModelsFound": "No models found.",
         "default": "Default",
-        "serverDefault": "Server Default",
+        "serverDefault": "Server model",
         "serverModels": "Server Models",
         "userModels": "User Models",
         "configureModels": "Configure Models...",
@@ -695,7 +695,7 @@
     },
     "lobby": {
         "title": "What would you like to draw?",
-        "lede": "Describe a diagram, or upload a screenshot or PDF. You get a regular draw.io diagram that you can keep editing and export.",
+        "lede": "Describe a diagram or upload a screenshot or PDF. You get a draw.io diagram you can keep editing and export.",
         "placeholder": "For example: a login sequence diagram with SMS codes and retries",
         "recent": "Recent diagrams",
         "drawYourself": "Start with a blank canvas",
diff --git a/lib/i18n/dictionaries/ja.json b/lib/i18n/dictionaries/ja.json
index dc5abd09..6622c945 100644
--- a/lib/i18n/dictionaries/ja.json
+++ b/lib/i18n/dictionaries/ja.json
@@ -72,7 +72,7 @@
         "replicateDescription": "既存のフローチャートをアップロードして複製",
         "creativeDrawing": "自由なイラスト",
         "creativeDescription": "楽しくてクリエイティブなものを描く",
-        "cachedNote": "例はすぐに開き、モデルは使いません。",
+        "cachedNote": "例は保存済みの回答を使うので、すぐに表示され、AI を呼び出しません。",
         "mcpServer": "MCP サーバー",
         "mcpDescription": "Claude Desktop、VS Code、Cursor で使用"
     },
@@ -96,7 +96,7 @@
         "language": "言語",
         "languageDescription": "インターフェース言語を選択します。",
         "theme": "テーマ",
-        "themeDescription": "画面をライトにするかダークにするか。図はエクスポートしたときと同じく、常に白い用紙の上に表示されます。",
+        "themeDescription": "画面をライトにするかダークにするか。キャンバスも同じテーマになります。",
         "diagramStyle": "図のスタイル",
         "diagramStyleDescription": "AI が新しい図を描くときのスタイル。スタイル付きは色やアイコンを使い、ミニマルは素朴な図形だけにします。",
         "sendShortcut": "送信のショートカット",
@@ -355,7 +355,7 @@
         "searchModels": "モデルを検索...",
         "noModelsFound": "モデルが見つかりません。",
         "default": "デフォルト",
-        "serverDefault": "サーバーデフォルト",
+        "serverDefault": "サーバーのモデル",
         "serverModels": "サーバーモデル",
         "userModels": "ユーザーモデル",
         "configureModels": "モデルを設定...",
@@ -695,7 +695,7 @@
     },
     "lobby": {
         "title": "どんな図を描きますか？",
-        "lede": "図の内容を説明するか、スクリーンショットや PDF をアップロードしてください。できあがるのは通常の draw.io の図なので、続けて編集もエクスポートもできます。",
+        "lede": "図を説明するか、スクリーンショットや PDF をアップロードしてください。できあがるのは編集もエクスポートもできる draw.io の図です。",
         "placeholder": "例：SMS 認証とリトライを含むログインのシーケンス図",
         "recent": "最近の図",
         "drawYourself": "白紙のキャンバスから始める",
diff --git a/lib/i18n/dictionaries/zh-Hant.json b/lib/i18n/dictionaries/zh-Hant.json
index 375c2246..0945d9d7 100644
--- a/lib/i18n/dictionaries/zh-Hant.json
+++ b/lib/i18n/dictionaries/zh-Hant.json
@@ -72,7 +72,7 @@
         "replicateDescription": "上傳並複製現有流程圖",
         "creativeDrawing": "創意繪畫",
         "creativeDescription": "繪製有趣且富有創意的內容",
-        "cachedNote": "範例會立即開啟，不呼叫模型。",
+        "cachedNote": "範例使用保存好的答案，立即顯示，不呼叫 AI。",
         "mcpServer": "MCP 伺服器",
         "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
     },
@@ -96,7 +96,7 @@
         "language": "語言",
         "languageDescription": "選擇介面語言。",
         "theme": "主題",
-        "themeDescription": "介面用淺色還是深色。圖紙始終是白底，和匯出後的樣子一致。",
+        "themeDescription": "介面用淺色還是深色，畫布跟隨同一主題。",
         "diagramStyle": "圖形風格",
         "diagramStyleDescription": "AI 畫新圖時的風格：精緻會用顏色和圖示，簡約只用樸素的圖形。",
         "sendShortcut": "傳送快速鍵",
@@ -400,7 +400,7 @@
         "searchModels": "搜尋模型...",
         "noModelsFound": "未找到模型。",
         "default": "預設",
-        "serverDefault": "伺服器預設",
+        "serverDefault": "伺服器模型",
         "serverModels": "伺服器模型",
         "userModels": "使用者模型",
         "configureModels": "配置模型...",
@@ -695,7 +695,7 @@
     },
     "lobby": {
         "title": "說說你要畫什麼",
-        "lede": "描述一張圖，或上傳截圖、PDF。畫出來的是標準的 draw.io 圖表，可以接著改，也可以匯出。",
+        "lede": "描述一張圖，或上傳截圖、PDF。得到的是可以繼續編輯和匯出的 draw.io 圖。",
         "placeholder": "例如：使用者登入的時序圖，包含簡訊驗證碼和失敗重試",
         "recent": "最近的圖紙",
         "drawYourself": "從空白畫布開始",
diff --git a/lib/i18n/dictionaries/zh.json b/lib/i18n/dictionaries/zh.json
index e0908271..fdba8076 100644
--- a/lib/i18n/dictionaries/zh.json
+++ b/lib/i18n/dictionaries/zh.json
@@ -72,7 +72,7 @@
         "replicateDescription": "上传并复制现有流程图",
         "creativeDrawing": "创意绘画",
         "creativeDescription": "绘制有趣且富有创意的内容",
-        "cachedNote": "示例会立即打开，不调用模型。",
+        "cachedNote": "示例使用保存好的答案，立即显示，不调用 AI。",
         "mcpServer": "MCP 服务器",
         "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
     },
@@ -96,7 +96,7 @@
         "language": "语言",
         "languageDescription": "选择界面语言。",
         "theme": "主题",
-        "themeDescription": "界面用浅色还是深色。图纸始终是白底，和导出后的样子一致。",
+        "themeDescription": "界面用浅色还是深色，画布跟随同一主题。",
         "diagramStyle": "图形风格",
         "diagramStyleDescription": "AI 画新图时的风格：精致会用颜色和图标，简约只用朴素的图形。",
         "sendShortcut": "发送快捷键",
@@ -400,7 +400,7 @@
         "searchModels": "搜索模型...",
         "noModelsFound": "未找到模型。",
         "default": "默认",
-        "serverDefault": "服务器默认",
+        "serverDefault": "服务器模型",
         "serverModels": "服务器模型",
         "userModels": "用户模型",
         "configureModels": "配置模型...",
@@ -695,7 +695,7 @@
     },
     "lobby": {
         "title": "说说你要画什么",
-        "lede": "描述一张图，或者上传截图、PDF。画出来的是标准的 draw.io 图表，可以接着改，也可以导出。",
+        "lede": "描述一张图，或上传截图、PDF。得到的是可以继续编辑和导出的 draw.io 图。",
         "placeholder": "比如：用户登录的时序图，包含短信验证码和失败重试",
         "recent": "最近的图纸",
         "drawYourself": "从空白画布开始",
diff --git a/public/paper_demo.svg b/public/paper_demo.svg
new file mode 100644
index 00000000..d32f8465
--- /dev/null
+++ b/public/paper_demo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent; color-scheme: light dark;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="750px" height="636px" viewBox="0 0 750 636"><defs/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="title_bg"><g><rect x="10" y="0" width="720" height="80" rx="6.4" ry="6.4" fill="#1a237e" stroke="none" pointer-events="all" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));"/></g></g><g data-cell-id="title"><g><rect x="10" y="5" width="720" height="70" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 718px; height: 1px; padding-top: 40px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #FFFFFF; "><div style="display: inline-block; font-size: 22px; font-family: Helvetica; color: light-dark(#FFFFFF, #121212); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Chain-of-Thought Prompting<br /><span style="font-size: 14px;">Elicits Reasoning in Large Language Models</span></div></div></div></foreignObject><text x="370" y="34" fill="#FFFFFF" font-family="Helvetica" font-size="22px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));"><tspan x="370" y="34">Chain-of-Thought Prompting</tspan><tspan x="370" y="60">Elicits Reasoning in Large Language Models</tspan></text></switch></g></g></g><g data-cell-id="authors"><g><rect x="10" y="80" width="720" height="20" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 718px; height: 1px; padding-top: 90px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #666666; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#666666, #959595); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Wei et al. (Google Research, Brain Team) | NeurIPS 2022</div></div></div></foreignObject><text x="370" y="93" fill="#666666" font-family="Helvetica" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));">Wei et al. (Google Research, Brain Team) | NeurIPS 2022</text></switch></g></g></g><g data-cell-id="core_header"><g><rect x="10" y="105" width="150" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 120px; margin-left: 12px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">💡 Core Idea</div></div></div></foreignObject><text x="12" y="125" fill="#1a237e" font-family="Helvetica" font-size="16px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">💡 Core Idea</text></switch></g></g></g><g data-cell-id="core_box"><g transform="translate(0.5,0.5)"><rect x="10" y="135" width="340" height="75" rx="11.25" ry="11.25" fill="#e3f2fd" stroke="#1565c0" pointer-events="all" style="fill: light-dark(rgb(227, 242, 253), rgb(20, 33, 42)); stroke: light-dark(rgb(21, 101, 192), rgb(99, 168, 246));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 318px; height: 1px; padding-top: 173px; margin-left: 22px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Chain of Thought</b> = A series of intermediate reasoning steps that lead to the final answer<br /><br />Simply provide a few CoT demonstrations as exemplars in few-shot prompting</div></div></div></foreignObject><text x="22" y="150" fill="#000000" font-family="Helvetica" font-size="11px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="22" y="150">Chain of Thought = A series of intermediate reasoning steps that</tspan><tspan x="22" y="163">lead to the final answer</tspan><tspan x="22" y="176"></tspan><tspan x="22" y="189">Simply provide a few CoT demonstrations as exemplars in</tspan><tspan x="22" y="202">few-shot prompting</tspan></text></switch></g></g></g><g data-cell-id="compare_header"><g><rect x="10" y="220" width="350" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 348px; height: 1px; padding-top: 235px; margin-left: 12px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">⚖️ Standard vs Chain-of-Thought Prompting</div></div></div></foreignObject><text x="12" y="240" fill="#1a237e" font-family="Helvetica" font-size="16px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">⚖️ Standard vs Chain-of-Thought Prompting</text></switch></g></g></g><g data-cell-id="std_box"><g transform="translate(0.5,0.5)"><rect x="10" y="255" width="170" height="160" rx="12.8" ry="12.8" fill="#ffebee" stroke="#c62828" pointer-events="all" style="fill: light-dark(rgb(255, 235, 238), rgb(44, 27, 30)); stroke: light-dark(rgb(198, 40, 40), rgb(255, 145, 145));"/></g></g><g data-cell-id="std_title"><g><rect x="10" y="260" width="170" height="25" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 273px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #C62828; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: light-dark(#C62828, #ff9191); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Standard Prompting</div></div></div></foreignObject><text x="95" y="276" fill="#C62828" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(198, 40, 40), rgb(255, 145, 145));">Standard Prompting</text></switch></g></g></g><g data-cell-id="std_q"><g><rect x="15" y="285" width="160" height="55" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 292px; margin-left: 22px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Q: Roger has 5 tennis balls. He buys 2 more cans. Each can has 3 balls. How many now?</div></div></div></foreignObject><text x="22" y="301" fill="#000000" font-family="Helvetica" font-size="9px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="22" y="301">Q: Roger has 5 tennis balls. He buys</tspan><tspan x="22" y="312">2 more cans. Each can has 3 balls.</tspan><tspan x="22" y="323">How many now?</tspan></text></switch></g></g></g><g data-cell-id="std_a"><g><rect x="20" y="345" width="150" height="25" rx="3.75" ry="3.75" fill="#ffcdd2" stroke="none" pointer-events="all" style="fill: light-dark(rgb(255, 205, 210), rgb(85, 42, 46));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 143px; height: 1px; padding-top: 358px; margin-left: 27px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">A: The answer is 11.</div></div></div></foreignObject><text x="27" y="361" fill="#000000" font-family="Helvetica" font-size="10px" font-weight="bold" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">A: The answer is 11.</text></switch></g></g></g><g data-cell-id="std_result"><g><rect x="10" y="380" width="170" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 395px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #C62828; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#C62828, #ff9191); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">❌ Often Wrong</div></div></div></foreignObject><text x="95" y="398" fill="#C62828" font-family="Helvetica" font-size="11px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(198, 40, 40), rgb(255, 145, 145));">❌ Often Wrong</text></switch></g></g></g><g data-cell-id="cot_box"><g transform="translate(0.5,0.5)"><rect x="190" y="255" width="170" height="160" rx="12.8" ry="12.8" fill="#e8f5e9" stroke="#2e7d32" pointer-events="all" style="fill: light-dark(rgb(232, 245, 233), rgb(21, 33, 22)); stroke: light-dark(rgb(46, 125, 50), rgb(100, 168, 104));"/></g></g><g data-cell-id="cot_title"><g><rect x="190" y="260" width="170" height="25" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 273px; margin-left: 191px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #2E7D32; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: light-dark(#2E7D32, #64a868); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Chain-of-Thought</div></div></div></foreignObject><text x="275" y="276" fill="#2E7D32" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(46, 125, 50), rgb(100, 168, 104));">Chain-of-Thought</text></switch></g></g></g><g data-cell-id="cot_q"><g><rect x="195" y="285" width="160" height="55" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 292px; margin-left: 202px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Q: Roger has 5 tennis balls. He buys 2 more cans. Each can has 3 balls. How many now?</div></div></div></foreignObject><text x="202" y="301" fill="#000000" font-family="Helvetica" font-size="9px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="202" y="301">Q: Roger has 5 tennis balls. He buys</tspan><tspan x="202" y="312">2 more cans. Each can has 3 balls.</tspan><tspan x="202" y="323">How many now?</tspan></text></switch></g></g></g><g data-cell-id="cot_a"><g><rect x="200" y="340" width="150" height="35" rx="5.25" ry="5.25" fill="#c8e6c9" stroke="none" pointer-events="all" style="fill: light-dark(rgb(200, 230, 201), rgb(28, 54, 29));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 143px; height: 1px; padding-top: 358px; margin-left: 207px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">A: 2 cans × 3 = 6 balls.<br />5 + 6 = 11. Answer: 11</div></div></div></foreignObject><text x="207" y="355" fill="#000000" font-family="Helvetica" font-size="9px" font-weight="bold" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="207" y="355">A: 2 cans × 3 = 6 balls.</tspan><tspan x="207" y="366">5 + 6 = 11. Answer: 11</tspan></text></switch></g></g></g><g data-cell-id="cot_result"><g><rect x="190" y="380" width="170" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 395px; margin-left: 191px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #2E7D32; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#2E7D32, #64a868); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">✓ Correct!</div></div></div></foreignObject><text x="275" y="398" fill="#2E7D32" font-family="Helvetica" font-size="11px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(46, 125, 50), rgb(100, 168, 104));">✓ Correct!</text></switch></g></g></g><g data-cell-id="vs_arrow"><g><path d="M 178.5 339 L 178.5 349.5 L 165.5 335 L 178.5 320.5 L 178.5 331 L 191.5 331 L 191.5 320.5 L 204.5 335 L 191.5 349.5 L 191.5 339 Z" fill="#ffc107" stroke="none" pointer-events="all" style="fill: light-dark(rgb(255, 193, 7), rgb(125, 72, 0));"/></g></g><g data-cell-id="props_header"><g><rect x="370" y="105" width="150" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 120px; margin-left: 372px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">🔑 Key Properties</div></div></div></foreignObject><text x="372" y="125" fill="#1a237e" font-family="Helvetica" font-size="16px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">🔑 Key Properties</text></switch></g></g></g><g data-cell-id="prop1"><g transform="translate(0.5,0.5)"><rect x="370" y="135" width="180" height="32" rx="4.8" ry="4.8" fill="#fff3e0" stroke="#ef6c00" pointer-events="all" style="fill: light-dark(rgb(255, 243, 224), rgb(36, 26, 9)); stroke: light-dark(rgb(239, 108, 0), rgb(222, 110, 17));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 170px; height: 1px; padding-top: 151px; margin-left: 380px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">1️⃣ Decomposes multi-step problems</div></div></div></foreignObject><text x="380" y="154" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">1️⃣ Decomposes multi-step problems</text></switch></g></g></g><g data-cell-id="prop2"><g transform="translate(0.5,0.5)"><rect x="370" y="172" width="180" height="32" rx="4.8" ry="4.8" fill="#fff3e0" stroke="#ef6c00" pointer-events="all" style="fill: light-dark(rgb(255, 243, 224), rgb(36, 26, 9)); stroke: light-dark(rgb(239, 108, 0), rgb(222, 110, 17));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 170px; height: 1px; padding-top: 188px; margin-left: 380px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">2️⃣ Interpretable reasoning window</div></div></div></foreignObject><text x="380" y="191" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">2️⃣ Interpretable reasoning window</text></switch></g></g></g><g data-cell-id="prop3"><g transform="translate(0.5,0.5)"><rect x="370" y="209" width="180" height="32" rx="4.8" ry="4.8" fill="#fff3e0" stroke="#ef6c00" pointer-events="all" style="fill: light-dark(rgb(255, 243, 224), rgb(36, 26, 9)); stroke: light-dark(rgb(239, 108, 0), rgb(222, 110, 17));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 170px; height: 1px; padding-top: 225px; margin-left: 380px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">3️⃣ Applicable to any language task</div></div></div></foreignObject><text x="380" y="228" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">3️⃣ Applicable to any language task</text></switch></g></g></g><g data-cell-id="prop4"><g transform="translate(0.5,0.5)"><rect x="370" y="246" width="180" height="32" rx="4.8" ry="4.8" fill="#fff3e0" stroke="#ef6c00" pointer-events="all" style="fill: light-dark(rgb(255, 243, 224), rgb(36, 26, 9)); stroke: light-dark(rgb(239, 108, 0), rgb(222, 110, 17));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 170px; height: 1px; padding-top: 262px; margin-left: 380px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">4️⃣ No finetuning required</div></div></div></foreignObject><text x="380" y="265" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">4️⃣ No finetuning required</text></switch></g></g></g><g data-cell-id="emergent_header"><g><rect x="370" y="290" width="180" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 178px; height: 1px; padding-top: 305px; margin-left: 372px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">📈 Emergent Ability</div></div></div></foreignObject><text x="372" y="310" fill="#1a237e" font-family="Helvetica" font-size="16px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">📈 Emergent Ability</text></switch></g></g></g><g data-cell-id="emergent_box"><g transform="translate(0.5,0.5)"><rect x="370" y="320" width="180" height="95" rx="7.6" ry="7.6" fill="#f3e5f5" stroke="#7b1fa2" pointer-events="all" style="fill: light-dark(rgb(243, 229, 245), rgb(45, 33, 47)); stroke: light-dark(rgb(123, 31, 162), rgb(239, 160, 255));"/></g></g><g data-cell-id="emergent_text"><g><rect x="370" y="325" width="180" height="85" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 368px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">CoT only works with<br /><b>~100B+ parameters</b><br /><br />Small models produce<br />fluent but illogical chains</div></div></div></foreignObject><text x="460" y="345" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="460" y="345">CoT only works with</tspan><tspan x="460" y="358">~100B+ parameters</tspan><tspan x="460" y="371"></tspan><tspan x="460" y="384">Small models produce</tspan><tspan x="460" y="397">fluent but illogical chains</tspan></text></switch></g></g></g><g data-cell-id="results_header"><g><rect x="570" y="105" width="150" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 120px; margin-left: 572px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">📊 Key Results</div></div></div></foreignObject><text x="572" y="125" fill="#1a237e" font-family="Helvetica" font-size="16px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">📊 Key Results</text></switch></g></g></g><g data-cell-id="gsm_box"><g transform="translate(0.5,0.5)"><rect x="570" y="135" width="160" height="100" rx="8" ry="8" fill="#e8f5e9" stroke="#2e7d32" pointer-events="all" style="fill: light-dark(rgb(232, 245, 233), rgb(21, 33, 22)); stroke: light-dark(rgb(46, 125, 50), rgb(100, 168, 104));"/></g></g><g data-cell-id="gsm_title"><g><rect x="570" y="140" width="160" height="20" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 150px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #2E7D32; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: light-dark(#2E7D32, #64a868); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">GSM8K (Math)</div></div></div></foreignObject><text x="650" y="154" fill="#2E7D32" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(46, 125, 50), rgb(100, 168, 104));">GSM8K (Math)</text></switch></g></g></g><g data-cell-id="gsm_bar1"><g><rect x="585" y="165" width="40" height="30" fill="#ffcdd2" stroke="none" pointer-events="all" style="fill: light-dark(rgb(255, 205, 210), rgb(85, 42, 46));"/></g></g><g data-cell-id="gsm_bar2"><g><rect x="635" y="165" width="80" height="30" fill="#4caf50" stroke="none" pointer-events="all" style="fill: light-dark(rgb(76, 175, 80), rgb(50, 135, 54));"/></g></g><g data-cell-id="gsm_label1"><g><rect x="585" y="195" width="40" height="15" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 203px; margin-left: 586px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">18%</div></div></div></foreignObject><text x="605" y="206" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">18%</text></switch></g></g></g><g data-cell-id="gsm_label2"><g><rect x="635" y="195" width="80" height="15" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 203px; margin-left: 636px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #2E7D32; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#2E7D32, #64a868); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">57%</div></div></div></foreignObject><text x="675" y="206" fill="#2E7D32" font-family="Helvetica" font-size="10px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(46, 125, 50), rgb(100, 168, 104));">57%</text></switch></g></g></g><g data-cell-id="gsm_legend"><g><rect x="570" y="212" width="160" height="20" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 222px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #666666; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: light-dark(#666666, #959595); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Standard → CoT (PaLM 540B)</div></div></div></foreignObject><text x="650" y="225" fill="#666666" font-family="Helvetica" font-size="9px" text-anchor="middle" style="fill: light-dark(rgb(102, 102, 102), rgb(149, 149, 149));">Standard → CoT (PaLM 540B)</text></switch></g></g></g><g data-cell-id="bench_header"><g><rect x="570" y="245" width="180" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 178px; height: 1px; padding-top: 260px; margin-left: 572px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">🧪 Benchmarks Tested</div></div></div></foreignObject><text x="572" y="265" fill="#1a237e" font-family="Helvetica" font-size="16px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">🧪 Benchmarks Tested</text></switch></g></g></g><g data-cell-id="bench_arith"><g transform="translate(0.5,0.5)"><rect x="570" y="275" width="160" height="45" rx="6.75" ry="6.75" fill="#e3f2fd" stroke="#1565c0" pointer-events="all" style="fill: light-dark(rgb(227, 242, 253), rgb(20, 33, 42)); stroke: light-dark(rgb(21, 101, 192), rgb(99, 168, 246));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 298px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">🔢 Arithmetic<br /><span style="font-size: 9px;">GSM8K, SVAMP, ASDiv, AQuA, MAWPS</span></div></div></div></foreignObject><text x="650" y="289" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="650" y="289">🔢 Arithmetic</tspan><tspan x="650" y="301">GSM8K, SVAMP, ASDiv, AQuA,</tspan><tspan x="650" y="313">MAWPS</tspan></text></switch></g></g></g><g data-cell-id="bench_common"><g transform="translate(0.5,0.5)"><rect x="570" y="325" width="160" height="45" rx="6.75" ry="6.75" fill="#e3f2fd" stroke="#1565c0" pointer-events="all" style="fill: light-dark(rgb(227, 242, 253), rgb(20, 33, 42)); stroke: light-dark(rgb(21, 101, 192), rgb(99, 168, 246));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 348px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">🧠 Commonsense<br /><span style="font-size: 9px;">CSQA, StrategyQA, Date, Sports, SayCan</span></div></div></div></foreignObject><text x="650" y="339" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="650" y="339">🧠 Commonsense</tspan><tspan x="650" y="351">CSQA, StrategyQA, Date, Sports,</tspan><tspan x="650" y="363">SayCan</tspan></text></switch></g></g></g><g data-cell-id="bench_symbol"><g transform="translate(0.5,0.5)"><rect x="570" y="375" width="160" height="40" rx="6" ry="6" fill="#e3f2fd" stroke="#1565c0" pointer-events="all" style="fill: light-dark(rgb(227, 242, 253), rgb(20, 33, 42)); stroke: light-dark(rgb(21, 101, 192), rgb(99, 168, 246));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 395px; margin-left: 571px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">🔣 Symbolic<br /><span style="font-size: 9px;">Last Letter Concat, Coin Flip</span></div></div></div></foreignObject><text x="650" y="392" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="650" y="392">🔣 Symbolic</tspan><tspan x="650" y="404">Last Letter Concat, Coin Flip</tspan></text></switch></g></g></g><g data-cell-id="task_header"><g><rect x="10" y="425" width="200" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 198px; height: 1px; padding-top: 440px; margin-left: 12px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">🎯 Task Types &amp; Results</div></div></div></foreignObject><text x="12" y="445" fill="#1a237e" font-family="Helvetica" font-size="16px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">🎯 Task Types &amp; Results</text></switch></g></g></g><g data-cell-id="task_arith"><g transform="translate(0.5,0.5)"><ellipse cx="55" cy="490" rx="45" ry="30" fill="#bbdefb" stroke="#1565c0" pointer-events="all" style="fill: light-dark(rgb(187, 222, 251), rgb(25, 55, 80)); stroke: light-dark(rgb(21, 101, 192), rgb(99, 168, 246));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 490px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Arithmetic<br />Reasoning</div></div></div></foreignObject><text x="55" y="487" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="55" y="487">Arithmetic</tspan><tspan x="55" y="500">Reasoning</tspan></text></switch></g></g></g><g data-cell-id="task_arith_res"><g><rect x="0" y="520" width="110" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 527px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #1565C0; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: light-dark(#1565C0, #63a8f6); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">SOTA on GSM8K<br />(57% vs 55% prior)</div></div></div></foreignObject><text x="55" y="536" fill="#1565C0" font-family="Helvetica" font-size="9px" text-anchor="middle" style="fill: light-dark(rgb(21, 101, 192), rgb(99, 168, 246));"><tspan x="55" y="536">SOTA on GSM8K</tspan><tspan x="55" y="547">(57% vs 55% prior)</tspan></text></switch></g></g></g><g data-cell-id="task_common"><g transform="translate(0.5,0.5)"><ellipse cx="175" cy="490" rx="45" ry="30" fill="#c8e6c9" stroke="#2e7d32" pointer-events="all" style="fill: light-dark(rgb(200, 230, 201), rgb(28, 54, 29)); stroke: light-dark(rgb(46, 125, 50), rgb(100, 168, 104));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 490px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Commonsense<br />Reasoning</div></div></div></foreignObject><text x="175" y="487" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="175" y="487">Commonsense</tspan><tspan x="175" y="500">Reasoning</tspan></text></switch></g></g></g><g data-cell-id="task_common_res"><g><rect x="120" y="520" width="110" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 527px; margin-left: 121px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #2E7D32; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: light-dark(#2E7D32, #64a868); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">SOTA StrategyQA<br />(75.6% vs 69.4%)</div></div></div></foreignObject><text x="175" y="536" fill="#2E7D32" font-family="Helvetica" font-size="9px" text-anchor="middle" style="fill: light-dark(rgb(46, 125, 50), rgb(100, 168, 104));"><tspan x="175" y="536">SOTA StrategyQA</tspan><tspan x="175" y="547">(75.6% vs 69.4%)</tspan></text></switch></g></g></g><g data-cell-id="task_symbol"><g transform="translate(0.5,0.5)"><ellipse cx="295" cy="490" rx="45" ry="30" fill="#ffe0b2" stroke="#ef6c00" pointer-events="all" style="fill: light-dark(rgb(255, 224, 178), rgb(66, 39, 0)); stroke: light-dark(rgb(239, 108, 0), rgb(222, 110, 17));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 490px; margin-left: 251px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">Symbolic<br />Reasoning</div></div></div></foreignObject><text x="295" y="487" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="295" y="487">Symbolic</tspan><tspan x="295" y="500">Reasoning</tspan></text></switch></g></g></g><g data-cell-id="task_symbol_res"><g><rect x="240" y="520" width="110" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 527px; margin-left: 241px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #EF6C00; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: light-dark(#EF6C00, #de6e11); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">OOD Generalization<br />to longer sequences</div></div></div></foreignObject><text x="295" y="536" fill="#EF6C00" font-family="Helvetica" font-size="9px" text-anchor="middle" style="fill: light-dark(rgb(239, 108, 0), rgb(222, 110, 17));"><tspan x="295" y="536">OOD Generalization</tspan><tspan x="295" y="547">to longer sequences</tspan></text></switch></g></g></g><g data-cell-id="task_arrow1"><g><path d="M 100 490 L 121.76 490" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(158, 158, 158), rgb(101, 101, 101));"/><path d="M 127.76 490 L 119.76 494 L 121.76 490 L 119.76 486 Z" fill="#9e9e9e" stroke="#9e9e9e" stroke-width="2" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(158, 158, 158), rgb(101, 101, 101)); stroke: light-dark(rgb(158, 158, 158), rgb(101, 101, 101));"/></g></g><g data-cell-id="task_arrow2"><g><path d="M 220 490 L 241.76 490" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke" style="stroke: light-dark(rgb(158, 158, 158), rgb(101, 101, 101));"/><path d="M 247.76 490 L 239.76 494 L 241.76 490 L 239.76 486 Z" fill="#9e9e9e" stroke="#9e9e9e" stroke-width="2" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(rgb(158, 158, 158), rgb(101, 101, 101)); stroke: light-dark(rgb(158, 158, 158), rgb(101, 101, 101));"/></g></g><g data-cell-id="models_header"><g><rect x="370" y="425" width="150" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 440px; margin-left: 372px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">🤖 Models Tested</div></div></div></foreignObject><text x="372" y="445" fill="#1a237e" font-family="Helvetica" font-size="16px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">🤖 Models Tested</text></switch></g></g></g><g data-cell-id="models_box"><g transform="translate(0.5,0.5)"><rect x="370" y="455" width="180" height="95" rx="7.6" ry="7.6" fill="#eceff1" stroke="#607d8b" pointer-events="all" style="fill: light-dark(rgb(236, 239, 241), rgb(31, 33, 35)); stroke: light-dark(rgb(96, 125, 139), rgb(114, 139, 151));"/></g></g><g data-cell-id="model1"><g><rect x="370" y="460" width="90" height="20" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 78px; height: 1px; padding-top: 470px; margin-left: 382px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">• GPT-3 (175B)</div></div></div></foreignObject><text x="382" y="473" fill="#000000" font-family="Helvetica" font-size="11px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">• GPT-3 (175B)</text></switch></g></g></g><g data-cell-id="model2"><g><rect x="370" y="480" width="90" height="20" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 78px; height: 1px; padding-top: 490px; margin-left: 382px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">• LaMDA (137B)</div></div></div></foreignObject><text x="382" y="487" fill="#000000" font-family="Helvetica" font-size="11px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="382" y="487">• LaMDA</tspan><tspan x="382" y="500">(137B)</tspan></text></switch></g></g></g><g data-cell-id="model3"><g><rect x="370" y="500" width="90" height="20" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 78px; height: 1px; padding-top: 510px; margin-left: 382px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">• PaLM (540B)</div></div></div></foreignObject><text x="382" y="513" fill="#000000" font-family="Helvetica" font-size="11px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">• PaLM (540B)</text></switch></g></g></g><g data-cell-id="model4"><g><rect x="460" y="460" width="80" height="20" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 68px; height: 1px; padding-top: 470px; margin-left: 472px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">• Codex</div></div></div></foreignObject><text x="472" y="473" fill="#000000" font-family="Helvetica" font-size="11px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">• Codex</text></switch></g></g></g><g data-cell-id="model5"><g><rect x="460" y="480" width="80" height="20" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 68px; height: 1px; padding-top: 490px; margin-left: 472px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">• UL2 (20B)</div></div></div></foreignObject><text x="472" y="493" fill="#000000" font-family="Helvetica" font-size="11px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">• UL2 (20B)</text></switch></g></g></g><g data-cell-id="model_note"><g><rect x="370" y="525" width="180" height="20" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 535px; margin-left: 371px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #607D8B; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#607D8B, #728b97); line-height: 1.2; pointer-events: all; font-style: italic; white-space: normal; word-wrap: normal; ">No finetuning - prompting only!</div></div></div></foreignObject><text x="460" y="538" fill="#607D8B" font-family="Helvetica" font-size="10px" text-anchor="middle" font-style="italic" style="fill: light-dark(rgb(96, 125, 139), rgb(114, 139, 151));">No finetuning - prompting only!</text></switch></g></g></g><g data-cell-id="takeaway_header"><g><rect x="570" y="425" width="160" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 158px; height: 1px; padding-top: 440px; margin-left: 572px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">✨ Key Takeaways</div></div></div></foreignObject><text x="572" y="445" fill="#1a237e" font-family="Helvetica" font-size="16px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">✨ Key Takeaways</text></switch></g></g></g><g data-cell-id="takeaway_box"><g transform="translate(0.5,0.5)"><rect x="570" y="455" width="160" height="95" rx="7.6" ry="7.6" fill="#fff8e1" stroke="#ffa000" pointer-events="all" style="fill: light-dark(rgb(255, 248, 225), rgb(30, 24, 4)); stroke: light-dark(rgb(255, 160, 0), rgb(167, 85, 0));"/></g></g><g data-cell-id="take1"><g><rect x="575" y="460" width="150" height="18" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 143px; height: 1px; padding-top: 469px; margin-left: 582px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">✓ Simple yet powerful</div></div></div></foreignObject><text x="582" y="472" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">✓ Simple yet powerful</text></switch></g></g></g><g data-cell-id="take2"><g><rect x="575" y="478" width="150" height="18" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 143px; height: 1px; padding-top: 487px; margin-left: 582px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">✓ Emergent at scale</div></div></div></foreignObject><text x="582" y="490" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">✓ Emergent at scale</text></switch></g></g></g><g data-cell-id="take3"><g><rect x="575" y="496" width="150" height="18" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 143px; height: 1px; padding-top: 505px; margin-left: 582px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">✓ Broadly applicable</div></div></div></foreignObject><text x="582" y="508" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">✓ Broadly applicable</text></switch></g></g></g><g data-cell-id="take4"><g><rect x="575" y="514" width="150" height="18" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 143px; height: 1px; padding-top: 523px; margin-left: 582px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">✓ No training needed</div></div></div></foreignObject><text x="582" y="526" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">✓ No training needed</text></switch></g></g></g><g data-cell-id="take5"><g><rect x="575" y="532" width="150" height="18" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 143px; height: 1px; padding-top: 541px; margin-left: 582px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">✓ State-of-the-art results</div></div></div></foreignObject><text x="582" y="544" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">✓ State-of-the-art results</text></switch></g></g></g><g data-cell-id="format_header"><g><rect x="10" y="555" width="150" height="25" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 568px; margin-left: 12px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">📝 Prompt Format</div></div></div></foreignObject><text x="12" y="572" fill="#1a237e" font-family="Helvetica" font-size="14px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">📝 Prompt Format</text></switch></g></g></g><g data-cell-id="format_box"><g transform="translate(0.5,0.5)"><rect x="10" y="580" width="250" height="35" rx="5.25" ry="5.25" fill="#e1bee7" stroke="#7b1fa2" pointer-events="all" style="fill: light-dark(rgb(225, 190, 231), rgb(86, 56, 92)); stroke: light-dark(rgb(123, 31, 162), rgb(239, 160, 255));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 248px; height: 1px; padding-top: 598px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">〈 Input, Chain of Thought, Output 〉</div></div></div></foreignObject><text x="135" y="601" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));">〈 Input, Chain of Thought, Output 〉</text></switch></g></g></g><g data-cell-id="limit_header"><g><rect x="280" y="555" width="120" height="25" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 568px; margin-left: 282px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">⚠️ Limitations</div></div></div></foreignObject><text x="282" y="572" fill="#1a237e" font-family="Helvetica" font-size="14px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">⚠️ Limitations</text></switch></g></g></g><g data-cell-id="limit_box"><g transform="translate(0.5,0.5)"><rect x="280" y="580" width="200" height="55" rx="8.25" ry="8.25" fill="#ffebee" stroke="#c62828" pointer-events="all" style="fill: light-dark(rgb(255, 235, 238), rgb(44, 27, 30)); stroke: light-dark(rgb(198, 40, 40), rgb(255, 145, 145));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 190px; height: 1px; padding-top: 608px; margin-left: 290px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">• Requires large models (~100B+)<br />• No guarantee of correct reasoning<br />• Costly to serve in production</div></div></div></foreignObject><text x="290" y="599" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="290" y="599">• Requires large models (~100B+)</tspan><tspan x="290" y="611">• No guarantee of correct reasoning</tspan><tspan x="290" y="623">• Costly to serve in production</tspan></text></switch></g></g></g><g data-cell-id="impact_header"><g><rect x="500" y="555" width="100" height="25" fill="none" stroke="none" pointer-events="all"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 568px; margin-left: 502px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #1a237e; "><div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: light-dark(#1a237e, #bfc7ff); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">🚀 Impact</div></div></div></foreignObject><text x="502" y="572" fill="#1a237e" font-family="Helvetica" font-size="14px" font-weight="bold" style="fill: light-dark(rgb(26, 35, 126), rgb(191, 199, 255));">🚀 Impact</text></switch></g></g></g><g data-cell-id="impact_box"><g transform="translate(0.5,0.5)"><rect x="500" y="580" width="230" height="55" rx="8.25" ry="8.25" fill="#e8f5e9" stroke="#2e7d32" pointer-events="all" style="fill: light-dark(rgb(232, 245, 233), rgb(21, 33, 22)); stroke: light-dark(rgb(46, 125, 50), rgb(100, 168, 104));"/></g><g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 212px; height: 1px; padding-top: 608px; margin-left: 510px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; color: #000000; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Foundational technique for modern LLM reasoning - inspired many follow-up works including Self-Consistency, Tree-of-Thought, etc.</div></div></div></foreignObject><text x="510" y="593" fill="#000000" font-family="Helvetica" font-size="10px" style="fill: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"><tspan x="510" y="593">Foundational technique for modern LLM</tspan><tspan x="510" y="605">reasoning - inspired many follow-up works</tspan><tspan x="510" y="617">including Self-Consistency, Tree-of-Thought,</tspan><tspan x="510" y="629">etc.</tspan></text></switch></g></g></g></g></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
\ No newline at end of file