免责声明

本文中包含的网页截图仅用于说明和教育目的，我们尊重所有公司的知识产权，并无意侵犯任何版权或商标。如果截图的使用侵犯了贵公司的权益，请及时与我们联系，我们将立即采取措施予以删除或调整。

前边这篇文章已经讲过用ChatGPT来实现截图生网页的案例了。当GPT-4O问世以来，我们来实操看看这个多模态大模型的图生网页的效果如何。

一、GPT-4o简介

2024年5月14日,OpenAI宣布推出其最新多模态大模型GPT-4o，其中的「o」代表「omni」（即全面、全能的意思），这个模型同时具备文本、图片、视频和语音方面的能力。 更多关于GPT-4O的介绍参考这篇文章：

二、GPT-4o通过截图克隆网页

下面我们尝试用GPT-4o对话，尝试通过上传截图，生成一个效果类似的网页。

第一步:上传图片

提需求

ChatGPT回复

网页效果

对应的网页效果为：

不但验证码没有显示出来，且测试随意输入用户名、密码和验证码就提示登陆成功。

效果肯定是不正确的，我们可以设置一个需要验证的用户名和密码，继续优化提问需求。

第二步:优化需求

继续提需求

1、验证码需要四位数字或者字母，验证码控件被点击就可以实现更新。
 2、用户名输入要检测是否正确:
- 如果用户名为空，提示用户"请输入用户名"
- 用户名输入为：test ，不报错
- 否则提示用户名错误
 3、密码要检测是否正确:
- 如果密码为空，提示用户"请输入密码"
- 密码为123456，不报错，
- 否则提示密码错误 
4、验证码要输入验证码控件的显示的数值，不一致提示验证码错误。
5、 当用户名和密码以及验证码都输入正确，提示登陆成功，且本页面清除原来的页面效果，跳转刷新在本页面进行显示“登陆成功”

ChatGPT回复

网页效果

经过测试，用户名和密码输入错误，会给出错误提示信息。

但是显而易见，验证码还是没有正确加载出来。

第三步：继续优化

提需求

验证码没有正确显示出来，在上边代码基础上，需要优化修改这个地方。

ChatGPT回复

网页效果

当用户名或者密码或者验证码没有输入，能提示“请输入xx”，输入错误，会提示“xx错误”。

用户名、密码以及验证码输入正确，点击登录，提示正确。

点击“确定按钮”，页面刷新显示“登陆成功”。达到我们的效果。

第四步：logo替换

最后，只需要将公司的logo图片，存放到本地或者云端，在源代码中自己替换即可。下面我们让ChatGPT为我们生成一个类似原始logo的logo图。

提需求

很好，现在有一个问题，就是公司的logo没有显示，需要为我随机生成一个logo，和原来的logo效果相似

ChatGPT回复

由于生成的logo的文字有乱码，我们可以直接截图非文字部分，进行效果演示，将该图保存到网页相同目录下，直接替换下边的src路径即可。

 <img src="/mnt/data/Create_a_logo_for_a_security_system_company_named_.png" alt="Logo">

网页效果

我们还可以继续微调下：

网页中将logo替换后，logo和“网御星云”四个字没有在一行，需要改为在 一行高低一致的效果。

此时一个类似原始网页截图的网页就克隆出来了。