近一个月以来，在前端与融合探索方面取得了一些进展，下面我将分享一些具体的成果。
在输出预期代码方面，发现直接使用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/…。不断探索和改进，为实现前端与的融合提供更多有用的工具和功能。
相关文章
