图片由 kenshinstock 在 Freepik 上提供

OpenAI 宣布发布其全新模型 GPT-4o（o 代表“Omni”）。除了计算机视觉、实时翻译或教育领域的许多先进且令人兴奋的功能外，免费用户还会特别喜欢一项公告：GPT4-o 可供免费用户使用！

这是什么意思？借助多模式，任何免费用户现在都可以轻松创建网站。即使您没有编码经验，该模型也可以帮助您以最少的努力设计、编写和启动网站。

让我们使用 GPT-4o 将笔和纸上的一些想法转化为实时网站。

什么是多模态？

多模态是一种媒介中多种读写能力的应用。多种文学或“模式”有助于观众理解作品。[1]从图像的放置到内容的组织再到交付方法的一切都创造了意义 – 维基百科

GPT-4o 提供多模态意味着它可以处理和生成各种格式的内容，例如文本、图像等，这可以显着增强您的网站创建过程，特别是如果您不是编码人员。以下是这些功能如何帮助您创建多模式网站。

文本

• 您可以为您想要的网站提供文字描述或说明。例如，主页布局、各部分的内容或您需要哪种类型的博客文章。
• 生成的内容可以针对搜索引擎进行优化，这将有助于提高可见性并为您的网站产生更多的自然流量。
• 您可以生成博客文章、产品描述和页面，同时确保您的内容引人入胜且信息丰富。

图片

• 上传您想要包含的图像，让 GPT-4 分析并将它们合并到站点布局中。这可以是您的徽标、一些产品图片、横幅等。
• 使用图像作为灵感：上传您喜欢的内容，帮助模型生成适合您的品味和需求的媒体
• 与 DALL-E 等工具集成后，GPT-4o 可以创建自定义图像和插图
• 它还可以帮助您编写视频脚本，确保您的内容结构良好且引人入胜。

视频

• 如果您有欢迎视频、教程或产品演示，您可以将它们作为视频文件或链接上传以包含在您的网站中，甚至必须建模创建一些。

以及更多。

准备好？开始吧！

正如你在我的其他故事中看到的，我喜欢用面包店作为例子。所以让我们继续下去，我现在是当地的面包师，我需要一个网站。我已经对安置、我想要什么以及在哪里有了一些想法。

我的免费OpenAI 帐户已创建并准备就绪，现在我正面对我的同伴。盯着屏幕……我该说什么？好吧，我们先来尝试一个简单的问题。

你好！为当地一家面包店设计一个网站

为了更好地掌握 GPT-4o 的强大功能，让我们看看免费的GPT-3.5 模型会做什么：

GPT-3.5 的简单提示 — 作者图片

那还不错。不太详细，但我们仍然得到了想法，并最终有了一些我们没有想到的新想法。但是，GPT-3.5 是纯文本模型，无法一睹可能的结果。

直到昨天，您还必须每月额外支付 20 美元才能访问更强大的模型GPT-4。让我们给它同样的任务：

GPT-4 的简单提示——作者截图

当要求生成潜在结果时，我们得到以下结果：

要求 GPT-4 根据其建议的部分生成网站视觉效果 — 作者的屏幕截图

仅图像生成就花费了大约一分钟。

现在介绍免费的GTP-4o：

GPT-4o 的简单提示 — 作者截图

正如您已经看到的，结果更加详细。我们有更多部分、号召性用语按钮、有关版式的提示、配色方案和后续问题（不添加自定义命令，适合阅读本文的最高级技术人员）。

我们未来网站的生成又如何呢？不到 20 秒后，我得到的是：

要求 GPT-4 根据其建议的部分生成网站视觉效果 — 作者的屏幕截图

对于免费模型来说还不错，对吧？

但您可能会说它不符合您的品味或您对颜色的选择。有些部分是不必要的，或者您需要菜单中的更多项目。这里是多式联运部分。首先，让我们拿起笔和纸。

简单草图指示

问题是，我是一个非常糟糕的抽屉。在这种情况下，这是完美的。这是我在发送下一个提示之前想出并上传的草图：

作者绘制的极简主页

当我第一次想到这个网站时，这是我想到的简单设计。请根据我在上传的图像中绘制的部分的图像和文本布局、编号和名称调整您的提案，然后重新生成提案

更新后的提案如下：

GPT-4o 更新的提案 — 作者截图

不完全是我想要的，但更好。我们稍后会深入探讨。模型已经能够完成它了吗？

请编写构建此网站所需的代码。遵循最新的性能和可访问性最佳实践。完成后，请创建一个 zip 存档供我在线上传。

这个过程花了…… 1分20秒。

