首页 > 其他分享 >从截图到代码:screenshot-to-code开源项目实践指南

从截图到代码:screenshot-to-code开源项目实践指南

时间:2024-11-09 19:46:12浏览次数:6  
标签:截图 code screenshot -- poetry yarn Claude 点击 API

一、运行效果 

项目地址:GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

二、实践步骤

1. 将项目下载到本地

2. 获取Anthropic(Claude) 密钥或者 OpenAI API(chatGPT) 密钥

(1) OpenAI API(chatGPT) 密钥获取方式

https://blog.csdn.net/naozibuok/article/details/140079882

然后先点击“个人资料”,再点击“Billing”,最后点击“Add payment details”后应该可以进行充值,由于我使用的是Claude API,就无法展示后面的内容了。

(2)Anthropic(Claude) 密钥获取方式

访问官网:Build with Claude \ Anthropic

点击“Start building”。

点击“Get API keys”(如果需要填写信息,随意填写即可,我是随便填写的)。

点击“Create Key”。

点击“Billing”(之后应该先需要完整信息,随意填写)。

3. 运行项目

(0) 配置代理服务


如果你不知道你的代理地址,可以进入代理软件查看。也可用下面的命令查找。

netstat -ano | findstr "108"(或者107, 具体还得看代理软件)

(1) 下载项目到本地

(2) 启动后端服务(处理API请求)

使用 pip install poetry 安装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 7001

如下图则启动成功。

(3) 启动前端服务(提供用户交互页面)

如果系统中还没有安装 yarn,访问 Node.js — Run JavaScript Everywhere ,下载并安装 LTS (长期支持)版本。注意配置环境变量。

然后用 npm 安装 Yarn: 

npm install --global yarn

验证安装: 

yarn --version

启动前端服务 

cd frontend
yarn
yarn dev

如下图则启动成功。

4. 访问 http://localhost:5173/

最后,在浏览器访问 http://localhost:5173/,就成功啦!

标签:截图,code,screenshot,--,poetry,yarn,Claude,点击,API
From: https://blog.csdn.net/naozibuok/article/details/143648562

相关文章

  • 力扣(LeetCode)106. 从中序与后序遍历序列构造二叉树
    一、目标  给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。二、代码分析总体代码:/***Definitionforabinarytreenode.*publicclassTreeNode{*int......
  • 104.力扣(leetcode)二叉树的最大深度(JAVA)
    一、目标给定一个二叉树 root ,返回其最大深度。二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。二、代码分析总代码:/***Definitionforabinarytreenode.*publicclassTreeNode{*intval;*TreeNodeleft;*TreeN......
  • 力扣(Leetcode)112. 路径总和(JAVA)
    一、目标 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径,这条路径上所有节点值相加等于目标和 targetSum 。如果存在,返回 true ;否则,返回 false 。叶子节点 是指没有子节点的节点。二、代码解读......
  • 257. 力扣(LeetCode)二叉树的所有路径(JAVA)
    一、目标给你一个二叉树的根节点 root ,按 任意顺序 ,返回所有从根节点到叶子节点的路径。叶子节点 是指没有子节点的节点。二、代码解读总代码:/***Definitionforabinarytreenode.*publicclassTreeNode{*intval;*TreeNodeleft;*......
  • LeetCode 3014[输入单词需要的最少按键次数I]
    题目链接LeetCode3014[输入单词需要的最少按键次数I]详情实例实例1实例2提示题解思路一圈下来8个字母,每个字母按1次二圈下来16个字母,前8个字母每个按1次,后8个字母,每个按2次三圈下来24个字母,前8个字母每个按1次,中间8个字母,每个按2次,最后8个字母,每个按3次四圈下来......
  • LeetCode128 最长连续序列
    最长连续序列题目链接:LeetCode128描述给定一个未排序的整数数组nums,找出数字连续的最长序列(不要求序列元素在原数组中连续)的长度。请你设计并实现时间复杂度为O(n)的算法解决此问题。示例输入:nums=[100,4,200,1,3,2]输出:4解释:最长数字连续序列是[1,2,3,4]。它......
  • atcoder DP做题笔记
    [ABC163E]ActiveInfants题意:给定长度为\(n(n\le2\times10^3)\)的序列\(a\),重排使得\(a_x\times|x-p_x|\)之和最大。独立完成。从大到小地考虑\(a_i\),贪心地使得\(|x-p_x|\)最大。那么\(p_x\)要么在最左,要么在最右。因此在左边和右边形成了一坨前/后缀,然后......
  • CodeforceTon Round 4 div1 + div2 题解
    题解A-EDreamissofar~A.BeautifulSequence检查每一位对应的数字是否小于等于位置,如果可以说明这个数字可以移动到对应位置上,遍历即可#include<bits/stdc++.h>usingnamespacestd;usingi64=longlong;voidsolve(){ intn; cin>>n; vector<int>a......
  • 【论文阅读】您的 AI 生成的代码真的安全吗?Evaluating Large Language Models on Secu
    IsYourAI-GeneratedCodeReallySafe?EvaluatingLargeLanguageModelsonSecureCodeGenerationwithCodeSecEval标题:您的AI生成的代码真的安全吗?基于CodeSecEval对LLMs代码生成的安全性进行评估摘要:*【Background】大语言模型(LLMs)在代码生成和代码修复方面取......
  • Codeforces 983 A-E
    题解A难度:黄算法标签:数学、进制题目翻译:给定进制\(b\)和分数\(\frac{p}{q}\),求这个分数在\(b\)进制下是否是有限小数。题目分析:首先将分数化简(不用说了)。接下来有命题:若\(/frac{1}{q}\)为有限小数,则\(/frac{p}{q}\)必然为有限小数。且逆命题、否命题成立。证明略。......