Create static/app.js

static/app.js

@@ -0,0 +1,117 @@
+const { useState } = React;
+const { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } = Recharts;
+
+function App() {
+  const [data, setData] = useState(null);
+  const [query, setQuery] = useState('');
+  const [insights, setInsights] = useState([]);
+
+  const handleFileUpload = async (event) => {
+    const file = event.target.files[0];
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const response = await fetch('/api/process-file', {
+      method: 'POST',
+      body: formData,
+    });
+    const result = await response.json();
+    setData(result);
+  };
+
+  const handleQuery = async () => {
+    if (!data || !query) return;
+
+    const response = await fetch('/api/query', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        query,
+        embeddings: data.embeddings
+      }),
+    });
+    
+    const result = await response.json();
+    const newInsights = result.similar_indices.map(idx => data.raw_data[idx]);
+    setInsights(newInsights);
+  };
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      <div className="mb-6">
+        <label className="block mb-2 text-sm font-medium">
+          Upload Data File
+        </label>
+        <div className="flex items-center justify-center w-full">
+          <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
+            <div className="flex flex-col items-center justify-center pt-5 pb-6">
+              <svg className="w-8 h-8 mb-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+              </svg>
+              <p className="mb-2 text-sm text-gray-500">
+                <span className="font-semibold">Click to upload</span> or drag and drop
+              </p>
+            </div>
+            <input
+              type="file"
+              className="hidden"
+              onChange={handleFileUpload}
+              accept=".csv,.xlsx,.xls"
+            />
+          </label>
+        </div>
+      </div>
+
+      {data && (
+        <div className="space-y-6">
+          <div>
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Ask a question about your data..."
+              className="w-full p-2 border rounded"
+            />
+            <button
+              onClick={handleQuery}
+              className="mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+            >
+              Search
+            </button>
+          </div>
+
+          {insights.length > 0 && (
+            <div className="mt-6">
+              <h3 className="text-lg font-semibold mb-4">Related Insights</h3>
+              <div className="h-64">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={insights}>
+                    {Object.keys(insights[0] || {}).map((key) => (
+                      <Bar key={key} dataKey={key} fill="#8884d8" />
+                    ))}
+                    <XAxis />
+                    <YAxis />
+                    <Tooltip />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+              <div className="mt-4 space-y-2">
+                {insights.map((insight, idx) => (
+                  <div key={idx} className="p-4 bg-gray-50 rounded">
+                    {Object.entries(insight).map(([key, value]) => (
+                      <div key={key}>
+                        <span className="font-medium">{key}:</span> {value}
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));