<script>

document.getElementById('identifyBtn').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
alert('Please take a photo or upload an image first');
return;
}
const file = fileInput.files[0];
const formData = new FormData();
formData.append('image', file);

fetch('https://api.plant.id/v2/identify', {
method: 'POST',
headers: {
'Api-Key': 'YOUR_API_KEY'
},
body: formData
})
.then(response => response.json())
.then(data => {
if (data.suggestions && data.suggestions.length > 0) {
alert(`Plant identified: ${data.suggestions[0].plant_name}`);
// You can update your UI here with detailed plant info
} else {
alert('Plant could not be identified.');
}
})
.catch(error => {
console.error(error);
alert('Error identifying plant, try again');
});
});
</script>

is it can be in on the rest of code
that i can make the program accept photos?"

index.html

@@ -136,7 +136,15 @@
                                 try {
                                     const formData = new FormData();
                                     formData.append('image', selectedFile);
-                                // Using Plant.id API (demo API key)
+                                    
+                                    // Store the file for results page
+                                    sessionStorage.setItem('uploadedImage', JSON.stringify({
+                                        name: selectedFile.name,
+                                        type: selectedFile.type,
+                                        lastModified: selectedFile.lastModified
+                                    }));
+                                    
+                                    // Using Plant.id API (demo API key)
                                     const response = await fetch('https://api.plant.id/v2/identify', {
                                         method: 'POST',
                                         headers: {
@@ -145,20 +153,29 @@
                                         },
                                         body: formData
                                     });
-if (!response.ok) {
+                                    if (!response.ok) {
                                         throw new Error('Identification failed');
                                     }
                                     const data = await response.json();
                                     console.log('API Response:', data);
                                     
                                     if (data.suggestions && data.suggestions.length > 0) {
-                                        // Redirect to results page with the data
-                                        sessionStorage.setItem('plantData', JSON.stringify(data));
+                                        // Store plant data and uploaded image info
+                                        const result = {
+                                            plantData: data,
+                                            uploadedImage: {
+                                                name: selectedFile.name,
+                                                type: selectedFile.type,
+                                                size: selectedFile.size,
+                                                lastModified: selectedFile.lastModified
+                                            }
+                                        };
+                                        sessionStorage.setItem('plantResult', JSON.stringify(result));
                                         window.location.href = 'results.html';
                                     } else {
                                         throw new Error('No plant identified');
                                     }
-                                } catch (error) {
+} catch (error) {
                                     console.error('Error:', error);
                                     alert('Identification failed: ' + error.message);
                                 } finally {

results.html

@@ -58,12 +58,11 @@
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             feather.replace();
-            
-            const plantData = JSON.parse(sessionStorage.getItem('plantData'));
+            const plantResult = JSON.parse(sessionStorage.getItem('plantResult'));
             const resultsContainer = document.getElementById('plant-info');
             
-            if (!plantData || !plantData.suggestions || plantData.suggestions.length === 0) {
-                resultsContainer.innerHTML = `
+            if (!plantResult || !plantResult.plantData || !plantResult.plantData.suggestions || plantResult.plantData.suggestions.length === 0) {
+resultsContainer.innerHTML = `
                     <div class="col-span-2 text-center py-8">
                         <i data-feather="alert-circle" class="mx-auto text-yellow-500 h-12 w-12 mb-4"></i>
                         <h3 class="text-xl font-bold text-gray-800 mb-2">No Plant Identified</h3>
@@ -73,11 +72,11 @@
                 feather.replace();
                 return;
             }
-
+            const plantData = plantResult.plantData;
+            const uploadedImage = plantResult.uploadedImage;
             const topSuggestion = plantData.suggestions[0];
             const confidence = Math.round(topSuggestion.probability * 100);
-            
-            resultsContainer.innerHTML = `
+resultsContainer.innerHTML = `
                 <div>
                     <div class="bg-gray-100 rounded-lg overflow-hidden mb-4">
                         <img id="plant-image" src="" alt="Identified plant" class="w-full h-64 object-cover">
@@ -121,19 +120,26 @@
                     </div>
                 </div>
             `;
+            // Show the uploaded image
+            const fileInputs = document.querySelectorAll('input[type="file"]');
+            let selectedFile = null;
             
-            // Show the uploaded image if available
-            if (plantData.uploaded_image) {
+            fileInputs.forEach(input => {
+                if (input.files && input.files.length > 0) {
+                    selectedFile = input.files[0];
+                }
+            });
+            
+            if (selectedFile) {
                 const reader = new FileReader();
                 reader.onload = function(e) {
                     document.getElementById('plant-image').src = e.target.result;
                 };
-                reader.readAsDataURL(plantData.uploaded_image);
+                reader.readAsDataURL(selectedFile);
             } else {
                 document.getElementById('plant-image').src = 'http://static.photos/nature/640x360/42';
             }
-            
-            feather.replace();
+feather.replace();
         });
     </script>
 </body>