\n \n \n\n\n",[],[148,117],"77377e30-5537-11f1-9f28-ee650bb23af1",["D",1779383213650],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\n\ninterface BirdResult {\n identified: boolean;\n name?: string;\n confidence?: string;\n reasoning?: string;\n info?: {\n name: string;\n scientificName: string;\n family: string;\n habitat: string;\n diet: string;\n funFact: string;\n migrationPattern: string;\n migrationMonths: { spring: string; fall: string };\n conservationStatus: string;\n song: string;\n range: string;\n };\n migration?: string;\n inDatabase?: boolean;\n}\n\nexport function App() {\n const [image, setImage] = useState(null);\n const [imagePreview, setImagePreview] = useState(null);\n const [description, setDescription] = useState(\"\");\n const [zipCode, setZipCode] = useState(\"\");\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const fileInputRef = useRef(null);\n\n const handleImageChange = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) {\n setImage(file);\n const reader = new FileReader();\n reader.onload = (ev) => setImagePreview(ev.target?.result as string);\n reader.readAsDataURL(file);\n }\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!image && !description.trim()) {\n setError(\"Please upload a photo or describe the bird/sound you heard.\");\n return;\n }\n\n setLoading(true);\n setError(null);\n setResult(null);\n\n const formData = new FormData();\n if (image) formData.append(\"image\", image);\n if (description.trim()) formData.append(\"description\", description.trim());\n if (zipCode.trim()) formData.append(\"zipCode\", zipCode.trim());\n\n try {\n const resp = await fetch(\"/api/identify\", { method: \"POST\", body: formData });\n const data = await resp.json();\n if (!resp.ok) {\n setError(data.error || \"Something went wrong\");\n } else {\n setResult(data);\n }\n } catch (err) {\n setError(\"Network error — please try again.\");\n } finally {\n setLoading(false);\n }\n };\n\n const reset = () => {\n setImage(null);\n setImagePreview(null);\n setDescription(\"\");\n setResult(null);\n setError(null);\n if (fileInputRef.current) fileInputRef.current.value = \"\";\n };\n\n return (\n

\n {/* Header */}\n

🐦

Bird Identifier

\n Upload a photo or describe a bird & its sounds — I'll tell you what it is and when it visits your area!\n

\n\n {/* Input Form */}\n {!result && (\n

\n\n {/* Description */}\n

\n \n 🎵 Describe the Bird or Its Sound\n \n setDescription(e.target.value)}\n placeholder=\"e.g., 'Small bright red bird with a crest, singing a loud whistle' or 'I heard a cheerily-cheerio song on my lawn at dawn'\"\n className=\"w-full border border-gray-300 rounded-xl p-3 h-24 resize-none focus:ring-2 focus:ring-sky-400 focus:border-sky-400 outline-none\"\n />\n

\n\n {/* Zip Code */}\n

\n 📍 Your Zip Code (for migration info)\n setZipCode(e.target.value.replace(/\\D/g, \"\").slice(0, 5))}\n placeholder=\"e.g., 10001\"\n className=\"w-full border border-gray-300 rounded-xl p-3 focus:ring-2 focus:ring-sky-400 focus:border-sky-400 outline-none\"\n maxLength={5}\n />\n

\n\n {error && (\n

\n ⚠️ {error}\n

\n )}\n\n \n {loading\n ? (\n \n 🔍 Identifying...\n \n )\n : \"🔍 Identify This Bird\"}\n \n \n )}\n\n {/* Results */}\n {result && (\n

\n {result.identified\n ? (\n <>\n {/* Bird Name Card */}\n

🐦

{result.name}

\n {result.info && (\n

{result.info.scientificName}

\n )}\n

\n \n {result.confidence === \"high\" ? \"✅\" : result.confidence === \"medium\" ? \"🟡\" : \"🟠\"}{\" \"}\n {result.confidence} confidence\n \n

{result.reasoning}

\n\n {/* Preview of uploaded image */}\n {imagePreview && (\n

\n $\"Your$ \n

\n )}\n\n {/* Bird Info */}\n {result.info && (\n

📚 About This Bird

\n \n \n \n \n \n \n

\n 💡 Fun Fact: {result.info.funFact}\n

\n )}\n\n {/* Migration Info */}\n {result.migration && (\n

🗺️ Migration Info

\n {result.migration.split(\"**\").map((part, i) =>\n i % 2 === 1 ? {part} : {part}\n )}\n

\n )}\n\n {!result.inDatabase && (\n

\n ℹ️ Detailed species data isn't in our database yet for this bird.\n We identified it using AI — try common North American species for the full experience!\n

\n )}\n \n )\n : (\n

🤔

Couldn't Identify

{result.reasoning}

\n )}\n\n {/* Try Again */}\n \n 🔄 Identify Another Bird\n \n

\n )}\n\n {/* Footer */}\n

Tip: Add an OPENAI_API_KEY env var for AI-powered photo identification

\n View Source\n

\n \n );\n}\n\nfunction InfoItem({ icon, label, value }: { icon: string; label: string; value: string }) {\n return (\n

\n {icon}\n

{label}

{value}

\n );\n}\n",[],[148,173],["D",1779383203206],[300,301,302],[148],["D",1779382252086],{"_11":12,"_243":-5},{"_11":12,"_239":12,"_79":-5,"_25":-5,"_240":241,"_242":24},{"_47":190,"_13":16,"_41":44,"_231":195,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_236":-5,"_237":14,"_238":12},"ctx",{"_60":-5,"_263":371,"_372":373,"_374":375,"_376":24,"_377":24,"_378":24,"_379":207,"_380":-5,"_381":-7,"_382":-7,"_383":20,"_384":24,"_385":24,"_386":-5,"_387":24,"_388":24,"_389":24,"_390":-5},"ENV",{"_342":343,"_344":345,"_346":16,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History