From edb9a5e668537e7c083f76b5ada57a49a7727a19 Mon Sep 17 00:00:00 2001 From: Yuqi Tang Date: Tue, 20 Aug 2024 15:47:34 -0700 Subject: [PATCH 1/3] update js code --- .../modals/apiModal/utils/get-js-api-code.tsx | 105 ++++++++++-------- 1 file changed, 59 insertions(+), 46 deletions(-) diff --git a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx index a61744c7a6fb..bb474c53a711 100644 --- a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx +++ b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx @@ -19,12 +19,11 @@ export default function getJsApiCode( return `class LangflowClient { constructor(baseURL, apiKey) { this.baseURL = baseURL; - this.apiKey = apiKey; + this.apiKey= apiKey; } + async post(endpoint, body, headers = {"Content-Type": "application/json"}) { - if (this.apiKey) { - headers["Authorization"] = \`Bearer \${this.apiKey}\`; - } + headers["Authorization"] = \`Bearer \${this.apiKey}\`; const url = \`\${this.baseURL}\${endpoint}\`; try { const response = await fetch(url, { @@ -32,84 +31,98 @@ export default function getJsApiCode( headers: headers, body: JSON.stringify(body) }); + + const responseMessage = await response.json(); if (!response.ok) { - throw new Error(\`HTTP error! Status: \${response.status}\`); + throw new Error(\`\${response.status} \${response.statusText} - \${JSON.stringify(responseMessage)}\`); } - return await response.json(); + return responseMessage; } catch (error) { - console.error('Request Error:', error); + console.error(\`Error during POST request: \${error.message}\`); throw error; } } - - async initiateSession(flowId, inputValue, stream = false, tweaks = {}) { + + async initiateSession(flowId, inputValue, inputType = 'chat', outputType = 'chat', stream = false, tweaks = {}) { const endpoint = \`/api/v1/run/\${flowId}?stream=\${stream}\`; - return this.post(endpoint, { input_value: inputValue, tweaks: tweaks }); + return this.post(endpoint, { input_value: inputValue, input_type: inputType, output_type: outputType, tweaks: tweaks }); } - + handleStream(streamUrl, onUpdate, onClose, onError) { const eventSource = new EventSource(streamUrl); - + eventSource.onmessage = event => { const data = JSON.parse(event.data); onUpdate(data); }; - + eventSource.onerror = event => { console.error('Stream Error:', event); onError(event); eventSource.close(); }; - + eventSource.addEventListener("close", () => { onClose('Stream closed'); eventSource.close(); }); - + return eventSource; } - - async runFlow(flowIdOrName, inputValue, tweaks, stream = false, onUpdate, onClose, onError) { + + async runFlow(flowIdOrName, langflowId, inputValue, inputType = 'chat', outputType = 'chat', tweaks, stream = false, onUpdate, onClose, onError) { try { - const initResponse = await this.initiateSession(flowIdOrName, inputValue, stream, tweaks); - console.log('Init Response:', initResponse); - if (stream && initResponse && initResponse.outputs && initResponse.outputs[0].outputs[0].artifacts.stream_url) { + const initResponse = await this.initiateSession(flowIdOrName, langflowId, inputValue, inputType, outputType, stream, tweaks); + if (stream && initResponse?.outputs?.[0]?.outputs?.[0]?.artifacts?.stream_url) { const streamUrl = initResponse.outputs[0].outputs[0].artifacts.stream_url; console.log(\`Streaming from: \${streamUrl}\`); this.handleStream(streamUrl, onUpdate, onClose, onError); } return initResponse; } catch (error) { - console.error('Error running flow:', error); - onError('Error initiating session'); + onError('Error initiating session'); } } -} - -async function main() { + } + + async function main(inputValue, inputType = 'chat', outputType = 'chat', stream = false) { const flowIdOrName = '${endpointName || flowId}'; - const inputValue = 'User message'; - const stream = false; const langflowClient = new LangflowClient('${window.location.protocol}//${window.location.host}', - ${isAuth ? "'your-api-key'" : "null"}); + ${isAuth ? "'your-api-key'" : "null"}); const tweaks = ${tweaksString}; - response = await langflowClient.runFlow( - flowIdOrName, - inputValue, - tweaks, - stream, - (data) => console.log("Received:", data.chunk), // onUpdate - (message) => console.log("Stream Closed:", message), // onClose - (error) => console.log("Stream Error:", error) // onError - ); - if (!stream) { - const flowOutputs = response.outputs[0]; - const firstComponentOutputs = flowOutputs.outputs[0]; - const output = firstComponentOutputs.outputs.message; - - console.log("Final Output:", output.message.text); + + try { + const response = await langflowClient.runFlow( + flowIdOrName, + langflowId, + inputValue, + inputType, + outputType, + tweaks, + stream, + (data) => console.log("Received:", data.chunk), // onUpdate + (message) => console.log("Stream Closed:", message), // onClose + (error) => console.error("Stream Error:", error) // onError + ); + + if (!stream && response) { + const flowOutputs = response.outputs[0]; + const firstComponentOutputs = flowOutputs.outputs[0]; + const output = firstComponentOutputs.outputs.message; + + console.log("Final Output:", output.message.text); + } + } catch (error) { + console.error('Main Error:', error.message); } -} - -main();`; + } + + const args = process.argv.slice(2); + main( + args[0], // inputValue + args[1], // inputType + args[2], // outputType + args[3] === 'true' // stream + ); + `; } From 47cd3fd6d9e6d4ebc520057b0afb18cfcbf8a0ad Mon Sep 17 00:00:00 2001 From: Yuqi Tang Date: Tue, 20 Aug 2024 16:06:17 -0700 Subject: [PATCH 2/3] fix langflowid --- src/frontend/package-lock.json | 1 - src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx | 5 ++--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 0ee08125c419..8cbae7c90ff5 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -1079,7 +1079,6 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", - "extraneous": true, "inBundle": true, "license": "MIT", "engines": { diff --git a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx index bb474c53a711..f9bd691230ae 100644 --- a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx +++ b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx @@ -70,9 +70,9 @@ export default function getJsApiCode( return eventSource; } - async runFlow(flowIdOrName, langflowId, inputValue, inputType = 'chat', outputType = 'chat', tweaks, stream = false, onUpdate, onClose, onError) { + async runFlow(flowIdOrName, inputValue, inputType = 'chat', outputType = 'chat', tweaks, stream = false, onUpdate, onClose, onError) { try { - const initResponse = await this.initiateSession(flowIdOrName, langflowId, inputValue, inputType, outputType, stream, tweaks); + const initResponse = await this.initiateSession(flowIdOrName, inputValue, inputType, outputType, stream, tweaks); if (stream && initResponse?.outputs?.[0]?.outputs?.[0]?.artifacts?.stream_url) { const streamUrl = initResponse.outputs[0].outputs[0].artifacts.stream_url; console.log(\`Streaming from: \${streamUrl}\`); @@ -94,7 +94,6 @@ export default function getJsApiCode( try { const response = await langflowClient.runFlow( flowIdOrName, - langflowId, inputValue, inputType, outputType, From b8df1db8789e412d4ab45dead2aea572d2f674f7 Mon Sep 17 00:00:00 2001 From: Yuqi Tang Date: Tue, 20 Aug 2024 16:41:11 -0700 Subject: [PATCH 3/3] fix code change --- src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx index f9bd691230ae..525c899957e6 100644 --- a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx +++ b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx @@ -19,11 +19,13 @@ export default function getJsApiCode( return `class LangflowClient { constructor(baseURL, apiKey) { this.baseURL = baseURL; - this.apiKey= apiKey; + this.apiKey = apiKey; } async post(endpoint, body, headers = {"Content-Type": "application/json"}) { - headers["Authorization"] = \`Bearer \${this.apiKey}\`; + if (this.apiKey) { + headers["Authorization"] = \`Bearer \${this.apiKey}\`; + } const url = \`\${this.baseURL}\${endpoint}\`; try { const response = await fetch(url, {