llm hooks

src/components/ChatV2.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { useState } from "react";
+import ChatWindow from "./ChatWindow";
+
+
+export default function Chat() {
+  const [screenName, setScreenName] = useState("endlessbox5");
+  const [stopStrings, setStopStrings] = useState(["user:", "assistant:"]);
+  const [maxTokens, setMaxTokens] = useState(100);
+  const [soundLevel, setSoundLevel] = useState(0.2);
+  const [showConversationList, setShowConversationList] = useState(false);
+  const [showOptions, setShowOptions] = useState(false);
+  
+
+  return (
+    <div>
+        <div className="flex justify-center m-3 gap-2">
+          <div className="sm:w-[500px] w-full">
+            <ChatWindow
+              screenName={screenName}
+              assistantScreenName={"SmartestChild"}
+              maxTokens={maxTokens}
+              stopStrings={stopStrings}
+              soundLevel={soundLevel}
+            />
+          </div>
+        </div>
+    </div>
+  );
+}

src/components/ChatWindow.jsx

@@ -0,0 +1,116 @@
+import useLLM from "@react-llm/headless";
+import Image from "next/image";
+import { SetStateAction, useCallback, useEffect, useState } from "react";
+
+import Loader from "./Loader";
+
+function ChatWindow({
+  stopStrings,
+  maxTokens,
+}) {
+  const { loadingStatus, send, isGenerating, setOnMessage } = useLLM();
+  const [userInput, setUserInput] = useState("");
+
+  
+
+  const handleChange = (event) => {
+    setUserInput(event.target.value);
+  };
+
+  const isReady = loadingStatus.progress === 1;
+
+  const handleSubmit = useCallback(() => {
+    if (isGenerating || !isReady) {
+      return;
+    }
+    
+    send(userInput, maxTokens, stopStrings);
+    setUserInput("");
+  }, [
+    userInput,
+    send,
+    isGenerating,
+    isReady,
+    maxTokens,
+    stopStrings
+  ]);
+
+  useEffect(() => {
+    const handleKeyPress = (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleSubmit();
+      }
+    };
+    window.addEventListener("keydown", handleKeyPress);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [handleSubmit]);
+
+  return (
+    <div className="window sm:w-[500px] w-full">
+      
+      <div className="window-content w-full">
+        <div className="flex flex-col w-full">
+          {/* <Separator /> */}
+          <div className="h-4" />
+          {isReady && (
+            <div>
+              <form onSubmit={handleSubmit}>
+                <div className="flex">
+                  <input
+                    value={userInput}
+                    placeholder="Say something..."
+                    onChange={handleChange}
+                  />
+                </div>
+              </form>
+              <div className="h-4">
+                {isGenerating && (
+                  <span>is typing...</span>
+                )}
+              </div>
+              <div className="flex justify-start m-2">
+                <div>
+                  <button
+                    onClick={handleSubmit}
+                    className="submit"
+                    style={{ height: "65px", width: "65px" }}
+                  >
+                    <Image
+                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAiCAYAAABIiGl0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU3MUQ1NTRFMTdFQTExRUM5MDA1OTZFMzQ1Q0E2MTMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU3MUQ1NTRGMTdFQTExRUM5MDA1OTZFMzQ1Q0E2MTMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTcxRDU1NEMxN0VBMTFFQzkwMDU5NkUzNDVDQTYxMzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTcxRDU1NEQxN0VBMTFFQzkwMDU5NkUzNDVDQTYxMzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz53k5gpAAACU0lEQVR42sRWAZKDIAyETn9k3wRv0jfBm7xsIEwuAtZee43DDKhhk+wadPu+u6sjpbQvy7Kv67q/4o/xklMIgUEBjjkC+TgwAB251WxbAFezv9MmLsaIzaZGmTkC8Nu2odTwwVruO9x/PB4IgN872+9yiTFgwrO2K9k/JSQBtEDCtTV5d8b9gT8BwRyOKMoSSERr+MWtmA3GZl8rdAD2jD4wcJ9ddgTK65xpFTPz2tY0wDG4HezB71jub+6CLXRhE55XYUFoMIirZwDEQABaxJwxOe2yoVYx7sEhpMCgW9yG2ZGiWxCTCvKeXLGZsMARD+IY/Ooh6hYTlYuqsa7i6nI/5BhVQPmQrXBb612+21i+Z8yttUoZLehqDoHRDChTh+FyAWwbb7lwmguHAnBWevhUofnbiZqKA2W3PcqIPjJwWIqwsBFArEakm1ngFuS0H8uVCi/qOz68rzpW41zrQDWbfucSUAhqNZeIrAcuQKpjteai2uuxc4kjK5a6VAOrqtbgs3aos9fHp33/mGVaf4PWtscBpdDuj1qhPlDMp+e6wBxlvQAgoBKpBMfgqczPfgAk6+khISUWHnsOwiGp/fT0efpYlE3PfmX++q/11On0Sbu5L9nXgO/tfPR+V/9h/p0gsrfe924eYM5r/dIoKH2/F7B9Xr9rfyg1QOEsn5cNarBZ95n163LcycJLZDooE/nwj/mSuGYltKfY21QNIMtrL/LKv7PVeBlYAHu8qGeaz9O0rd8hCVM6vfAT7nqV8WY+qpzvAf+b+VHZ3t1ErP0IMAAwT6EpM/krMwAAAABJRU5ErkJggg=="
+                      alt="Send Message"
+                      style={{
+                        filter:
+                          !isReady || isGenerating
+                            ? "grayscale(100%)"
+                            : undefined,
+                      }}
+                      width="40"
+                      height="40"
+                    />
+                  </button>
+                  <div
+                    className="w-full h-1 mt-2"
+                    style={{
+                      backgroundColor:
+                        !isReady || isGenerating ? "red" : "green",
+                      width: "100%",
+                      height: "5px",
+                      marginTop: "2px",
+                    }}
+                  ></div>
+                </div>
+              </div>
+            </div>
+          )}
+          {!isReady && <Loader />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ChatWindow;

src/components/Loader.jsx

@@ -0,0 +1,79 @@
+import useLLM from "@react-llm/headless";
+
+const Loader = () => {
+  const { loadingStatus, isReady, init, gpuDevice } = useLLM();
+  if (isReady) return null;
+  if (loadingStatus.progress === 1) return null;
+
+  if (gpuDevice.unsupportedReason) {
+    return (
+      <div style={{ fontSize: "20px" }}>
+        <p style={{ color: "red" }}>Sorry, unsupported!</p>
+        <p> Reason: {gpuDevice.unsupportedReason}</p>
+        <p>
+          <a href={"http://github.com/react-llm"}>react-llm</a> runs models in
+          the browser with WebGPU and only works in Google Chrome v113 and above
+          on Desktop with supported GPUs.
+        </p>
+      </div>
+    );
+  }
+
+  if (loadingStatus.progress == 0) {
+    return (
+      <div style={{ padding: "10px", width: "100%" }}>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column",
+            gap: "10px",
+          }}
+        >
+          <div className="lg:hidden">
+            <p className="p-1">
+              web-llm-embed
+            </p>
+            <p className="p-1">
+              No data is sent to the server. Conversations are cached in local
+              storage.
+            </p>
+            <p className="p-1">
+              WebGPU is only supported in Desktop Google Chrome 113
+            </p>
+            <p className="p-1">
+              Powered by Apache TVM and MLC Relax Runtime.
+            </p>
+            <p className="p-1">
+              Large language model is <a href="https://www.together.xyz/blog/redpajama-3b-updates">RedPajama-INCITE-3B</a>
+            </p>
+            <p className="p-1">
+              Embeddings are from<a href="https://github.com/xenova/transformers.js">transformers.js</a>
+            </p>
+          </div>
+          <div>
+            This will download the model and may take a few minutes. After the
+            first time, it will be cached.
+          </div>
+
+          <button
+            style={{ padding: "10px" }}
+            size="lg"
+            primary
+            onClick={() => init()}
+          >
+            Load Model
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ width: "100%", margin: "10px" }}>
+      Loading {loadingStatus.progress * 100}%
+    </div>
+  );
+};
+
+export default Loader;

src/pages/index.tsx

@@ -1 +1,15 @@
-export { default, getServerSideProps } from './api/home';
+"use client";
+import Chat from "@/components/ChatV2";
+import { ModelProvider } from "@react-llm/headless";
+
+export default function Home() {
+  return (
+    <ModelProvider
+      config={{
+        persistToLocalStorage: true,
+      }}
+    >
+      <Chat />
+    </ModelProvider>
+  );
+}