Update loading progress calculation logic

src/App.js

@@ -3,22 +3,21 @@ import Main from "./Components/Main";
 import "./styles.css";
 import { useContext } from "react";
 import { AppState } from "./Hooks/utils";
-import { Spin } from "antd";
+import { Progress } from "antd";
 import { useSignals } from "@preact/signals-react/runtime";
 
 const queryClient = new QueryClient();
 
 export default function App() {
   useSignals();
-  const { modelLoading, webLlmEngine } = useContext(AppState);
+  const { modelLoading, percent, webLlmEngine } = useContext(AppState);
 
   if (modelLoading.value) {
     return (
-      <Spin
-        fullscreen
-        tip="Please wait while the model is being loaded..."
-        size="large"
-      />
+      <div className="flex flex-col w-full h-screen justify-center p-20">
+        Please Wait while the model is being loaded...
+        <Progress showInfo percent={percent.value} />
+      </div>
     );
   }
 

src/Hooks/utils.js

@@ -4,27 +4,37 @@ import { CreateWebWorkerMLCEngine } from "@mlc-ai/web-llm";
 
 const selectedModel = "Phi-3-mini-4k-instruct-q4f16_1-MLC";
 
-const initProgressCallback = (initProgress, isLoading) => {
-  if (initProgress.progress) {
+const initProgressCallback = (initProgress, start, end, isLoading) => {
+  const progress = initProgress.text.match(/(\d+\/\d+)/g);
+  if (progress) {
+    const bounds = progress[0]?.split("/");
+    start.value = bounds[0];
+    end.value = bounds[1];
+  } else if (initProgress.progress) {
     isLoading.value = false;
   }
 };
 
 export const createAppState = () => {
+  const startProgress = signal(0);
+  const endProgress = signal(100);
   const isLoading = signal(true);
-  const modelLoading = computed(() => isLoading.value);
   const webLlmEngine = CreateWebWorkerMLCEngine(
     new Worker(new URL("../worker.js", import.meta.url), {
       type: "module",
     }),
     selectedModel,
     {
       initProgressCallback: (progress) =>
-        initProgressCallback(progress, isLoading),
+        initProgressCallback(progress, startProgress, endProgress, isLoading),
     },
   );
+  const modelLoading = computed(() => isLoading.value);
+  const percent = computed(() =>
+    Math.floor((startProgress?.value / endProgress?.value) * 100),
+  );
 
-  return { modelLoading, webLlmEngine };
+  return { percent, modelLoading, webLlmEngine };
 };
 
 export const AppState = createContext();