easyui 网站开发实现品牌网站建设需要哪些规划

easyui 网站开发实现,品牌网站建设需要哪些规划,郑州响应式网站制作,网站上传文件Smart Excalidraw 用自然语言#xff0c;绘制专业图表 最近看到一个项目用AI开源图表工具Excalidraw 做智能绘图#xff0c;但是结果不尽人意#xff0c;于是自己新建了后端基础智能体进行编排图表#xff0c;效果有所改善#xff0c;但未完全可用。 Smart Excalidraw 是一…Smart Excalidraw用自然语言绘制专业图表最近看到一个项目用AI开源图表工具Excalidraw 做智能绘图但是结果不尽人意于是自己新建了后端基础智能体进行编排图表效果有所改善但未完全可用。Smart Excalidraw 是一个基于 AI 的智能图表生成工具通过自然语言描述即可生成专业的 Excalidraw 图表。项目采用前后端分离架构前端使用 Next.js后端使用 Python FastAPI集成了多种大语言模型提供商如openai、qwen、ollama。github网址✨ 核心特性 AI 驱动效果出众通过先进的大语言模型理解你的需求生成结构清晰、布局合理的专业级图表支持多种 LLM 提供商OpenAI、Anthropic、Google、Mistral 等支持多模态输入文本描述 图片识别 独创连接算法采用智能箭头优化算法自动计算最佳连接点确保图表井然有序、逻辑清晰告别混乱的线条交叉自动布局优化元素间距智能调整 丰富图表类型支持 20 种图表类型包括流程图 (Flowchart)架构图 (Architecture)时序图 (Sequence)ER 图 (ER Diagram)思维导图 (Mind Map)网络拓扑图 (Network Topology)等等…AI 可根据描述自动选择最合适的图表类型 完美 Excalidraw 集成生成的图表完全基于 Excalidraw 格式可以在画布上自由编辑、调整样式、添加细节实现 AI 生成与手动精修的完美结合⚡ 开箱即用只需配置一个 AI API 密钥即可开始使用所有配置保存在本地隐私安全有保障支持流式响应实时查看生成进度 多智能体系统规划智能体分析用户需求制定生成计划生成智能体根据规划生成 Excalidraw 代码优化智能体优化代码布局调整元素间距验证智能体验证 JSON 格式检查必填字段️ 技术架构前端技术栈Next.js 16- React 框架React 19- UI 库Excalidraw- 图表绘制引擎Tailwind CSS 4- 样式框架Monaco Editor- 代码编辑器后端技术栈FastAPI- 高性能异步 Web 框架Langchain- LLM 应用开发框架Pydantic- 数据验证NetworkX- 图布局算法SSE (Server-Sent Events)- 流式响应项目结构Smart-Excalidraw/ ├── frontend/ # Next.js 前端 │ ├── app/ # Next.js App Router │ ├── components/ # React 组件 │ ├── lib/ # 工具函数 │ └── public/ # 静态资源 ├── backend/ # Python FastAPI 后端 │ ├── app/ │ │ ├── api/v1/ # API 路由 │ │ ├── core/ # 核心功能 │ │ │ ├── agents/ # Langchain 智能体 │ │ │ ├── llm/ # LLM 客户端 │ │ │ ├── excalidraw/ # Excalidraw 处理 │ │ │ └── layout/ # 布局引擎 │ │ ├── models/ # 数据模型 │ │ └── utils/ # 工具函数 │ └── data/ # 数据文件 └── docs/ # 文档 快速开始前置要求Node.js 18.0.0Python 3.9pnpm或npm或yarn一个 LLM API 密钥OpenAI、Anthropic、Google 等1. 克隆项目gitclone https://github.com/heise199/Smart-Excalidraw.gitcdSmart-Excalidraw2. 启动后端服务cdbackend pipinstall-r requirements.txt uvicorn app.main:app --reload --port8000后端服务将在http://localhost:8000启动。3. 启动前端服务cdfrontendpnpminstallpnpmdev前端服务将在http://localhost:3000启动。4. 配置 LLM在浏览器中打开http://localhost:3000点击右上角的“配置 LLM”按钮选择提供商类型OpenAI、Anthropic、Google 等填入你的 API Key选择模型推荐使用claude-sonnet-4.5效果最佳保存配置5. 开始使用在输入框中用自然语言描述你的需求例如“画一个用户登录的流程图”“创建一个微服务架构图包含网关、认证服务和业务服务”“设计一个电商系统的数据库 ER 图”AI 会自动生成图表你可以在画布上直接编辑和调整。 详细文档开发文档前后端集成指南 - 前后端集成详细说明后端实现总结 - 后端架构和功能说明Excalidraw API 文档 - Excalidraw 元素 API 参考前端文档前端 README - 前端详细说明API 集成文档 - API 集成说明配置同步文档 - 配置同步机制后端文档Ollama/Qwen 设置指南 - 本地模型设置模型输入指南 - 模型输入格式说明 配置说明后端配置后端配置通过环境变量或.env文件管理# .env 文件示例CORS_ORIGINShttp://localhost:3000,http://localhost:3001HOST0.0.0.0PORT8000LOG_LEVELINFOMCP_ENABLEDtrueMCP_SERVER_URLhttp://localhost:3002前端配置前端配置保存在浏览器本地存储中通过 UI 界面进行管理。也可以直接编辑frontend/data/llm-configs.json文件。 API 文档生成图表POST/api/v1/generate{config:{name:My OpenAI,type:openai,baseUrl:https://api.openai.com/v1,apiKey:sk-...,model:gpt-4},userInput:画一个用户登录流程图,chartType:flowchart,image:null,currentCode:null,stream:true}响应格式SSEevent: plan data: {analysis: ..., chartType: flowchart, ...} event: progress data: {stage: generating, message: 正在生成..., progress: 50} event: chunk data: {content: ...} event: done data: {code: [...], optimized: true, validation_passed: true}获取模型列表GET/api/v1/models?typeopenaibaseUrl...apiKey...配置管理GET/api/v1/config- 获取配置POST/api/v1/config- 保存配置详细 API 文档请访问http://localhost:8000/docsSwagger UI️ 开发指南本地开发同时运行前后端终端 1 - 前端cdfrontendpnpmdev终端 2 - 后端cdbackend uvicorn app.main:app --reload --port8000代码规范前端使用 ESLint 进行代码检查遵循 React Hooks 最佳实践后端使用 Black 进行代码格式化使用 Ruff 进行代码检查使用 MyPy 进行类型检查测试# 后端测试cdbackend pytest# 前端测试待实现cdfrontendpnpmtest Docker 部署使用 Docker Composedocker-compose up -d单独构建前端cdfrontend docker build -t smart-excalidraw-frontend.docker run -p3000:3000 smart-excalidraw-frontend后端cdbackend docker build -t smart-excalidraw-backend.docker run -p8000:8000 smart-excalidraw-backend❓ 常见问题Q: 推荐使用哪个 AI 模型A: 强烈推荐使用claude-sonnet-4.5它在理解需求和生成图表方面表现最佳。GPT-4 和 Gemini Pro 也是不错的选择。Q: 数据安全吗A: 所有配置信息仅保存在你的浏览器本地前端或本地文件系统后端不会上传到任何第三方服务器。只有你配置的 LLM API 会收到请求。Q: 支持哪些图表类型A: 支持流程图、架构图、时序图、ER 图、思维导图、网络拓扑图等 20 种类型AI 会自动选择最合适的类型。Q: 生成的图表可以修改吗A: 当然可以生成后可以在 Excalidraw 画布上自由编辑包括调整位置、修改样式、添加元素等。所有修改都会实时同步到代码编辑器。Q: 如何修改已生成的图表A: 在修改模式下你可以描述想要修改的内容AI 会基于当前图表进行修改而不是重新生成。Q: 支持图片输入吗A: 是的支持上传图片AI 可以识别图片内容并生成相应的图表。Q: 后端服务无法启动A: 请检查Python 版本 3.9已安装所有依赖pip install -r requirements.txt端口 8000 未被占用查看日志输出获取详细错误信息Q: 前端无法连接后端A: 请检查后端服务是否正在运行前端配置的后端 URL 是否正确CORS 配置是否包含前端地址浏览器控制台是否有错误信息 贡献指南欢迎贡献代码请遵循以下步骤Fork 本仓库创建特性分支 (git checkout -b feature/AmazingFeature)提交更改 (git commit -m Add some AmazingFeature)推送到分支 (git push origin feature/AmazingFeature)开启 Pull Request贡献方向 修复 Bug✨ 添加新功能 完善文档 优化 UI/UX⚡ 性能优化 代码重构 许可证本项目采用 MIT 许可证。详见 LICENSE 文件。 致谢Excalidraw - 强大的绘图工具Langchain - LLM 应用开发框架FastAPI - 现代 Web 框架Next.js - React 框架