Create frontend/src/App.jsx

frontend/src/App.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import "./styles.css";
+
+const App = () => {
+  const [query, setQuery] = useState("");
+  const [output, setOutput] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const fetchPrediction = async () => {
+    setLoading(true);
+    setOutput(null);
+
+    const response = await fetch("https://your-space-url.hf.space/predict/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ query }),
+    });
+
+    const data = await response.json();
+    setOutput(data.output);
+    setLoading(false);
+  };
+
+  return (
+    <div className="container">
+      <h1 className="title">Luxury NER Extractor</h1>
+      <p className="subtitle">Enter a sentence and extract structured data</p>
+
+      <div className="input-section">
+        <input
+          type="text"
+          placeholder="e.g. Luxury bags for women above $2000"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="input-box"
+        />
+        <button onClick={fetchPrediction} className="analyze-button">
+          {loading ? "Analyzing..." : "Analyze"}
+        </button>
+      </div>
+
+      {output && (
+        <div className="output-section">
+          <h2>Extracted Information</h2>
+          <div className="result-box">
+            {Object.entries(output).map(([key, value]) => (
+              <div key={key} className="entity">
+                <span className="entity-type">{key}</span>:{" "}
+                <span className="entity-value">{value.join(", ")}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default App;