/** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef, useCallback, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import OpenAI from "https://esm.sh/openai"; // Plant Database const PLANT_DATABASE = { 'Rosa damascena': { scientificName: 'Rosa damascena', commonName: 'Damask Rose', description: 'A fragrant rose variety known for its essential oil production and historical significance.', careInstructions: { sunlight: 'Full sun, at least 6 hours of direct sunlight daily', water: 'Moderate watering, allow soil to dry between waterings', soil: 'Well-draining, slightly acidic soil', temperature: '60-75°F (15-24°C)' }, habitat: 'Native to Middle East, particularly Syria and Iran', uses: [ 'Perfume production', 'Culinary applications', 'Traditional medicine', 'Essential oil extraction' ], toxicity: 'Non-toxic to humans and most pets', bloomSeason: 'Late spring to early summer', height: '4-6 feet (1.2-1.8 meters)', imageUrl: 'https://maxm-imggenurl.web.val.run/damask-rose-detailed' }, 'Monstera deliciosa': { scientificName: 'Monstera deliciosa', commonName: 'Swiss Cheese Plant', description: 'A popular tropical houseplant known for its distinctive split leaves and easy care.', careInstructions: { sunlight: 'Bright, indirect light', water: 'Weekly, allowing top inch of soil to dry', soil: 'Well-draining potting mix', temperature: '65-85°F (18-29°C)' }, habitat: 'Tropical forests of southern Mexico and Panama', uses: [ 'Indoor decoration', 'Air purification', 'Edible fruit in mature plants', 'Ornamental gardening' ], toxicity: 'Toxic if ingested, can cause mouth and stomach irritation', bloomSeason: 'Rarely blooms indoors', height: '10-15 feet (3-4.5 meters) in natural habitat', imageUrl: 'https://maxm-imggenurl.web.val.run/monstera-deliciosa' } }; // Plant Detail Card Component function PlantDetailCard({ plant, confidence }) { return (

{plant.commonName}

{plant.scientificName}

Confidence: {confidence}%

🌞 Care Instructions

Sunlight: {plant.careInstructions.sunlight}
Water: {plant.careInstructions.water}
Soil: {plant.careInstructions.soil}
Temperature: {plant.careInstructions.temperature}

🌍 Habitat

{plant.habitat}

🌱 Height

{plant.height}

📝 Description

{plant.description}

🌈 Uses

{use}

⚠️ Toxicity

{plant.toxicity}

🌸 Bloom Season

{plant.bloomSeason}

); } // Plant Identification Function async function identifyPlant(file) { return new Promise(async (resolve, reject) => { try { const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = async () => { const base64Image = reader.result.split(',')[1]; const openai = new OpenAI({ apiKey: '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', dangerouslyAllowBrowser: true }); try { const response = await openai.chat.completions.create({ model: "gpt-4o", messages: [ { role: "user", content: [ { type: "text", text: "Identify the plant species in this image with high accuracy. Provide the scientific name, common name, and a detailed description. Include key identifying characteristics. If you cannot confidently identify the plant, explain why." }, { type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } } ] } ], max_tokens: 500 }); const plantDescription = response.choices[0].message.content; const scientificNameMatch = plantDescription.match(/Scientific Name:\s*([^\n]+)/i); const commonNameMatch = plantDescription.match(/Common Name:\s*([^\n]+)/i); const descriptionMatch = plantDescription.match(/Description:\s*([^\n]+)/i); if (scientificNameMatch || commonNameMatch) { const scientificName = scientificNameMatch ? scientificNameMatch[1].trim() : 'Unknown Scientific Name'; const commonName = commonNameMatch ? commonNameMatch[1].trim() : 'Unknown Common Name'; const description = descriptionMatch ? descriptionMatch[1].trim() : plantDescription; const matchedPlant = Object.values(PLANT_DATABASE).find( plant => plant.scientificName.toLowerCase() === scientificName.toLowerCase() || plant.commonName.toLowerCase() === commonName.toLowerCase() ) || { scientificName: scientificName, commonName: commonName, description: description, careInstructions: { sunlight: 'Consult local gardening expert', water: 'Varies by specific plant type', soil: 'Depends on plant species', temperature: 'Varies' }, habitat: 'Habitat information not available', uses: ['Further research recommended'], toxicity: 'Toxicity status unknown', bloomSeason: 'Bloom season varies', height: 'Height varies by specific variety', imageUrl: 'https://maxm-imggenurl.web.val.run/unknown-plant' }; resolve({ plant: matchedPlant, confidence: 75, rawDescription: plantDescription }); } else { reject(new Error('Unable to extract plant details from the image')); } } catch (apiError) { console.error('Full API Error:', apiError); reject(new Error(`Plant identification API error: ${apiError.message || 'Unknown error occurred'}`)); } }; reader.onerror = (error) => { reject(new Error(`Image reading error: ${error}`)); }; } catch (error) { reject(new Error(`Plant identification preparation failed: ${error.message}`)); } }); } // Main Plant Identifier Application Component function PlantIdentifierApp() { const [selectedImage, setSelectedImage] = useState(null); const [plantInfo, setPlantInfo] = useState(null); const [identificationError, setIdentificationError] = useState(null); const [isLoading, setIsLoading] = useState(false); const [captureMode, setCaptureMode] = useState(false); const [cameraError, setCameraError] = useState(null); const [confidence, setConfidence] = useState(0); const videoRef = useRef(null); const canvasRef = useRef(null); const handleImageUpload = async (event) => { const file = event.target.files[0]; processImage(file); }; const processImage = async (file) => { if (file) { setSelectedImage(URL.createObjectURL(file)); setIsLoading(true); setIdentificationError(null); try { const result = await identifyPlant(file); setPlantInfo(result.plant); setConfidence(result.confidence); setIsLoading(false); setCaptureMode(false); } catch (error) { console.error('Plant identification error:', error); setIdentificationError(error.message); setIsLoading(false); } } }; const startCamera = useCallback(async () => { if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { setCameraError("Your browser does not support camera access. Please use a modern browser."); return; } setCaptureMode(true); setCameraError(null); try { const constraints = { video: { width: { min: 320, ideal: 640, max: 1280 }, height: { min: 240, ideal: 480, max: 720 }, facingMode: ['environment', 'user'] } }; const stream = await navigator.mediaDevices.getUserMedia(constraints); if (videoRef.current) { videoRef.current.srcObject = stream; videoRef.current.onloadedmetadata = () => { videoRef.current.play().catch(err => { console.error("Error playing video:", err); setCameraError("Could not start camera. Please check device permissions."); }); }; videoRef.current.onerror = (err) => { console.error("Video error:", err); setCameraError("Camera stream encountered an error."); }; } } catch (err) { console.error("Camera access error:", err); switch(err.name) { case 'NotAllowedError': setCameraError("Camera permission was denied. Please grant camera access in your browser settings."); break; case 'NotFoundError': setCameraError("No camera found on this device."); break; case 'OverconstrainedError': setCameraError("No camera meets the specified constraints."); break; default: setCameraError(err.message || "Unable to access camera. Please check permissions and try again."); } setCaptureMode(false); } }, []); const capturePhoto = useCallback(() => { if (videoRef.current && canvasRef.current) { const video = videoRef.current; const canvas = canvasRef.current; if (video.videoWidth === 0 || video.videoHeight === 0) { setCameraError("Unable to capture photo. Video stream not ready."); return; } canvas.width = video.videoWidth; canvas.height = video.videoHeight; const context = canvas.getContext('2d'); context.scale(-1, 1); context.drawImage(video, -canvas.width, 0, canvas.width, canvas.height); context.setTransform(1, 0, 0, 1, 0, 0); canvas.toBlob((blob) => { if (blob) { processImage(new File([blob], 'captured-plant.jpg', { type: 'image/jpeg' })); } else { setCameraError("Failed to create photo blob."); } }, 'image/jpeg'); } }, [processImage]); const resetCapture = () => { setSelectedImage(null); setPlantInfo(null); setIdentificationError(null); setCaptureMode(false); setCameraError(null); setConfidence(0); }; return (

🌿Plant Identifier

{cameraError && (

🚨 Camera Access Error

{cameraError}

)} {identificationError && (

🚨 Identification Error

{identificationError}

)} {!captureMode && !selectedImage && (

📤 Upload Image

)} {captureMode && (

)} {selectedImage && (

)} {isLoading && (

🌱 Identifying plant...

)} {plantInfo && ( )}

); } // Client-side rendering function function client() { createRoot(document.getElementById("root")).render(); } // Execute client-side rendering if in browser environment if (typeof document !== "undefined") { client(); } // Server-side response handler export default async function server(request: Request): Promise { return new Response(` Plant Identifier

`, { headers: { "content-type": "text/html", }, }); }

plantIdentifierApp