[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70535":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":30,"discoverSource":31},70535,"cell-architecture-studio","cclank\u002Fcell-architecture-studio","cclank","Interactive 3D cell architecture gallery built with React and Three.js","https:\u002F\u002Fcell-architecture-studio-inky.vercel.app",null,"HTML",1303,270,7,2,0,15,463,890,45,105.3,"MIT License",false,"main",true,[],"2026-06-12 04:00:56","# Cell Architecture Studio\n\n![React](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact-19.2-61DAFB?logo=react&logoColor=111)\n![TypeScript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-5.9-3178C6?logo=typescript&logoColor=fff)\n![Vite](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVite-7.2-646CFF?logo=vite&logoColor=fff)\n![Three.js](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FThree.js-0.181-000000?logo=threedotjs&logoColor=fff)\n![3D Assets](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGLB-native%20materials-4f8a3f)\n![Verification](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fverification-playwright%20screenshots-2ea44f)\n![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue)\n![Status](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fstatus-local%20prototype-f59e0b)\n[![Live Demo](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flive-demo-16a34a)](https:\u002F\u002Fcell-architecture-studio-inky.vercel.app)\n\nAn interactive cell architecture gallery built with React, Vite, Three.js, and staged GLB or procedural 3D cell assets. The project recreates a premium educational biology interface with selectable cell types, organelle details, comparison mode, responsive layout, and visual verification coverage.\n\n## Live Demo\n\n[Open the live Vercel deployment](https:\u002F\u002Fcell-architecture-studio-inky.vercel.app)\n\n[![Cell Architecture Studio demo](docs\u002Fmedia\u002Fcell-architecture-studio-demo.gif)](https:\u002F\u002Fcell-architecture-studio-inky.vercel.app)\n\n[View the MP4 demo file](docs\u002Fmedia\u002Fcell-architecture-studio-demo.mp4)\n\n## Highlights\n\n- Seven specimen views: plant cell, white blood cell, neuron, epithelial cell, bacteria cell, animal cell, and muscle cell.\n- High fidelity Plant Cell and White Blood Cell GLB rendering with native texture preservation.\n- Mesh first experience with 3D canvas rendering as the default view.\n- AI Tutor panel with learning prompts, lesson focus, and mastery tracking.\n- Model loading overlay for large GLB assets on slower networks.\n- Procedural fallback geometry for specimens that do not yet have production GLB assets.\n- Detail panel for organelles, microscope modes, specimen metadata, and comparison workflow.\n- Responsive desktop, compact, and mobile layouts with browser screenshot verification.\n\n## Preview Modes\n\n| Mode | Purpose |\n| --- | --- |\n| Mesh | Loads available GLB models or procedural Three.js geometry. |\n| Focus | Emphasizes selected organelles and supporting biological details. |\n\n## Tech Stack\n\n| Layer | Tools |\n| --- | --- |\n| App | React 19, TypeScript, Vite |\n| 3D | Three.js, React Three Fiber, Drei |\n| UI | CSS modules in `src\u002Fstyles.css`, Lucide icons |\n| Assets | GLB models, transparent PNG thumbnails, NIH previews |\n| Verification | Playwright Core, PNG pixel metrics |\n\n## Project Structure\n\n```text\n.\n|-- docs\u002F\n|   |-- media\u002F\n|   `-- ASSETS.md\n|-- public\u002F\n|   |-- cell-renders\u002F\n|   |-- cell-renders-transparent\u002F\n|   |-- models\u002F\n|   `-- nih-previews\u002F\n|-- scripts\u002F\n|   `-- verify.mjs\n`-- src\u002F\n    |-- App.tsx\n    |-- components\u002F\n    |-- data\u002F\n    `-- styles.css\n```\n\n## Getting Started\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\nRun the local development server:\n\n```bash\nnpm run dev\n```\n\nOpen the app:\n\n```text\nhttp:\u002F\u002F127.0.0.1:5173\u002F\n```\n\nBuild for production:\n\n```bash\nnpm run build\n```\n\nRun visual verification:\n\n```bash\nnpm run verify\n```\n\n## Asset Notes\n\nThe highest fidelity specimens are loaded from `public\u002Fmodels\u002F` and configured in `src\u002Fdata\u002Fcells.ts`.\n\n| Specimen | Current asset |\n| --- | --- |\n| Plant Cell | `public\u002Fmodels\u002Fplant-cell-first001.glb` |\n| White Blood Cell | `public\u002Fmodels\u002Fwhite-blood-cell-user.glb` |\n| Animal Cell | `public\u002Fmodels\u002Fanimal-cell-nih.glb` |\n| Neuron | `public\u002Fmodels\u002Fneuron-nih.glb` |\n| Bacteria Wall | `public\u002Fmodels\u002Fbacteria-wall-nih.glb` |\n\nTransparent PNG references in `public\u002Fcell-renders-transparent\u002F` are used for thumbnails and model previews. Detailed provenance is tracked in `docs\u002FASSETS.md`.\n\n## Verification\n\n`npm run verify` launches the local app, captures desktop, compact, mobile, and interaction screenshots, then checks canvas pixel metrics to catch blank renders or major layout regressions.\n\nCurrent coverage includes:\n\n- Desktop, compact, and mobile smoke checks.\n- Plant Cell GLB render check.\n- White Blood Cell GLB render check.\n- Bacteria mesh interaction check.\n- Comparison modal check.\n\n## Roadmap\n\n- Add production quality GLB models for the remaining specimens.\n- Add lazy loading and route level code splitting for 3D bundles.\n- Expand educational annotations for each organelle.\n- Add screenshot export and 3D export workflows.\n- Add asset license metadata directly into the UI.\n\n## License\n\nThe application code is licensed under the MIT License. Included GLB models and image assets retain their documented provenance in `docs\u002FASSETS.md`.\n\n## Credits\n\nSpecial thanks to the original creator [@DilumSanjaya](https:\u002F\u002Fx.com\u002FDilumSanjaya) for the source inspiration and visual direction.\n\nAdditional 3D model provenance is documented in `docs\u002FASSETS.md`.\n","Cell Architecture Studio 是一个使用 React 和 Three.js 构建的交互式 3D 细胞结构画廊。该项目通过提供七种细胞类型的高保真渲染视图（包括植物细胞和白血球等），以及可选择的细胞器细节、比较模式等功能，创建了一个优质的生物学教育界面。技术上采用了 TypeScript、Vite、Three.js 等现代前端工具栈，并支持 GLB 格式的3D资产渲染与过程化几何图形作为备用方案。特别适合于生物教学场景中，帮助学生直观理解不同细胞类型及其内部结构的特点；同时，其响应式设计确保了在桌面端及移动端均能获得良好体验。","2026-06-11 03:32:42","CREATED_QUERY"]