目录收起效果测试：Prompt: "请用中文详细介绍微服务架构" Prompt: "请用中文详细介绍AI智能体（AI Agent）的架构"代码分析前端框架与用户界面AI 集成与内容生成文件管理和部署总结
今天发现 HuggingFace 上有一个叫 DeepSite 的Space在Trending榜上升的非常快
进去看了一下，正如其介绍，主要功能就是用 DeepSeek 开发各种程序：
效果测试：
Prompt: "请用中文详细介绍微服务架构"
生成的效果如下：
还包括一个演示Demo：
Prompt: "请用中文详细介绍AI智能体（AI Agent）的架构"
效果如下：
也包括一个动态演示：
代码分析
懒得自己看了，上Grok免费的Deep Research吧。
将分析结果整理如下：
DeepSite 是一个基于 AI 的无代码网站构建工具，托管在 Hugging Face 空间 enzostvs/deepsite。以下是其技术实现的详细分析，涵盖前端、后端、AI 集成、文件管理、部署和用户体验等多个方面。
前端框架与用户界面
DeepSite 的前端采用 React 和 Typescript 构建，从 index.html 文件可见，应用以
为渲染根节点，通过 加载 React 应用。main.tsx 创建 React 根节点，渲染 App 组件，并集成了 ToastContainer 用于通知。
App.tsx 管理状态包括 htmlStorage（本地存储 HTML）、remix（通过 URL 参数加载内容）、html（初始值为 defaultHTML）、isAiWorking（AI 工作状态）、auth（认证信息）等。界面设计支持响应式布局，编辑器和预览区域可调整（通过 handleResize 和相关事件监听），最小宽度为 100px，适配桌面和移动设备。classNames 如 h-screen bg-gray-950 font-sans overflow-hidden 确保整体样式一致。
编辑功能使用 monaco-editor ，提供 HTML 编辑支持，主题为 vs-dark，高度动态计算为 calc(100dvh-90px) 或 calc(100dvh-96px)，根据设备调整。预览区域通过 Preview 组件实时渲染 HTML，增强用户体验。
AI 集成与内容生成
AI 功能是核心，通过后端 server.js 实现。server.js 使用 Express 框架，依赖 @huggingface/inference 库与 Hugging Face 推理 API 交互，具体使用 DeepSeek-V3-0324 模型生成 HTML 内容。生成过程确保输出为单 HTML 文件，包含 TailwindCSS ，通过 CDN 加载 cdn.tailwindcss.com 。系统提示强制使用 HTML、CSS、JavaScript 和 TailwindCSS：
model: MODEL_ID,
provider: selectedProvider.id,
messages: [
{
role: "system",
content: \`ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. Use as much as you can TailwindCSS for the CSS, if you can't do something with TailwindCSS, then use custom CSS (make sure to import <script src="https://cdn.tailwindcss.com"></script> in the head). Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE\`,
},
前端可能通过 AskAI 组件触发 AI 生成，App.tsx 的 isAiWorking 状态和 beforeunload 事件监听（防止导航以保护未保存内容）表明用户输入描述后，发送请求至后端，由 AI 模型生成并返回 HTML。
文件管理和部署
文件管理包括本地存储和远程部署。App.tsx 使用 localStorage 存储 HTML 内容（键为 "html_content"），支持会话间持久化。Remix 功能通过 fetchRemix 调用后端 API（如 /api/remix/${remix}）加载预存内容。
总结
DeepSite 结合 React 前端、Express 后端和 Hugging Face AI 模型，提供了从编辑到部署的全流程 web 开发体验。其技术亮点包括 AI 驱动的内容生成、TailwindCSS 集成和 Hugging Face 空间部署，适合技术新手快速构建网站。
发布于 2025-04-01 09:55・IP 属地黑龙江还没有人送礼物，鼓励一下作者吧
内容所属专栏
北方的郎
专注介绍各方面的AI技术、应用攻略及方案