返回 oh-my-ppt
README_EN.md
根目录 / README_EN.md
1 <div align="center">
2 <img src="thumb.png" alt="Oh My PPT" width="200" />
3 <br/>
4 <br/>
5
6 ![AI PPT Generator](https://img.shields.io/badge/AI%20PPT-Generator-2f6d49)
7 ![PPTX](https://img.shields.io/badge/PPTX-Import%20%26%20Export-1769aa)
8 ![AI Image Generation](https://img.shields.io/badge/AI%20Images-Generation-9a5b36)
9 ![Local-first](https://img.shields.io/badge/Local--first-Private-3b7a57)
10 ![License](https://img.shields.io/badge/license-Apache--2.0-green)
11 ![Electron](https://img.shields.io/badge/Electron-Desktop-47848f)
12 ![React](https://img.shields.io/badge/React-App-61dafb)
13 ![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178c6)
14
15 **Oh My PPT - Local-first AI Slide Deck, Image Generation & Editing Workbench**
16
17 [中文](./README.md) | [Why](#why) • [Features](#features) • [Workflow](#workflow) • [Changelog](./CHANGELOG.md) • [Usage Notes](#usage-notes)
18
19 <p>
20 AI-powered editable HTML, reinventing how next-generation presentations are made.<br/>
21 Describe what you want to say and let AI shape the outline, slides, and visuals.<br/>
22 Create, edit, present, and export in one local-first workflow.<br/>
23 Local-first · Your models, your workflow.
24 </p>
25
26 [Website](https://www.ohmyppt.cc) | [Download](https://github.com/arcsin1/oh-my-ppt/releases)
27
28 <img src="./docs/images/OhMyPPT.png"/>
29
30 </div>
31
32 ---
33
34 <a id="sponsors-list"></a>
35 ## 🏢 Sponsors
36
37 | Sponsor | About |
38 | --- | --- |
39 | <a href="https://www.toumingren.xyz/" target="_blank"><img src="./docs/images/toumingren.png" width="200" alt="toumingren" /></a> | [Toumingren](https://www.toumingren.xyz/) — Turn subscriptions into a programmable API. No black boxes — just a transparent middle layer. |
40
41 <a id="sponsors"></a>
42 ## 💖 Backers
43
44 Thanks to everyone who has supported Oh My PPT — see [SponsorsList.md](./SponsorsList.md) for the full list.
45
46 ---
47
48 ## Table of Contents
49
50 - [Sponsors](#sponsors-list)
51 - [Backers](#sponsors)
52 - [Why I Built This](#why)
53 - [Import Legacy PPTX Templates for Editing](#pptx-import)
54 - [Export Editable PPTX from the Desktop App](#pptx-export)
55 - [What It Can Do](#features)
56 - [Workflow](#workflow)
57 - [90+ Built-in Style Skills](#style-skills)
58 - [AI Image Generation & Smart Visuals](#image-generation)
59 - [Font Management](#fonts)
60 - [Animation Support](#animations)
61 - [Local Ollama Support](#ollama)
62 - [Usage Notes](#usage-notes)
63 - [Configure your models first](#config)
64 - [About preview mode](#preview)
65 - [About export](#export)
66 - [Opening Unsigned Apps](#unsigned-app)
67 - [Reference](#references)
68 - [Contributors](#contributors)
69 - [License](#license)
70
71 ---
72
73 <a id="why"></a>
74 ## 🎯 Why I Built This
75
76 **Making AI-powered HTML presentations possible.**
77
78 Every time I needed to prepare a talk, report, pitch, or defense, most of the time went into layout tweaks.
79
80 There are many AI PPT tools, but most output fixed-format files. Fine-tuning styles or adding custom animation demos is still painful.
81
82 So I built my own HTML-based PPT generator, originally as a personal tool.
83
84 Output is pure HTML slides: instant browser preview, no extra software, easy to tweak styles, add motion, embed code, and export to PDF / PNG / editable PPTX.
85
86 <a id="pptx-import"></a>
87 ## 📥 Import Legacy PPTX Templates for Editing, Close to 100% Fidelity
88
89 Bring existing PPTX templates, past reports, or client files into the desktop app and keep editing. Typical PPTX imports restore close to **100%** of the original visual and structural result, converting files into pages you can drag, adjust, modify with AI, and manage through version history. Imported files can also yield reusable styles for future work.
90
91 Parsing and structured conversion are **fully in-house**; complex shapes, charts, tables, and animations continue to improve, and fidelity varies with the source file's features, fonts, and asset complexity.
92
93 <a id="pptx-export"></a>
94 ## 📤 Export Editable PPTX from the Desktop App, Close to 100% Fidelity
95
96 After creating or editing in the desktop app, export a true PPTX that remains editable in PowerPoint / Keynote. In typical cases, the exported file preserves close to **100%** of its visual and structural result, including text, images, colors, formulas, and basic layout where possible.
97
98 HTML-to-editable-PPTX generation and layout are **fully in-house**; complex charts, tables, shapes, and animations are still being improved.
99
100 <a id="features"></a>
101 ## ✅ What It Can Do
102
103 - 📥 **Import legacy PPTX templates for editing, close to 100% fidelity** — Imported files become pages you can drag, adjust, modify with AI, and manage through version history; parsing and conversion are fully in-house
104 - 📤 **Export editable PPTX from the desktop app, close to 100% fidelity** — Export decks as true PPTX files that remain editable in PowerPoint / Keynote; generation and layout are fully in-house
105 - 💬 **Topic-based creation** — Set the topic, detailed brief, and page options; AI plans the outline, palette, and layout, then generates a complete deck
106 - 🔀 **Multi-task generation** — Submit multiple generation tasks in parallel without waiting for one to finish before starting another, with automatic notifications on completion
107 - 📐 **Multi-size, multi-format canvases** — 16:9, 4:3, vertical 9:16, portrait 3:4, square 1:1, Xiaohongshu/social-note formats and more, with the real aspect ratio preserved from generation to export
108 - 📄 **Document-based creation** — Upload txt, md, csv, or docx files and the app prepares the topic, page count, and brief automatically; generation keeps referencing the source document to produce creative decks grounded in your content
109 - 🧱 **Template library and template creation** — Save generated or edited decks as templates, import PPTX files as templates, and reuse templates to create new PPT sessions
110 - 🖼️ **Image-based style and outline generation** — Upload a screenshot or design mockup to automatically extract a distinctive visual style and generate an outline (requires a multimodal AI model)
111 - 🖼️ **AI image generation and smart visuals** — Enable automatic visuals while creating a deck. AI generates illustrations, backgrounds, and visual assets only where the current content, layout, and chosen style call for them, instead of forcing an image onto every slide
112 - ✨ **In-editor image studio** — Generate a prompt from the current slide title and outline, add your own direction and image size, then preview the result, add it to the canvas, or make it the slide background
113 - 🏷️ **Image-generation style filtering** — The style library marks styles that support image generation, so automatic visuals can follow the deck's visual direction
114 - 🔒 **Local-first** — Sessions, source documents, assets, and generated results stay on your computer. No Oh My PPT account or platform cloud is required. Requests made to your configured AI or image service are sent to that provider
115 - 🔤 **Font management** — 14 curated Google Fonts built-in (including CJK), upload local fonts, pick title and body fonts separately or let AI auto-match
116 - 🎨 **90+ built-in style skills** — Minimal White, Cyber Neon, Bauhaus, Japanese Minimal, Xiaohongshu White, and more, plus custom styles
117 - ✏️ **Chat-based editing** — Tell it "change title color" or "add a data chart" on a specific page, without rebuilding everything
118 - 🖱️ **Visual editing** — Every visible element can be dragged and resized, and every element can be picked and modified with AI
119 - 📸 **Image and video insertion** — Upload images and videos directly in edit mode from the asset library or local files, and use them alongside AI-generated images
120 - 📋 **Element duplication** — One-click copy of any element (text, images, videos, etc.), auto-offset and independently editable
121 - ↩️ **Undo and redo** — Undo and redo edits freely before committing, then save as a version history entry
122 - 🗑️ **Element deletion** — Delete any element with a click or keyboard shortcut
123 - 🖥️ **Presentation mode** — Enter fullscreen presentation with one click, navigate slides with arrow keys or clicks
124 - 📝 **Speaker script generation** — Generate scripts for the full deck or the current slide, with formal, casual conversational, storytelling, and custom styles
125 - 🎬 **Animation support** — 16+ slide transition effects plus Anime.js v4-powered whole-element motion
126 - 🎞️ **Per-element animation controls** — Select individual text, image, chart, or other elements while editing, then configure entrance, emphasis, or exit effects with automatic/click triggers, duration, and direction
127 - 🧮 **Math formula rendering** — Display common LaTeX formulas for classes, teaching decks, and technical talks
128 - 📄 **Other export formats** — Export to PDF, batch PNG, PNG long image, or MP4 video
129 - 🏷️ **Session management** — Session list distinguishes AI-created decks from imported PPTX decks, and deck names can be renamed
130 - 🧩 **More reliable page layout** — Generation follows the selected canvas size and content-height budget to reduce overflow
131 - 🔄 **Version history rollback** — Every edit is automatically saved, roll back to any previous version with one click, never worry about mistakes
132 - 📦 **One-click packaging** — Bundle your HTML deck into a single executable file, double-click to open and present anywhere, no installation needed (just a browser)
133 - 💾 **Creative deck import & export** — Export the session's AI-generated creative deck from the editor in one click, import it on another computer to continue editing, and collaborate seamlessly across devices
134
135 <p>
136 <img width="32%" alt="Oh My PPT Home" src="./docs/images/home.webp" />
137 <img width="32%" alt="Oh My PPT Style Library" src="./docs/images/style.webp" />
138 <img width="32%" alt="Oh My PPT Editor" src="./docs/images/edit.webp" />
139 </p>
140
141 <a id="workflow"></a>
142 ## 🔄 Workflow
143
144 > 💡 Import a legacy PPTX template to keep editing, or choose a creation mode → confirm topic / materials / page count / canvas format / style / fonts / visuals → AI generates the HTML deck → preview, present, and edit → export an editable PPTX from the desktop app with close to 100% fidelity, PDF / PNG / PNG long image / MP4 / packaged HTML
145
146 <img src="./docs/images/home.webp" alt="Oh My PPT Home Entry Points" width="600" />
147
148 The home page supports several common entry points:
149
150 - **Topic-based creation**: set the topic, canvas format, and detailed brief to create a complete deck, vertical page, square card, or Xiaohongshu/social-note format.
151 - **Chat to Create**: use a multi-turn conversation to clarify the topic, materials, audience, structure, and key points for each slide. This is useful when requirements are still unclear, the source material is complex, or you want to shape the outline together first.
152 - **Upload document parsing**: upload txt, md, csv, docx, and other files so the app can prepare the topic, page count, and detailed description, then keep referencing the source file during generation.
153 - **Create from template**: choose a saved template from the Templates page to copy it into an editable PPT session, or enter a new topic/outline or upload a document so the app regenerates content while preserving the template's layout, palette, and visual rhythm.
154
155 To import a legacy PPTX template, click "Import PPTX" on the home page; typical files are restored with close to 100% fidelity for further editing. Existing sessions can also be saved to the template library and reused.
156
157 After configuring and verifying an image model in **Settings**, enable **Image Generation** on the creation page and pick a style marked **Image generation**; visuals are produced only where they genuinely improve the page. Automatic visuals add generation time — you can still generate images on demand in the editor when it is off.
158
159 After generation, preview or present the deck, keep editing (drag elements, insert images/videos, chat edits, roll back history, generate speaker scripts), and export — imported or newly created alike — as an editable PPTX with close to 100% fidelity.
160
161 <a id="style-skills"></a>
162 ## 🎨 90+ Built-in Style Skills
163
164 To create your own Style Skill, use the official style generation package: [arcsin1/style-generate-skill](https://github.com/arcsin1/style-generate-skill). It helps turn reference designs, palettes, and layout requirements into importable Oh My PPT style packages.
165
166 <img src="./docs/images/style.webp" alt="Oh My PPT Style Library" width="600" />
167
168 <a id="image-generation"></a>
169 ## 🖼️ AI Image Generation & Smart Visuals
170
171 Image generation has two entry points for deck-wide visuals and targeted additions:
172
173 | Use case | How to use it | Result |
174 | --- | --- | --- |
175 | Create a full deck | Add and **verify** an image model under **Settings → Image Models**, enable **Image Generation** on the creation page, and choose a style marked **Image generation** | AI produces illustrations, backgrounds, or visual elements only in suitable layout slots, preserving text-safe space and the selected visual style |
176 | Edit an existing slide | Open the editor's image-generation panel, generate a prompt from the current slide or write one yourself, then choose a model and size | Preview the generated image, add it to the canvas for layout work, or set it as the current slide background |
177
178 Built-in provider presets include Jimeng 3.0 / 4.0, Agnes AI, Seedream, SiliconFlow, Gemini, and OpenAI-compatible image APIs; text and image models are configured separately. Image configurations are saved only after passing a real test under **Settings → Image Models**.
179
180 Successful outputs are archived in the session's local asset directory, ready to edit, replace, export, or move with the session. Automatic visuals keep the canvas format and never replace images you uploaded. Image requests are sent to the provider you choose — follow its privacy and content policies.
181
182 <a id="fonts"></a>
183 ## 🔤 Font Management
184
185 14 curated Google Fonts are built in (including CJK families). You can also upload local `.woff2` font files and customize the font name, category (sans-serif, serif, handwriting, monospace, and more), role (title / body), and script type (Latin / CJK).
186
187 When creating a deck, you can choose **title fonts** and **body fonts** separately, or let AI automatically match the best font pair based on the topic and style. When exporting to PPTX, used fonts are automatically embedded so the deck displays consistently on other computers.
188
189 <a id="animations"></a>
190 ## 🎬 Animation Support
191
192 Oh My PPT generates HTML slides with 16+ slide transition effects and a local **Anime.js v4** runtime. During generation or chat-based editing, the AI can add presentation motion to whole slide elements such as titles, metric cards, images, chart containers, and step blocks.
193
194 In addition to AI-generated motion, edit mode lets you select an individual element and configure its entrance, emphasis, or exit effect, together with automatic or click triggering, duration, and direction.
195
196 Animations are designed for real presentation flow: content can appear step by step with the speaker's rhythm instead of showing everything on the slide at once. This works well for reports, pitches, classes, and product walkthroughs.
197
198 Common animation expressions include:
199
200 - **Fade in**: lightweight transitions when modules appear.
201 - **Slide-in motion**: short movement from top, bottom, left, or right for titles, cards, and lists.
202 - **Scale emphasis**: gently enlarge key numbers or conclusion cards, then settle back.
203 - **Staggered reveal**: reveal cards or bullets one after another.
204 - **Click-to-reveal**: reveal content step by step during presentation, so the deck follows your speaking pace.
205
206 Whole-element animation is preferred over splitting text into many tiny moving fragments. It keeps slides readable, stable, and easier to export or edit later. Animations are meant to guide attention and show hierarchy, so complex timelines, high-frequency flashing, infinite loops, and large shaking motion are not recommended.
207
208 <p>
209 <img src="./docs/images/anime.webp" alt="Oh My PPT Animation Settings" width="40%" />
210 <img src="./docs/video/anime.gif" alt="Oh My PPT Animation Demo" width="40%" />
211 </p>
212
213 <a id="ollama"></a>
214 ## 🦙 Local Ollama Support (OpenAI-Compatible)
215
216 This project supports local Ollama through the **OpenAI-compatible API**.
217
218 Fill the Settings page like this:
219
220 - `provider`: `openai`
221 - `base_url`: `http://127.0.0.1:11434/v1`
222 - `model`: your local model tag (for example `qwen2.5-coder:14b`); a 14B+ model (or a strong cloud model) is recommended
223 - `api_key`: any non-empty string (for example `ollama`)
224
225 Notes:
226
227 - Ollama does not validate API keys by default, but this app enforces a non-empty check, so `api_key` cannot be blank.
228 - 14B+ local models (or strong cloud models) are recommended for stable generation quality.
229 - Official OpenAI endpoints do not receive the non-standard `thinking` parameter, avoiding `400 Unknown parameter` responses. Other OpenAI-compatible `base_url` values still request disabled thinking so multi-turn tool flows do not lose `reasoning_content`.
230 - The Ollama setup is for text generation, document parsing, and chat editing. Configure an image-capable provider separately under **Settings → Image Models** for image generation or automatic visuals.
231
232 <a id="usage-notes"></a>
233 ## Usage Notes
234
235 <a id="config"></a>
236 ### Configure your models first
237
238 > Recommended: DeepSeek V4, Kimi, Doubao, Qwen, GLM, MiMo, MiniMax and other Chinese models, plus GPT, Claude and other international models.
239
240 Set up the model for creation, document parsing, and editing under **Settings → Text Models**. Deck generation cannot start without it.
241
242 For AI image generation or automatic visuals, add the provider's full JSON configuration under **Settings → Image Models** and select **Verify**. Verification generates a real test image; it must succeed before the configuration can be saved, then it can be selected on the creation page and in the editor.
243
244 <a id="preview"></a>
245 ### About preview mode
246
247 Navigate slides with the left/right arrow keys; presentation mode and fullscreen presentation mode are both supported, and `ESC` exits the presentation.
248
249 <a id="export"></a>
250 ### About export
251
252 Oh My PPT currently supports five export modes, plus standalone HTML packaging:
253
254 - **PDF**: best for sharing, archiving, and printing.
255 - **PNG**: batch-export every slide as an image for docs, Notion, articles, or social posts.
256 - **PNG long image**: stitch the full set of pages vertically into one long image for social posts, chat sharing, long-document previews, and mobile reading.
257 - **Editable PPTX**: fully in-house export foundation, close to 100% fidelity in typical cases, remains editable in PowerPoint / Keynote.
258 - **MP4**: export the presentation as a video for social posts, client sharing, or playback when a PPT file is not the best fit.
259 - **Packaged HTML**: bundle the deck and its runtime resources so it can be opened and presented in a browser with a double click.
260
261 <img src="./docs/images/edit2.webp" alt="Oh My PPT Export Menu" width="600" />
262
263 <img src="./docs/images/exp.webp" alt="Oh My PPT Export Content Preview" width="600" />
264
265 <a id="unsigned-app"></a>
266 ## 📦 Opening Unsigned Apps
267
268 Release builds may not be code-signed yet, so macOS or Windows can show security warnings on first launch. This usually does not mean the app is broken; it is the operating system blocking unsigned or unnotarized software by default.
269
270 ### macOS
271
272 If macOS says the app cannot be opened, is damaged, or cannot verify the developer, use either option below.
273
274 **Option 1: Right-click Open**
275
276 1. Open Finder or the Applications folder.
277 2. Find `OhMyPPT.app`.
278 3. Right-click the app and choose **Open**.
279 4. Click **Open** again in the confirmation dialog.
280
281 This usually only needs to be done once.
282
283 **Option 2: Clear the quarantine attribute**
284
285 If right-click Open still does not work, run:
286
287 ```bash
288 xattr -cr /Applications/OhMyPPT.app
289 ```
290
291 Then open the app again.
292
293 If you placed the app somewhere else, replace the path with the actual location, for example:
294
295 ```bash
296 xattr -cr ~/Downloads/OhMyPPT.app
297 ```
298
299 ### Windows
300
301 Unsigned installers may trigger Windows SmartScreen, such as "Windows protected your PC". This is expected for unsigned apps.
302
303 Steps:
304
305 1. Click **More info**.
306 2. Confirm the app name is `OhMyPPT`.
307 3. Click **Run anyway**.
308
309 If your browser or antivirus blocks the file, first confirm the installer came from this project's GitHub Releases page, then choose to keep or allow the file.
310
311 > Download builds only from the official Releases page when possible.
312
313 <a id="references"></a>
314 ## Reference
315
316 - [@arcsin1/pptx2json](https://www.npmjs.com/package/@arcsin1/pptx2json) — Oh My PPT's fully in-house foundation for editable PPTX import, parsing PPTX files into editable structured data. Support for complex shapes, charts, tables, animations, and more will continue to improve.
317 - [@arcsin1/html2pptx](https://www.npmjs.com/package/@arcsin1/html2pptx) — Oh My PPT's fully in-house foundation for editable PPTX export, converting HTML into true, editable PPTX files. Support for complex shapes, charts, tables, animations, and more will continue to improve.
318 - [arcsin1/style-generate-skill](https://github.com/arcsin1/style-generate-skill) — the official Oh My PPT style-generation Skill for turning reference designs, palettes, layouts, and scenario requirements into importable style packages.
319 - [ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
320 - [html-ppt-skill](https://github.com/lewislulu/html-ppt-skill)
321
322 <a id="contributors"></a>
323 ## Contributors
324
325 Thanks to all contributors!
326
327 <p>
328 <a href="https://github.com/m13891290332"><img src="https://github.com/m13891290332.png" width="50" height="50" alt="m13891290332" /></a>
329 <a href="https://github.com/whisper-xiang"><img src="https://github.com/whisper-xiang.png" width="50" height="50" alt="whisper-xiang" /></a>
330 <a href="https://github.com/Jacobinwwey"><img src="https://github.com/Jacobinwwey.png" width="50" height="50" alt="Jacobinwwey" /></a>
331 </p>
332
333 <a id="license"></a>
334 ## License
335
336 This project is licensed under the [Apache License 2.0](LICENSE) © 2026 arcsin1 &lt;zy19931129@gmail.com&gt;.
337
337 lines MARKDOWN