Rename frontend/src/app.js to frontend/src/App.js

frontend/src/App.js

@@ -0,0 +1,243 @@
+import React, { useEffect, useState } from "react";
+
+const API_BASE = ""; // empty when served by same container; or set to server origin
+
+function Sidebar({ page, setPage, sites, activeSite, setActiveSite, createSite }) {
+  const [name, setName] = useState("");
+  return (
+    <div className="sidebar">
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <div style={{ width: 44, height: 44, background: "linear-gradient(135deg,#ff7a00,#ff3a3a)", borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <span>🛰️</span>
+        </div>
+        <div>
+          <div style={{ color: "#FF8C00", fontWeight: 700 }}>GeoMate V3</div>
+          <div style={{ color: "#9aa7bf", fontSize: 12 }}>AI geotechnical copilot</div>
+        </div>
+      </div>
+
+      <hr style={{ margin: "12px 0", borderColor: "rgba(255,122,0,0.06)" }} />
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        {["Home", "Soil Recognizer", "Soil Classifier", "GSD Curve", "Locator", "GeoMate Ask", "Reports"].map(p => (
+          <button key={p} className="btn" onClick={() => setPage(p)} style={{ justifyContent: "flex-start", background: page === p ? "rgba(255,122,0,0.2)" : undefined }}>
+            {p}
+          </button>
+        ))}
+      </div>
+
+      <hr style={{ margin: "12px 0" }} />
+      <div style={{ color: "#9aa7bf", marginBottom: 6 }}>Project Sites</div>
+      <div style={{ display: "flex", gap: 8 }}>
+        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="New site name" />
+        <button onClick={() => { if (name) { createSite(name); setName(""); } }} className="btn">Add</button>
+      </div>
+      <div style={{ marginTop: 8 }}>
+        <select value={activeSite || ""} onChange={(e) => setActiveSite(e.target.value)}>
+          <option value="">-- Active site --</option>
+          {sites.map(s => <option key={s.id} value={s.id}>{s["Site Name"]}</option>)}
+        </select>
+      </div>
+
+      <div style={{ marginTop: 12 }}>
+        <details>
+          <summary style={{ color: "#9aa7bf" }}>Show site JSON</summary>
+          <pre style={{ maxHeight: 220, overflow: "auto", background: "#000", padding: 8, borderRadius: 8 }}>
+            {activeSite ? JSON.stringify(sites.find(s => s.id === activeSite), null, 2) : "Select an active site"}
+          </pre>
+        </details>
+      </div>
+    </div>
+  );
+}
+
+function Home() {
+  return (
+    <div>
+      <div className="panel">
+        <div className="headline">Welcome to GeoMate V3</div>
+        <div style={{ color: "#9aa7bf", marginTop: 6 }}>Use the sidebar to navigate. Configure secrets in your HF Space to enable Groq and Earth Engine features.</div>
+      </div>
+    </div>
+  );
+}
+
+function SoilClassifier({ activeSite }) {
+  const [chat, setChat] = useState([]);
+  const [input, setInput] = useState("");
+  useEffect(() => {
+    // initial greeting
+    setChat([{ role: "bot", text: "Hello — I am the GeoMate Soil Classifier. Is the soil organic (contains high organic matter or smells/spongy)? Please answer Yes/No." }]);
+  }, []);
+
+  const pushUser = (text) => {
+    setChat(prev => [...prev, { role: "user", text }]);
+  };
+
+  return (
+    <div>
+      <div className="panel">
+        <div style={{ fontWeight: 700 }}>Soil Classifier (chat style)</div>
+        <div style={{ marginTop: 12 }}>
+          {chat.map((m, i) => (
+            <div key={i} className={`bubble ${m.role === "bot" ? "bot" : "user"}`}>
+              {m.text}
+            </div>
+          ))}
+        </div>
+        <div style={{ marginTop: 12, display: "flex", gap: 8 }}>
+          <input style={{ flex: 1 }} value={input} onChange={(e) => setInput(e.target.value)} placeholder="Type your answer..." />
+          <button className="btn" onClick={() => { if (input.trim()) { pushUser(input.trim()); setInput(""); } }}>➤</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function GSDCurve({ activeSite }) {
+  const [diam, setDiam] = useState("75,50,37.5,25,19,12.5,9.5,4.75,2,0.85,0.425,0.25,0.18,0.15,0.075");
+  const [pass, setPass] = useState("100,98,96,90,85,78,72,65,55,45,35,25,18,14,8");
+  const [result, setResult] = useState(null);
+
+  const compute = async () => {
+    const diams = diam.split(",").map(s => parseFloat(s.trim())).filter(Boolean);
+    const passing = pass.split(",").map(s => parseFloat(s.trim())).filter(Boolean);
+    const res = await fetch(`${API_BASE}/api/gsd`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ diameters: diams, passing })
+    });
+    const data = await res.json();
+    setResult(data.gsd);
+  };
+
+  return (
+    <div>
+      <div className="panel">
+        <div style={{ fontWeight: 700 }}>GSD Curve</div>
+        <textarea rows={3} value={diam} onChange={(e) => setDiam(e.target.value)} />
+        <textarea rows={3} value={pass} onChange={(e) => setPass(e.target.value)} />
+        <div style={{ marginTop: 8 }}>
+          <button className="btn" onClick={compute}>Compute & Save</button>
+        </div>
+        {result && (
+          <div style={{ marginTop: 12 }}>
+            <div>D10: {result.D10}</div>
+            <div>D30: {result.D30}</div>
+            <div>D60: {result.D60}</div>
+            <div>Cu: {result.Cu}</div>
+            <img alt="GSD" src={`data:image/png;base64,${result.plot_png}`} style={{ maxWidth: "100%", marginTop: 8 }} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Locator({ activeSite }) {
+  return (
+    <div>
+      <div className="panel">
+        <div style={{ fontWeight: 700 }}>Locator</div>
+        <p style={{ color: "#9aa7bf" }}>Provide lat/lon or draw AOI on the map (map drawing will be implemented in future iterations — currently we accept lat/lon).</p>
+      </div>
+    </div>
+  );
+}
+
+function GeoMateAsk({ activeSite }) {
+  const [input, setInput] = useState("");
+  const [chat, setChat] = useState([]);
+  const ask = async () => {
+    if (!input.trim()) return;
+    setChat(prev => [...prev, { role: "user", text: input }]);
+    const res = await fetch(`${API_BASE}/api/chat`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ site_id: activeSite, message: input, history: chat.map(c => ({ role: c.role, content: c.text })) })
+    });
+    const data = await res.json();
+    setChat(prev => [...prev, { role: "user", text: input }, { role: "assistant", text: data.reply }]);
+    setInput("");
+  };
+  return (
+    <div className="panel">
+      <div style={{ fontWeight: 700 }}>GeoMate Ask (RAG)</div>
+      <div style={{ marginTop: 8 }}>
+        {chat.map((c, i) => <div key={i} className={`bubble ${c.role === "assistant" ? "bot" : "user"}`}>{c.text}</div>)}
+      </div>
+      <div style={{ marginTop: 8, display: "flex", gap: 8 }}>
+        <input style={{ flex: 1 }} value={input} onChange={(e) => setInput(e.target.value)} />
+        <button className="btn" onClick={ask}>Ask</button>
+      </div>
+    </div>
+  );
+}
+
+function Reports({ activeSite, sites }) {
+  const [downUrl, setDownUrl] = useState(null);
+  const generate = async (classificationOnly=false) => {
+    if (!activeSite) { alert("Select active site"); return; }
+    const formData = new FormData();
+    formData.append("site_id", activeSite);
+    formData.append("classification_only", classificationOnly ? "true" : "false");
+    const res = await fetch(`${API_BASE}/api/report`, { method: "POST", body: formData });
+    if (res.ok) {
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      setDownUrl(url);
+    } else {
+      alert("Report generation failed");
+    }
+  };
+  return (
+    <div>
+      <div className="panel">
+        <div style={{ fontWeight: 700 }}>Reports</div>
+        <div style={{ marginTop: 8 }}>
+          <button className="btn" onClick={() => generate(false)}>Generate Full Geotechnical Report</button>
+          <button className="btn" style={{ marginLeft: 8 }} onClick={() => generate(true)}>Generate Classification-only Report</button>
+        </div>
+        {downUrl && (
+          <div style={{ marginTop: 12 }}>
+            <a href={downUrl} download>Download report</a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function App() {
+  const [page, setPage] = useState("Home");
+  const [sites, setSites] = useState([]);
+  const [activeSite, setActiveSite] = useState("");
+
+  useEffect(() => {
+    // fetch sites
+    fetch(`${API_BASE}/api/sites`).then(r => r.json()).then(d => setSites(d.sites || []));
+  }, []);
+
+  const createSite = async (name) => {
+    const form = new FormData();
+    form.append("name", name);
+    const r = await fetch(`${API_BASE}/api/sites`, { method: "POST", body: form });
+    const j = await r.json();
+    setSites(prev => [...prev, j.site]);
+  };
+
+  return (
+    <div className="app">
+      <Sidebar page={page} setPage={setPage} sites={sites} activeSite={activeSite} setActiveSite={setActiveSite} createSite={createSite} />
+      <div className="main">
+        {page === "Home" && <Home />}
+        {page === "Soil Recognizer" && <div className="panel">Soil Recognizer (OCR & model placeholder)</div>}
+        {page === "Soil Classifier" && <SoilClassifier activeSite={activeSite} />}
+        {page === "GSD Curve" && <GSDCurve activeSite={activeSite} />}
+        {page === "Locator" && <Locator activeSite={activeSite} />}
+        {page === "GeoMate Ask" && <GeoMateAsk activeSite={activeSite} />}
+        {page === "Reports" && <Reports activeSite={activeSite} sites={sites} />}
+      </div>
+    </div>
+  );
+}

frontend/src/app.js

@@ -1,55 +0,0 @@
-import React, { useState } from "react";
-
-function App() {
-  const [page, setPage] = useState("home");
-  const [chat, setChat] = useState([]);
-  const [input, setInput] = useState("");
-
-  const sendChat = async () => {
-    const res = await fetch("http://localhost:7860/api/chat", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ site: "Site A", message: input })
-    });
-    const data = await res.json();
-    setChat([...chat, { role: "user", msg: input }, { role: "bot", msg: data.reply }]);
-    setInput("");
-  };
-
-  return (
-    <div className="bg-black text-white h-screen flex">
-      <div className="w-1/5 bg-gray-900 p-4">
-        <h1 className="text-2xl text-orange-500 font-bold">🌍 GeoMate V3</h1>
-        <ul>
-          <li onClick={() => setPage("home")}>Home</li>
-          <li onClick={() => setPage("classify")}>Classifier</li>
-          <li onClick={() => setPage("locator")}>Locator</li>
-          <li onClick={() => setPage("chat")}>Ask GeoMate</li>
-          <li onClick={() => setPage("report")}>Reports</li>
-        </ul>
-      </div>
-      <div className="flex-1 p-6 overflow-auto">
-        {page === "home" && <h2>Welcome to GeoMate 🚀</h2>}
-        {page === "chat" &&
-          <div>
-            <div className="space-y-2">
-              {chat.map((c, i) => (
-                <div key={i} className={c.role === "user" ? "text-right" : "text-left"}>
-                  <span className={c.role === "user" ? "bg-orange-500 p-2 rounded-xl" : "bg-blue-500 p-2 rounded-xl"}>
-                    {c.msg}
-                  </span>
-                </div>
-              ))}
-            </div>
-            <div className="mt-4 flex">
-              <input value={input} onChange={e => setInput(e.target.value)} className="flex-1 text-black p-2 rounded" />
-              <button onClick={sendChat} className="bg-orange-600 px-4 ml-2 rounded">➤</button>
-            </div>
-          </div>
-        }
-      </div>
-    </div>
-  );
-}
-
-export default App;