REC
找到
1
篇与
TypeScript
相关的结果
-
绝了！图片可以直接转成代码！开发是越来越简单了～～～ 平时我们浏览网站的时候，经常会遇到令人眼前一亮的网页设计，如果能够将这些设计元素或者整个页面的布局应用到自己的项目中，那该多好？ 今天就就给大家介绍一个能够将截图转为代码的开源项目 screenshot-to-code。 screenshot-to-code 项目通过结合先进的 AI 技术，为开发者和设计师提供了一个从视觉设计到代码实现的高效工具，极大地简化了开发流程。 screenshot-to-code 可以把界面设计截图直接转化为 HTML、CSS 或 JavaScript 代码，这样能帮助开发者快速生成网页前端代码。无论是一个按钮、一个导航栏，还是整个页面布局都能从截图转换成实际的前端代码。 图片 screenshot-to-code支持将截图转换成 HTML、Tailwind CSS、React 和 Vue 等现代技术栈的代码 。 用户还可以输入 URL 来克隆实时网站 。 图片 现在支持 Claude Sonnet 3.5 和 GPT-4o！ {iframe src="https://www.lequxiang.com.cn/view.php/5bdd13d974c3bcdf09c0f55de4c58840.mp4" height="40vh"/} {iframe src="https://www.lequxiang.com.cn/view.php/d5ec12c1432e8e9fef6d375a2f452b99.mp4" height="40vh"/} 开源地址：隐藏内容，请前往内页查看详情 官方网站：隐藏内容，请前往内页查看详情 支持的技术栈： HTML + Tailwind HTML + CSS React + Tailwind Vue + Tailwind Bootstrap Ionic + Tailwind SVG 支持的人工智能模型： Claude Sonnet 3.5 GPT-4o DALL-E 3 或 Flux Schnell（使用 Replicate）用于图像生成 此外，该项目还可以将网站的视频/录屏转换成网页，演示如下： {iframe src="https://www.lequxiang.com.cn/view.php/603a2aed15a31b1962e64eee146f299e.mp4" height="50vh"/} 安装使用 该项目使用 React/Vite 作为前端， FastAPI 作为后端。 需要 GPT-4 的 OpenAI API 密钥或 Anthropic 密钥（可选）， 推荐两者都使用，以便你可以比较 Claude 和 GPT4o 的结果。 运行后端（使用 Poetry 进行包管理 - 如果你没有它，请安装 pip install poetry）： cd backend echo "OPENAI_API_KEY=sk-your-key" > .env echo "ANTHROPIC_API_KEY=your-key" > .env poetry install poetry shell poetry run uvicorn main:app --reload --port 7001OpenAI API 密钥也可以通过前端的对话框设置密钥（加载前端后点击齿轮图标）。 图片 运行前端： cd frontend yarn yarn dev然后打开 http\://localhost:5173 就可以开始使用了。 图片 如果要使用其他端口，请更新 frontend/.env.local 中的 VITE\_WS\_BACKEND\_URL 配置选项。 如果你不想浪费 GPT4-Vision，你可以在模拟模式下运行后端： MOCK=true poetry run uvicorn main:app --reload --port 7001Docker 上安装 如果你已经安装了 Docker，可以使用 docker-compose 命令启动该项目： echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build接下来就可以在浏览器中打开 http://localhost:5173 使用了。 图片
