503条药物相互作用数据,12种安第斯草药,7道选择题。一个前端开发者用纯HTML文件搭了个诊断系统,没调用任何框架,Lighthouse跑分却拿了满分。
这事发生在Botánica Andina项目里。团队原本只做草药百科,用户却追着问:"我到底该吃哪种?"市面上的保健品测试要么导向销售页面,要么把禁忌症埋在脚注里。开发者决定自己造个不一样的。
向量匹配:把"适合"变成可计算的问题
每株草药被编码成六维向量:能量、免疫、消化、压力、认知、激素。玛卡(maca)的能量值0.9、激素值0.8;猫爪草(uña de gato)的免疫值0.9,但压力维度只有0.1。
用户回答7道生活方式题后,系统生成"需求向量"。两个向量做点积,得分最高的三种草药进入候选池。这种推荐逻辑和音乐软件的"猜你喜欢"同源,但数据集小得多——总共12种植物,全部手写进18KB的JSON。
开发者解释选择纯原生JS的原因:「考虑过React,但7道题的静态数据不需要Redux、Context甚至useState。有时候最好的框架就是没有框架。」
安全层:比推荐算法更严格的淘汰机制
真正耗工时的是冲突检测模块。用户输入正在服用的药物后,系统遍历503条 documented interactions(已记录相互作用)。匹配到严重冲突时,该草药直接从结果页删除,而非仅标注警告。
代码里有一段硬逻辑:如果`match.severity`达到特定阈值,植物ID连进入排序的资格都没有。开发者见过太多网站把风险提示做成灰色小字,「 bury warnings in footnotes(把警告埋在脚注里)」——这是他的原话。
交互数据库的每条记录附带PubMed ID,用户能直跳文献原文。这种设计在医疗类工具里罕见,多数产品怕露怯,宁可模糊处理信源。
命名陷阱:同一称呼,两种植物
安第斯草药的跨区域命名是隐形雷区。"Uña de gato"在秘鲁指猫爪草(Uncaria tomentosa),到了墨西哥变成含羞草(Mimosa pudica)。成分、功效、禁忌完全不同,混用可能出事。
团队花了额外精力做名称标准化,给每个植物条目绑定拉丁学名和地域别名。这个细节没出现在用户界面里,但决定了推荐系统的可靠性底线。
最终交付物是个单HTML文件,零依赖、零构建步骤。总重量18KB,其中还嵌着全部植物数据。作为对比,一个空壳React项目的node_modules通常超过200MB。
Lighthouse四项评分全满:性能、可访问性、最佳实践、SEO。在4G网络下,页面加载时间以毫秒计。
工具背后的产品判断
这个案例戳中一个行业惯性:团队习惯用技术栈的复杂度证明工作量,却忽略用户实际感知。503条数据+12种植物+7道题,用Excel都能跑通的逻辑,硬要上微服务架构的比比皆是。
开发者反其道而行,把状态管理压缩到两行代码:`let currentQuestion = 0; let answers = {};`。没有 immutable update,没有派生状态,没有重新渲染优化——因为根本不需要。
这种克制来自具体场景的判断。如果是实时协作的千人问卷,原生JS会崩;但个人健康诊断,并发量天然受限,极端简洁反而降低维护成本。
药物冲突检测的严格性则来自另一面:健康类工具的信任门槛极高,一次错误推荐可能毁掉用户身体。把警告做轻是商业选择,做重是伦理选择。
目前该工具免费开放,数据持续更新。团队下一步计划扩展至更多传统医学体系,但核心逻辑不变——向量匹配算推荐,硬规则保安全,轻量技术栈保体验。
最后一个细节:结果页会追问用户"推荐是否准确",反馈直接入库用于校准权重。没有用户画像分析,没有留存率优化,只是朴素地收集"这个建议对你有用吗"。
如果你正在服用免疫抑制剂或抗凝血药物,这个测试会直接屏蔽猫爪草——哪怕你的"需求向量"和它匹配度最高。算法在这种情况下选择沉默,你觉得这是保守还是负责?
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.