Skip to content

Commit 111d24e

Browse files
authored
Integrate with common-ui (#48)
* Add (pushy) webcam support * Debug window * De-style the app and shakeup the layout * Hack in a few tags and use common-ui for rendering * Update common-ui * Simplify markdown component * Basic event support, clock node * Replace generate with subject * Add `npm run dev` script * Re-organize agent code * Re-order tools array * Add basic storage node * Revert common-ui render hacks
1 parent 7aee407 commit 111d24e

37 files changed

+1026
-432
lines changed

typescript/package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { view } from "../hyperscript/render.js";
2+
3+
export const button = view("button", {
4+
type: "object",
5+
properties: {
6+
id: { type: "string" },
7+
"@click": {
8+
type: "object",
9+
properties: { "@type": { type: "string" }, name: { type: "string" } },
10+
},
11+
},
12+
});
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { view } from "../hyperscript/render.js";
2+
3+
export const h1 = view("h1", {
4+
type: "object",
5+
properties: {
6+
id: { type: "string" },
7+
},
8+
});
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { view } from "../hyperscript/render.js";
2+
3+
export const p = view("p", {
4+
type: "object",
5+
properties: {
6+
id: { type: "string" },
7+
},
8+
});
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { view } from "../hyperscript/render.js";
2+
3+
export const span = view("span", {
4+
type: "object",
5+
properties: {
6+
id: { type: "string" },
7+
},
8+
});

typescript/packages/common-ui/src/hyperscript/render.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,4 +109,4 @@ export default render;
109109
const setProp = (element: HTMLElement, key: string, value: any) => {
110110
// @ts-ignore
111111
element[key] = value;
112-
}
112+
}

typescript/packages/common-ui/src/hyperscript/tags.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,8 @@ export { div } from "../components/div.js";
44
export { navpanel } from "../components/navpanel.js";
55
export { record } from "../components/record.js";
66
export { dict } from "../components/dict.js";
7-
export { datatable } from "../components/datatable.js";
7+
export { datatable } from "../components/datatable.js";
8+
export { span } from "../components/span.js";
9+
export { h1 } from "../components/h1.js";
10+
export { p } from "../components/p.js";
11+
export { button } from "../components/button.js";

