import React, { useState } from "react"; import { callAI } from "call-ai"; import { ImgVibes } from "img-vibes"; import { useFireproof } from "use-fireproof"; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("feather-finder-db"); const { docs: sightings } = useLiveQuery("_id", { descending: true, limit: 50 }); const [description, setDescription] = useState(""); const [aiResult, setAiResult] = useState(null); const [isLoading, setIsLoading] = useState(false); const [selectedDoc, setSelectedDoc] = useState(null); const [location, setLocation] = useState(""); const [isSaving, setIsSaving] = useState(false); const [activeTab, setActiveTab] = useState("identify"); // identify | feed async function handleIdentify() { if (!description.trim()) return; setIsLoading(true); setAiResult(null); try { const res = await callAI( `You are an expert ornithologist. The user describes a bird: "${description}". Identify the most likely species and return structured info.`, { schema: { properties: { commonName: { type: "string", description: "Common name of the bird" }, scientificName: { type: "string", description: "Scientific name" }, habitat: { type: "string", description: "Typical habitat in one sentence" }, funFact: { type: "string", description: "One interesting fun fact" }, conservationStatus: { type: "string", description: "Conservation status (e.g. Least Concern)" }, imagePrompt: { type: "string", description: "A vivid visual prompt for generating a realistic illustration of this bird" }, }, }, } ); setAiResult(JSON.parse(res)); } finally { setIsLoading(false); } } async function handleSave() { if (!aiResult) return; setIsSaving(true); try { await database.put({ type: "sighting", commonName: aiResult.commonName, scientificName: aiResult.scientificName, habitat: aiResult.habitat, funFact: aiResult.funFact, conservationStatus: aiResult.conservationStatus, imagePrompt: aiResult.imagePrompt, description, location: location.trim() || "Unknown location", seenAt: Date.now(), }); setAiResult(null); setDescription(""); setLocation(""); setActiveTab("feed"); } finally { setIsSaving(false); } } const c = { bg: "bg-[oklch(0.96_0.01_90)]", card: "bg-white border-[3px] border-[oklch(0.15_0.02_280)]", shadow: "shadow-[4px_4px_0px_oklch(0.15_0.02_280)]", shadowSm: "shadow-[3px_3px_0px_oklch(0.15_0.02_280)]", ink: "text-[oklch(0.15_0.02_280)]", muted: "text-[oklch(0.50_0.02_280)]", red: "bg-[oklch(0.55_0.24_28)]", yellow: "bg-[oklch(0.85_0.18_85)]", green: "bg-[oklch(0.62_0.19_145)]", blue: "bg-[oklch(0.52_0.18_255)]", btnPrimary: "bg-[oklch(0.55_0.24_28)] text-white border-[3px] border-[oklch(0.15_0.02_280)] shadow-[4px_4px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_oklch(0.15_0.02_280)] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed", btnSecondary: "bg-[oklch(0.85_0.18_85)] text-[oklch(0.15_0.02_280)] border-[3px] border-[oklch(0.15_0.02_280)] shadow-[3px_3px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_oklch(0.15_0.02_280)] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150", input: "bg-white border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[4px_4px_0px_oklch(0.15_0.02_280)] transition-all duration-150", }; return (

{/* Ambient blocks */}

{/* NAV */}

Feather Finder

{["identify","feed"].map(tab => ( ))}

{/* HERO */}

Identify Any Bird

Describe what you see and let AI name the species.

{/* IDENTIFY TAB */} {activeTab === "identify" && (

Describe the Bird

setDescription(e.target.value)}
              />
              <label className={`block text-[0.65rem] uppercase tracking-[0.15em] font-bold ${c.muted}`}>Your Location (optional)</label>
              <input
                className={`${c.input} w-full p-3 text-sm`}
                placeholder="e.g. Central Park, NYC"
                value={location}
                onChange={e => setLocation(e.target.value)}
              />
              <button
                onClick={handleIdentify}
                disabled={isLoading || !description.trim()}
                className={`${c.btnPrimary} w-full py-3 rounded-[4px] font-bold uppercase text-sm tracking-[0.05em] flex items-center justify-center gap-2`}
              >
                {isLoading ? (
                  <>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <circle cx="8" cy="8" r="6" stroke="white" strokeWidth="3" strokeDasharray="28" strokeDashoffset="10" style={{ animation:'spin 0.8s linear infinite', transformOrigin:'center' }} />
                    </svg>
                    Identifying...
                  </>
                ) : (
                  <>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round">
                      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                    </svg>
                    Identify Bird
                  </>
                )}
              </button>
            </div>

{aiResult && (
              <div className={`${c.card} ${c.shadow} rounded-[4px] overflow-hidden`}>
                <div className="bg-[oklch(0.52_0.18_255)] px-5 py-3">
                  <span className="text-white font-bold uppercase text-sm tracking-[0.05em]">Match Found</span>
                </div>
                <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div>
                      <p className={`text-[0.6rem] uppercase tracking-[0.15em] ${c.muted} font-bold`}>Common Name</p>
                      <p className={`text-2xl font-bold uppercase ${c.ink}`}>{aiResult.commonName}</p>
                    </div>
                    <div>
                      <p className={`text-[0.6rem] uppercase tracking-[0.15em] ${c.muted} font-bold`}>Scientific Name</p>
                      <p className="mono text-sm italic text-[oklch(0.15_0.02_280)]">{aiResult.scientificName}</p>
                    </div>
                    <div>
                      <p className={`text-[0.6rem] uppercase tracking-[0.15em] ${c.muted} font-bold`}>Habitat</p>
                      <p className="text-sm text-[oklch(0.15_0.02_280)]">{aiResult.habitat}</p>
                    </div>
                    <div>
                      <p className={`text-[0.6rem] uppercase tracking-[0.15em] ${c.muted} font-bold`}>Conservation Status</p>
                      <span className="inline-block px-2 py-1 text-xs font-bold uppercase bg-[oklch(0.62_0.19_145)] text-[oklch(0.15_0.02_280)] border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px]">{aiResult.conservationStatus}</span>
                    </div>
                    <div>
                      <p className={`text-[0.6rem] uppercase tracking-[0.15em] ${c.muted} font-bold`}>Fun Fact</p>
                      <p className="text-sm text-[oklch(0.15_0.02_280)]">{aiResult.funFact}</p>
                    </div>
                  </div>
                  <div className="flex flex-col gap-4">
                    <div className="border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] overflow-hidden aspect-square">
                      <ImgVibes prompt={aiResult.imagePrompt} className="w-full h-full object-cover" showControls={false} />
                    </div>
                  </div>
                </div>
                <div className="px-6 pb-6 flex gap-3">
                  <button
                    onClick={handleSave}
                    disabled={isSaving}
                    className={`${c.btnPrimary} flex-1 py-3 rounded-[4px] font-bold uppercase text-sm tracking-[0.05em] flex items-center justify-center gap-2`}
                  >
                    {isSaving ? (
                      <>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                          <circle cx="8" cy="8" r="6" stroke="white" strokeWidth="3" strokeDasharray="28" strokeDashoffset="10" style={{ animation:'spin 0.8s linear infinite', transformOrigin:'center' }} />
                        </svg>
                        Saving...
                      </>
                    ) : "Log This Sighting"}
                  </button>
                  <button onClick={() => setAiResult(null)} className={`${c.btnSecondary} px-4 py-3 rounded-[4px] font-bold uppercase text-sm tracking-[0.05em]`}>
                    Clear
                  </button>
                </div>
              </div>
            )}
          </div>
        )}

