// Upload flow with Bailian recognition and local fallback. const AI_IMAGE_MAX_SIDE = 1600; const AI_IMAGE_JPEG_QUALITY = 0.86; function readFileAsDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = e => resolve(e.target.result); reader.onerror = reject; reader.readAsDataURL(file); }); } function loadImage(src) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = src; }); } async function prepareAIImageDataUrl(file) { const raw = await readFileAsDataUrl(file); if (!/^image\/(jpe?g|png|webp)$/i.test(file.type || "")) return raw; try { const img = await loadImage(raw); const naturalWidth = img.naturalWidth || img.width; const naturalHeight = img.naturalHeight || img.height; const scale = Math.min(1, AI_IMAGE_MAX_SIDE / Math.max(naturalWidth, naturalHeight)); const width = Math.max(1, Math.round(naturalWidth * scale)); const height = Math.max(1, Math.round(naturalHeight * scale)); const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); return canvas.toDataURL("image/jpeg", AI_IMAGE_JPEG_QUALITY); } catch (err) { console.warn("image compression skipped", err); return raw; } } function UploadPage({ onNav }) { const [step, setStep] = React.useState(0); const [data, setData] = React.useState({ photoUrl: null, photoDataUrl: null, location: "棒棰岛 · 林海路附近", time: new Date().toISOString().slice(0, 16).replace("T", " "), behavior: ["站立觅食"], distance: "10–20m", suspectedSpecies: "不确定", note: "", contact: "", nickname: "晨光漫步", ethics: false, supportMedia: [], }); const [aiState, setAiState] = React.useState({ status: "idle", features: null, candidates: null, error: null, provider: null, engine: null, species: null }); const fileRef = React.useRef(null); const supportRef = React.useRef(null); const steps = [ { k: "photo", z: "上传照片", e: "Photo" }, { k: "when", z: "时间与地点", e: "Time & place" }, { k: "what", z: "行为与备注", e: "Behavior" }, { k: "who", z: "贡献者信息", e: "You" }, { k: "ai", z: "AI 候选比对", e: "AI triage" }, { k: "done", z: "提交完成", e: "Submitted" }, ]; const update = (k, v) => setData(d => ({ ...d, [k]: v })); const canProceed = step !== 3 || data.ethics; const onFile = async (file) => { if (!file) return; const previewUrl = URL.createObjectURL(file); try { const dataUrl = await prepareAIImageDataUrl(file); if (data.photoUrl?.startsWith("blob:")) URL.revokeObjectURL(data.photoUrl); update("photoDataUrl", dataUrl); update("photoUrl", previewUrl); setAiState({ status: "idle", features: null, candidates: null, error: null, provider: null, engine: null, species: null }); } catch (err) { URL.revokeObjectURL(previewUrl); setAiState({ status: "idle", features: null, candidates: null, error: "图片读取失败，请换一张 JPG/PNG 照片再试", provider: null, engine: null, species: null, }); } }; const onSupportFiles = (files) => { const items = [...(files || [])].filter(f => /^image\//.test(f.type) || /^video\//.test(f.type)).map((f, i) => ({ id: "SUP-" + Date.now() + "-" + i, type: f.type.startsWith("video/") ? "video" : "image", mime: f.type, name: f.name, size: f.size, url: URL.createObjectURL(f), role: f.type.startsWith("video/") ? "补充视频" : "补充图片", recognition: false, note: "非识别素材，仅供审核员参考", })); if (items.length) update("supportMedia", [...data.supportMedia, ...items]); }; const removeSupportMedia = (id) => { const item = data.supportMedia.find(m => m.id === id); if (item?.url?.startsWith("blob:")) URL.revokeObjectURL(item.url); update("supportMedia", data.supportMedia.filter(m => m.id !== id)); }; const submitObservation = () => { const picked = aiState.candidates?.[0]?.deer; const id = "OBS-" + Math.floor(5000 + Math.random() * 3999); const media = [ ...(data.photoUrl ? [{ id: id + "-MAIN", type: "image", url: data.photoUrl, role: "识别主图", recognition: true, title: "本次观察主图", }] : []), ...data.supportMedia.map(m => ({ ...m, role: m.role || "补充素材", recognition: false })), ]; window.dzStore.add("sightings", { id, deerId: picked?.id || "", deerName: picked?.name || "（待归并）", species: picked?.species || data.suspectedSpecies, speciesKey: picked?.speciesKey || "", time: data.time, loc: data.location, contributor: data.nickname || "匿名", note: data.note || "用户未填写补充说明。", status: aiState.status === "done" ? "志愿者审核中" : "AI 初审", photo: data.photoUrl, photoTone: "none", media, supportMediaCount: data.supportMedia.length, aiFeatures: aiState.features || [], aiCandidates: (aiState.candidates || []).map(c => ({ id: c.deer.id, score: Math.round(c.score * 100), reason: c.reason })), aiProvider: aiState.provider, aiEngine: aiState.engine, aiSpecies: aiState.species, aiQuality: aiState.quality, contact: data.contact, }, data.nickname || "contributor"); setStep(5); }; const offlineWildlifeTriage = () => { const text = [data.location, data.suspectedSpecies, data.distance, data.note, ...(data.behavior || [])].join(" ").toLowerCase(); const speciesProfiles = { sika_deer: { features: ["鹿科轮廓与四肢比例", "角形/耳缘/白斑等个体特征", "林缘、步道或滨海山体活动"], words: ["鹿", "梅花鹿", "小鹿", "角", "白斑", "莲花山", "棒棰", "滨海", "动物园", "觅食"], reason: "区域与鹿类特征吻合", }, fox: { features: ["犬科轮廓与尖吻", "蓬松尾部与夜行行为", "需排除犬只或养殖逸散个体"], words: ["狐狸", "赤狐", "犬科", "尖嘴", "尾巴", "蓬松", "夜", "大黑山", "庄河", "林缘"], reason: "备注接近狐狸类线索", }, spotted_seal: { features: ["海洋哺乳动物体型", "头部轮廓与体表斑点", "登岸/换气/海面活动"], words: ["海豹", "斑海豹", "海", "老铁山", "虎平岛", "水道", "换气", "登岸", "游泳"], reason: "地点与海豹线索吻合", }, white_tailed_eagle: { features: ["大型猛禽轮廓", "白尾与黄嘴特征", "海岸巡飞或停歇行为"], words: ["白尾海雕", "海雕", "鹰", "猛禽", "鸟", "白尾", "黄嘴", "飞行", "长山"], reason: "备注接近海岸猛禽", }, }; const scored = window.DEER_DATA.map(animal => { const profile = speciesProfiles[animal.speciesKey] || speciesProfiles.sika_deer; let score = animal.verified ? 38 : 30; if (data.suspectedSpecies !== "不确定" && animal.species === data.suspectedSpecies) score += 24; profile.words.forEach(w => { if (text.includes(w.toLowerCase())) score += 12; }); (animal.tags || []).forEach(tag => { if (text.includes(String(tag).toLowerCase())) score += 8; }); String(animal.region || "").split(/[·\s/（），,]+/).filter(Boolean).forEach(part => { if (part.length >= 2 && text.includes(part.toLowerCase())) score += 7; }); if (!data.photoDataUrl) score -= 8; return { deer: animal, score: Math.max(18, Math.min(96, score)) / 100, reason: profile.reason }; }).sort((a, b) => b.score - a.score).slice(0, 3); const topProfile = speciesProfiles[scored[0]?.deer?.speciesKey] || speciesProfiles.sika_deer; return { features: topProfile.features, candidates: scored, error: window.claude && window.claude.complete ? null : "当前使用离线规则模型；上线时请接入后端视觉模型并保留人工复核", }; }; const runAI = async () => { setAiState({ status: "running", features: null, candidates: null, error: null, provider: null, engine: null, species: null }); try { const apiPayload = { imageDataUrl: data.photoDataUrl, location: data.location, time: data.time, distance: data.distance, suspectedSpecies: data.suspectedSpecies, behavior: data.behavior, note: data.note, speciesCatalog: window.SPECIES_CATALOG || [], animals: window.DEER_DATA.map(d => ({ id: d.id, name: d.name, species: d.species, speciesKey: d.speciesKey, speciesEn: d.speciesEn, sex: d.sex, region: d.region, tags: d.tags || [], photo: d.photo, gallery: d.gallery || [], verified: d.verified, candidate: d.candidate, })), }; try { const resp = await fetch("/api/recognize", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(apiPayload), }); if (resp.ok) { const result = await resp.json(); if (result?.ok && Array.isArray(result.candidates) && result.candidates.length) { const candidates = result.candidates.map(c => ({ deer: window.DEER_DATA.find(d => d.id === c.id) || window.DEER_DATA[0], score: Math.max(0, Math.min(100, Number(c.score) || 0)) / 100, reason: c.reason || "", engine: c.engine || result.engine, })).slice(0, 3); setAiState({ status: "done", features: result.features || [], candidates, error: (result.warning || []).join("；") || null, provider: result.provider, engine: result.engine, species: result.species, quality: result.quality, individualIdentifiable: result.individualIdentifiable, }); return; } } } catch (apiErr) { console.warn("recognize api unavailable", apiErr); } if (!window.claude || !window.claude.complete) { const offline = offlineWildlifeTriage(); setAiState({ status: "done", features: offline.features, candidates: offline.candidates, error: offline.error, provider: "local-rules", engine: "browser-rules", species: null }); return; } const deerList = window.DEER_DATA.filter(d => d.verified).map(d => `- ${d.name} (${d.id}) · 物种 ${d.species} · 性别/状态 ${d.sex} · 区域 ${d.region} · 特征: ${d.tags.join(", ")}` ).join("\n"); const speciesList = (window.SPECIES_CATALOG || []).map(s => `${s.label}(${s.en})`).join("、"); const prompt = `你是大连“达里尼动物城 · 野生动物档案”的 AI 初审员。用户${data.photoDataUrl ? "上传了一张照片并" : "没有上传照片，只"}提供了观察备注。请结合常见野生动物视觉辨识知识与用户备注做保守推断。 用户提供的观察备注: - 地点: ${data.location} - 时间: ${data.time} - 距离: ${data.distance} - 用户疑似物种: ${data.suspectedSpecies} - 行为: ${data.behavior.join("、")} - 备注: ${data.note || "（无）"} 平台当前支持物种: ${speciesList} 档案库: ${deerList} 请: 1) 给出 3 条最可能的识别特征（30 字以内每条，中文，例如“犬科轮廓”“黑色斑点”“角形特征”）。 2) 先判断物种，再根据档案库推测 3 个最可能匹配档案，给出相似度（0-100 整数）与一句 15 字以内匹配原因。 3) 对狐狸类、猛禽、海豹等敏感物种保持保守：不确定时降低分数，并说明“需人工复核”。 只输出严格 JSON，不要解释或 markdown: {"features":["…","…","…"],"candidates":[{"id":"DL-XXX","score":<0-100>,"reason":"…"},{"id":"FX-XXX","score":<0-100>,"reason":"…"},{"id":"SP-XXX","score":<0-100>,"reason":"…"}]}`; const raw = await window.claude.complete(prompt); const jsonStr = raw.replace(/```json|```/g, "").trim(); const match = jsonStr.match(/\{[\s\S]*\}/); const parsed = JSON.parse(match ? match[0] : jsonStr); const candidates = (parsed.candidates || []).map(c => ({ deer: window.DEER_DATA.find(d => d.id === c.id) || window.DEER_DATA[0], score: Math.max(0, Math.min(100, Number(c.score) || 0)) / 100, reason: c.reason || "", })).slice(0, 3); if (!candidates.length) throw new Error("empty candidates"); setAiState({ status: "done", features: parsed.features || [], candidates, error: null, provider: "window.claude", engine: "llm-text", species: null }); } catch (err) { console.error("AI fail", err); const offline = offlineWildlifeTriage(); setAiState({ status: "done", features: offline.features, candidates: offline.candidates, error: "AI 服务暂不可用，已切换到离线多物种备选方案", provider: "local-rules", engine: "browser-rules", species: null, }); } }; return (
●CONTRIBUTE / 上传观察

