From 7cc46e8e8ff6334bd4bc1d36e688f169acc0b14b Mon Sep 17 00:00:00 2001 From: Cathy Zhang Date: Mon, 2 Sep 2024 08:57:57 -0700 Subject: [PATCH 1/2] react-ui: Add support to display Chinese llm-tgi microservice from GenAIComps has encoded each text, so Chinese response will be shown as hexadecimal in react UI. Add support to decode and display the response in Chinese. Also return raw response if no pattern found. Signed-off-by: Cathy Zhang Signed-off-by: Ruoyu Ying --- .../redux/Conversation/ConversationSlice.ts | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/ChatQnA/docker/ui/react/src/redux/Conversation/ConversationSlice.ts b/ChatQnA/docker/ui/react/src/redux/Conversation/ConversationSlice.ts index ad8fa33be..2f92c6a91 100644 --- a/ChatQnA/docker/ui/react/src/redux/Conversation/ConversationSlice.ts +++ b/ChatQnA/docker/ui/react/src/redux/Conversation/ConversationSlice.ts @@ -162,7 +162,21 @@ export const doConversation = (conversationRequest: ConversationRequest) => { const match = msg.data.match(/b'([^']*)'/); if (match && match[1] != "") { const extractedText = match[1]; - result += extractedText; + + // Check for the presence of \x hexadecimal + if (extractedText.includes("\\x")) { + // Decode Chinese (or other non-ASCII characters) + const decodedText = decodeEscapedBytes(extractedText); + result += decodedText; + } else { + result += extractedText; + } + } else if (!match) { + // Return data without pattern + result += msg?.data; + } + // Store back result if it is not null + if (result) { store.dispatch(setOnGoingResult(result)); } } catch (e) { @@ -195,3 +209,10 @@ export const doConversation = (conversationRequest: ConversationRequest) => { console.log(err); } }; + +// decode \x hexadecimal encoding +function decodeEscapedBytes(str: string): string { + // Convert the byte portion separated by \x into a byte array and decode it into a UTF-8 string + const byteArray: number[] = str.split("\\x").slice(1).map((byte: string) => parseInt(byte, 16)); + return new TextDecoder("utf-8").decode(new Uint8Array(byteArray)); +} From 846d2788ec8282f96d974259c0e8f1aceed77051 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 2 Sep 2024 16:18:15 +0000 Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../ui/react/src/redux/Conversation/ConversationSlice.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ChatQnA/docker/ui/react/src/redux/Conversation/ConversationSlice.ts b/ChatQnA/docker/ui/react/src/redux/Conversation/ConversationSlice.ts index 2f92c6a91..63d9e562b 100644 --- a/ChatQnA/docker/ui/react/src/redux/Conversation/ConversationSlice.ts +++ b/ChatQnA/docker/ui/react/src/redux/Conversation/ConversationSlice.ts @@ -213,6 +213,9 @@ export const doConversation = (conversationRequest: ConversationRequest) => { // decode \x hexadecimal encoding function decodeEscapedBytes(str: string): string { // Convert the byte portion separated by \x into a byte array and decode it into a UTF-8 string - const byteArray: number[] = str.split("\\x").slice(1).map((byte: string) => parseInt(byte, 16)); + const byteArray: number[] = str + .split("\\x") + .slice(1) + .map((byte: string) => parseInt(byte, 16)); return new TextDecoder("utf-8").decode(new Uint8Array(byteArray)); }