OpenAI 宣布 推出了全新的模型 GPT-4o（o 代表“全能”）。除了在计算机视觉、实时翻译或教育领域具有许多先进和令人兴奋的功能外，免费用户将特别喜欢其中一项公告：GPT4-o 对免费用户开放！这意味着什么呢？有了多模态功能，任何免费用户现在都可以轻松创建一个网站。即使您没有编码经验，该模型也可以帮助您设计、编写和发布网站，减少工作量。
让我们使用 GPT-4o 将一些想法从纸上的草图转化为一个实际的网站。
什么是多模态？
多模态是在一个媒介中应用多种读写能力。多种读写能力或“模式”有助于观众理解作品的含义。从图像的摆放到内容的组织再到传递方式，都会创造出意义 - 维基百科
GPT-4o 提供多模态意味着它可以处理和生成各种格式的内容，例如文本、图像等，这可以极大地增强您的网站创建过程，尤其是对于非编程人员而言。以下是这些功能如何帮助您创建多模态网站的方式。
文本
-
您可以提供关于您希望网站的文本描述或说明。例如，主页布局、各个部分的内容或所需的博客文章类型。
-
生成的内容可以针对搜索引擎进行优化，这将有助于提高可见性并为您的网站带来更多的有机流量。
-
您可以生成博客文章、产品描述和页面，同时确保您的内容引人入胜且信息丰富。
图像
-
上传您想要包含的图像，并让 GPT-4o 分析并将其合并到网站布局中。这可以是您的标志、一些产品图像、横幅等。
-
使用图像作为灵感：上传您喜欢的内容，以帮助模型生成符合您口味和需求的媒体
-
与 DALL-E 等工具集成，GPT-4o 可以创建自定义图像和插图
-
它还可以帮助您编写视频脚本，确保您的内容结构良好且引人入胜。
视频
- 如果您有欢迎视频、教程或产品演示，您可以上传它们作为视频文件或链接，以包含在您的网站中，甚至可以让模型创建一些视频。
准备好了吗？让我们开始吧！
我喜欢以面包店为例，让我们继续下去，我现在是一家当地面包店的老板，我需要一个网站。我已经对布局、我想要的内容和位置有了一些想法。
我已经创建好了我的免费OpenAI 账户，现在我面对着我的伙伴。盯着屏幕……我应该说什么呢？好吧，让我们先试一个简单的问题。
你好！为一家当地面包店设计一个网站
为了更好地理解 GPT-4o 的能力，让我们看看免费的GPT-3.5 模型会做什么：
这还不错。不是太详细，但我们仍然能够理解大致的想法，并且可能会有一些我们没有考虑到的新想法。但是，GPT-3.5 是一个仅文本模型，没有办法看到可能的结果。
直到昨天，您必须额外支付每月 20 美元才能访问更强大的模型GPT-4。让我们给它相同的任务：
当要求生成潜在结果时，我们得到了这个：
仅花了大约一分钟来生成图像。
现在轮到免费的GTP-4o了：
正如您已经看到的，结果更加详细。我们有了更多的部分、呼叫到行动的按钮、关于字体、颜色方案的提示，以及一个后续问题（对于阅读本文的高级技术人员而言，无需添加自定义命令）。
那么关于我们未来网站的生成呢？不到 20 秒，我得到了这个：
对于一个免费模型来说，还不错，对吧？
但是您可能会说它不符合您的口味或颜色选择。某些部分是不必要的，或者您需要菜单中的更多项目。这就是多模态的部分。首先，让我们拿起纸和笔。
简单的草图指示
问题是，我画得很糟糕。在这种情况下，这是完美的。这是我想出并上传的草图，然后发送下一个提示：
当我第一次考虑网站时，这是我想出的简单设计。请根据我在上传的图像中勾画的图像和文本布局、部分数量和名称来调整您的建议，并重新生成一个建议
更新后的建议如下：
不完全是我想要的，但比之前好。我们稍后再深入研究。模型能否已经完成？
请编写构建此网站所需的代码。遵循最新的性能和可访问性最佳实践。完成后，请为我创建一个压缩文件，以便我可以将其上传到网上。
整个过程花费了……1 分钟 20 秒。
我可以看到内容和样式文件、图像路径和生成的 zip 文件，全部在 1 分钟 30 秒内完成。
现在，让我们分析一下。我有我的“主要图像”（对于非技术人员来说，“主要图像”是显示在首页上的主要、最大的图像，通常包含最重要的信息和操作按钮），以及标有“Order”的呼叫到行动按钮。
我们从第一个建议中的 5 页幻灯片区域转变为一个简单的 3 个部分区域。虽然我要求了两个部分，但我没有看到每个部分的名称。
类似地，导航栏的说明没有被正确解释。“Social”在我的草图（和我的想法）中是用来放置社交图标的。菜单项也比需要的多。
在这里，我可以（也应该）使用提示工程，以提供更多上下文和说明，更好地表达我的想法，并且比我之前的表达更准确。但是，这里的目标是测试模型处理简单提示的能力，辅以文档的帮助。
添加一个文本文件
我将添加一些更详细的指导
谢谢。上传的文档包含更多的布局说明和首页所需的文本。请根据此进行更新，生成的图像建议也要基于此进行调整。
您可以在此处下载文本文件，或在文章底部获取所有资源。
这样好多了。虽然还不完美，但已经好很多了。我要求的一切都在那里。
当然，呼叫到行动没有居中，图像和文本的对比度远远不能使用，页眉图像在浮动线上方。但是模型似乎遵循了指示。
我可以要求更多吗？
使用配色方案
这是一些更新的文本说明。它们包括一个配色方案、一些新的部分以及有关现有部分的几个规格。请根据此更新您的代码和生成的图像，并向我发送一个新的 zip 文件
我现在告诉模型我想要使用的颜色以及它们的位置，为页眉图像添加了一些信息，并要求添加一个页脚。
（基本颜色）：#FFFDD0
（次要颜色）：#C5A880
（强调颜色）：#7C4D3A
（高亮颜色）：#FADADD
（中性颜色）：#F5F5DC
基本颜色：用于背景 次要和强调颜色：用于字体和结构组件 高亮颜色：用于交互元素（按钮和链接） 中性颜色：用于部分背景
您可以在此处下载更新的文本。
我再次获得了所有更新的文件、生成的图像（以及在 Dall-E 上使用的提示，以便以后重用），文件夹结构……而且只花了不到 3 分钟。
进一步探索
我们只看到了模型潜力的冰山一角，我们还可以生成更多的东西：
-
视频：整个过程只花了不到 2 分钟的时间，生成了一个 10 秒的视频，其中 GPT-4o 创建了故事板、生成了图像，并尝试将它们组合成最终结果。不幸的是，它遇到了“持续的路径问题”，无法渲染它，但是提供了我按照其指导进行渲染的确切步骤。这是按照其指导的最终结果
-
音乐：自动将音轨文件添加到生成的视频中
-
交互式测验或表单：提问一些问题并回答，解释您的逻辑
-
聊天机器人集成
-
等等。
而且为什么不在以后要求模型分析用户数据并生成个性化推荐呢？
结论
拥有20多年的开发经验，我知道，我的无障碍专家、艺术总监、UX/UI设计师和全栈开发人员同事也知道，要想达到一个经验丰富的团队的水平，还有很多工作要做。
话虽如此，我不得不承认，这个模型是免费的，并且我几乎没有提供任何技术信息，它可以帮助一些专业人士构建一个简单的网站，以适应他们的口味、草图、想法和迭代，并指导他们如何将其上线。
这种方式能建立一个简约而有效的单页面网站吗？当然可以。
即使对于这种用途，它需要比我在10到15分钟内完成的工作更多的时间吗？是的，当然。
我是否担心我和我的同事的工作？不，至少现在还没有。一个网站远不止外观。人物角色、产品、质量、性能、响应式设计、技术选择、吸引力、SEO、安全性、DPO、分析...
然而，GPT-4o可以帮助人们更好地理解这些领域的专业知识，并引导他们朝着正确的方向发展，同时提高网络内容的整体质量，让更多的人在不需要广泛的技术知识的情况下建立在线存在。
最后，对于GPT-4o免费提供的（r）evolution，我是否感到印象深刻？老实说，是的。未来我可能会更加印象深刻。我们只是触及到了表面，但请继续关注，还有更多的内容即将呈现 :)
你可以在这里下载生成的zip文件。它包含网站的静态文件、"images"文件夹、上传到指导模型的文本文件、一个image_prompts.txt文件，其中我粘贴了GPT-4o与DALL-E一起使用的所有提示，以及一个"video"文件夹，其中包含为视频生成的图像。
