jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix: API JS generated code (#3461)

Browse source 
* update js code

* fix langflowid

* fix code change
This commit is contained in:
Yuqi Tang 2024-08-21 18:04:38 -07:00 • committed by GitHub
commit dde0fa4566
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 57 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx
View file

@ -21,8 +21,9 @@ export default function getJsApiCode(
this.baseURL = baseURL; this.baseURL = baseURL;
this.apiKey = apiKey; this.apiKey = apiKey;
} }
async post(endpoint, body, headers = {"Content-Type": "application/json"}) { async post(endpoint, body, headers = {"Content-Type": "application/json"}) {
if (this.apiKey) { if (this.apiKey) {
headers["Authorization"] = \`Bearer \${this.apiKey}\`; headers["Authorization"] = \`Bearer \${this.apiKey}\`;
} }
const url = \`\${this.baseURL}\${endpoint}\`; const url = \`\${this.baseURL}\${endpoint}\`;
@ -32,84 +33,97 @@ export default function getJsApiCode(
headers: headers, headers: headers,
body: JSON.stringify(body) body: JSON.stringify(body)
}); });
const responseMessage = await response.json();
if (!response.ok) { 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) { } catch (error) {
console.error('Request Error:', error); console.error(\`Error during POST request: \${error.message}\`);
throw error; 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}\`; 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) { handleStream(streamUrl, onUpdate, onClose, onError) {
const eventSource = new EventSource(streamUrl); const eventSource = new EventSource(streamUrl);
eventSource.onmessage = event => { eventSource.onmessage = event => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
onUpdate(data); onUpdate(data);
}; };
eventSource.onerror = event => { eventSource.onerror = event => {
console.error('Stream Error:', event); console.error('Stream Error:', event);
onError(event); onError(event);
eventSource.close(); eventSource.close();
}; };
eventSource.addEventListener("close", () => { eventSource.addEventListener("close", () => {
onClose('Stream closed'); onClose('Stream closed');
eventSource.close(); eventSource.close();
}); });
return eventSource; return eventSource;
} }
async runFlow(flowIdOrName, inputValue, tweaks, stream = false, onUpdate, onClose, onError) { async runFlow(flowIdOrName, inputValue, inputType = 'chat', outputType = 'chat', tweaks, stream = false, onUpdate, onClose, onError) {
try { try {
const initResponse = await this.initiateSession(flowIdOrName, inputValue, stream, tweaks); const initResponse = await this.initiateSession(flowIdOrName, inputValue, inputType, outputType, stream, tweaks);
console.log('Init Response:', initResponse); if (stream && initResponse?.outputs?.[0]?.outputs?.[0]?.artifacts?.stream_url) {
if (stream && initResponse && initResponse.outputs && initResponse.outputs[0].outputs[0].artifacts.stream_url) {
const streamUrl = initResponse.outputs[0].outputs[0].artifacts.stream_url; const streamUrl = initResponse.outputs[0].outputs[0].artifacts.stream_url;
console.log(\`Streaming from: \${streamUrl}\`); console.log(\`Streaming from: \${streamUrl}\`);
this.handleStream(streamUrl, onUpdate, onClose, onError); this.handleStream(streamUrl, onUpdate, onClose, onError);
} }
return initResponse; return initResponse;
} catch (error) { } 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 flowIdOrName = '${endpointName || flowId}';
const inputValue = 'User message';
const stream = false;
const langflowClient = new LangflowClient('${window.location.protocol}//${window.location.host}', const langflowClient = new LangflowClient('${window.location.protocol}//${window.location.host}',
${isAuth ? "'your-api-key'" : "null"}); ${isAuth ? "'your-api-key'" : "null"});
const tweaks = ${tweaksString}; const tweaks = ${tweaksString};
response = await langflowClient.runFlow(
flowIdOrName, try {
inputValue, const response = await langflowClient.runFlow(
tweaks, flowIdOrName,
stream, inputValue,
(data) => console.log("Received:", data.chunk), // onUpdate inputType,
(message) => console.log("Stream Closed:", message), // onClose outputType,
(error) => console.log("Stream Error:", error) // onError tweaks,
); stream,
if (!stream) { (data) => console.log("Received:", data.chunk), // onUpdate
const flowOutputs = response.outputs[0]; (message) => console.log("Stream Closed:", message), // onClose
const firstComponentOutputs = flowOutputs.outputs[0]; (error) => console.error("Stream Error:", error) // onError
const output = firstComponentOutputs.outputs.message; );
console.log("Final Output:", output.message.text); 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
);
`;
} }