From e631eb863da1ebbe397b23a3c72da83179b44b0f Mon Sep 17 00:00:00 2001 From: Jonas Jaszkowic Date: Mon, 22 Jul 2024 16:18:13 +0200 Subject: [PATCH 1/4] feat: sample streaming request to API --- .env.sample | 1 + .gitignore | 2 ++ src/App.tsx | 9 +++++- src/ChatExample.tsx | 71 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 .env.sample create mode 100644 src/ChatExample.tsx diff --git a/.env.sample b/.env.sample new file mode 100644 index 0000000..6dcf97c --- /dev/null +++ b/.env.sample @@ -0,0 +1 @@ +X_API_KEY=... \ No newline at end of file diff --git a/.gitignore b/.gitignore index a547bf3..3b0b403 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ dist-ssr *.njsproj *.sln *.sw? + +.env \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index e0de863..6fd95a1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,10 @@ +import { ChatExample } from "./ChatExample"; + export function App() { - return

BärGPT - KI Testumgebung

; + return ( +
+

BärGPT - KI Testumgebung

+ +
+ ); } diff --git a/src/ChatExample.tsx b/src/ChatExample.tsx new file mode 100644 index 0000000..011c310 --- /dev/null +++ b/src/ChatExample.tsx @@ -0,0 +1,71 @@ +import { useState } from "react"; + +export function ChatExample() { + const [chatMessage, setChatMessage] = useState(""); + + async function streamToString(body: ReadableStream) { + setChatMessage(""); + const reader = body?.pipeThrough(new TextDecoderStream()).getReader(); + while (reader) { + const stream = await reader.read(); + if (stream.done) { + break; + } + const chunks = stream.value + .toString() + .replace(/^data: /gm, "") + .split("\n") + .filter((c: string) => Boolean(c.length) && c !== "[DONE]") + .map((c: string) => JSON.parse(c)); + if (chunks) { + for (const chunk of chunks) { + const content = chunk.choices[0].delta.content; + if (!content) { + continue; + } + setChatMessage((prev) => prev + content); + } + } + } + } + + return ( +
+ + {chatMessage && ( +

{chatMessage}

+ )} +
+ ); +} From 093984097e0938b857a3512c5a4f0799835a3023 Mon Sep 17 00:00:00 2001 From: Jonas Jaszkowic Date: Tue, 23 Jul 2024 09:33:19 +0200 Subject: [PATCH 2/4] fix: typo in env sample --- .env.sample | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.sample b/.env.sample index 6dcf97c..7f4443c 100644 --- a/.env.sample +++ b/.env.sample @@ -1 +1 @@ -X_API_KEY=... \ No newline at end of file +VITE_X_API_KEY=... \ No newline at end of file From 5ac7d930ba3256619f294d15ddc4e597f93f5e3b Mon Sep 17 00:00:00 2001 From: Jonas Jaszkowic Date: Tue, 23 Jul 2024 15:45:51 +0200 Subject: [PATCH 3/4] feat: use public endpoint --- src/App.tsx | 2 +- src/ChatExample.tsx | 34 +++++++++++++++++++--------------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6fd95a1..b92a394 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import { ChatExample } from "./ChatExample"; export function App() { return ( -
+

BärGPT - KI Testumgebung

diff --git a/src/ChatExample.tsx b/src/ChatExample.tsx index 011c310..f3b3d07 100644 --- a/src/ChatExample.tsx +++ b/src/ChatExample.tsx @@ -36,21 +36,25 @@ export function ChatExample() { onClick={async () => { setChatMessage(""); try { - const response = await fetch(`http://localhost:3000/chat`, { - method: "POST", - headers: { - "Content-Type": "application/json", - "x-api-key": import.meta.env.VITE_X_API_KEY, + const response = await fetch( + `https://ber-gpt-backend.onrender.com/chat`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + "x-api-key": import.meta.env.VITE_X_API_KEY, + llm: "azure", + }, + body: JSON.stringify({ + messages: [ + { + role: "user", + content: "Wer bist du? Antworte ausführlich.", + }, + ], + }), }, - body: JSON.stringify({ - messages: [ - { - role: "user", - content: "Wer bist du? Antworte ausführlich", - }, - ], - }), - }); + ); if (!response.body) { throw new Error("Response body is empty"); @@ -64,7 +68,7 @@ export function ChatExample() { Test API Call {chatMessage && ( -

{chatMessage}

+

{chatMessage}

)}
); From d9933fac65c7018f51ad8b1aa800f8d6b53edc36 Mon Sep 17 00:00:00 2001 From: Jonas Jaszkowic Date: Tue, 23 Jul 2024 15:53:27 +0200 Subject: [PATCH 4/4] feat: Example requests to documents/extract --- src/App.tsx | 4 ++- src/ChatExample.tsx | 2 +- src/DocumentExtractExample.tsx | 50 ++++++++++++++++++++++++++++++++++ 3 files changed, 54 insertions(+), 2 deletions(-) create mode 100644 src/DocumentExtractExample.tsx diff --git a/src/App.tsx b/src/App.tsx index b92a394..2df67df 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,12 @@ import { ChatExample } from "./ChatExample"; +import { DocumentExtractExample } from "./DocumentExtractExample"; export function App() { return ( -
+

BärGPT - KI Testumgebung

+
); } diff --git a/src/ChatExample.tsx b/src/ChatExample.tsx index f3b3d07..2344495 100644 --- a/src/ChatExample.tsx +++ b/src/ChatExample.tsx @@ -65,7 +65,7 @@ export function ChatExample() { } }} > - Test API Call + Example API Call to /chat {chatMessage && (

{chatMessage}

diff --git a/src/DocumentExtractExample.tsx b/src/DocumentExtractExample.tsx new file mode 100644 index 0000000..5f4dd7d --- /dev/null +++ b/src/DocumentExtractExample.tsx @@ -0,0 +1,50 @@ +import { FormEvent, useState } from "react"; + +export function DocumentExtractExample() { + const [extractedText, setExtractedText] = useState(""); + + const handleSubmit = async (event: FormEvent) => { + event.preventDefault(); + + const formData = new FormData(); + formData.append("file", event.currentTarget.file.files[0]); + + const response = await fetch( + "https://ber-gpt-backend.onrender.com/documents/extract", + { + method: "POST", + headers: { + "x-api-key": import.meta.env.VITE_X_API_KEY, + }, + body: formData, + }, + ); + + if (response.ok) { + const data = await response.json(); + setExtractedText(data.content); + } else { + console.error("Failed to extract text from document"); + } + }; + + return ( +
+
+ + +
+ {extractedText && ( +

{extractedText}

+ )} +
+ ); +}