Upload New File

weedDetection.js

+import './pred.css';
+import React, { useState } from 'react';
+import { Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+
+const WeedDetection = () => {
+    const [prediction, setPrediction] = useState('');
+    const [file, setFile] = useState(null);
+    const [Imgfile, setFileImg] = useState(null);
+
+    const handleFileChange = (e) => {
+        setFile(e.target.files[0]);
+    };
+
+    const handleImgFileChange = (e) => {
+        setFileImg(e.target.files[0]);
+    };
+
+    const handleImgPredict = async () => {
+        const formData = new FormData();
+        formData.append('file', Imgfile);
+
+        const response = await fetch('http://localhost:8000/predict', {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            setPrediction(data.prediction);
+        } else {
+            console.error('Failed to make a prediction.');
+        }
+    };
+
+    const handlePredict = async () => {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const response = await fetch('http://localhost:8000/video/detect-dense', {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+        } else {
+            console.error('Failed to make a prediction.');
+        }
+    };
+
+
+
+    return (
+        <div className="app" style={{ backgroundImage: 'url(/backg3.jpg)' , backgroundRepeat: 'no-repeat', backgroundSize:"contain"}}>
+        <div className="centered-form" >
+            <Paper elevation={3} sx={{ margin: '20px', padding: '20px' }}>
+                <div>
+                    <h1>Weed Prediction</h1>
+                    <input type="file" onChange={handleImgFileChange} />
+                    <Box sx={{ m: 1 }} />
+
+                    <FormControl sx={{ m: 1, minWidth: 200 }} size="medium">
+                        <Button onClick={handleImgPredict} variant="contained" style={{ maxHeight: '60px', minHeight: '54px' }}>Check</Button>
+                    </FormControl>
+                </div>
+            </Paper>
+            <Box sx={{ m: 1 }} />
+            <Box
+                height={20}
+                width={500}
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '8vh',
+                    margin: '0 auto',
+                }}
+            >
+                <Paper elevation={3}>
+                    {prediction !== '' && (
+                        <div>
+                            <Box sx={{ m: 1 }} />
+                            <Typography
+                                variant="body1"
+                                color="text.primary"
+                                align="center"
+                                style={{ margin: '20px' }}
+                            >
+                                Prediction: {prediction}
+                            </Typography>
+                        </div>
+                    )}
+                </Paper>
+                
+            </Box>
+            <Paper elevation={3} sx={{ margin: '20px', padding: '20px' }}>
+                <div>
+                    <h1>Dense Area Detect</h1>
+                    <input type="file" onChange={handleFileChange} />
+                    <Box sx={{ m: 1 }} />
+
+                    <FormControl sx={{ m: 1, minWidth: 200 }} size="medium">
+                        <Button onClick={handlePredict} variant="contained" style={{ maxHeight: '60px', minHeight: '54px' }}>Check</Button>
+                    </FormControl>
+                </div>
+            </Paper>
+            <Box sx={{ m: 1 }} />
+            <Box
+                height={20}
+                width={500}
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '8vh',
+                    margin: '0 auto',
+                }}
+            >
+                
+            </Box>
+        </div>
+        </div>
+    );
+};
+
+export default WeedDetection;
+
+
+
+