我可以在不到 1 分钟 30 的时间内看到内容和样式文件、图像路径以及生成的 zip。

现在我们来分析一下。我有我的“英雄形象”（对于非技术人员来说，“英雄形象”是首页上显示的主要、最大的图像，通常带有最重要的信息和操作按钮），以及我的号召性用语标有“订单”的按钮。

我们从包含第一个提案部分的 5 页滑块区域变为包含 3 个部分的简单区域。不过，我要了两个，但我没有看到每个部分的名称。

同样，导航栏指令也没有被正确解释。在我的草图（和我的想法）中，“社交”是指持有社交图标。菜单项也比需要的多得多。

我可以（并且应该）在这里使用即时工程，为其提供更多背景和说明，更好地表达我的想法，并且比以前更精确。但这里的目标是测试模型在文档的帮助下处理简单提示的能力。

添加文本文件

我会添加更多指导

谢谢。上传的文档包含更多布局说明和我需要的主页文本。在此基础上调整您生成的图像提案。

您可以在此处下载文本文件，或在文章底部获取所有资源。

下一个迭代，带有文本指令，由 GTP-4o 生成 – 作者的屏幕截图

这样好多了。还没有，但是更好了。我要求的一切都在那里。

当然，号召性用语不居中，图像和文本对比度远不可用，并且标题图像位于浮动线上方。但该模型似乎遵循说明。

我可以要求更多吗？

使用配色方案

以下是一些更新的文本说明。它们包括一种配色方案、一些新部分以及有关现有部分的一些规范。请相应地更新您的代码和生成的图像，并向我发送一个新的 zip 文件

我现在告诉模型我想使用哪种颜色以及在哪里使用，为标题图像添加一些信息，并要求提供页脚。

（基色）：#FFFDD0

（辅助色）：#C5A880

（强调色）：#7C4D3A

（突出显示颜色）：#FADADD

（中性色）：#F5F5DC

基色：用于背景

辅助色和强调色：用于版式和结构组件

突出显示颜色：用于交互元素（按钮和链接）

中性色：用于部分背景

您可以在此处下载更新的文本。

我再次获得了所有更新的文件、生成的图像（以及 Dall-E 上使用的提示，以便在需要时重用）、文件夹结构……并且只用了不到 3 分钟的时间。

最后一次迭代，使用新指令，由 GTP-4o 生成 – 作者的屏幕截图

为了走得更远

我们只看到了模型潜力的一小部分，我们可以生成更多东西：

• 视频：对于一个 10 秒的视频，整个过程不到 2 分钟，其中 GPT-4o 创建故事板、生成图像并尝试将它们组合起来以获得最终结果。不幸的是，它面临“持续路径问题”并且无法渲染它，但为我提供了执行此操作的确切步骤。这是遵循其指导的最终结果
• 音乐：自动将音轨文件添加到生成的视频中
• 互动测验或表格：提出几个问题并回答，解释你的逻辑
• 聊天机器人集成
• ETC。

为什么不稍后要求模型分析用户数据并生成量身定制的建议呢？

结论

拥有 20 多年的开发经验，我知道，我的辅助功能专家、艺术总监、UX/UI 设计师和 Fullstack 开发人员同事也知道，要成功达到经验丰富的水平，还有很多工作要做团队。

话虽这么说，我不得不承认，该模型是免费的，并且只提供了很少的技术信息，可以帮助一些专业人士构建一个简单的网站，适合他们的品味、草图、想法和迭代，同时指导他们如何把它放在网上。

可以用这种方式构建一个简约而有效的单页面吗？确实。

即使对于这种用法，是否需要比我在 10 到 15 分钟内以我的草图为基础所做的更多工作？是的当然。

我是否担心自己和同事的工作？不，至少现在还没有。网站不仅仅是其外观。人物角色、产品、质量、性能、响应式设计、堆栈选择、牵引力、SEO、安全性、DPO、分析……

但我觉得 GPT-4o 可以帮助人们更好地理解这些能力领域并引导他们走向正确的方向，同时提高网络内容的整体质量，并使更多的人能够在不需要广泛的技术知识的情况下建立在线形象。

最后，GPT-4o 免费提供的（r）进化给我留下了深刻的印象吗？说实话，是的。未来我可能会做得更多。我们只是触及了表面，但请继续关注，还有更多内容:)

您可以在此处下载生成的 zip 文件。它包含网站静态文件、“images”文件夹、上传用于指导模型的文本文件、一个 image_prompts.txt 文件（我在其中粘贴了与 DALL-E 一起使用的所有提示 GPT-4o）以及“video”文件夹，其中包含为视频生成的图像。