ant-codeAI 通过截图生成代码

一、✨简介

最近开源项目screenshot-to-code火爆,在screenshot-to-code基础上将后端代码改为node,开源地址ant-codeAI,提供截图生成代码的功能,使用GPT-4 Vision生成,在原有(React,Tailwind CSS)等代码基础上,新增react/ant design的代码输出,后续会逐步迭代自己的创意,不止于截图生成代码。

二、🚀 本地试用

可以先下载下来本地运行尝试,将尽快找服务器部署到线上,(有没有免费的部署环境帮推荐一个🤦‍♂️)。腾讯云有部署如需要尝试可以私聊。

shell 复制代码
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 复制代码
<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>

六、🙋‍♂️ 开源地址

ant-codeAI

相关推荐
伍哥的传说12 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783814 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊25 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
麻雀无能为力29 分钟前
CAU数据挖掘 支持向量机
人工智能·支持向量机·数据挖掘·中国农业大学计算机
智能汽车人43 分钟前
Robot---能打羽毛球的机器人
人工智能·机器人·强化学习
埃菲尔铁塔_CV算法44 分钟前
基于 TOF 图像高频信息恢复 RGB 图像的原理、应用与实现
人工智能·深度学习·数码相机·算法·目标检测·计算机视觉
ζั͡山 ั͡有扶苏 ั͡✾1 小时前
AI辅助编程工具对比分析:Cursor、Copilot及其他主流选择
人工智能·copilot·cursor
东临碣石821 小时前
【AI论文】数学推理能否提升大型语言模型(LLM)的通用能力?——探究大型语言模型推理能力的可迁移性
人工智能·语言模型·自然语言处理
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
未来智慧谷1 小时前
微软医疗AI诊断系统发布 多智能体协作实现疑难病例分析
人工智能·microsoft·医疗ai