Napkins：开源 AI 开发工具，实现截图或线框图到网页应用的快速转换
❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！
🥦 微信公众号｜搜一搜：蚝油菜花 🥦
🚀 快速阅读
- Napkins 是一款基于 AI 的开源项目，能将截图或线框图快速转换成网页应用。
- 项目依托 Meta 的 Llama 模型和 Together.ai，提供代码生成、编辑、多主题选择等功能。
- 适用于快速原型开发、教育学习、初创团队等多种场景，大幅提升开发效率。
正文（附运行示例）
Napkins 是什么
Napkins 是一个创新的开源项目，利用 AI 技术将用户的截图或线框图迅速转换成可运行的网页应用程序。该项目基于 Meta 的 Llama 3.1 405B 大型语言模型和 Llama 3.2 Vision 视觉模型，结合 Together.ai 的推理服务，实现从视觉设计到代码的自动生成，极大提升了开发效率。
Napkins 的主要功能
- 快速应用生成：用户上传线框图或截图，系统自动识别设计元素和布局，生成相应代码，快速构建应用基础结构。
- 代码编辑和定制：支持用户对生成的代码进行编辑和定制，满足特定业务需求。
- 多主题选择：提供多种主题风格，用户可根据喜好选择，改变应用外观。
- 版本管理：内置版本管理功能，方便开发者追踪更改历史，避免数据丢失。
Napkins 的技术原理
- 大型语言模型（LLM）：利用 Meta 的 Llama 3.1 405B 模型理解设计图的文本内容和结构。
- 视觉模型：Llama 3.2 Vision 模型负责识别和理解截图中的视觉元素。
- LLM 推理服务：Together.ai 平台提供推理服务，优化生成代码的准确性和可靠性。
- 代码沙箱：基于 Sandpack 创建安全代码运行环境，支持测试和调试。
- 云存储服务：使用 S3 服务存储用户上传的截图和生成的代码，确保数据安全。
如何运行 Napkins
- 克隆仓库：在终端运行以下命令克隆项目仓库：
git clone https://github.com/Nutlope/napkins
- 配置环境变量：创建
.env文件，添加 Together AI API 密钥：
TOGETHER_API_KEY=your_api_key_here
-
设置 S3 存储桶：按照此指南创建 S3 存储桶，并将凭证添加到
.env文件。 -
安装依赖并运行：在项目目录下运行以下命令安装依赖并启动开发服务器：
npm install
npm run dev
资源
- Napkins 官网：napkins.dev
- GitHub 仓库：github.com/Nutlope/napkins
- Together AI API 密钥获取：dub.sh/llama3.2vision
- S3 设置指南：next-s3-upload.codingvalue.com/setup
❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！
🥦 微信公众号｜搜一搜：蚝油菜花 🥦