LangChat Slides - Next-Gen AI Slide Generator

<div align="center">

LangChat Slides is an intelligent slide generation tool powered by Generative AI. Built by the LangChat Team.

<img src="docs/slides.gif" alt="LangChat Slides Demo" width="800" />

Website · Preview · Documentation · GitHub · Report Bug

🇨🇳 中文文档 | English README

加入微信交流群：LangchainChat（备注：AI应用开发学习）

</div>

---

📖 About LangChat Pro

LangChat Pro is an enterprise-level AIGC (AI-Generated Content) platform and a full-stack AI application system built on Spring Boot 3 + LangChain4j + Vue3 + VueFlow.

LangChat Slides is one of the flagship products of LangChat Pro, leveraging the powerful model capabilities of LangChat and the visualization engine of @antv/infographic. Users can simply input natural language descriptions to instantly generate clear, well-designed infographic slides.

💎 About LangChat Pro Commercial Edition

LangChat Pro is an enterprise-grade AIGC application development platform commercial edition built on the Java ecosystem, providing enterprises with complete AI large model integration solutions. Built on Spring Boot 3 and Vue 3, it supports rapid development of intelligent knowledge bases, multimodal AI applications, and intelligent workflows, helping enterprises achieve AI-driven digital transformation.

Official Website: http://langchat.cn/

Open Source Edition: https://github.com/tycoding/langchat (Basic features)

Commercial Edition Consultation: Add WeChat LangchainChat (Note: Company Name + [Consultation Content])

---

🎯 Product Features

🎨 Core Capabilities

• 🤖 AI-Powered Generation: Generate professional slides instantly with natural language descriptions
• ⚡ Real-Time Streaming: Watch slides render in real-time as AI generates content (WYSIWYG)
• 🎯 Intelligent Layout: Declarative syntax auto-adapts to optimal visual layouts,告别繁琐的 PPT 拖拽
• 💬 Conversational Editing: Chat with AI to refine - "Change title to red" or "Add a timeline"
• 📄 Multi-Page Support: Generate multiple pages with thumbnail navigation
• 🎨 Rich Templates: 30+ built-in infographic templates (timeline, charts, lists, etc.)
• 🌐 Theme Customization: Light/Dark modes with multiple color palettes
• 📤 Easy Export: One-click export to PDF, PNG, SVG, JPG, WebP, or PPT

🎨 Visual Experience

• Modern UI: Built with Shadcn UI and Tailwind CSS for a premium, minimal design
• Responsive Layout: Adapts perfectly to different screen sizes
• Real-Time Preview: Instant feedback as you type or adjust
• Code Editor: View and edit slide syntax directly with live rendering

🧠 AI Intelligence

• Smart Understanding: Interprets natural language to generate appropriate layouts
• Streaming Response: Real-time content updates as AI thinks and generates
• Markdown Compatibility: Automatically handles AI responses with markdown code blocks
• Multi-Model Support: Compatible with OpenAI GPT-4, GPT-3.5, and other models

🛠️ Advanced Features

• Split/Append Mode: Choose to replace or append new slides
• Custom Slides: Manually create slides with infographic syntax
• Slide Management: Add empty slides, clear all slides, switch between pages
• Zoom Controls: Adjust canvas scale from 50% to 250%
• Keyboard Shortcuts: Efficient workflow with hotkeys
• i18n Support: Built-in English and Chinese language options

---

🏗️ Project Architecture

Overall Architecture

