chore: remove python
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import Topbar from "./components/Topbar";
|
import Topbar from "./components/Topbar";
|
||||||
import Sidebar from "./components/Sidebar";
|
// import Sidebar from "./components/Sidebar";
|
||||||
|
import DataSelection from "./components/Interface"
|
||||||
import { ConfigProvider } from 'antd';
|
import { ConfigProvider } from 'antd';
|
||||||
import { BrowserRouter } from 'react-router-dom'
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
|
||||||
@@ -14,7 +15,8 @@ const App = () => (
|
|||||||
>
|
>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Topbar />
|
<Topbar />
|
||||||
<Sidebar />
|
{/* <Sidebar /> */}
|
||||||
|
<DataSelection />
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
52
ui/src/components/Interface/index.tsx
Normal file
52
ui/src/components/Interface/index.tsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
function DataSelection() {
|
||||||
|
const [url, setUrl] = useState('');
|
||||||
|
const [dataPoints, setDataPoints] = useState([]);
|
||||||
|
|
||||||
|
const handleUrlChange = (event: any) => {
|
||||||
|
setUrl(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleElementClick = (event: any) => {
|
||||||
|
const element = event.target;
|
||||||
|
const dataPointLabel = prompt('Enter data point label (e.g., Product Title)');
|
||||||
|
if (dataPointLabel) {
|
||||||
|
const newPoints:any = [...dataPoints]; // Copy existing data points
|
||||||
|
newPoints.push({
|
||||||
|
label: dataPointLabel,
|
||||||
|
// Capture element attributes for data extraction (e.g., ID, class)
|
||||||
|
attributes: {
|
||||||
|
id: element.id,
|
||||||
|
class: element.className,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
setDataPoints(newPoints);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
// Send URL and dataPoints to FastAPI endpoint (explained later)
|
||||||
|
const response = await fetch('/api/scrape', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url, dataPoints }),
|
||||||
|
});
|
||||||
|
// Handle response (e.g., display extracted data)
|
||||||
|
const data = await response.json();
|
||||||
|
console.log(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<input type="text" value={url} onChange={handleUrlChange} placeholder="Enter target URL" />
|
||||||
|
<div style={{ cursor: 'pointer' }} onClick={handleElementClick}>
|
||||||
|
Select elements on the webpage...
|
||||||
|
</div>
|
||||||
|
<button onClick={handleSubmit}>Extract Data</button>
|
||||||
|
{/* Display selected data points and labels for confirmation */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataSelection;
|
||||||
Reference in New Issue
Block a user