释放双眼，带上耳机，听听看~！
本文介绍了如何使用screenshot-to-code工具生成前端代码，包括GPT-4 Vision的应用和react/ant design的代码输出。适合前端开发者和对AI工具感兴趣的读者。
一、✨简介
最近开源项目screenshot-to-code火爆，在screenshot-to-code基础上将后端代码改为node，开源地址ant-codeAI，提供截图生成代码的功能，使用GPT-4 Vision生成，在原有（React，Tailwind CSS）等代码基础上，新增react/ant design的代码输出，后续会逐步迭代自己的创意，不止于截图生成代码。
视频链接：https://www.ixigua.com/iframe/7311564325506777650?autoplay=0
二、🚀 本地试用
可以先下载下来本地运行尝试，将尽快找服务器部署到线上，（有没有免费的部署环境帮推荐一个🤦♂️）。腾讯云有部署如需要尝试可以私聊。
cd client
yarn dev
cd service
npm run start:dev
三、🛠 设置
- OpenAI API Key
- OpenAI Base URL：代理地址，默认：api.openai.com/v1
- Mock AI Response：模拟 AI返回的数据，不直接请求openAI，请求OpenAI 接口会消耗费用。
四、🔥 使用场景
试用通过图片生成的代码细节准确度不高。可以用于快速验证方案、对细节不敏感的项目、在生成的代码基础上自行补全细节。
- 中后台项目
- 快速验证方案，对还原度要求不高的项目
- 生成代码后二次开发
五、⌨️ 输出代码
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="https://unpkg.com/antd@5.12.1/dist/antd.min.css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/dayjs@1.11.10/dayjs.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/antd@5.12.1/dist/antd.min.js"></script>
<script type="text/babel">
const { Form, Input, Cascader, Checkbox, Button, Select} = antd;
const residenceOptions = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'westlake',
label: 'West Lake',
},
],
},
],
},
// ...other province options
];
function RegistrationForm() {
return (
<Form
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
layout="horizontal"
>
<Form.Item label="Nickname" required tooltip="This is a required field">
<Input placeholder="" />
</Form.Item>
<Form.Item label="Habitual Residence" required>
<Cascader
options={residenceOptions}
defaultValue={['zhejiang', 'hangzhou', 'westlake']}
placeholder="Please select your habitual residence"
/>
</Form.Item>
<Form.Item label="Phone Number" required>
<Input addonBefore={<Select defaultValue="+86" style={{ width: 70 }}>
{/* Add other country codes as needed */}
</Select>} style={{ width: '100%' }} />
</Form.Item>
<Form.Item label="Donation" required>
<Input placeholder="" />
</Form.Item>
<Form.Item label="Website" required>
<Input placeholder="website" />
</Form.Item>
<Form.Item label="Intro" required>
<Input.TextArea showCount maxLength={100} />
</Form.Item>
<Form.Item label="Gender" required>
<Select placeholder="select your gender">
{/* Add gender options as needed */}
</Select>
</Form.Item>
<Form.Item label="Captcha" extra="We must make sure that your are a human.">
<Input />
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Checkbox>I have read the agreement</Checkbox>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary">Register</Button>
</Form.Item>
</Form>
);
}
ReactDOM.render(<RegistrationForm />, document.getElementById('root'));
</script>
</body>
</html>
六、🙋♂️ 开源地址
本网站的内容主要来自互联网上的各种资源，仅供参考和信息分享之用，不代表本网站拥有相关版权或知识产权。如您认为内容侵犯您的权益，请联系我们，我们将尽快采取行动，包括删除或更正。