{/* FEED TAB */}
        {activeTab === "feed" && (
          <div className="space-y-4">
            {sightings.length === 0 && (
              <div className={`${c.card} ${c.shadow} rounded-[4px] p-10 text-center`}>
                <p className={`font-bold uppercase ${c.muted} tracking-[0.08em]`}>No sightings yet — go identify a bird!</p>
              </div>
            )}
            {sightings.map(doc => (
              <div
                key={doc._id}
                className={`${c.card} rounded-[4px] shadow-[3px_3px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_oklch(0.15_0.02_280)] transition-all duration-150 cursor-pointer overflow-hidden`}
                onClick={() => setSelectedDoc(selectedDoc?._id === doc._id ? null : doc)}
              >
                <div className="flex items-center gap-4 p-4">
                  <div className="w-16 h-16 border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] overflow-hidden flex-shrink-0 bg-[oklch(0.85_0.18_85)]">
                    {doc.imagePrompt && <ImgVibes prompt={doc.imagePrompt} className="w-full h-full object-cover" showControls={false} />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className={`font-bold uppercase text-base tracking-[-0.01em] ${c.ink} truncate`}>{doc.commonName}</p>
                    <p className="mono text-xs italic text-[oklch(0.50_0.02_280)] truncate">{doc.scientificName}</p>
                    <div className="flex items-center gap-2 mt-1">
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="oklch(0.50 0.02 280)" strokeWidth="2" strokeLinecap="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                      <span className="text-[0.7rem] text-[oklch(0.50_0.02_280)] truncate">{doc.location}</span>
                      <span className="text-[0.65rem] text-[oklch(0.50_0.02_280)] ml-auto flex-shrink-0">{new Date(doc.seenAt).toLocaleDateString()}</span>
                    </div>
                  </div>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="oklch(0.50 0.02 280)" strokeWidth="2.5" strokeLinecap="round" className={`flex-shrink-0 transition-transform duration-150 ${selectedDoc?._id === doc._id ? 'rotate-90' : ''}`}><path d="M9 18l6-6-6-6"/></svg>
                </div>

{selectedDoc?._id === doc._id && (
                  <div className="border-t-[3px] border-[oklch(0.15_0.02_280)] p-4 space-y-3 bg-[oklch(0.96_0.01_90)]">
                    <div>
                      <p className={`text-[0.6rem] uppercase tracking-[0.15em] ${c.muted} font-bold`}>Original Description</p>
                      <p className="text-sm text-[oklch(0.15_0.02_280)] mt-1">{doc.description}</p>
                    </div>
                    <div>
                      <p className={`text-[0.6rem] uppercase tracking-[0.15em] ${c.muted} font-bold`}>Habitat</p>
                      <p className="text-sm text-[oklch(0.15_0.02_280)] mt-1">{doc.habitat}</p>
                    </div>
                    <div>
                      <p className={`text-[0.6rem] uppercase tracking-[0.15em] ${c.muted} font-bold`}>Fun Fact</p>
                      <p className="text-sm text-[oklch(0.15_0.02_280)] mt-1">{doc.funFact}</p>
                    </div>
                    <div className="flex gap-2 items-center">
                      <span className="inline-block px-2 py-1 text-[0.65rem] font-bold uppercase bg-[oklch(0.62_0.19_145)] text-[oklch(0.15_0.02_280)] border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px]">{doc.conservationStatus}</span>
                      <button
                        onClick={e => { e.stopPropagation(); database.del(doc._id); setSelectedDoc(null); }}
                        className="ml-auto px-3 py-1 text-[0.65rem] font-bold uppercase bg-[oklch(0.55_0.24_28)] text-white border-[2px] border-[oklch(0.15_0.02_280)] rounded-[4px] hover:shadow-[3px_3px_0px_oklch(0.15_0.02_280)] transition-all duration-150"
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}</article></body></html>