{plant.commonName}

{plant.scientificName}

Confidence: {confidence}%

\n\n

🌞 Care Instructions

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

🌍 Habitat

{plant.habitat}

🌱 Height

{plant.height}

\n\n

📝 Description

{plant.description}

\n\n

🌈 Uses

{use}

⚠️ Toxicity

{plant.toxicity}

🌸 Bloom Season

{plant.bloomSeason}

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

\n 🌿Plant Identifier\n

\n\n

\n {cameraError && (\n

🚨 Camera Access Error

{cameraError}

\n )}\n\n {identificationError && (\n

🚨 Identification Error

{identificationError}

\n \n

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

\n \n \n 📤 Upload Image\n \n \n

\n )}\n\n {captureMode && (\n

\n )}\n\n {selectedImage && (\n

\n $\"Selected$ \n \n

\n )}\n \n {isLoading && (\n

\n 🌱 Identifying plant...\n

\n )}\n \n {plantInfo && (\n \n )}\n

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

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}","deleted","subdomain",[102],"permalink","https://www.val.town/x/mahtabtattur/plantIdentifierApp/code/main.tsx","extension","routes/embed","actionData","errors"]