# AiPlatform **Repository Path**: jasonAgba/ai-platform ## Basic Information - **Project Name**: AiPlatform - **Description**: 一个专注于AI技术的开源平台，提供算法、模型和工具，支持开发者构建和部署智能应用，适用于多种行业和场景。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-01 - **Last Updated**: 2026-06-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # AiPlatform — AI 造物台 > 输入一句话，3 分钟交付一个可部署的网页应用。 AiPlatform 是一个面向普通用户的 **AI 驱动网页生成平台**。用户无需编写任何代码，只需在输入框中描述需求（例如"做一个番茄钟，支持自定义时间和铃声提醒"），系统会自动调用大语言模型生成完整的前端应用，并支持对话式迭代修改、可视化元素编辑、一键部署上线。 --- ## 软件架构 ### 整体架构 ![alt text](6B3SPYdueCT2h8jA.webp) ### 前端架构（Vue 3） | 技术 | 版本 | 用途 | |------|------|------| | Vue 3 | 3.5 | 框架 | | Vue Router | 4.6 | 单页路由 | | Pinia | 3.0 | 全局状态（登录用户信息） | | Ant Design Vue | 4.2 | UI 组件库 | | Vite | 7.x | 构建工具 | | TypeScript | 5.9 | 类型系统 | | axios | 1.x | HTTP 请求 | | marked + highlight.js | — | Markdown / 代码高亮渲染 | | dayjs | 1.x | 时间格式化 | | SCSS | — | 样式预处理 | **目录结构** ``` src/ ├── Pages/ │ ├── HomeView.vue # 首页（输入、我的作品、精选） │ ├── app/ │ │ ├── AppChatPage.vue # 对话 + 实时预览 + 可视化编辑 │ │ └── AppEditPage.vue # 应用信息编辑 │ ├── user/ │ │ ├── UserLoginPage.vue │ │ ├── UserRegisterPage.vue │ │ └── UserProfilePage.vue │ └── admin/ │ ├── AppManagePage.vue │ ├── UserManagePage.vue │ └── ChatHistoryManagePage.vue ├── components/ │ ├── AppCard.vue # 应用卡片（封面、操作按钮） │ ├── AppDetailModal.vue │ ├── DeploySuccessModal.vue │ ├── GlobalHeader.vue │ └── GlobalFooter.vue ├── api/ # OpenAPI 自动生成的接口层 ├── stores/ # Pinia Store ├── utils/ │ ├── useVisualEditor.ts # 可视化编辑器（iframe 脚本注入） │ └── usePromptOptimize.ts # 提示词优化工具 ├── config/index.ts # 环境变量与 URL 工厂 └── router/index.ts ``` ### 后端架构（Spring Boot） | 技术 | 版本 | 用途 | |------|------|------| | Spring Boot | 3.5.4 | Web 框架 | | Java | 21 | 运行时 | | LangChain4j | 1.1.0 | AI 模型调用封装 | | LangGraph4j | 1.6.0 | AI 工作流（Agent 模式） | | DashScope SDK | 2.21.1 | 阿里云大模型 API | | MyBatis-Flex | 1.11.1 | ORM | | Spring Session + Redis | — | 分布式会话 | | Redisson | 3.50.0 | Redis 客户端 | | 腾讯云 COS | 5.6 | 对象存储 | | Knife4j | 4.4 | API 文档 | **核心模块** ``` src/main/java/com/example/aiplatformbackend/ ├── ai/ # AI 服务层（代码生成、路由、提示词优化） │ ├── AICodeGeneratorService # 普通模式：直接生成代码 │ ├── AiIntelligentRouteService # 智能路由（判断 HTML / Vue 项目） │ ├── PromptOptimizeAiService # 提示词优化 │ ├── guardrail/ # 输入/输出护栏 │ └── tools/ # 工具集（文件读写删改） ├── langraph4j/ # Agent 工作流（LangGraph4j） │ ├── CodeGenWorkflow # 代码生成工作流主类 │ ├── node/ # 工作流节点（生成、质检、图片收集、构建） │ └── state/WorkflowContext # 工作流状态 ├── core/ # 代码生成流水线 │ ├── parser/ # 代码解析（HTML / 多文件 Vue） │ ├── saver/ # 代码保存到文件系统（模板方法模式） │ └── builder/VueProjectBuilder # Vue 项目构建（npm install + build） ├── controller/ # REST 接口层 └── config/ # 各种 Spring 配置 ``` --- ## 本地安装部署教程 ### 环境要求 | 组件 | 版本要求 | |------|---------| | JDK | 21+ | | Maven | 3.9+ | | Node.js | 20.19+ 或 22.12+ | | MySQL | 8.0+ | | Redis | 6.0+ | | npm | 随 Node.js 安装 | ### 第一步：克隆仓库 ```bash git clone <仓库地址> cd ai-platform ``` ### 第二步：数据库初始化 1. 创建 MySQL 数据库： ```sql CREATE DATABASE aiplatform DEFAULT CHARACTER SET utf8mb4; ``` 2. 执行项目 SQL 脚本（如有，位于 `AIPlatformBackend/sql/`）。 ### 第三步：配置后端 编辑 `AIPlatformBackend/src/main/resources/application-local.yml`，填入以下配置： ```yaml spring: datasource: url: jdbc:mysql://localhost:3306/aiplatform username: <数据库用户名> password: <数据库密码> data: redis: host: localhost port: 6379 password: # 阿里云 DashScope 大模型 API Key langchain4j: open-ai: api-key: <你的 DashScope API Key> base-url: https://dashscope.aliyuncs.com/compatible-mode/v1 # 腾讯云 COS 对象存储（可选，用于封面图上传） cos: client: secret-id: secret-key: region: bucket: ``` ### 第四步：启动后端 ```bash cd AIPlatformBackend ./mvnw spring-boot:run ``` 后端启动后监听 `http://localhost:8123`，API 文档地址：`http://localhost:8123/api/doc.html`。 ### 第五步：配置前端 编辑 `AIPlatformBackend/AiPlatformFrontend/ai-platform-frontend/.env.development`： ```env VITE_API_BASE_URL=http://localhost:8123/api VITE_STATIC_BASE_URL=http://localhost:8123/api/static VITE_DEPLOY_BASE_URL=http://localhost ``` ### 第六步：启动前端 ```bash cd AIPlatformBackend/AiPlatformFrontend/ai-platform-frontend npm install npm run dev ``` 前端默认启动在 `http://localhost:5173`。 ### 第七步：配置 Nginx（部署功能需要） 部署功能依赖 Nginx 将生成的静态文件以独立路径对外提供访问。项目目录下提供了 `nginx-1.28.1/`，参考如下配置： ```nginx server { listen 80; # 前端页面（生产环境 build 后的产物） location / { root <前端 dist 目录路径>; index index.html; try_files $uri $uri/ /index.html; } # 后端 API 代理 location /api/ { proxy_pass http://localhost:8123; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; # SSE 长连接支持 proxy_buffering off; proxy_cache off; proxy_read_timeout 300s; } # 已部署应用的静态资源（deployKey 作为路径前缀） location ~ ^/([a-zA-Z0-9_-]+)/(.*)$ { root <生成的应用文件根目录>; try_files $uri $uri/index.html =404; } } ``` --- ## 使用说明 ### 创建应用 1. 注册或登录账号。 2. 在首页输入框中，用自然语言描述你想要的网页，例如： - "做一个个人博客，要深色模式" - "在线简历网站，能导出 PDF" - "待办清单工具，数据存本地" 3. 点击"开始造"，系统自动创建应用并跳转到对话页。 ### 对话式迭代 - 在对话页左侧输入修改需求，AI 会重新生成代码并刷新右侧预览。 - 右侧预览区实时显示生成的页面，支持新窗口打开查看完整效果。 - 可切换 **Agent 模式**，让 AI 工作流自动进行需求拆解、代码生成、质量检查和图片匹配。 ### 提示词优化 - 输入框左下角点击"优化"按钮，可对你的需求描述进行自动扩写、专业化、风格化改写，帮助 AI 更准确理解意图。 ### 可视化编辑 - 点击工具栏"编辑"按钮开启可视化编辑模式。 - 悬浮到预览页面中的任意元素可高亮显示，点击后自动识别元素的标签、ID、选择器等信息并填入对话框，直接告诉 AI 要修改哪个元素。 ### 部署应用 - 代码生成完成后，点击右上角"部署"按钮，系统将静态文件发布到 Nginx 管理的路径下，生成唯一的访问链接。 - 支持"重新部署"（修改后更新）和"取消部署"（下线）。 - 已部署的应用可通过应用卡片的"访问网站"直接打开。 ### 下载代码 - 在对话页点击"下载"按钮，可将 AI 生成的源代码打包下载到本地。 ### 管理后台（管理员） - `/admin/manage` — 用户管理 - `/admin/app-manage` — 应用管理（设置精选、调整优先级） - `/admin/chat-history` — 对话历史管理 --- ## 项目亮点（前端） ### 1. 沉浸式 Hero 区视觉设计 首页 Hero 区采用**不对称布局**（7:4 黄金比例分栏），配合： - 噪点纹理背景 (`var(--noise-texture)`) 增加质感 - 径向渐变配色（暖橙 + 琥珀）营造品牌氛围 - 品牌 Logo 搭配双层脉冲光环动画 (`ringPulse`) - 打字机效果标题（逐字显示，带闪烁光标） - 示例 Chip 按钮按色彩主题分类，悬浮带弹性位移动效 ### 2. 对话 + 实时预览的双栏交互 AppChatPage 采用左对话、右预览的双栏布局，核心交互亮点： - **SSE 流式输出**：AI 回复和代码生成过程实时推送，打字机式展示 - **自动滚动**：每次新消息后平滑滚动到最新内容 - **生成中动画**：三层脉冲光环 + 代码图标旋转，清晰传达生成状态 - **历史记录懒加载**：滚动到顶部时分页加载更早的对话记录 - **Markdown + 代码高亮**：AI 回复使用 `marked` + `highlight.js` 完整渲染，支持代码块语法高亮 ### 3. 可视化元素编辑器 `useVisualEditor.ts` 是一个完全自研的 **iframe 内脚本注入编辑器**： - 向 iframe 内动态注入 JS 脚本，劫持鼠标事件，悬浮高亮（蓝色虚线框）、点击选中（绿色实线框） - 通过 `window.postMessage` 跨帧通信，将选中元素的标签名、ID、CSS 选择器路径、文本内容等信息传回主框架 - 自动将元素信息格式化为结构化的提示词片段，追加到用户输入，实现"点哪改哪"的精准编辑体验 - 支持多次注入去重（避免重复绑定事件）、加载超时自动重试 ### 4. 提示词优化工具 `usePromptOptimize.ts` 封装了多种优化模式（扩写、专业化、风格化等），通过下拉菜单供用户选择。优化过程中输入框显示闪烁动画，完成后内容平滑替换。首页和对话页共用同一套逻辑，保持体验一致。 ### 5. 精细化 CSS 动效体系 项目定义了一套完整的 CSS 变量和缓动函数体系： - `--ease-spring`、`--ease-out-expo` 等自定义缓动，让交互动效更自然 - 按钮悬浮弹性位移 (`translateY(-2px)`) + 光晕阴影，统一交互反馈层级 - AppCard 封面图 hover 时 scale(1.06) 缩放 + 遮罩浮现，细腻不突兀 ### 6. 全局暗色主题设计系统 使用 CSS 变量统一管理颜色体系（`--color-primary`、`--color-text`、`--color-bg-card` 等），所有组件通过变量引用，主题切换成本极低，视觉风格高度统一。 ### 7. 响应式布局 所有页面在 768px 以下自动切换为单列布局，Hero 区副视觉隐藏，输入工具栏改为纵向排列，保证移动端可用性。 --- ## 项目主要工作（前端） | 模块 | 文件 | 主要工作 | |------|------|---------| | 首页 | `HomeView.vue` | Hero 区视觉设计、输入框与提示词优化集成、我的作品 + 精选应用两栏列表、分页与搜索、应用删除/取消部署交互 | | 对话页 | `AppChatPage.vue` | SSE 流式消息接收与渲染、双栏布局、实时预览 iframe、生成中动画、对话历史懒加载、Agent 模式切换、下载/部署/重新部署按钮联动 | | 可视化编辑器 | `useVisualEditor.ts` | iframe 脚本注入、跨帧通信、元素选中与高亮、选择器生成算法、元素信息格式化为提示词 | | 提示词优化 | `usePromptOptimize.ts` | 多模式优化封装、加载状态管理，首页和对话页复用 | | 应用卡片 | `AppCard.vue` | 封面展示（图片/渐变色默认封面）、精选标签、悬浮交互、操作按钮（编辑/删除/取消部署）、deployed/undeployed 两种点击行为 | | 应用编辑页 | `AppEditPage.vue` | 应用信息表单（权限差异化字段）、部署状态展示、删除确认 | | 路由与权限 | `router/index.ts`、`access.ts` | 路由定义、登录态守卫 | | API 层 | `src/api/` | 基于 OpenAPI 自动生成的类型安全接口，覆盖应用、用户、对话历史、提示词优化、工作流 SSE 等全部后端接口 | | 全局状态 | `stores/LoginUser.ts` | Pinia 管理登录用户信息，跨组件共享 | --- ## 参与贡献 1. Fork 本仓库 2. 新建 `feat/xxx` 或 `fix/xxx` 分支 3. 提交代码并附上清晰的 commit 信息 4. 发起 Pull Request，描述改动内容和测试步骤