💽 gpt-engineer项目

# 一. 项目名称 ***gpt-engineer*** # 二. 项目功能 自动执行给定的任务, 任务以提示词的形式写在项目文档中 # 三. 项目演示 以生成一个简单的网页目的, 进行流程的演示 ## 1. 书写提示词 - 首先是明确页面的外观,直接向ChatGPT询问 ![00询问ChatGPT网页的基本结构,后续将他的描述转化为我们的需求,他一定更加理解他自己的话.jpg](https://cos.easydoc.net/91263263/files/lj5cpjgh.jpg) - 以下是ChatGPT的回答 ![01ChatGPT关于网页的构成的回答.jpg](https://cos.easydoc.net/91263263/files/lj5cqrgo.jpg) - 接着要求ChatGPT将其转换成英文 ![02要求转化成英文网页构成.png](https://cos.easydoc.net/91263263/files/lj5crv0t.png) - 以下是转换的内容 ![03html部分转为英文.jpg](https://cos.easydoc.net/91263263/files/lj5ct5hc.jpg) - 接着向ChatGPT明确网页的内容 ![04将网页的内容加入到提示词中.jpg](https://cos.easydoc.net/91263263/files/lj5cudni.jpg) - 此时AI相关的内容已经加入到提示词中 ![05AI内容添加到提示词中.jpg](https://cos.easydoc.net/91263263/files/lj5cv8cc.jpg) - 接下来需要将生成的提示词,粘贴到文档中存放提示词的文件中 ![06放入提示词.jpg](https://cos.easydoc.net/91263263/files/lj5cxqnz.jpg) ## 2. 运行项目 - 输入指令,运行项目,具体指令:gpt-engineer projects/my-new-project ![07运行指令.png](https://cos.easydoc.net/91263263/files/lj5cyybd.png) ## 3. 内容确认 - 出现下图中这种以问号结尾的句子,不用理会哈,这是由于提示词中有部分不明确的地方,ChatGPT通过提问的方式来明确,如果不告诉的话,他会在自己能够选的选项,大概率选择代价中等的那个选项 ![08详细内容明确.jpg](https://cos.easydoc.net/91263263/files/lj5d2s4r.jpg) - 按照提示,直接按'c',就可以接着运行了哈 ![09询问是否运行.jpg](https://cos.easydoc.net/91263263/files/lj5d9rkv.jpg) ## 4. 查看结果 - 进入到生成文件的目录中,以下是生成的代码文件 ![10.网页的代码.jpg](https://cos.easydoc.net/91263263/files/lj5dgtk2.jpg) ![101.网页项目代码使用说明.jpg](https://cos.easydoc.net/91263263/files/lj5dihmh.jpg) ## 5. 运行代码 - 运行后发现,这个页面有些欠缺: - (1).缺少对应的css样式代码 - (2).网页的文字不是中文 - (3).页面中图片缺失 ![11.AI网页初步.jpg](https://cos.easydoc.net/91263263/files/lj5djdg6.jpg) ## 6. 做出调成 - 向ChatGPT补充要求: - 1.采用饿了么的element-ui的前端样式; - 2.将文字全部变为中文; ![1200增加需求.jpg](https://cos.easydoc.net/91263263/files/lj5dymj3.jpg) - 接着,将生成的英文文字粘贴到存放提示词的文件中 ![12.AI网页CSS提示词加入.jpg](https://cos.easydoc.net/91263263/files/lj5dufh9.jpg) - 同时,在网上找一张大小合适的图片,按照生成的代码,来改图片的文件名,并存放到代码指定的路径下 ## 7. 再次运行 - 有点简陋,但框架在了 ![网页1.0版本.jpg](https://cos.easydoc.net/91263263/files/lj5e9vwa.jpg)