Neuronpedia Webapp 开发实战Next.js Prisma 全栈开发指南【免费下载链接】neuronpediaopen source interpretability platform 项目地址: https://gitcode.com/gh_mirrors/ne/neuronpediaNeuronpedia 是一个开源模型可解释性平台其 Webapp 前端与公共 API 均由 Next.jsApp Router Prisma PostgreSQL 构成。这篇文章带你快速上手 Neuronpedia Webapp 的全栈开发从启动本地开发环境到看懂数据层设计、API 路由约定与前端组件规范新手也能按图索骥完成第一次代码修改。项目概览Neuronpedia Webapp 在做什么Webapp 是整个平台的门面位于apps/webapp/目录承担两大职责前端界面神经元浏览、SAE 特征可视化、Steering引导、Jacobian Lens、Umap 图谱等交互页面公共 APIapp/api/下的路由既服务前端也对外提供带速率限制的公开接口。上图是 Neuronpedia 的整体架构图可以看到 Webapp 位于最上层向下对接推理服务inference、图服务graph、自动解释autointerp等多个独立服务。快速开始三步跑通 Neuronpedia Webapp 开发环境1️⃣ 克隆仓库git clone https://gitcode.com/gh_mirrors/ne/neuronpedia2️⃣ 安装依赖进入apps/webapp/目录执行npm install即可。3️⃣ 启动开发服务器npm run dev:localhost几个常用脚本定义在 package.json 中脚本作用npm run dev:localhost连接本地数据库启动开发服务器npm run db:migrate:deploy应用 Prisma 数据库迁移npm run lintESLint TypeScript 类型检查CI 关卡npm test运行 Vitest 单元测试npm run openapi从各服务的 OpenAPI 规范重新生成类型文件 提示本地环境默认不连接推理服务激活值测试、Steering 等功能需要先配置本地推理实例。Prisma PostgreSQL解读性数据库的数据层设计Neuronpedia 的数据库 schema 定义在apps/webapp/prisma/schema.prisma使用 PostgreSQL 并启用了pgvector 扩展extensions [vector]为解释文本的语义搜索提供了向量能力。Schema 中的核心模型包括User / Account / Session配合 NextAuth 实现 OAuth 登录会话Model / Source / SourceRelease / Neuron / Explanation模型、SAE 数据源、神经元与解释内容Activation / Bookmark / List / Comment用户产生的激活值、收藏、清单与评论。数据库客户端通过apps/webapp/lib/db.ts以单例模式导出prisma实例利用globalThis避免热重载时重复建连业务代码统一从/lib/db导入。此外项目用zod-prisma-types从 schema 自动生成 Zod 校验类型保证 API 入参与数据库结构始终一致。编写标准 API 路由Neuronpedia Webapp 的接口约定以apps/webapp/app/api/list/get/route.tsx为例可以总结出一套清晰的 API 编写规范默认用 POST除非接口是可缓存的纯读操作否则避免使用 GET统一鉴权包裹路由处理函数用withOptionalUser来自lib/with-user.ts包裹自动解析 API Key 或登录用户Swagger 注释内联每个路由文件顶部用 JSDoc 描述接口构建时生成文档站点业务逻辑下沉路由文件保持极薄真正查询逻辑放在lib/db/下如getListWithDetails。所有 API 请求还会经过根目录的middleware.ts它基于 Upstash Ratelimit Vercel KV 实现了按端点配置的滑动窗口限流普通用户与持有高级 API Key 的用户适用不同的限额表触发限制时返回 429 及明确的错误信息。这种中间件统一治理 路由保持纯净的写法非常适合新手模仿。前端开发规范避开几个容易踩错的导入Webapp 使用 TailwindCSS shadcn 组件components/shadcn/构建 UIcomponents/provider/下的 Providers 负责全局状态注入。项目专门维护了开发规范文档apps/webapp/AGENTS.md其中列出了几个高频踩坑点Prisma 必须从/lib/db导入而不是直接prisma/client客户端 Router 必须从bprogress/next导入跳过它会丢失顶部进度条环境变量统一从/lib/env读取lib/api/下的类型文件是构建产物只能跑npm run openapi重新生成切勿手改。收尾提交代码前的三道质量关卡修改完成后建议依次执行npm run lint:fix npm run format:write # 修复 格式化 npm run lint # 完整检查含 tsc --noEmit npm test # 涉及单测文件时运行注意lint:fix只跑 ESLint类型错误要通过完整的npm run lint才能被拦截——这是 CI 的真实关卡别跳过。小结Neuronpedia Webapp 是一个非常好的 Next.js Prisma 全栈学习样本App Router 的 API 路由、Prisma 单例 迁移、中间件限流、生成式类型、严格的质量关卡都体现了生产级项目的工程实践。上手路径很简单——克隆仓库、启动本地环境、从一条最简单的app/api/路由读起你就已经站在了 Neuronpedia 的开发链路之中。【免费下载链接】neuronpediaopen source interpretability platform 项目地址: https://gitcode.com/gh_mirrors/ne/neuronpedia创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Neuronpedia Webapp 开发实战：Next.js + Prisma 全栈开发指南
Neuronpedia Webapp 开发实战Next.js Prisma 全栈开发指南【免费下载链接】neuronpediaopen source interpretability platform 项目地址: https://gitcode.com/gh_mirrors/ne/neuronpediaNeuronpedia 是一个开源模型可解释性平台其 Webapp 前端与公共 API 均由 Next.jsApp Router Prisma PostgreSQL 构成。这篇文章带你快速上手 Neuronpedia Webapp 的全栈开发从启动本地开发环境到看懂数据层设计、API 路由约定与前端组件规范新手也能按图索骥完成第一次代码修改。项目概览Neuronpedia Webapp 在做什么Webapp 是整个平台的门面位于apps/webapp/目录承担两大职责前端界面神经元浏览、SAE 特征可视化、Steering引导、Jacobian Lens、Umap 图谱等交互页面公共 APIapp/api/下的路由既服务前端也对外提供带速率限制的公开接口。上图是 Neuronpedia 的整体架构图可以看到 Webapp 位于最上层向下对接推理服务inference、图服务graph、自动解释autointerp等多个独立服务。快速开始三步跑通 Neuronpedia Webapp 开发环境1️⃣ 克隆仓库git clone https://gitcode.com/gh_mirrors/ne/neuronpedia2️⃣ 安装依赖进入apps/webapp/目录执行npm install即可。3️⃣ 启动开发服务器npm run dev:localhost几个常用脚本定义在 package.json 中脚本作用npm run dev:localhost连接本地数据库启动开发服务器npm run db:migrate:deploy应用 Prisma 数据库迁移npm run lintESLint TypeScript 类型检查CI 关卡npm test运行 Vitest 单元测试npm run openapi从各服务的 OpenAPI 规范重新生成类型文件 提示本地环境默认不连接推理服务激活值测试、Steering 等功能需要先配置本地推理实例。Prisma PostgreSQL解读性数据库的数据层设计Neuronpedia 的数据库 schema 定义在apps/webapp/prisma/schema.prisma使用 PostgreSQL 并启用了pgvector 扩展extensions [vector]为解释文本的语义搜索提供了向量能力。Schema 中的核心模型包括User / Account / Session配合 NextAuth 实现 OAuth 登录会话Model / Source / SourceRelease / Neuron / Explanation模型、SAE 数据源、神经元与解释内容Activation / Bookmark / List / Comment用户产生的激活值、收藏、清单与评论。数据库客户端通过apps/webapp/lib/db.ts以单例模式导出prisma实例利用globalThis避免热重载时重复建连业务代码统一从/lib/db导入。此外项目用zod-prisma-types从 schema 自动生成 Zod 校验类型保证 API 入参与数据库结构始终一致。编写标准 API 路由Neuronpedia Webapp 的接口约定以apps/webapp/app/api/list/get/route.tsx为例可以总结出一套清晰的 API 编写规范默认用 POST除非接口是可缓存的纯读操作否则避免使用 GET统一鉴权包裹路由处理函数用withOptionalUser来自lib/with-user.ts包裹自动解析 API Key 或登录用户Swagger 注释内联每个路由文件顶部用 JSDoc 描述接口构建时生成文档站点业务逻辑下沉路由文件保持极薄真正查询逻辑放在lib/db/下如getListWithDetails。所有 API 请求还会经过根目录的middleware.ts它基于 Upstash Ratelimit Vercel KV 实现了按端点配置的滑动窗口限流普通用户与持有高级 API Key 的用户适用不同的限额表触发限制时返回 429 及明确的错误信息。这种中间件统一治理 路由保持纯净的写法非常适合新手模仿。前端开发规范避开几个容易踩错的导入Webapp 使用 TailwindCSS shadcn 组件components/shadcn/构建 UIcomponents/provider/下的 Providers 负责全局状态注入。项目专门维护了开发规范文档apps/webapp/AGENTS.md其中列出了几个高频踩坑点Prisma 必须从/lib/db导入而不是直接prisma/client客户端 Router 必须从bprogress/next导入跳过它会丢失顶部进度条环境变量统一从/lib/env读取lib/api/下的类型文件是构建产物只能跑npm run openapi重新生成切勿手改。收尾提交代码前的三道质量关卡修改完成后建议依次执行npm run lint:fix npm run format:write # 修复 格式化 npm run lint # 完整检查含 tsc --noEmit npm test # 涉及单测文件时运行注意lint:fix只跑 ESLint类型错误要通过完整的npm run lint才能被拦截——这是 CI 的真实关卡别跳过。小结Neuronpedia Webapp 是一个非常好的 Next.js Prisma 全栈学习样本App Router 的 API 路由、Prisma 单例 迁移、中间件限流、生成式类型、严格的质量关卡都体现了生产级项目的工程实践。上手路径很简单——克隆仓库、启动本地环境、从一条最简单的app/api/路由读起你就已经站在了 Neuronpedia 的开发链路之中。【免费下载链接】neuronpediaopen source interpretability platform 项目地址: https://gitcode.com/gh_mirrors/ne/neuronpedia创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考