Skip to content

Commit

Permalink
Merge branch 'main' into pdl-215
Browse files Browse the repository at this point in the history
  • Loading branch information
mandel committed Jan 22, 2025
2 parents 7db24ed + d8c29c4 commit c19e0ff
Show file tree
Hide file tree
Showing 61 changed files with 3,579 additions and 1,622 deletions.
7 changes: 7 additions & 0 deletions pdl-live-react/demos/demo1.pdl
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
description: Simple LLM interaction
text:
- "write a hello world example\n"
- model: ollama/granite-code:8b
parameters:
stop_sequences: '!'
temperature: 0
14 changes: 14 additions & 0 deletions pdl-live-react/demos/run.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
#!/bin/sh

SCRIPTDIR=$(cd $(dirname "$0") && pwd)
UI="$SCRIPTDIR"/.. # top of react UI
TOP="$UI"/.. # top of repo
T="$UI"/src/demos # place to store traces

pdl --trace "$T"/demo1.json "$UI"/demos/demo1.pdl
pdl --trace "$T"/demo2.json "$TOP"/examples/tutorial/model_chaining.pdl
pdl --trace "$T"/demo3.json "$TOP"/examples/fibonacci/fib.pdl
pdl --trace "$T"/demo4.json "$TOP"/examples/chatbot/chatbot.pdl # WARNING: this one requires some human interaction. TODO script this.
pdl --trace "$T"/demo5.json "$TOP"/examples/talk/6-code-json.pdl
pdl --trace "$T"/demo6.json "$UI"/demos/error.pdl || true
pdl --trace "$T"/demo7.json "$TOP"/examples/talk/4-function.pdl
2 changes: 1 addition & 1 deletion pdl-live-react/eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
{ ignores: ['dist','test-results'] },
{ ignores: ['dist','test-results','src/**/*.d.ts'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
Expand Down
3 changes: 2 additions & 1 deletion pdl-live-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@
"test": "concurrently -n 'quality,playwright' 'yarn test:quality' 'yarn test:ui'"
},
"dependencies": {
"@patternfly/react-code-editor": "^6.1.0",
"@patternfly/react-core": "^6.1.0",
"pretty-ms": "^9.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-markdown": "^9.0.3",
"react-router-dom": "^7.1.2",
"react-syntax-highlighter": "^15.6.1",
"ts-pattern": "^5.6.0",
"yaml": "^2.7.0"
},
Expand Down
3 changes: 0 additions & 3 deletions pdl-live-react/src/Context.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@ export default interface Context {
/** Current tree parent chain as we are traversing the trace's AST, used to uniquely identify a node */
id: string

/** Are we rendering in dark mode? */
darkMode: boolean

/** Callback to set drawer content */
setDrawerContent: SDC

Expand Down
10 changes: 8 additions & 2 deletions pdl-live-react/src/DrawerContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function DrawerContent(props: Props) {
)

return (
<Card isPlain isLarge className="pdl-drawer-content">
<Card isPlain isLarge isFullHeight className="pdl-drawer-content">
<CardHeader
actions={{
actions: (
Expand All @@ -59,7 +59,13 @@ export default function DrawerContent(props: Props) {
{!asTabs(props.body) ? (
props.body
) : (
<Tabs isFilled activeKey={activeTab} onSelect={handleTabClick}>
<Tabs
isFilled
activeKey={activeTab}
onSelect={handleTabClick}
mountOnEnter
unmountOnExit
>
{props.body.map(({ title, body }, idx) => (
<Tab
key={idx}
Expand Down
4 changes: 4 additions & 0 deletions pdl-live-react/src/Page.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.pdl-content-section {
/* This places the content e.g. editors flush with the tabs */
padding-top: 0;
}
3 changes: 3 additions & 0 deletions pdl-live-react/src/Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import DrawerContent from "./DrawerContent"
import DrawerContext from "./DrawerContentContext"
import DarkModeContext, { getDarkModeUserSetting } from "./DarkModeContext"

import "./Page.css"

const notFilled = { isFilled: false }

type Props = PropsWithChildren<{
Expand Down Expand Up @@ -67,6 +69,7 @@ export default function PDLPage({ breadcrumb1, breadcrumb2, children }: Props) {
<PageSection
isFilled
hasOverflowScroll
className="pdl-content-section"
aria-label="PDL Viewer main section"
>
<DrawerContext.Provider value={setDrawerContent}>
Expand Down
10 changes: 4 additions & 6 deletions pdl-live-react/src/Sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
import demos from "./demos/demos"

export default function Sidebar() {
const { pathname: activeItem } = useLocation()
const { hash, pathname: activeItem } = useLocation()

return (
<PageSidebar id="pdl--vertical-sidebar">
Expand All @@ -26,18 +26,16 @@ export default function Sidebar() {
</NavItem>

<NavItem itemId="viewer" isActive={activeItem === "/upload"}>
<Link to="/upload">Upload a Trace</Link>
<Link to={"/upload" + hash}>Upload a Trace</Link>
</NavItem>
</NavList>

<NavGroup title="Demos">
{demos.map((demo) => {
const id = "/demos/" + demo.name
const id = "/demos/" + encodeURIComponent(demo.name)
return (
<NavItem key={id} itemId={id} isActive={activeItem === id}>
<Link to={`/demos/${encodeURIComponent(demo.name)}`}>
{demo.name}
</Link>
<Link to={id + hash}>{demo.name}</Link>
</NavItem>
)
})}
Expand Down
49 changes: 0 additions & 49 deletions pdl-live-react/src/SplitPane.css

This file was deleted.

38 changes: 16 additions & 22 deletions pdl-live-react/src/Viewer.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { lazy, useMemo } from "react"
import { useLocation } from "react-router"
import { useContext, useMemo } from "react"

import Code from "./view/Code"
const Code = lazy(() => import("./view/Code"))
const Timeline = lazy(() => import("./view/timeline/Timeline"))
import Transcript from "./view/transcript/Transcript"
import DarkModeContext from "./DarkModeContext"

import type { PdlBlock } from "./pdl_ast"

import "./Viewer.css"

Expand All @@ -14,29 +12,25 @@ export default function Viewer({ value }: { value: string }) {
// We will use this to find the current active tab (below)
const { hash: activeTab } = useLocation()

// DarkMode state
const darkMode = useContext(DarkModeContext)

const data = useMemo(
() => (value ? (JSON.parse(value) as PdlBlock) : null),
() => (value ? (JSON.parse(value) as import("./pdl_ast").PdlBlock) : null),
[value],
)

if (!data) {
return "Invalid trace content"
}

return (
<>
<section hidden={activeTab !== "#source"}>
<Code block={data} darkMode={darkMode} limitHeight={false} />
</section>
<section hidden={activeTab !== "#raw"}>
<Code block={data} darkMode={darkMode} limitHeight={false} raw />
</section>
<section hidden={activeTab === "#source" || activeTab === "#raw"}>
<Transcript data={data} />
</section>
</>
)
switch (activeTab) {
case "#raw":
case "#source":
return (
<Code block={data} limitHeight={false} raw={activeTab === "#raw"} />
)
case "#timeline":
return <Timeline block={data} />
default:
case "#transcript":
return <Transcript data={data} />
}
}
9 changes: 8 additions & 1 deletion pdl-live-react/src/ViewerTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,13 @@ export default function Viewer() {
className="pdl-viewer-tab"
title={<TabTitleText>Transcript</TabTitleText>}
/>,
<Tab
key="#timeline"
href="#timeline"
eventKey="#timeline"
className="pdl-viewer-tab"
title={<TabTitleText>Timeline</TabTitleText>}
/>,
<Tab
key="#source"
href="#source"
Expand All @@ -39,7 +46,7 @@ export default function Viewer() {
}

return (
<Tabs activeKey={activeTab} component="nav">
<Tabs activeKey={activeTab} component="nav" mountOnEnter>
{tabs}
</Tabs>
)
Expand Down
1 change: 1 addition & 0 deletions pdl-live-react/src/demos/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ These demo traces were sourced as follows:
- demo4: [chatbot.pdl](../../../examples/chatbot/chatbot.pdl)
- demo5: [6-code-json.pdl](../../../examples/talk/6-code-json.pdl)
- demo6: [error.pdl](../../demos/error.pdl)
- demo7: [4-talk.pdl](../../../examples/talk/4-function.pdl)
21 changes: 1 addition & 20 deletions pdl-live-react/src/demos/demo1.json
Original file line number Diff line number Diff line change
@@ -1,20 +1 @@
{
"kind": "text",
"description": "Simple LLM interaction",
"defs": {},
"text": [
"write a hello world example\n",
{
"kind": "model",
"defs": {},
"platform": "litellm",
"model": "ollama/granite-code:8b",
"parameters": {
"temperature": 0.0,
"stop_sequences": "!"
},
"result": "```python\nprint(\"hello world\")\n```\n"
}
],
"result": "write a hello world example\n```python\nprint(\"hello world\")\n```\n"
}
{"kind": "text", "start_nanos": 1737481387443288000, "end_nanos": 1737481388576573000, "timezone": "EST", "description": "Simple LLM interaction", "defs": {}, "text": ["write a hello world example\n", {"kind": "model", "start_nanos": 1737481387444188000, "end_nanos": 1737481388576550000, "timezone": "EST", "defs": {}, "platform": "litellm", "model": "ollama/granite-code:8b", "parameters": {"temperature": 0.0, "stop_sequences": "!"}, "result": "```python\nprint(\"hello world\")\n```\n"}], "result": "write a hello world example\n```python\nprint(\"hello world\")\n```\n"}
2 changes: 1 addition & 1 deletion pdl-live-react/src/demos/demo2.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"kind": "text", "description": "Model chaining", "defs": {}, "text": ["Hello\n", {"kind": "model", "defs": {}, "platform": "litellm", "model": "ollama/granite-code:8b", "parameters": {"stop_sequences": "!"}, "result": "Hello! How can I help you today?\n"}, "\nDid you just say Hello?\n", {"kind": "model", "defs": {}, "platform": "litellm", "model": "ollama/granite-code:8b", "parameters": {"stop_sequences": "!"}, "result": "Yes, I did. Is there anything I can help you with?\n"}], "result": "Hello\nHello! How can I help you today?\n\nDid you just say Hello?\nYes, I did. Is there anything I can help you with?\n"}
{"kind": "text", "start_nanos": 1737481389613977000, "end_nanos": 1737481390433251000, "timezone": "EST", "description": "Model chaining", "defs": {}, "text": ["Hello\n", {"kind": "model", "start_nanos": 1737481389614907000, "end_nanos": 1737481390031193000, "timezone": "EST", "defs": {}, "platform": "litellm", "model": "ollama/granite-code:8b", "parameters": {"stop_sequences": "!"}, "result": "Hello! How can I help you today?\n"}, "\nDid you just say Hello?\n", {"kind": "model", "start_nanos": 1737481390031579000, "end_nanos": 1737481390433219000, "timezone": "EST", "defs": {}, "platform": "litellm", "model": "ollama/granite-code:8b", "parameters": {"stop_sequences": "!"}, "result": "Yes, I did. How can I assist you further?\n"}], "result": "Hello\nHello! How can I help you today?\n\nDid you just say Hello?\nYes, I did. How can I assist you further?\n"}
58 changes: 1 addition & 57 deletions pdl-live-react/src/demos/demo3.json
Original file line number Diff line number Diff line change
@@ -1,57 +1 @@
{
"kind": "text",
"description": "Fibonacci",
"defs": {},
"text": [
{
"kind": "model",
"defs": {},
"platform": "litellm",
"model": "ollama/granite-code:8b",
"input": "Write a Python function to compute the Fibonacci sequence. Do not include a doc string.\n\n",
"parameters": {
"temperature": 0.0
},
"def": "CODE",
"result": "Here is the implementation of the Fibonacci sequence in Python:\n\n```python\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n```\n"
},
"\nExtract the Python code from the LLM response\n",
{
"kind": "code",
"defs": {},
"lang": "python",
"code": "s = \"\"\"'Here is the implementation of the Fibonacci sequence in Python:\n\n```python\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n```\n '\"\"\"\nresult = s.split(\"```\")[1].replace(\"python\", \"\")\n",
"def": "EXTRACTED",
"result": "\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n"
},
"\nFind a random number between 1 and 20\n",
{
"kind": "code",
"defs": {},
"lang": "python",
"code": "import random\nresult = random.randint(1, 20)\n",
"def": "N",
"result": 14
},
"\nNow compute `fibonacci(14)`\n",
{
"kind": "code",
"defs": {},
"lang": "python",
"code": "\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n\nresult = fibonacci(14)\n",
"def": "RESULT",
"contribute": [],
"result": 377
},
"The result is: 377",
"\n\nExplain what the above code does and what the result means\n\n",
{
"kind": "model",
"defs": {},
"platform": "litellm",
"model": "ollama/granite-code:8b",
"result": "The Python code defines a recursive function called `fibonacci` that calculates the nth Fibonacci number. The function checks if n is less than or equal to 1, in which case it returns n. Otherwise, it recursively calls itself with arguments n-1 and n-2, and adds the results together.\n\nThe result of `fibonacci(14)` is 377, which means that the 14th Fibonacci number is 377. The Fibonacci sequence is a series of numbers in which each number is the sum of the two preceding ones, starting from 0 and 1. So, the first few Fibonacci numbers are:\n\n0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, ...\n\nThe 14th Fibonacci number is 377, which means that the sum of the 13th and 12th Fibonacci numbers is 377. This is an example of how the Fibonacci sequence can be used to calculate the sum of two preceding terms in the sequence.\n"
}
],
"result": "Here is the implementation of the Fibonacci sequence in Python:\n\n```python\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n```\n\nExtract the Python code from the LLM response\n\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n\nFind a random number between 1 and 20\n14\nNow compute `fibonacci(14)`\nThe result is: 377\n\nExplain what the above code does and what the result means\n\nThe Python code defines a recursive function called `fibonacci` that calculates the nth Fibonacci number. The function checks if n is less than or equal to 1, in which case it returns n. Otherwise, it recursively calls itself with arguments n-1 and n-2, and adds the results together.\n\nThe result of `fibonacci(14)` is 377, which means that the 14th Fibonacci number is 377. The Fibonacci sequence is a series of numbers in which each number is the sum of the two preceding ones, starting from 0 and 1. So, the first few Fibonacci numbers are:\n\n0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, ...\n\nThe 14th Fibonacci number is 377, which means that the sum of the 13th and 12th Fibonacci numbers is 377. This is an example of how the Fibonacci sequence can be used to calculate the sum of two preceding terms in the sequence.\n"
}
{"kind": "text", "start_nanos": 1737481391456942000, "end_nanos": 1737481396443243000, "timezone": "EST", "description": "Fibonacci", "defs": {}, "text": [{"kind": "model", "start_nanos": 1737481391456982000, "end_nanos": 1737481392659272000, "timezone": "EST", "defs": {}, "platform": "litellm", "model": "ollama/granite-code:8b", "input": "Write a Python function to compute the Fibonacci sequence. Do not include a doc string.\n\n", "parameters": {"temperature": 0.0}, "def": "CODE", "result": "Here is the implementation of the Fibonacci sequence in Python:\n\n```python\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n```\n"}, "\nExtract the Python code from the LLM response\n", {"kind": "code", "start_nanos": 1737481392659645000, "end_nanos": 1737481392661060000, "timezone": "EST", "defs": {}, "lang": "python", "code": "s = \"\"\"'Here is the implementation of the Fibonacci sequence in Python:\n\n```python\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n```\n '\"\"\"\nresult = s.split(\"```\")[1].replace(\"python\", \"\")\n", "def": "EXTRACTED", "result": "\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n"}, "\nFind a random number between 1 and 20\n", {"kind": "code", "start_nanos": 1737481392661332000, "end_nanos": 1737481392661708000, "timezone": "EST", "defs": {}, "lang": "python", "code": "import random\n# (In PDL, set `result` to the output you wish for your code block.)\nresult = random.randint(1, 20)\n", "def": "N", "result": 11}, "\nNow compute `fibonacci(11)`\n", {"kind": "code", "start_nanos": 1737481392662005000, "end_nanos": 1737481392662424000, "timezone": "EST", "defs": {}, "lang": "python", "code": "\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n\nresult = fibonacci(11)\n", "def": "RESULT", "contribute": [], "result": 89}, "The result is: 89", "\n\nExplain what the above code does and what the result means\n\n", {"kind": "model", "start_nanos": 1737481392662831000, "end_nanos": 1737481396443207000, "timezone": "EST", "defs": {}, "platform": "litellm", "model": "ollama/granite-code:8b", "result": "The code defines a recursive function called `fibonacci` that takes an integer `n` as input. If `n` is less than or equal to 1, the function simply returns `n`. Otherwise, it recursively calls itself with `n-1` and `n-2`, adds the results, and returns the sum.\n\nThe result of computing `fibonacci(11)` is 89. This means that the 11th number in the Fibonacci sequence is 89. The Fibonacci sequence starts with 0 and 1, so the first few numbers are 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, and 55. The 11th number in this sequence is 89.\n"}], "result": "Here is the implementation of the Fibonacci sequence in Python:\n\n```python\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n```\n\nExtract the Python code from the LLM response\n\ndef fibonacci(n):\n if n <= 1:\n return n\n else:\n return fibonacci(n-1) + fibonacci(n-2)\n\nFind a random number between 1 and 20\n11\nNow compute `fibonacci(11)`\nThe result is: 89\n\nExplain what the above code does and what the result means\n\nThe code defines a recursive function called `fibonacci` that takes an integer `n` as input. If `n` is less than or equal to 1, the function simply returns `n`. Otherwise, it recursively calls itself with `n-1` and `n-2`, adds the results, and returns the sum.\n\nThe result of computing `fibonacci(11)` is 89. This means that the 11th number in the Fibonacci sequence is 89. The Fibonacci sequence starts with 0 and 1, so the first few numbers are 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, and 55. The 11th number in this sequence is 89.\n"}
Loading

0 comments on commit c19e0ff

Please sign in to comment.