chatgpt写前端代码 探索前端与ChatGPT融合的未来:可控代码输出

AI资讯1年前 (2023)发布 fengdao
28 0

近一个月以来,在前端与融合探索方面取得了一些进展,下面我将分享一些具体的成果。

一、输出预期代码

输出预期代码方面,发现直接使用GPT输出的结果是不可控的。为了让输出内容可控,采取了两种形式:

提示:通过精心设计提示,引导GPT输出期望的结果。Fine-微调:目前尚未在实践中取得令人满意的效果。1.系统设置

作为一个React工程师,使用Ant (antd)作为UI库,同时使用库作为状态管理。开发语言使用。

2.直接提问

:创建用户表单,包括用户名称,用户详情以下是代码输出结果:

import React from 'react';
import { Form, Input, Button } from 'antd';
import { useRecoilState } from 'recoil';
import { userState } from './recoil/atoms';
const UserForm: React.FC = () => {
  const [user, setUser] = useRecoilState(userState);
  const onFinish = (values: any) => {
    setUser(values);
  };
  return (
    <Form onFinish={onFinish}>
      <Form.Item
        label="User Name"
        name="name"
        rules={[{ required: true, message: 'Please input your user name!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="User Details"
        name="details"
        rules={[{ required: true, message: 'Please input user details!' }]}
      >
        <Input.TextArea />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
export default UserForm;

// recoil/atoms.ts
import { atom } from 'recoil';
export const userState = atom({
  key: 'userState',
  default: {
    name: '',
    details: '',
  },
});

// App.tsx
import React from 'react';
import { RecoilRoot } from 'recoil';
import UserForm from './UserForm';
const App: React.FC = () => {
  return (
    <RecoilRoot>
      <UserForm />
    </RecoilRoot>
  );
};
export default App;

2.加上的结果

通过引入,可以使输出的内容更加可控。以下是引入后的代码输出结果:

前端代码写的太烂怎么办_chatgpt写前端代码_前端代码写的乱七八糟的怎么办

import React from 'react';
import { Form, Input, Button } from 'antd';
const { TextArea } = Input;
const UserForm = () => {
  const onFinish = (values) => {
    console.log('Form values:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Form error:', errorInfo);
  };
  return (
    <Form
      name="userForm"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      initialValues={{ remember: true }}
    >
      <Form.Item
        label="用户名称"
        name="username"
        rules={[{ required: true, message: '请输入用户名称' }]}
      >
        <Input placeholder="请输入用户名称" />
      </Form.Item>
      <Form.Item
        label="用户详情"
        name="userDetails"
        rules={[{ required: true, message: '请输入用户详情' }]}
      >
        <TextArea rows={4} placeholder="请输入用户详情" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};
export default UserForm;

二、模拟输出日常开发代码

使用了”chain”的概念,使用””可以直接模拟输出日常开发代码。比如开发一个表单,需要以下几个步骤:

通过按顺序执行”chain”任务,并最终输出期望的代码。

1.录入chain

人工录入,编写任务链。

2.执行chain,结果如下

// UserForm.tsx
import React from 'react';
import { Form, Input, Button } from 'antd';
import { useRecoilState } from 'recoil';
import { userState } from '../recoil/atoms';
const { TextArea } = Input;
const UserForm = () => {
  const [user, setUser] = useRecoilState(userState);
  const onFinish = (values) => {
    console.log('Form values:', values);
    setUser(values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Form error:', errorInfo);
  };

  return (
    
      
        
      

      
        
      

      
        
      
    
  );
};

export default UserForm;
// atoms.ts
import { atom } from 'recoil';
type User = {
  username: string;
  userDetails: string;
}
export const userState = atom<User>({
  key: 'userState',
  default: {
    username: '',
    userDetails: '',
  },
});

录入了page和store的后输出的代码如上。输出了页面内容和store内容。

三、找到相似任务,创建场景

前端代码写的太烂怎么办_chatgpt写前端代码_前端代码写的乱七八糟的怎么办

为了更好地进行模拟输出,录入了多个场景的,然后使用向量数据库来查找相似的。存储格式如下:

{
    pageContent: '创建一个产品详情页,包括产品名称,产品详情,产品名称',
    metadata: {
        question: '',
        output: '',
        custom: ''
    }

}

目前,将数据存储在本地的中,并且在使用时需要安装。

四、修改已有页面

为了方便进行增加、删除和修改,提供了可视化的源码编辑能力。具体操作如下:

增加:可以通过Code Code查找向量数据库中相似的代码,并使用指导GPT输出结果;或者存储上一次的操作元数据,查找原有任务链上的修改任务,也可以通过代码类型分析找到对应的修改。删除:提供可视化的源码编辑能力,方便快捷地删除代码,并在需要时使用GPT优化代码。修改:选中需要修改的部分,描述需要修改的内容并找到对应的,然后执行修改的任务链。

需要注意的是,目前只实现了核心代码部分,还需要进一步开发和优化。在修改状态下直接与GPT交互可能不是最佳实践,如下图片让可视项目提供可编辑。

五、后续探索

在接下来的探索中,计划进行以下方面的工作:

录入任务分解:将任务拆解成模块,分别输出代码,然后再合成为完整的代码。录入分析优化调整:对录入的进行维护和管理,并评价的质量。自动分析现有项目:探索自动分析现有项目,自动录入学习的可能性。Model Fine-:尝试直接微调模型,减少对的手动录入。

目前,项目仍处于早期阶段,还有许多问题需要解决。开源地址:/-js/…。不断探索和改进,为实现前端与的融合提供更多有用的工具和功能。

© 版权声明

相关文章

暂无评论

暂无评论...