|
原文地址链接 https://mp.weixin.qq.com/s/kOhYok2qHdX_lnA4iRHcwg 【AI编码神器】网页截图秒变代码，一键生成你的专属网页！ 原创 前端野路子 前端野路子 2024-06-29 08:01 江苏 听全文 今天要给大家安利一个超级实用的AI编码工具——screenshot-to-code，🔥它能够将你的网页截图直接转换成代码！ 支持HTML+Tailwind、React+Tailwind、Vue+Tailwind、Bootstrap、Ionic+Tailwind等技术栈，让你的前端开发事半功倍！💻 🚀 支持技术栈 HTML + Tailwind：快速构建响应式布局。 React + Tailwind：结合React的组件化和Tailwind的实用工具。 Vue + Tailwind：Vue的灵活性与Tailwind的美观性相结合。 Bootstrap：老牌CSS框架，快速开发移动优先的网页。 Ionic + Tailwind：为移动应用提供强大支持。 🎨 SVG支持的大语言模型 GPT-4O：最佳模型，精准生成所需代码。 GPT-4 Turbo（2024年4月）：持续优化，性能卓越。 GPT-4 Vision（2023年11月）：图像识别与代码生成的完美结合。 Claude 3 Sonnet：提供稳定而高效的代码生成服务。 DALL-E 3：图像生成领域的明星，创意无限。 📝 实操步骤 访问screenshot-to-code平台。 上传你的网页截图或输入图片地址。 选择你偏好的技术栈和模型。 等待AI生成代码，并根据需要进行调整。 🔧 功能亮点 交互式提示：告诉AI你的需求，让它更准确地生成代码。 实时预览：生成的代码可以即时预览，确保符合预期效果。 多模型支持：根据不同需求选择最合适的AI模型。 🔧 项目安装和启动： 克隆代码库： git clone https://github.com/abi/screenshot-to-code.git Docker快速启动： echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build 安装启动后端（Python fastapi）： cd backend echo "OPENAI_API_KEY=sk-your-key" > .env poetry install poetry shell poetry run uvicorn main:app --reload --port 7001 安装启动前端（React/Vite） cd frontend yarn yarn dev 访问 http://localhost:5173 🌐 截图转网站示例 🔍 生成效果：初始效果可能与截图有差距，但通过输入修改提示，AI能进行针对性优化。 💻 再看一下官方demo操作视频： 📝 实现原理介绍 用户上传图片或输入图片地址 前端和后端建立 websocket 连接ws://127.0.0.1:7001/generate-code 前端发送图片 base64 编码 后端拼接 ChatGPT 的提示词，发送请求 流式接受 ChatGPT 的响应，通过 websocket 发送前端 前端实时渲染 📊 总结 screenshot-to-code虽然不能做到完美还原，但它提供了强大的交互功能。它不仅提高了开发效率，还为技术爱好者提供了一个创意实现的平台。无论你是前端新手还是资深开发者，都能在这个工具的帮助下快速实现你的网页设计构想。 #screenshot-to-code #开源项目 #网页截图 #AI代码生成 #OpenAI #AI编程助手 #websocket #Docker部署 #网页开发 用screenshot-to-code，让你的创意以代码的形式快速呈现，开启智能编程新篇章！🌐🛠️ 前端野路子 |
|
|
