构建与预览网站

这是 Open Terminal 最令人惊叹的功能之一：AI 构建一个网站、启动服务器，随后您就可以在 Docusaurus 界面内部的预览面板中实时查看它 —— 这一切都直接呈现在 Open WebUI 内部。接着，您只需在聊天中提出修改意见，预览页面就会实时更新。

---

工作原理

1. 您让 AI 创建一个网站（或网页应用、落地页、或任何基于网页的内容）。
2. AI 创建相应的文件并启动一个 Web 服务器。
3. Open Terminal 自动检测到正在运行的服务器。
4. Open WebUI 中会出现一个预览面板，展示实时的页面效果。
5. 您提出修改意见 → AI 编辑文件 → 预览页面即时更新。

---

“帮我做个落地页”

您： 为我的摄影业务创建一个落地页（Landing Page）。需要包含画廊（gallery）、“关于我们”部分以及一个联系表单。

AI 将创建 HTML、CSS 和 JavaScript 文件，启动 Web 服务器，随后预览面板会自动弹出。生成的页面看起来既专业又精美 —— 并非简陋的线框草图。

---

“修改颜色和布局”

一旦页面上线，您只需继续对话进行迭代：

您： 将背景设置为深色，并使用更暖色系的调色板。把画廊移动到“关于我们”部分的上方。

AI 编辑文件，预览会随之更新。

AI 编辑 CSS 和 HTML 文件，预览即刻更新。

---

“帮我构建一个交互式应用”

AI 可以创建高交互性的 Web 应用程序，而不仅仅是静态网页：

您： 构建一个在浏览器中运行的简易计算器。

---

“帮我修复我的网站”

如果现有的网站坏了或者需要调整？直接上传文件并提问：

您： （通过文件浏览器上传了 HTML/CSS 文件）
这个联系表单无法提交。你能帮我修复它吗？

AI 将阅读您的代码，定位并识别问题，修复它，随后您便可在预览中进行验证。

---

端口检测的工作原理

您无需进行任何特殊操作即可展示预览。在幕后：

1. AI 启动一个 Web 服务器（例如 python -m http.server 3000 或其他服务器）。
2. Open Terminal 监控新的网络端口。
3. 一旦检测到服务器正在运行，它就会向 Open WebUI 报告该端口。
4. Open WebUI 显示预览面板，并通过它自己的连接对流量进行代理。

这意味着您不需要对外暴露额外的端口，也不需要修改任何防火墙设置。一切开箱即用。

多个预览

如果 AI 启动了多个服务器（例如，在端口 3000 上运行前端，在端口 5000 上运行后端 API），您可以在端口（ports）部分灵活切换查看它们。

更多尝试

• 从聊天中运行代码 → — AI 实时编写、运行和调试代码
• 分析文档与数据 → — 电子表格、PDF、Word 文档、电子邮件
• 自动化任务 → — 文件管理、备份、批量操作