Skip to content

Commit 946ba93

Browse files
bsorrentinobsorrentino
committedDec 1, 2024
feat(studio): Add a new component for image upload
1 parent 187f913 commit 946ba93

File tree

7 files changed

+467
-172
lines changed

7 files changed

+467
-172
lines changed
 

‎studio/src/main/js/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>LangGraph4j App</title>
99

10+
<script type="module" src="/src/lg4j-image-uploader.js"></script>
1011
<script type="module" src="/src/lg4j-node-output.js"></script>
1112
<script type="module" src="/src/lg4j-workbench.js"></script>
1213
<script type="module" src="/src/lg4j-executor.js"></script>

‎studio/src/main/js/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
6+
"types": "./src/types.d.ts",
67
"scripts": {
78
"dev": "parcel index.html --no-cache",
89
"parcel:build": "parcel build index.html --public-url '.'",

‎studio/src/main/js/src/lg4j-executor-test.js

+240
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
2+
/**
3+
* @file
4+
* @typedef {import('./types.js').ResultData} ResultData
5+
* @typedef {import('./types.js').EditEvent} EditEvent
6+
* @typedef {import('./types.js').UpdatedState} UpdatedState
7+
* @typedef {import('./types.js').InitData} InitData
8+
* @typedef {import('./types.js').ArgumentMetadata} ArgumentMetadata
9+
*
10+
*/
11+
12+
/**
13+
* Asynchronously waits for a specified number of milliseconds.
14+
*
15+
* @param {number} ms - The number of milliseconds to wait.
16+
* @returns {Promise<void>} A promise that resolves after the specified delay.
17+
*/
18+
const delay = async (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
19+
20+
export const adaptiveRAG = {
21+
/**
22+
* @param {HTMLElement} elem
23+
* @returns {Promise<InitData>}
24+
*/
25+
callInit: async (elem) => {
26+
27+
/** @typedef {InitData} */
28+
const detail = {
29+
threads: [['default', []]],
30+
title: 'LangGraph4j : TEST',
31+
args: [
32+
{ name: 'input', type: 'STRING', required: true }
33+
],
34+
graph: `
35+
---
36+
title: TEST
37+
---
38+
flowchart TD
39+
start((start))
40+
stop((stop))
41+
web_search("web_search")
42+
retrieve("retrieve")
43+
grade_documents("grade_documents")
44+
generate("generate")
45+
transform_query("transform_query")
46+
start:::start -->|web_search| web_search:::web_search
47+
start:::start -->|vectorstore| retrieve:::retrieve
48+
web_search:::web_search --> generate:::generate
49+
retrieve:::retrieve --> grade_documents:::grade_documents
50+
grade_documents:::grade_documents -->|transform_query| transform_query:::transform_query
51+
grade_documents:::grade_documents -->|generate| generate:::generate
52+
transform_query:::transform_query --> retrieve:::retrieve
53+
generate:::generate -->|not supported| generate:::generate
54+
generate:::generate -->|not useful| transform_query:::transform_query
55+
generate:::generate -->|useful| stop:::stop
56+
`
57+
}
58+
59+
await delay(1000);
60+
61+
/** @typedef {CustomEvent<InitData>} */
62+
const event = new CustomEvent('init', {
63+
detail,
64+
bubbles: true,
65+
composed: true,
66+
cancelable: true
67+
});
68+
69+
70+
elem.dispatchEvent(event);
71+
72+
// @ts-ignore
73+
return detail;
74+
},
75+
76+
77+
/**
78+
* @param {HTMLElement} elem
79+
* @param {string|undefined} selectedThread
80+
*/
81+
callSubmitAction: async (elem, selectedThread) => {
82+
83+
const thread = selectedThread
84+
85+
const send = async ( /** @type {string} */ nodeId) => {
86+
87+
/** @typedef {ResultData} */
88+
const detail = [thread, {
89+
checkpoint: (nodeId === 'start' || nodeId === 'stop') ? undefined : `checkpoint-${nodeId}`,
90+
node: nodeId,
91+
state: {
92+
input: "this is input",
93+
property1: { value: "value1", valid: true },
94+
property2: { value: "value2", children: { elements: [1, 2, 3] } }
95+
}
96+
}
97+
]
98+
99+
/** @typedef {CustomEvent<ResultData>} */
100+
const event = new CustomEvent('result', {
101+
detail,
102+
bubbles: true,
103+
composed: true,
104+
cancelable: true
105+
});
106+
107+
await delay(1000);
108+
elem.dispatchEvent(event);
109+
}
110+
111+
await send('start');
112+
await send('retrieve');
113+
await send('grade_documents');
114+
await send('transform_query');
115+
await send('retrieve');
116+
await send('grade_documents');
117+
await send('generate');
118+
await send('stop');
119+
120+
}
121+
122+
};
123+
124+
export const imageToDiagram = {
125+
/**
126+
* @param {HTMLElement} elem
127+
* @returns {Promise<InitData>}
128+
*/
129+
callInit: async (elem) => {
130+
131+
/** @typedef {InitData} */
132+
const detail = {
133+
threads: [['default', []]],
134+
title: 'LangGraph4j : TEST',
135+
args: [
136+
{ name: 'input', type: 'IMAGE', required: true }
137+
],
138+
graph: `
139+
---
140+
title: Image to diagram with correction
141+
---
142+
flowchart TD
143+
__START__((start))
144+
__END__((stop))
145+
agent_describer("agent_describer")
146+
agent_sequence_plantuml("agent_sequence_plantuml")
147+
agent_generic_plantuml("agent_generic_plantuml")
148+
subgraph evaluate_result
149+
___START__((start)):::___START__
150+
___END__((stop)):::___END__
151+
_evaluate_result("evaluate_result")
152+
_agent_review("agent_review")
153+
%% _condition1{"check state"}
154+
___START__:::___START__ --> _evaluate_result:::_evaluate_result
155+
_agent_review:::_agent_review --> _evaluate_result:::_evaluate_result
156+
%% _evaluate_result:::_evaluate_result --> _condition1:::_condition1
157+
%% _condition1:::_condition1 -->|ERROR| _agent_review:::_agent_review
158+
_evaluate_result:::_evaluate_result -->|ERROR| _agent_review:::_agent_review
159+
%% _condition1:::_condition1 -->|UNKNOWN| ___END__:::___END__
160+
_evaluate_result:::_evaluate_result -->|UNKNOWN| ___END__:::___END__
161+
%% _condition1:::_condition1 -->|OK| ___END__:::___END__
162+
_evaluate_result:::_evaluate_result -->|OK| ___END__:::___END__
163+
end
164+
%% condition1{"check state"}
165+
__START__:::__START__ --> agent_describer:::agent_describer
166+
%% agent_describer:::agent_describer --> condition1:::condition1
167+
%% condition1:::condition1 -->|sequence| agent_sequence_plantuml:::agent_sequence_plantuml
168+
agent_describer:::agent_describer -->|sequence| agent_sequence_plantuml:::agent_sequence_plantuml
169+
%% condition1:::condition1 -->|generic| agent_generic_plantuml:::agent_generic_plantuml
170+
agent_describer:::agent_describer -->|generic| agent_generic_plantuml:::agent_generic_plantuml
171+
agent_sequence_plantuml:::agent_sequence_plantuml --> evaluate_result:::evaluate_result
172+
agent_generic_plantuml:::agent_generic_plantuml --> evaluate_result:::evaluate_result
173+
evaluate_result:::evaluate_result --> __END__:::__END__
174+
175+
classDef ___START__ fill:black,stroke-width:1px,font-size:xx-small;
176+
classDef ___END__ fill:black,stroke-width:1px,font-size:xx-small;
177+
`
178+
}
179+
180+
await delay(1000);
181+
182+
/** @typedef {CustomEvent<InitData>} */
183+
const event = new CustomEvent('init', {
184+
detail,
185+
bubbles: true,
186+
composed: true,
187+
cancelable: true
188+
});
189+
190+
elem.dispatchEvent(event);
191+
192+
// @ts-ignore
193+
return detail
194+
},
195+
196+
197+
/**
198+
* @param {HTMLElement} elem
199+
* @param {string|undefined} selectedThread
200+
*/
201+
callSubmitAction: async (elem, selectedThread) => {
202+
203+
const thread = selectedThread
204+
205+
const send = async ( /** @type {string} */ nodeId) => {
206+
207+
/** @typedef {ResultData} */
208+
const detail = [thread, {
209+
checkpoint: (nodeId === 'start' || nodeId === 'stop') ? undefined : `checkpoint-${nodeId}`,
210+
node: nodeId,
211+
state: {
212+
input: "this is input",
213+
property1: { value: "value1", valid: true },
214+
property2: { value: "value2", children: { elements: [1, 2, 3] } }
215+
}
216+
}]
217+
218+
/** @typedef {CustomEvent<ResultData>} */
219+
const event = new CustomEvent('result', {
220+
detail,
221+
bubbles: true,
222+
composed: true,
223+
cancelable: true
224+
});
225+
226+
await delay(1000);
227+
elem.dispatchEvent(event);
228+
}
229+
230+
await send('__START__');
231+
await send('agent_describer');
232+
await send('agent_generic_plantuml');
233+
await send('___START__');
234+
await send('_evaluate_result');
235+
await send('___END__');
236+
await send('__END__');
237+
238+
}
239+
240+
}

0 commit comments

Comments
 (0)