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

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

一、输出预期代码

在输出预期代码方面，发现直接使用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.加上的结果

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

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内容。

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

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

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

}

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

四、修改已有页面

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

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

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

五、后续探索

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

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

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