+
+
+ {loading && 
}
+
+
+ Uploading and processing image...
} + {bestMatch &&{bestMatch}
} + {uploadedImage &&+ setName(e.target.value)} + /> +
+
The specified file was not found on this website. Please check the URL for mistakes and try again.
+This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.
You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!
+ Open Hosting Documentation +Firebase SDK Loading…
+ + + + diff --git a/server.js b/server.js index 56f9983..7642b2c 100644 --- a/server.js +++ b/server.js @@ -4,14 +4,21 @@ import express from 'express'; import cors from 'cors'; import axios from 'axios'; import process from 'process'; +import FormData from 'form-data'; +import multer from 'multer'; +import path from 'path'; +import fs from 'fs'; const app = express(); const port = 3000; const TREFLE_API_TOKEN = process.env.TREFLE_API_KEY; +const PLANTNET_API_KEY = process.env.REACT_APP_PLANTNET_API_KEY; // Enable CORS app.use(cors()); +app.use(express.json()); +app.use(express.urlencoded({ extended: true })); // Define your proxy endpoint app.get('/api/plants/search', async (req, res) => { @@ -52,6 +59,58 @@ app.get('/api/plants/:plantId', async (req, res) => { } }); + + +const destination = "upload/images"; + +const diskStorage = multer.diskStorage({ + destination: destination, + filename: (req, file, cb) => { + return cb(null, `${file.fieldname}_${Date.now()}${path.extname(file.originalname)}`); + }, +}); + +const upload = multer({ + storage: diskStorage, + limits: { + fileSize: 1000000, + }, +}); + +app.post('/api/plantnet/upload', upload.single("images"), async (req, res) => { + try { + const formData = new FormData(); + + console.log('Request Body:', req.body); + console.log('Request File:', req.file); + console.log('Form Data:', formData); + + + formData.append('organs', 'flower'); + formData.append('images', fs.createReadStream(req.file.path)); + + if (!req.file) { + console.error('No file provided in the request'); + return res.status(400).json({ error: 'No file provided' }); + } + + const project = 'all'; + + const { status, data } = await axios.post('https://my-api.plantnet.org/v2/identify/' + project + `?api-key=${PLANTNET_API_KEY}`, formData, { + headers: formData.getHeaders(), + }); + + console.log('status', status); + console.log('data', data); + + console.log('Identification status: ', status); + res.json(data); + } catch (error) { + console.error('Server error uploading image:', error); + res.status(500).json({ error: 'Internal Server Error' }); + } +}); + app.listen(port, () => { console.log(`Server is running on port ${port}`); }); \ No newline at end of file diff --git a/src/components/compounds/PlantRecognition/PlantRecognition.css b/src/components/compounds/PlantRecognition/PlantRecognition.css new file mode 100644 index 0000000..6aa2846 --- /dev/null +++ b/src/components/compounds/PlantRecognition/PlantRecognition.css @@ -0,0 +1,7 @@ +.flex-box { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%;; +} \ No newline at end of file diff --git a/src/components/compounds/PlantRecognition/PlantRecognition.tsx b/src/components/compounds/PlantRecognition/PlantRecognition.tsx new file mode 100644 index 0000000..ac6fa19 --- /dev/null +++ b/src/components/compounds/PlantRecognition/PlantRecognition.tsx @@ -0,0 +1,90 @@ +import React, { useState, ChangeEvent, useEffect } from 'react'; +import Compressor from 'compressorjs'; +import axios from 'axios'; +import './PlantRecognition.css' +import Container from '../../elements/container/Container'; + +const ImageUpload: React.FC = () => { + const [selectedFile, setSelectedFile] = useStateUploading and processing image...
} + {bestMatch &&{bestMatch}
} + {uploadedImage &&