Update src/App.jsx

src/App.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useState, useRef } from "react";
-
 import Chat from "./components/Chat";
 import ArrowRightIcon from "./components/icons/ArrowRightIcon";
 import StopIcon from "./components/icons/StopIcon";
@@ -7,27 +6,25 @@ import Progress from "./components/Progress";
 
 const IS_WEBGPU_AVAILABLE = !!navigator.gpu;
 const STICKY_SCROLL_THRESHOLD = 120;
+
+
 const EXAMPLES = [
-  "Give me some tips to improve my time management skills.",
-  "What is the difference between AI and ML?",
-  "Write python code to compute the nth fibonacci number.",
+  "Triage: Patient with sudden chest pain and sweating.",
+  "ABCDE assessment for an unconscious patient after a fall.",
+  "Initial steps for a severe allergic reaction (Anaphylaxis).",
 ];
 
 function App() {
-  // Create a reference to the worker object.
   const worker = useRef(null);
-
   const textareaRef = useRef(null);
   const chatContainerRef = useRef(null);
 
-  // Model loading and progress
   const [status, setStatus] = useState(null);
   const [error, setError] = useState(null);
   const [loadingMessage, setLoadingMessage] = useState("");
   const [progressItems, setProgressItems] = useState([]);
   const [isRunning, setIsRunning] = useState(false);
 
-  // Inputs and outputs
   const [input, setInput] = useState("");
   const [messages, setMessages] = useState([]);
   const [tps, setTps] = useState(null);
@@ -41,8 +38,6 @@ function App() {
   }
 
   function onInterrupt() {
-    // NOTE: We do not set isRunning to false here because the worker
-    // will send a 'complete' message when it is done.
     worker.current.postMessage({ type: "interrupt" });
   }
 
@@ -52,244 +47,134 @@ function App() {
 
   function resizeInput() {
     if (!textareaRef.current) return;
-
     const target = textareaRef.current;
     target.style.height = "auto";
     const newHeight = Math.min(Math.max(target.scrollHeight, 24), 200);
     target.style.height = `${newHeight}px`;
   }
 
-  // We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
   useEffect(() => {
-    // Create the worker if it does not yet exist.
     if (!worker.current) {
       worker.current = new Worker(new URL("./worker.js", import.meta.url), {
         type: "module",
       });
-      worker.current.postMessage({ type: "check" }); // Do a feature check
+      worker.current.postMessage({ type: "check" });
     }
 
-    // Create a callback function for messages from the worker thread.
     const onMessageReceived = (e) => {
       switch (e.data.status) {
         case "loading":
-          // Model file start load: add a new progress item to the list.
           setStatus("loading");
           setLoadingMessage(e.data.data);
           break;
-
         case "initiate":
           setProgressItems((prev) => [...prev, e.data]);
           break;
-
         case "progress":
-          // Model file progress: update one of the progress items.
           setProgressItems((prev) =>
-            prev.map((item) => {
-              if (item.file === e.data.file) {
-                return { ...item, ...e.data };
-              }
-              return item;
-            }),
+            prev.map((item) => (item.file === e.data.file ? { ...item, ...e.data } : item))
           );
           break;
-
         case "done":
-          // Model file loaded: remove the progress item from the list.
-          setProgressItems((prev) =>
-            prev.filter((item) => item.file !== e.data.file),
-          );
+          setProgressItems((prev) => prev.filter((item) => item.file !== e.data.file));
           break;
-
         case "ready":
-          // Pipeline ready: the worker is ready to accept messages.
           setStatus("ready");
           break;
-
         case "start":
-          {
-            // Start generation
-            setMessages((prev) => [
-              ...prev,
-              { role: "assistant", content: "" },
-            ]);
-          }
+          setMessages((prev) => [...prev, { role: "assistant", content: "" }]);
           break;
-
         case "update":
-          {
-            // Generation update: update the output text.
-            // Parse messages
-            const { output, tps, numTokens } = e.data;
-            setTps(tps);
-            setNumTokens(numTokens);
-            setMessages((prev) => {
-              const cloned = [...prev];
-              const last = cloned.at(-1);
-              cloned[cloned.length - 1] = {
-                ...last,
-                content: last.content + output,
-              };
-              return cloned;
-            });
-          }
+          const { output, tps, numTokens } = e.data;
+          setTps(tps);
+          setNumTokens(numTokens);
+          setMessages((prev) => {
+            const cloned = [...prev];
+            const last = cloned.at(-1);
+            cloned[cloned.length - 1] = { ...last, content: last.content + output };
+            return cloned;
+          });
           break;
-
         case "complete":
-          // Generation complete: re-enable the "Generate" button
           setIsRunning(false);
           break;
-
         case "error":
           setError(e.data.data);
           break;
       }
     };
 
-    const onErrorReceived = (e) => {
-      console.error("Worker error:", e);
-    };
-
-    // Attach the callback function as an event listener.
     worker.current.addEventListener("message", onMessageReceived);
-    worker.current.addEventListener("error", onErrorReceived);
-
-    // Define a cleanup function for when the component is unmounted.
-    return () => {
-      worker.current.removeEventListener("message", onMessageReceived);
-      worker.current.removeEventListener("error", onErrorReceived);
-    };
+    return () => worker.current.removeEventListener("message", onMessageReceived);
   }, []);
 
-  // Send the messages to the worker thread whenever the `messages` state changes.
   useEffect(() => {
-    if (messages.filter((x) => x.role === "user").length === 0) {
-      // No user messages yet: do nothing.
-      return;
-    }
-    if (messages.at(-1).role === "assistant") {
-      // Do not update if the last message is from the assistant
-      return;
-    }
-    setTps(null);
+    if (messages.filter((x) => x.role === "user").length === 0) return;
+    if (messages.at(-1).role === "assistant") return;
     worker.current.postMessage({ type: "generate", data: messages });
   }, [messages, isRunning]);
 
   useEffect(() => {
     if (!chatContainerRef.current || !isRunning) return;
     const element = chatContainerRef.current;
-    if (
-      element.scrollHeight - element.scrollTop - element.clientHeight <
-      STICKY_SCROLL_THRESHOLD
-    ) {
+    if (element.scrollHeight - element.scrollTop - element.clientHeight < STICKY_SCROLL_THRESHOLD) {
       element.scrollTop = element.scrollHeight;
     }
   }, [messages, isRunning]);
 
   return IS_WEBGPU_AVAILABLE ? (
-    <div className="flex flex-col h-screen mx-auto items justify-end text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900">
+    <div className="flex flex-col h-screen mx-auto justify-end text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900">
       {status === null && messages.length === 0 && (
-        <div className="h-full overflow-auto scrollbar-thin flex justify-center items-center flex-col relative">
-          <div className="flex flex-col items-center mb-1 max-w-[320px] text-center">
-            <img
-              src="logo.png"
-              width="80%"
-              height="auto"
-              className="block"
-            ></img>
-            <h1 className="text-4xl font-bold mb-1">SmolLM2 WebGPU</h1>
-            <h2 className="font-semibold">
-              A blazingly fast and powerful AI chatbot that runs locally in your
-              browser.
+        <div className="h-full overflow-auto flex justify-center items-center flex-col relative">
+          <div className="flex flex-col items-center mb-1 max-w-[400px] text-center">
+            {/* أيقونة طبية بسيطة أو لوجو */}
+            <div className="text-6xl mb-4">🏥</div>
+            <h1 className="text-4xl font-bold mb-1 text-red-600 dark:text-red-500">ER Assistant</h1>
+            <h2 className="font-semibold px-4">
+              AI-Powered Support for Emergency Room Physicians.
+              <br/><span className="text-sm font-normal text-gray-500">Optimized for rapid triage and ABCDE protocols.</span>
             </h2>
           </div>
 
           <div className="flex flex-col items-center px-4">
-            <p className="max-w-[480px] mb-4">
-              <br />
-              You are about to load{" "}
-              <a
-                href="https://huggingface.co/HuggingFaceTB/SmolLM2-1.7B-Instruct"
-                target="_blank"
-                rel="noreferrer"
-                className="font-medium underline"
-              >
-                SmolLM2-1.7B-Instruct
-              </a>
-              , a 1.7B parameter LLM optimized for in-browser inference.
-              Everything runs entirely in your browser with{" "}
-              <a
-                href="https://huggingface.co/docs/transformers.js"
-                target="_blank"
-                rel="noreferrer"
-                className="underline"
-              >
-                🤗&nbsp;Transformers.js
-              </a>{" "}
-              and ONNX Runtime Web, meaning no data is sent to a server. Once
-              loaded, it can even be used offline. The source code for the demo
-              is available on{" "}
-              <a
-                href="https://github.com/huggingface/transformers.js-examples/tree/main/smollm-webgpu"
-                target="_blank"
-                rel="noreferrer"
-                className="font-medium underline"
-              >
-                GitHub
-              </a>
-              .
+            <p className="max-w-[480px] mb-4 text-sm text-center">
+              This tool runs <b>locally</b> on your device via WebGPU. 
+              Patient data never leaves this browser.
             </p>
 
-            {error && (
-              <div className="text-red-500 text-center mb-2">
-                <p className="mb-1">
-                  Unable to load model due to the following error:
-                </p>
-                <p className="text-sm">{error}</p>
-              </div>
-            )}
-
             <button
-              className="border px-4 py-2 rounded-lg bg-blue-400 text-white hover:bg-blue-500 disabled:bg-blue-100 disabled:cursor-not-allowed select-none"
+              className="border px-6 py-3 rounded-lg bg-red-600 text-white hover:bg-red-700 disabled:bg-gray-300 select-none font-bold"
               onClick={() => {
                 worker.current.postMessage({ type: "load" });
                 setStatus("loading");
               }}
               disabled={status !== null || error !== null}
             >
-              Load model
+              Initialize ER Assistant
             </button>
           </div>
         </div>
       )}
+
       {status === "loading" && (
-        <>
-          <div className="w-full max-w-[500px] text-left mx-auto p-4 bottom-0 mt-auto">
-            <p className="text-center mb-1">{loadingMessage}</p>
-            {progressItems.map(({ file, progress, total }, i) => (
-              <Progress
-                key={i}
-                text={file}
-                percentage={progress}
-                total={total}
-              />
-            ))}
-          </div>
-        </>
+        <div className="w-full max-w-[500px] mx-auto p-4 mt-auto">
+          <p className="text-center mb-2 font-medium">Preparing Clinical Database...</p>
+          {progressItems.map(({ file, progress, total }, i) => (
+            <Progress key={i} text={file} percentage={progress} total={total} />
+          ))}
+        </div>
       )}
 
       {status === "ready" && (
-        <div
-          ref={chatContainerRef}
-          className="overflow-y-auto scrollbar-thin w-full flex flex-col items-center h-full"
-        >
+        <div ref={chatContainerRef} className="overflow-y-auto w-full flex flex-col items-center h-full pt-8">
           <Chat messages={messages} />
           {messages.length === 0 && (
-            <div>
+            <div className="grid grid-cols-1 gap-2 max-w-[500px] w-full px-4">
+              <p className="text-center text-gray-500 mb-2">Select a scenario to start:</p>
               {EXAMPLES.map((msg, i) => (
                 <div
                   key={i}
-                  className="m-1 border dark:border-gray-600 rounded-md p-2 bg-gray-100 dark:bg-gray-700 cursor-pointer"
+                  className="border dark:border-gray-600 rounded-lg p-3 bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-red-50 dark:hover:bg-red-900/20 transition"
                   onClick={() => onEnter(msg)}
                 >
                   {msg}
@@ -297,98 +182,50 @@ function App() {
               ))}
             </div>
           )}
-          <p className="text-center text-sm min-h-6 text-gray-500 dark:text-gray-300">
-            {tps && messages.length > 0 && (
-              <>
-                {!isRunning && (
-                  <span>
-                    Generated {numTokens} tokens in{" "}
-                    {(numTokens / tps).toFixed(2)} seconds&nbsp;&#40;
-                  </span>
-                )}
-                {
-                  <>
-                    <span className="font-medium text-center mr-1 text-black dark:text-white">
-                      {tps.toFixed(2)}
-                    </span>
-                    <span className="text-gray-500 dark:text-gray-300">
-                      tokens/second
-                    </span>
-                  </>
-                }
-                {!isRunning && (
-                  <>
-                    <span className="mr-1">&#41;.</span>
-                    <span
-                      className="underline cursor-pointer"
-                      onClick={() => {
-                        worker.current.postMessage({ type: "reset" });
-                        setMessages([]);
-                      }}
-                    >
-                      Reset
-                    </span>
-                  </>
-                )}
-              </>
-            )}
-          </p>
+          {/* إحصائيات الأداء */}
+          <div className="p-4 text-xs text-gray-400">
+             {tps && `Speed: ${tps.toFixed(2)} tokens/sec`}
+          </div>
         </div>
       )}
 
-      <div className="mt-2 border dark:bg-gray-700 rounded-lg w-[600px] max-w-[80%] max-h-[200px] mx-auto relative mb-3 flex">
+      <div className="mt-2 border dark:bg-gray-800 rounded-lg w-[600px] max-w-[90%] mx-auto relative mb-3 flex shadow-lg">
         <textarea
           ref={textareaRef}
-          className="scrollbar-thin w-[550px] dark:bg-gray-700 px-3 py-4 rounded-lg bg-transparent border-none outline-none text-gray-800 disabled:text-gray-400 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 disabled:placeholder-gray-200 resize-none disabled:cursor-not-allowed"
-          placeholder="Type your message..."
-          type="text"
+          className="w-full dark:bg-gray-800 px-4 py-4 rounded-lg bg-transparent border-none outline-none resize-none"
+          placeholder="Describe patient symptoms (e.g., Male, 45y, chest pain)..."
           rows={1}
           value={input}
           disabled={status !== "ready"}
-          title={status === "ready" ? "Model is ready" : "Model not loaded yet"}
           onKeyDown={(e) => {
-            if (
-              input.length > 0 &&
-              !isRunning &&
-              e.key === "Enter" &&
-              !e.shiftKey
-            ) {
-              e.preventDefault(); // Prevent default behavior of Enter key
+            if (input.length > 0 && !isRunning && e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
               onEnter(input);
             }
           }}
           onInput={(e) => setInput(e.target.value)}
         />
-        {isRunning ? (
-          <div className="cursor-pointer" onClick={onInterrupt}>
-            <StopIcon className="h-8 w-8 p-1 rounded-md text-gray-800 dark:text-gray-100 absolute right-3 bottom-3" />
-          </div>
-        ) : input.length > 0 ? (
-          <div className="cursor-pointer" onClick={() => onEnter(input)}>
-            <ArrowRightIcon
-              className={`h-8 w-8 p-1 bg-gray-800 dark:bg-gray-100 text-white dark:text-black rounded-md absolute right-3 bottom-3`}
-            />
-          </div>
-        ) : (
-          <div>
-            <ArrowRightIcon
-              className={`h-8 w-8 p-1 bg-gray-200 dark:bg-gray-600 text-gray-50 dark:text-gray-800 rounded-md absolute right-3 bottom-3`}
-            />
-          </div>
-        )}
+        <div className="flex items-center pr-3">
+            {isRunning ? (
+              <StopIcon className="h-8 w-8 cursor-pointer text-red-500" onClick={onInterrupt} />
+            ) : (
+              <ArrowRightIcon 
+                className={`h-8 w-8 p-1 rounded-md ${input.length > 0 ? 'bg-red-600 text-white' : 'bg-gray-200 text-gray-400'}`} 
+                onClick={() => input.length > 0 && onEnter(input)} 
+              />
+            )}
+        </div>
       </div>
 
-      <p className="text-xs text-gray-400 text-center mb-3">
-        Disclaimer: Generated content may be inaccurate or false.
+      <p className="text-[10px] text-gray-400 text-center mb-3 px-4">
+        NOTICE: This AI is a supportive tool for healthcare professionals. Final clinical decisions must be made by a qualified physician.
       </p>
     </div>
   ) : (
-    <div className="fixed w-screen h-screen bg-black z-10 bg-opacity-[92%] text-white text-2xl font-semibold flex justify-center items-center text-center">
-      WebGPU is not supported
-      <br />
-      by this browser :&#40;
+    <div className="fixed w-screen h-screen bg-black text-white flex justify-center items-center text-center p-10">
+      WebGPU is not supported by this browser. Please use Chrome or Edge.
     </div>
   );
 }
 
-export default App;
+export default App;