{"id":42741578,"url":"https://github.com/jeffkit/ppt-ai-editor","last_synced_at":"2026-01-29T19:00:06.027Z","repository":{"id":313335858,"uuid":"1043029936","full_name":"jeffkit/ppt-ai-editor","owner":"jeffkit","description":"An AI PPT(html presentation) editor, ","archived":false,"fork":false,"pushed_at":"2025-09-05T10:14:32.000Z","size":1383,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-05T12:23:52.476Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeffkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-23T02:18:14.000Z","updated_at":"2025-09-05T10:14:39.000Z","dependencies_parsed_at":"2025-09-05T12:25:35.224Z","dependency_job_id":"264f7b76-531a-42b1-9a87-e90944fc01e3","html_url":"https://github.com/jeffkit/ppt-ai-editor","commit_stats":null,"previous_names":["jeffkit/ppt-ai-editor"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/jeffkit/ppt-ai-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffkit%2Fppt-ai-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffkit%2Fppt-ai-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffkit%2Fppt-ai-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffkit%2Fppt-ai-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffkit","download_url":"https://codeload.github.com/jeffkit/ppt-ai-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffkit%2Fppt-ai-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28882591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T16:41:59.663Z","status":"ssl_error","status_checked_at":"2026-01-29T16:39:39.641Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-29T19:00:04.886Z","updated_at":"2026-01-29T19:00:06.016Z","avatar_url":"https://github.com/jeffkit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AI PPT Editor\n\n基于现代技术栈构建的AI驱动的PPT编辑器，支持与AI对话来编辑演示文稿。\n\n## 技术栈\n\n### 前端\n- **React 18** + **TypeScript** - 现代React开发\n- **Vite** - 快速构建工具\n- **TailwindCSS** - 实用优先的CSS框架\n- **Zustand** - 轻量级状态管理\n- **React Query** - 服务端状态管理\n- **Lucide React** - 图标库\n\n### 后端\n- **Node.js** + **Express** + **TypeScript** - 后端API服务\n- **Vercel AI SDK** - AI集成\n- **OpenAI/Anthropic** - AI模型支持\n- **Zod** - 类型验证\n- **fs-extra** - 文件操作\n\n## 功能特性\n\n### 核心功能\n- 🤖 **AI聊天助手** - 与AI对话来编辑PPT\n- 📱 **现代界面** - 左侧聊天，右侧预览的分栏布局\n- 🖼️ **实时预览** - 多张幻灯片网格预览\n- ✏️ **在线编辑** - AI驱动的内容编辑\n- 💾 **自动保存** - 编辑后自动保存到文件\n\n### AI功能\n- 📝 **内容编辑** - AI理解指令修改幻灯片内容\n- 🎨 **样式调整** - 保持或修改CSS样式\n- ✨ **内容生成** - AI生成新的幻灯片内容\n- 🔄 **智能对话** - 上下文感知的AI助手\n\n### 界面功能\n- 🔍 **缩放控制** - 50%-200%缩放预览\n- 📋 **批量选择** - 支持多选幻灯片操作\n- 🎯 **当前页面** - 高亮显示当前编辑的幻灯片\n- ⚡ **流式响应** - AI回复实时显示\n\n## 快速开始\n\n### 1. 安装依赖\n\n```bash\n# 安装所有依赖\nnpm run setup\n```\n\n### 2. 配置环境变量\n\n在 `backend/` 目录创建 `.env` 文件：\n\n```env\n# AI Provider Configuration\nOPENAI_API_KEY=your_openai_api_key_here\n# 或者\nANTHROPIC_API_KEY=your_anthropic_api_key_here\n\n# Server Configuration\nPORT=3001\nNODE_ENV=development\n\n# Slides Configuration (相对于backend/src的路径)\nSLIDES_DIR=../slides\n```\n\n### 3. 启动开发服务器\n\n```bash\n# 同时启动前端和后端\nnpm run dev\n\n# 或分别启动\nnpm run dev:frontend  # 前端: http://localhost:3000\nnpm run dev:backend   # 后端: http://localhost:3001\n```\n\n## API接口\n\n### Slides API\n\n```bash\nGET    /api/slides           # 获取所有幻灯片\nGET    /api/slides/:index    # 获取特定幻灯片内容\nPUT    /api/slides/:index    # 更新幻灯片内容\nPOST   /api/slides           # 创建新幻灯片\nDELETE /api/slides/:index    # 删除幻灯片\n```\n\n### AI API\n\n```bash\nGET  /api/ai/models          # 获取可用的AI模型\nPOST /api/ai/chat            # AI聊天对话\nPOST /api/ai/edit-slide      # AI编辑幻灯片\nPOST /api/ai/generate-slide  # AI生成新幻灯片\n```\n\n## 项目结构\n\n```\nai-editor/\n├── package.json                 # 根package.json\n├── frontend/                    # React前端\n│   ├── src/\n│   │   ├── components/         # React组件\n│   │   │   ├── ChatPanel.tsx   # 聊天面板\n│   │   │   ├── PreviewPanel.tsx # 预览面板\n│   │   │   └── SlidePreview.tsx # 单个幻灯片预览\n│   │   ├── hooks/              # React Hooks\n│   │   │   ├── useSlides.ts    # 幻灯片数据管理\n│   │   │   └── useAI.ts        # AI功能集成\n│   │   ├── stores/             # Zustand状态管理\n│   │   │   └── useAppStore.ts  # 全局应用状态\n│   │   ├── types/              # TypeScript类型定义\n│   │   ├── utils/              # 工具函数\n│   │   └── App.tsx             # 主应用组件\n│   ├── vite.config.ts          # Vite配置\n│   └── tailwind.config.js      # Tailwind配置\n└── backend/                     # Node.js后端\n    ├── src/\n    │   ├── routes/             # API路由\n    │   │   ├── slides.ts       # 幻灯片管理API\n    │   │   └── ai.ts           # AI功能API\n    │   └── index.ts            # 服务器入口\n    ├── tsconfig.json           # TypeScript配置\n    └── .env.example            # 环境变量示例\n```\n\n## 使用方法\n\n### 基本使用\n\n1. 启动应用后，左侧显示AI聊天界面，右侧显示幻灯片预览\n2. 与AI聊天，例如：\"帮我修改第1张幻灯片的标题\"\n3. AI会理解你的需求并执行相应操作\n4. 修改会自动保存到对应的HTML文件中\n\n### AI对话示例\n\n```\n用户: 帮我修改第一张幻灯片，把标题改成\"欢迎使用AI编辑器\"\nAI: 我来帮你修改第一张幻灯片的标题...\n\n用户: 创建一张关于技术架构的新幻灯片\nAI: 我来为你创建一张技术架构的幻灯片...\n\n用户: 把第二张幻灯片的背景色改成蓝色\nAI: 我来修改第二张幻灯片的背景色...\n```\n\n## 兼容性\n\n- 与现有的html-slide-player框架完全兼容\n- 支持现有的slides.js配置格式\n- 保持1280x720的幻灯片尺寸标准\n- 维护现有的CSS样式规范\n\n## 开发说明\n\n### 添加新的AI功能\n\n在 `backend/src/routes/ai.ts` 中添加新的路由：\n\n```typescript\nrouter.post('/new-feature', async (req, res) =\u003e {\n  // 新的AI功能实现\n});\n```\n\n### 添加新的UI组件\n\n在 `frontend/src/components/` 中创建新组件：\n\n```typescript\nexport const NewComponent: React.FC = () =\u003e {\n  // 组件实现\n};\n```\n\n### 状态管理\n\n使用Zustand进行全局状态管理，在 `useAppStore.ts` 中添加新状态：\n\n```typescript\ninterface AppState {\n  newState: SomeType;\n  setNewState: (value: SomeType) =\u003e void;\n}\n```\n\n## 许可证\n\nMIT License","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffkit%2Fppt-ai-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffkit%2Fppt-ai-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffkit%2Fppt-ai-editor/lists"}