你看到的那只动物，
值得被认真记下来。

上传不强制登录。一张照片 + 一个大致的时间与地点，就足够启动一条观察记录。AI 初审与志愿者人工纠偏会随后进行。

{steps.map((s, i) => (
i ? "done" : "")} onClick={() => step >= i && setStep(i)}>
STEP {String(i + 1).padStart(2, "0")}
{s.z}
{s.e}
))}
{step === 0 && (

上传识别主图

这张图会进入 AI 初审。拍摄清晰的头部与身侧特征最有助于识别。

onFile(e.target.files[0])} /> { onSupportFiles(e.target.files); e.target.value = ""; }} /> {!data.photoUrl ? (
fileRef.current?.click()} style={{ border: "1.5px dashed var(--rule)", aspectRatio: "16 / 9", background: "var(--paper-2)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, padding: 20, cursor: "pointer" }}>
↑
拖拽或点击上传图片
JPG · PNG · HEIC · ≤ 20MB / 张
) : (
uploaded
)}
文明观察 · Ethics of watching. 拍摄时请保持 15m 以上距离，不投喂、不追逐、不惊扰。不鼓励公开精确坐标，上传后平台会对位置信息进行模糊处理。

补充素材

可上传图片或视频，作为审核员判断行为、环境、连续动作的参考；这些素材不会进入 AI 识别。

{data.supportMedia.length > 0 ? (
{data.supportMedia.map(m => (
{m.name}
))}
) : (
supportRef.current?.click()} style={{ padding: 18, border: "1px dashed var(--rule)", background: "var(--paper-2)", cursor: "pointer", color: "var(--ink-soft)", fontSize: 12.5 }}> 暂无补充素材。点击添加现场环境图、动物移动视频或远近景参考。
)}
)} {step === 1 && (

时间与地点

update("time", e.target.value)} />
{["< 10m", "10–20m", "20–50m", "> 50m", "记不清"].map(d => ( ))}
为保护个体，平台公开展示时只保留大致区域，精确坐标（若有）仅保存在审核后台，不对外公开。
)} {step === 2 && (

它当时在做什么？

{["不确定", ...(window.SPECIES_CATALOG || []).map(s => s.label)].map(s => ( ))}
{["觅食", "行走/巡游", "饮水/换气", "躺卧/停歇", "警戒/回望", "幼体同行", "群体（≥2只）", "飞行/游泳", "其他"].map(b => { const on = data.behavior.includes(b); return ( ); })}