typescript/packages/lookslike-prototype/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"private": true,
88
"type": "module",
99
"scripts": {
10+
"dev": "vite",
1011
"build": "wireit",
1112
"clean": "wireit"
1213
},
@@ -33,7 +34,8 @@
3334
"../../common/runtime:build",
3435
"../usuba-rt:build",
3536
"../common-frp:build",
36-
"../common-frp-lit:build"
37+
"../common-frp-lit:build",
38+
"../common-ui:build"
3739
],
3840
"command": "vite build"
3941
},
@@ -51,6 +53,7 @@
5153
"@codemirror/view": "^6.27.0",
5254
"@commontools/common-frp": "^0.0.1",
5355
"@commontools/common-frp-lit": "^0.0.1",
56+
"@commontools/common-ui": "^0.0.1",
5457
"@commontools/data": "^0.0.1",
5558
"@commontools/io": "^0.0.1",
5659
"@commontools/module": "^0.0.1",
@@ -65,6 +68,7 @@
6568
"idb-keyval": "^6.2.1",
6669
"json-schema": "^0.4.0",
6770
"lit": "^3.1.3",
71+
"marked": "^13.0.0",
6872
"openai": "^4.47.2",
6973
"prettier": "^3.3.0",
7074
"pretty": "^2.0.0",
Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
2+
export const codePrompt = `
3+
Your task is to take a user description or request and produce a series of nodes for a computation graph. Nodes can be code blocks or UI components and they communicate with named ports.
4+
5+
You will construct the graph using the available tools to add, remove, replace and list nodes.
6+
You will provide the required edges to connect data from the environment to the inputs of the node. The keys of \`in\` are the names of local inputs and the values are NodePaths (of the form [context, nodeId], where context is typically '.' meaning local namespace).
7+
8+
"Imagine some todos" ->
9+
10+
addCodeNode({
11+
"id": "todos",
12+
"code": "return [{ label: 'Water my plants', checked: false }, { label: 'Buy milk', checked: true }];"
13+
})
14+
15+
Tasks that take no inputs require no edges.
16+
All function bodies must take zero parameters. Inputs can be accessed via 'read' and 'deref'.
17+
18+
---
19+
20+
"Remind me to water the plants" ->
21+
22+
addCodeNode({
23+
"id": "addReminder",
24+
"code": "const todos = input('todos');\nconst newTodo = { label: 'water the plants', checked: false };\nconst newTodos = [...todos, newTodo];\nreturn newTodos;"
25+
})
26+
27+
Tasks that take no inputs require no edges.
28+
29+
---
30+
31+
32+
"Take the existing todos and filter to unchecked" ->
33+
34+
addCodeNode({
35+
"id": "filteredTodos",
36+
"code": "const todos = input('todos');\nreturn todos.filter(todo => todo.checked);"
37+
})
38+
39+
Tasks that filter other data must pipe the data through the edges.
40+
All function bodies must take zero parameters. Inputs can be accessed via 'input()', values may be null.
41+
Always respond with code, even for static data. Wrap your response in a json block. Respond with nothing else.
42+
43+
---
44+
45+
"render each image by url" ->
46+
The output of a code node will be bound to the input named 'images'
47+
48+
addUiNode({
49+
"id": "imageUi",
50+
"uiTree": {
51+
"tag": "ul",
52+
"props": {
53+
"className": "image"
54+
},
55+
"children": [
56+
"type": "repeat",
57+
"binding": "images",
58+
"template": {
59+
"tag": "li",
60+
"props": {},
61+
"children": [
62+
{
63+
"tag": "img",
64+
"props": {
65+
"src": { "@type": 'binding', "name": 'src' },
66+
},
67+
"children": []
68+
}
69+
],
70+
}
71+
]
72+
}
73+
})
74+
75+
---
76+
77+
"show some text" ->
78+
The output of a code node will be bound to the input named 'text'
79+
80+
addUiNode({
81+
"id": "imageUi",
82+
"uiTree": {
83+
"tag": "span",
84+
"props": {
85+
"innerText": { "@type": "binding", "name": "text" }
86+
},
87+
"children": []
88+
}
89+
})
90+
91+
---
92+
93+
"make a clickable button" ->
94+
95+
addEventNode({
96+
"id": "clickEvent"
97+
})
98+
99+
addUiNode({
100+
"id": "buttonUi",
101+
"uiTree": {
102+
"tag": "button",
103+
"props": {
104+
"innerText": "Click me",
105+
"@click": { "@type": "binding", "name": "onClicked"}
106+
},
107+
"children": []
108+
}
109+
})
110+
111+
addConnection({
112+
"from": "clickEvent",
113+
"to": ["buttonUi", "onClicked"]
114+
})
115+
116+
---
117+
118+
"render my todos" ->
119+
The output of a code node will be bound to the input named 'todos'
120+
121+
addUiNode({
122+
"id": "todoUi",
123+
"uiTree": {
124+
"tag": "ul",
125+
"props": {
126+
"className": "todo"
127+
},
128+
"children": [
129+
{
130+
"@type": "repeat",
131+
"name": "todos",
132+
"template": {
133+
"tag": "li",
134+
"props": {},
135+
"children": [
136+
{
137+
"tag": "input",
138+
"props": {
139+
"type": "checkbox",
140+
"checked": { "@type": "binding", "name": "checked" }
141+
},
142+
"children": []
143+
},
144+
{
145+
"tag": "span",
146+
"props": {
147+
"className": "todo-label",
148+
"innerText": { "@type": "binding", "name": "label" }
149+
},
150+
"children": []
151+
}
152+
]
153+
}
154+
}
155+
]
156+
}
157+
})
158+
159+
UI trees cannot use any javascript methods, code blocks must prepare the data for the UI to consume.
160+
Plain text nodes MUST be applied using the innerText prop in a span, you cannot use a raw string.
161+
GLSL shaders cannot declare uniforms other than iTime, iResolution, iMouse and iChannel0 (the user's webcam).
162+
notalk;justgo
163+
`;

0 commit comments

Comments
 (0)