file attachment

package.json

@@ -13,6 +13,7 @@
     "@huggingface/transformers": "3.7.5",
     "dompurify": "^3.1.2",
     "marked": "^12.0.2",
+    "pdfjs-dist": "^5.4.296",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/App.jsx

@@ -26,18 +26,46 @@ function App() {
   const [loadingMessage, setLoadingMessage] = useState("");
   const [progressItems, setProgressItems] = useState([]);
   const [isRunning, setIsRunning] = useState(false);
+  const [modelFiles, setModelFiles] = useState([]);
 
   // Inputs and outputs
   const [input, setInput] = useState("");
   const [messages, setMessages] = useState([]);
   const [tps, setTps] = useState(null);
   const [numTokens, setNumTokens] = useState(null);
-
-  function onEnter(message) {
-    setMessages((prev) => [...prev, { role: "user", content: message }]);
+  const [attachedFile, setAttachedFile] = useState(null);
+
+  async function onEnter(message) {
+    let fileText = "";
+    if (attachedFile) {
+      if (attachedFile.name.endsWith(".txt")) {
+        fileText = await attachedFile.text();
+      } else if (attachedFile.name.endsWith(".pdf")) {
+        // Dynamically import pdfjs-dist
+        const pdfjsLib = await import("pdfjs-dist/build/pdf");
+        const workerSrc = (await import("pdfjs-dist/build/pdf.worker?url")).default;
+        pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
+        const arrayBuffer = await attachedFile.arrayBuffer();
+        const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+        let pdfText = "";
+        for (let i = 1; i <= pdf.numPages; i++) {
+          const page = await pdf.getPage(i);
+          const content = await page.getTextContent();
+          pdfText += content.items.map(item => item.str).join(" ") + "\n";
+        }
+        fileText = pdfText;
+      }
+    }
+    let fullPrompt = message;
+    if (fileText) {
+      fullPrompt += "\n\n--- File Content ---\n" + fileText;
+    }
+    let userMsg = { role: "user", content: fullPrompt };
+    setMessages((prev) => [...prev, userMsg]);
     setTps(null);
     setIsRunning(true);
     setInput("");
+    setAttachedFile(null);
   }
 
   function onInterrupt() {
@@ -73,7 +101,6 @@ function App() {
     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;
@@ -83,7 +110,6 @@ function App() {
           break;
 
         case "progress":
-          // Model file progress: update one of the progress items.
           setProgressItems((prev) =>
             prev.map((item) => {
               if (item.file === e.data.file) {
@@ -95,53 +121,45 @@ function App() {
           break;
 
         case "done":
-          // Model file loaded: remove the progress item from the list.
           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);
+          setError(e.data.data || "Unknown error during model loading.");
+          setStatus(null);
+          setLoadingMessage("");
           break;
       }
     };
@@ -239,16 +257,36 @@ function App() {
               </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"
-              onClick={() => {
-                worker.current.postMessage({ type: "load" });
-                setStatus("loading");
-              }}
-              disabled={status !== null || error !== null}
-            >
-              Load model
-            </button>
+            <div className="flex flex-col items-center gap-2">
+              <label className="border px-4 py-2 rounded-lg bg-blue-100 text-blue-700 cursor-pointer hover:bg-blue-200">
+                Select model directory
+                <input
+                  type="file"
+                  webkitdirectory="true"
+                  directory="true"
+                  multiple
+                  className="hidden"
+                  onChange={e => {
+                    const files = Array.from(e.target.files);
+                    setModelFiles(files);
+                  }}
+                  disabled={status !== null || error !== null}
+                />
+              </label>
+              <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"
+                onClick={() => {
+                  worker.current.postMessage({ type: "load", files: modelFiles });
+                  setStatus("loading");
+                }}
+                disabled={status !== null || error !== null}
+              >
+                {modelFiles.length > 0 ? `Load selected model directory` : `Load default model`}
+              </button>
+              {modelFiles.length > 0 && (
+                <span className="text-xs text-gray-600">Selected files: {modelFiles.map(f => f.name).join(", ")}</span>
+              )}
+            </div>
           </div>
         </div>
       )}
@@ -326,10 +364,10 @@ function App() {
         </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-700 rounded-lg w-[600px] max-w-[80%] max-h-[200px] mx-auto relative mb-3 flex items-center gap-2">
         <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"
+          className="scrollbar-thin w-[420px] 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"
           rows={1}
@@ -349,11 +387,31 @@ function App() {
           }}
           onInput={(e) => setInput(e.target.value)}
         />
+        <label
+          className={`flex items-center px-2 py-2 bg-blue-100 text-blue-700 rounded cursor-pointer hover:bg-blue-200 ${status !== "ready" ? "opacity-50 cursor-not-allowed" : ""}`}
+        >
+          📎 Attach
+          <input
+            type="file"
+            accept=".txt,.pdf"
+            className="hidden"
+            onChange={e => {
+              const file = e.target.files[0];
+              if (file && ![".txt", ".pdf"].some(ext => file.name.toLowerCase().endsWith(ext))) {
+                alert("Only .txt and .pdf files are allowed.");
+                e.target.value = "";
+                return;
+              }
+              setAttachedFile(file);
+            }}
+            disabled={status !== "ready"}
+          />
+        </label>
         {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 ? (
+        ) : input.length > 0 || attachedFile ? (
           <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`}
@@ -366,6 +424,9 @@ function App() {
             />
           </div>
         )}
+        {attachedFile && (
+          <span className="ml-2 text-xs text-gray-600">{attachedFile.name}</span>
+        )}
       </div>
 
       <p className="text-xs text-gray-400 text-center mb-3">

src/worker.js

@@ -30,18 +30,15 @@ async function check() {
  */
 class TextGenerationPipeline {
   static model_id = "onnx-community/granite-4.0-micro-ONNX-web";
-
   static async getInstance(progress_callback = null) {
     this.tokenizer ??= AutoTokenizer.from_pretrained(this.model_id, {
       progress_callback,
     });
-
     this.model ??= AutoModelForCausalLM.from_pretrained(this.model_id, {
       dtype: "q4f16",
       device: "webgpu",
       progress_callback,
     });
-
     return Promise.all([this.tokenizer, this.model]);
   }
 }
@@ -114,18 +111,16 @@ async function generate(messages) {
   });
 }
 
-async function load() {
+async function load(files = null) {
   self.postMessage({
     status: "loading",
-    data: "Loading model...",
+    data: files && files.length > 0 ? `Loading model from selected directory` : "Loading model...",
   });
 
   // Load the pipeline and save it for future use.
   const [tokenizer, model] = await TextGenerationPipeline.getInstance((x) => {
-    // We also add a progress callback to the pipeline so that we can
-    // track model loading.
     self.postMessage(x);
-  });
+  }, files);
 
   self.postMessage({
     status: "loading",
@@ -139,7 +134,7 @@ async function load() {
 }
 // Listen for messages from the main thread
 self.addEventListener("message", async (e) => {
-  const { type, data } = e.data;
+  const { type, data, files } = e.data;
 
   switch (type) {
     case "check":
@@ -147,7 +142,7 @@ self.addEventListener("message", async (e) => {
       break;
 
     case "load":
-      load();
+      await load(files || null);
       break;
 
     case "generate":