Update src/App.jsx

src/App.jsx

@@ -158,14 +158,14 @@ function isTableField(field) {
 const API_BASE = import.meta.env.VITE_API_BASE || "http://localhost:8000";
 
 export default function App() {
-  // PDF comes from pdf_id in URL
+  // PDF comes from pdf_id in URL OR a local upload
   const [pdfId, setPdfId] = useState(null);
   const [pdfUrl, setPdfUrl] = useState(null);
   const [pdfName, setPdfName] = useState(null);
 
-  // NEW: template id comes from URL OR manual input
+  // template id comes from URL OR manual input
   const [templateId, setTemplateId] = useState("");
-  // NEW: template metadata so the exported config matches the registry template format
+  // template metadata so the exported config matches the registry template format
   const [templateName, setTemplateName] = useState("");
   const [templateVersion, setTemplateVersion] = useState(1);
   const [matchKeywordsAny, setMatchKeywordsAny] = useState("");
@@ -193,6 +193,9 @@ export default function App() {
   const dragStartRef = useRef(null);
   const overlayRef = useRef(null);
 
+  const fileInputRef = useRef(null);
+  const localUrlRef = useRef(null);
+
   const [showPreview, setShowPreview] = useState(true);
 
   const [sendStatus, setSendStatus] = useState({ state: "idle", msg: "" }); // idle|sending|ok|err
@@ -228,14 +231,22 @@ export default function App() {
 
   // Spacebar handling for pan
   useEffect(() => {
+    // Don't hijack the spacebar while the user is typing in a field.
+    function isTypingTarget(e) {
+      const t = e.target;
+      const tag = t && t.tagName ? t.tagName.toLowerCase() : "";
+      return tag === "input" || tag === "textarea" || tag === "select" || (t && t.isContentEditable);
+    }
     function onKeyDown(e) {
       if (e.code === "Space") {
+        if (isTypingTarget(e)) return; // allow typing spaces in inputs
         e.preventDefault();
         setSpaceDown(true);
       }
     }
     function onKeyUp(e) {
       if (e.code === "Space") {
+        if (isTypingTarget(e)) return;
         e.preventDefault();
         setSpaceDown(false);
         setIsPanning(false);
@@ -254,15 +265,12 @@ export default function App() {
   useEffect(() => {
     const sp = new URLSearchParams(window.location.search);
 
-    console.log("URL", window.location.href);
-    console.log("query", Object.fromEntries(sp.entries()));
     const id = sp.get("pdf_id") || sp.get("id") || sp.get("pdfId") || sp.get("pdf");
     setPdfId(id || null);
 
     const tid = sp.get("template_id");
     setTemplateId((tid || "").trim());
 
-    // Optional metadata via URL
     const tname = sp.get("template_name");
     if (tname) setTemplateName(tname.trim());
 
@@ -305,6 +313,53 @@ export default function App() {
     };
   }, []);
 
+  // ---- Load a local PDF directly (no email link / no pdf_id needed) ----
+  async function onPickLocalPdf(e) {
+    const file = e.target.files && e.target.files[0];
+    if (!file) return;
+
+    // revoke previous local URL
+    if (localUrlRef.current) {
+      try { URL.revokeObjectURL(localUrlRef.current); } catch (_) {}
+      localUrlRef.current = null;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    localUrlRef.current = objectUrl;
+
+    // show it + reset view/measurements
+    setPdfUrl(objectUrl);
+    setPdfName(file.name);
+    setPageSize({ w: 0, h: 0 });
+    setScale(1);
+    setPan({ x: 0, y: 0 });
+
+    // give it an id so Save Config / form_id work
+    const localId = `local_${Date.now()}`;
+    setPdfId(localId);
+
+    setSendStatus({ state: "ok", msg: `Loaded ${file.name}. (Download Template JSON works offline.)` });
+
+    // best-effort: also upload to the API so "Save Config" can attach the PDF server-side.
+    try {
+      const fd = new FormData();
+      fd.append("file", file, file.name);
+      fd.append("pdf_name", file.name);
+      const resp = await fetch(`${API_BASE}/api/pdf/${encodeURIComponent(localId)}`, {
+        method: "POST",
+        body: fd,
+      });
+      if (resp.ok) {
+        setSendStatus({ state: "ok", msg: `Loaded ${file.name} and uploaded to API as ${localId}.` });
+      }
+    } catch (_) {
+      // offline / CORS — local preview + Download still work fine
+    }
+
+    // allow re-selecting the same file later
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }
+
   const selectedField = useMemo(
     () => FIELDS.find((f) => f.fieldId === selectedFieldId),
     [selectedFieldId]
@@ -633,7 +688,7 @@ export default function App() {
 
   async function saveConfig() {
     if (!pdfId) {
-      setSendStatus({ state: "err", msg: "Missing pdf_id in URL." });
+      setSendStatus({ state: "err", msg: "Missing pdf_id. Upload a PDF or open via the pipeline link." });
       return;
     }
     const tid = (templateId || "").trim();
@@ -709,11 +764,33 @@ export default function App() {
           </div>
           {!pdfId && (
             <div style={{ marginTop: 10, fontSize: 12, color: "#ffb4b4" }}>
-              Missing <b>pdf_id</b>. Open this page using the pipeline link from the email.
+              No PDF yet. Upload one below, or open this page using the pipeline link from the email.
             </div>
           )}
         </div>
 
+        {/* Upload a local PDF directly */}
+        <div style={{ marginBottom: 14 }}>
+          <div style={UI.label}>Upload PDF (no link needed)</div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="application/pdf,.pdf"
+            onChange={onPickLocalPdf}
+            style={{ display: "none" }}
+          />
+          <button
+            type="button"
+            onClick={() => fileInputRef.current && fileInputRef.current.click()}
+            style={{ ...UI.btnBase, ...UI.blue }}
+          >
+            Upload PDF
+          </button>
+          <div style={{ fontSize: 12, color: UI.subtle, marginTop: 6 }}>
+            Loads a PDF from your computer to train on. No email link required.
+          </div>
+        </div>
+
         {/* Template ID */}
         <div style={{ marginBottom: 14 }}>
           <div style={UI.label}>Template ID (required)</div>
@@ -1049,7 +1126,7 @@ export default function App() {
           <div style={{ color: "#999", lineHeight: 1.4 }}>
             No PDF loaded.
             <br />
-            Open using pipeline link:
+            Click <b>Upload PDF</b> on the left, or open using a pipeline link:
             <br />
             <code style={{ color: "#ddd" }}>...?pdf_id=xxxx&template_id=T1_...</code>
           </div>