WASM runs in the web

chatgse/app/client/platforms/openai.ts

@@ -7,7 +7,6 @@ import {
   ServiceProvider,
 } from "@/app/constant";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-
 import { ChatOptions, getHeaders, LLMApi, LLMModel, LLMUsage } from "../api";
 import Locale from "../../locales";
 import {
@@ -17,6 +16,7 @@ import {
 import { prettyObject } from "@/app/utils/format";
 import { getClientConfig } from "@/app/config/client";
 import { makeAzurePath } from "@/app/azure";
+import { EnvironmentPlugin } from "webpack";
 import { useRAGStore } from "@/app/store/rag";
 
 export interface OpenAIListModelResponse {
@@ -182,7 +182,7 @@ export class ChatGPTApi implements LLMApi {
               try {
                 const resJson = await res.clone().json();
                 extraInfo = prettyObject(resJson);
-              } catch {}
+              } catch { }
 
               if (res.status === 401) {
                 responseTexts.push(Locale.Error.Unauthorized);
@@ -229,11 +229,100 @@ export class ChatGPTApi implements LLMApi {
         });
       } else {
         const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
 
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message);
+
+
+        if (options.config.model == "mistral-wasm") {
+
+          const resJson = await res.json();
+          let message = this.extractMessage(resJson);
+          const question = message.split("\n").slice(-1);
+
+          let inputValue = (<HTMLInputElement>document.getElementById("chatui-input"));
+          //inputValue = question; 
+          message = JSON.parse(chatPayload.body);
+          inputValue.value = JSON.parse(chatPayload.body)["messages"].slice(-1)[0].content;
+          //console.log("chat input is "+ inputValue.value);
+
+
+
+          let sendbutton : HTMLElement | null = document.getElementById("chatui-send-btn");
+          if (sendbutton){
+            sendbutton.click();
+           // console.log("send button clicked");
+          }
+
+
+          let label = <HTMLElement> document.getElementById("chatui-info-label");
+          //console.log("got chatui info label");
+          const observerOptions = {
+            childList: true,
+            subtree: true,
+            characterData: true
+          };
+          const updatemsgs = (mutationList:any, observer:any) => {
+            //console.log("mutation observer is on");
+            for (const mutation of mutationList) {
+              if (mutation.type === "childList") {
+                //console.log("mutation childList")
+                let output = document.getElementById("chatui-chat");
+                if (output){
+                  var outputText =<HTMLElement> (Array.from(output.childNodes).slice(-2)[0]);
+                  if (outputText instanceof HTMLElement){
+                    var Text = (outputText).innerText;
+                    const reformedtext = Text.replaceAll("\n", "").replaceAll("  ", "")
+                    const message = reformedtext;
+
+                    options.onFinish(message);
+                    clearTimeout(requestTimeoutId);
+                   // console.log("mutation type is subtree")
+                    observer.disconnect();
+                  }
+                }
+
+
+              } else {
+                //console.log("mutation others")
+                let output = document.getElementById("chatui-chat");
+                const outputText =<HTMLElement> document.getElementById("chatui-status");
+                const reformedtext = outputText.innerHTML.replaceAll("\n", "").replaceAll("  ", "")
+                const message = reformedtext;
+
+                options.onFinish("\'" + message + "\'");
+                clearTimeout(requestTimeoutId);
+                //console.log("mutation type is not subtree but " + mutation.type)
+                observer.disconnect();
+              }
+
+            }
+
+          }
+
+
+          const observer = new MutationObserver(updatemsgs);
+          //console.log("mutation main");
+          observer.observe(label  , observerOptions);
+          //observer.disconnect();
+
+
+
+
+
+        } else {
+
+          clearTimeout(requestTimeoutId);
+          const resJson = await res.json();
+          const message = this.extractMessage(resJson);
+          options.onFinish(message);
+
+        }
+
+
+
+
+
+
+
       }
     } catch (e) {
       console.log("[Request] failed to make a chat request", e);

chatgse/app/components/auth.tsx

@@ -16,6 +16,7 @@ export function AuthPage() {
 
   const goHome = () => navigate(Path.Home);
   const goChat = () => navigate(Path.Chat);
+  const goWebllm = () => navigate(Path.Webllm);
   const resetAccessCode = () => {
     accessStore.update((access) => {
       access.openaiApiKey = "";

chatgse/app/components/chat.tsx

@@ -1247,7 +1247,7 @@ function _Chat() {
                     )}
                   </div>
                   {showTyping && (
-                    <div className={styles["chat-message-status"]}>
+                    <div className={styles["chat-message-status"]} id={`chatui-status`} >
                       {Locale.Chat.Typing}
                     </div>
                   )}

chatgse/app/components/home.module.scss

@@ -192,6 +192,9 @@
   overflow-x: hidden;
 }
 
+.chatui-hide {
+  display: none;
+}
 .chat-item {
   padding: 10px 14px;
   background-color: var(--white);
@@ -214,6 +217,7 @@
   border-color: var(--primary);
 }
 
+
 .chat-item-title {
   font-size: 14px;
   font-weight: bolder;

chatgse/app/components/home.tsx

@@ -33,11 +33,17 @@ import { useAccessStore } from "../store";
 export function Loading(props: { noLogo?: boolean }) {
   return (
     <div className={styles["loading-content"] + " no-dark"}>
-      {!props.noLogo && <BotIcon width={32} height={32}/>}
+      {!props.noLogo && <BotIcon width={32} height={32} />}
       <LoadingIcon />
+
+
     </div>
+
   );
 }
+const Webllm = dynamic(async () => (await import("./webllm")).Webllm, {
+  loading: () => <Loading noLogo />,
+});
 
 const Settings = dynamic(async () => (await import("./settings")).Settings, {
   loading: () => <Loading noLogo />,
@@ -136,6 +142,7 @@ function Screen() {
   const isHome = location.pathname === Path.Home;
   const isAuth = location.pathname === Path.Auth;
   const isMobileScreen = useMobileScreen();
+
   const shouldTightBorder =
     getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
 
@@ -147,11 +154,40 @@ function Screen() {
     <div
       className={
         styles.container +
-        ` ${shouldTightBorder ? styles["tight-container"] : styles.container} ${
-          getLang() === "ar" ? styles["rtl-screen"] : ""
+        ` ${shouldTightBorder ? styles["tight-container"] : styles.container} ${getLang() === "ar" ? styles["rtl-screen"] : ""
         }`
       }
     >
+      <div className={styles['chatui-hide']}
+        id={`chatui-chat`} >
+      </div>
+      <textarea className={styles['chatui-hide']}
+
+        id={`chatui-input`} >
+      </textarea>
+      <div className={styles['chatui-hide']}
+        id={"chatui-info-label"}
+      >
+        send
+      </div>
+
+      <select id="chatui-select" className={styles['chatui-hide']}>
+      </select>
+
+      <button
+        className={styles['chatui-hide']}
+        id={"chatui-send-btn"}
+
+      >
+        send
+      </button>
+
+      <button
+        id={"chatui-reset-btn"}
+        className={styles['chatui-hide']}>
+        reset
+      </button>
+
       {isAuth ? (
         <>
           <AuthPage />
@@ -168,12 +204,14 @@ function Screen() {
               <Route path={Path.Masks} element={<MaskPage />} />
               <Route path={Path.Chat} element={<Chat />} />
               <Route path={Path.Settings} element={<Settings />} />
+              <Route path={Path.Webllm} element={<Webllm />} />
               <Route path={Path.RAG} element={<RAGPage />} />
-            </Routes>
-          </div>
+            </Routes >
+          </div >
         </>
-      )}
-    </div>
+      )
+      }
+    </div >
   );
 }