┌─────────────────────────────────────────────────────────────┐
│                     LangChat Slides                        │
│                   (Vue 3 + TypeScript)                    │
├─────────────────────────────────────────────────────────────┤
│  UI Layer                                                  │
│  ├── App.vue (Main Container)                               │
│  ├── Layout Components                                       │
│  │   ├── Header (Navigation & Settings)                      │
│  │   └── ResizablePanel (Split View)                        │
│  │       ├── Left Panel (Input & Code)                       │
│  │       │   ├── ControlBar (Theme & Page Count)              │
│  │       │   ├── PromptInput (Chat Input)                    │
│  │       │   ├── ExampleGenerator (Quick Templates)            │
│  │       │   └── CodeEditor (Syntax Editor)                 │
│  │       └── Right Panel (Preview & Navigation)               │
│  │           ├── SlidesContainer                             │
│  │           │   ├── SlideThumbnail (Page Navigation)          │
│  │           │   └── SlidesCanvas                           │
│  │           │       ├── SlidesHeader (Toolbar)              │
│  │           │       └── SlidePreview (Canvas)              │
│  │           └── SlideWelcome (Empty State)                   │
│  └── Dialog Components                                      │
│      ├── SettingsDialog (API Configuration)                    │
│      └── CustomSlideDialog (Manual Input)                    │
├─────────────────────────────────────────────────────────────┤
│  Business Logic Layer                                        │
│  ├── useSlideGenerator (Slide Generation Logic)               │
│  │   ├── Streaming Response Handling                         │
│  │   ├── Markdown Cleaning                                 │
│  │   └── Multi-Page Generation                           │
│  └── useI18n (Internationalization)                         │
├─────────────────────────────────────────────────────────────┤
│  State Management (Pinia Store)                               │
│  └── useAppStore                                           │
│      ├── Slides State (slides[], currentIndex)                 │
│      ├── Theme State (dark/light, palette, sketch)             │
│      ├── API Configuration (apiKey, baseUrl, model)            │
│      ├── UI State (isStreaming, canvasScale)                 │
│      └── Export State (exportRequest)                        │
├─────────────────────────────────────────────────────────────┤
│  Integration Layer                                          │
│  ├── useAI (OpenAI API Integration)                         │
│  │   ├── Stream Chat (Real-time)                           │
│  │   └── Error Handling                                  │
│  └── @antv/infographic (Visualization Engine)              │
│      ├── Slide Rendering                                    │
│      ├── Theme Application                                  │
│      └── Export (PNG/SVG/PDF)                            │
├─────────────────────────────────────────────────────────────┤
│  Utility Layer                                              │
│  ├── slide-utils.ts (Template Management)                     │
│  └── utils.ts (Helper Functions)                           │
└─────────────────────────────────────────────────────────────┘

Data Flow

User Input (Prompt)
       ↓
┌─────────────────────────────────────────┐
│ 1. Input Processing                  │
│    - Prompt captured                 │
│    - Theme & page count selected     │
│    - AI model configured            │
└─────────────────────────────────────────┘
       ↓
┌─────────────────────────────────────────┐
│ 2. AI Request (Streaming)           │
│    - Send to OpenAI API             │
│    - Receive chunks in real-time      │
│    - Clean markdown code blocks       │
└─────────────────────────────────────────┘
       ↓
┌─────────────────────────────────────────┐
│ 3. Content Parsing                 │
│    - Extract infographic syntax      │
│    - Validate structure            │
│    - Create slide objects          │
└─────────────────────────────────────────┘
       ↓
┌─────────────────────────────────────────┐
│ 4. State Update (Pinia)            │
│    - Update slides array             │
│    - Set current slide index        │
│    - Trigger reactive updates      │
└─────────────────────────────────────────┘
       ↓
┌─────────────────────────────────────────┐
│ 5. Real-Time Rendering              │
│    - Update CodeEditor (left)      │
│    - Update SlidePreview (right)    │
│    - Check syntax completeness     │
│    - Render with @antv/infographic │
└─────────────────────────────────────────┘
       ↓
┌─────────────────────────────────────────┐
│ 6. User Interaction                │
│    - Manual editing in CodeEditor   │
│    - Click thumbnails to navigate   │
│    - Adjust theme/settings         │
│    - Trigger re-render            │
└─────────────────────────────────────────┘
       ↓
┌─────────────────────────────────────────┐
│ 7. Export (Optional)               │
│    - Canvas to image (html2canvas)  │
│    - Image to PDF (jspdf)          │
│    - Download file                 │
└─────────────────────────────────────────┘

---

📁 Directory Structure

langchat-slides/
├── docs/                           # Documentation
│   ├── infographic-api.md           # Infographic API reference
│   ├── PPT_EXPORT_GUIDE.md        # Export guide
│   ├── PRODUCT.md                 # Product documentation
│   ├── REQUIREMENTS.md            # Requirements & implementation
│   ├── slides.gif                # Demo GIF
│   └── workflows.jpg            # Workflow diagram
│
├── public/                        # Static assets
│   └── favicon.ico              # Website ico