返回 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="https://arcsin1.github.io/ppt2.gif" alt="Oh My PPT" width="600" />
29
30 </div>
31
32 ---
33
34 ## Table of Contents
35
36 - [Why I Built This](#why)
37 - [Import Legacy PPTX Templates for Editing](#pptx-import)
38 - [Export Editable PPTX from the Desktop App](#pptx-export)
39 - [What It Can Do](#features)
40 - [Workflow](#workflow)
41 - [90+ Built-in Style Skills](#style-skills)
42 - [AI Image Generation & Smart Visuals](#image-generation)
43 - [Font Management](#fonts)
44 - [Animation Support](#animations)
45 - [Local Ollama Support](#ollama)
46 - [Usage Notes](#usage-notes)
47 - [Configure your models first](#config)
48 - [How to add images, videos, and AI visuals to a PPT](#assets)
49 - [About preview mode](#preview)
50 - [About export](#export)
51 - [Opening Unsigned Apps](#unsigned-app)
52 - [Feedback & Requests](#feedback)
53 - [Sponsor Support](#sponsor)
54 - [Reference](#references)
55 - [Sponsors](#sponsors)
56 - [Contributors](#contributors)
57 - [License](#license)
58
59 ---
60
61 <a id="why"></a>
62 ## 🎯 Why I Built This
63
64 **Making AI-powered HTML presentations possible.**
65
66 Every time I needed to prepare a talk, report, pitch, or defense, most of the time went into layout tweaks.
67
68 There are many AI PPT tools, but most output fixed-format files. Fine-tuning styles or adding custom animation demos is still painful.
69
70 So I built my own HTML-based PPT generator, originally as a personal tool.
71
72 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.
73
74 <a id="pptx-import"></a>
75 ## 📥 Import Legacy PPTX Templates for Editing, Close to 100% Fidelity
76
77 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.
78
79 PPTX parsing and conversion to structured editable data are **fully developed in-house** by Oh My PPT. Complex shapes, charts, tables, animations, mixed text, and extreme layouts continue to improve; actual fidelity varies with the source file's PowerPoint features, fonts, and asset complexity.
80
81 <a id="pptx-export"></a>
82 ## 📤 Export Editable PPTX from the Desktop App, Close to 100% Fidelity
83
84 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.
85
86 HTML-to-editable-PPTX generation and layout handling are **fully developed in-house** by Oh My PPT. Text overlap, mixed text, complex charts, tables, shapes, and animations are still being improved.
87
88 <a id="features"></a>
89 ## ✅ What It Can Do
90
91 - 📥 **Import legacy PPTX templates for editing, close to 100% fidelity** — Bring existing templates and past files into the desktop app as pages you can drag, adjust, modify with AI, and manage through version history; parsing and structured conversion are fully in-house
92 - 📤 **Export editable PPTX from the desktop app, close to 100% fidelity** — Export newly created or edited decks as true PPTX files that remain editable in PowerPoint / Keynote; generation and layout are fully in-house, with complex objects still improving
93 - 💬 **Topic-based creation** — Set the topic, detailed brief, and page options; AI plans the outline, palette, and layout, then generates a complete deck
94 - 🔀 **Multi-task generation** — Submit multiple generation tasks in parallel without waiting for one to finish before starting another, with automatic notifications on completion
95 - 📐 **Multi-size, multi-format canvases** — Beyond traditional PPT sizes, create widescreen decks, 4:3 projection slides, vertical 9:16 pages, portrait 3:4 pages, square 1:1 cards, Xiaohongshu/social-note formats, and more, with generation, preview, editing, and export preserving the real aspect ratio
96 - 📄 **Document-based creation** — Upload txt, md, csv, or docx files to prepare topic, page count, and description automatically, then keep using the source document during generation
97 - 🧱 **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
98 - 🖼️ **Image-based style and outline generation** — Upload a screenshot or design mockup, then automatically extract a distinctive visual style and generate an outline
99 - 🖼️ **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
100 - ✨ **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
101 - 🏷️ **Image-generation style filtering** — The style library marks styles that support image generation, so automatic visuals can follow the deck's visual direction
102 - 🔒 **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
103 - 🔤 **Font management** — 14 curated Google Fonts built-in (including CJK), upload local fonts, pick title and body fonts separately or let AI auto-match
104 - 🎨 **90+ built-in style skills** — Minimal White, Cyber Neon, Bauhaus, Japanese Minimal, Xiaohongshu White, and more, plus custom styles
105 - ✏️ **Chat-based editing** — Tell it “change title color” or “add a data chart” on a specific page, without rebuilding everything
106 - 🖱️ **Visual editing** — Every visible element can be dragged and resized, and every element can be picked and modified with AI
107 - 📸 **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
108 - 📋 **Element duplication** — One-click copy of any element (text, images, videos, etc.), auto-offset and independently editable
109 - ↩️ **Undo and redo** — Undo and redo edits freely before committing, then save as a version history entry
110 - 🗑️ **Element deletion** — Delete any element with a click or keyboard shortcut
111 - 🖥️ **Presentation mode** — Enter fullscreen presentation with one click, navigate slides with arrow keys or clicks
112 - 📝 **Speaker script generation** — Generate scripts for the full deck or the current slide, with formal, casual conversational, storytelling, and custom styles
113 - 🎬 **Animation support** — 16+ slide transition effects plus Anime.js v4-powered whole-element motion
114 - 🎞️ **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
115 - 🧮 **Math formula rendering** — Display common LaTeX formulas for classes, teaching decks, and technical talks
116 - 📄 **Other export formats** — Export to PDF, batch PNG, PNG long image, or MP4 video
117 - 🏷️ **Session management** — Session list distinguishes AI-created decks from imported PPTX decks, and deck names can be renamed
118 - 🧩 **More reliable page layout** — Generation follows the selected canvas size and content-height budget to reduce overflow
119 - 🔄 **Version history rollback** — Every edit is automatically saved, roll back to any previous version with one click, never worry about mistakes
120 - 📦 **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)
121 - 💾 **AI-generated creative deck import & export** — Export your AI-generated creative deck from the editing page and import it on another computer to continue editing, making cross-device collaboration seamless
122
123
124 <p>
125 <img width="30%" alt="Oh My PPT - 9" src="https://arcsin1.github.io/imgs/home.webp" />
126 <img width="30%" alt="Oh My PPT - 10" src="https://arcsin1.github.io/imgs/exp.webp" />
127 <img width="30%" alt="Oh My PPT - 11" src="https://arcsin1.github.io/imgs/anime.webp" />
128 </p>
129
130 <img width="600" src="https://arcsin1.github.io/imgs/chat.webp" />
131
132 <a id="workflow"></a>
133 ## 🔄 Workflow
134
135 > 💡 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
136
137 The home page supports several common entry points:
138
139 - **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.
140 - **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.
141 - **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.
142 - **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.
143
144 Document parsing also checks whether the outline and page count match. For example, if the outline clearly contains five pages, the creation form will try to use five pages too. Your documents stay in the local workspace; the app only prepares them as AI-readable text.
145
146 If you already have a legacy PPTX template, click “Import PPTX” on the home page. Typical files are restored to editable in-app pages with close to 100% fidelity, ready for previewing, position adjustments, and chat editing.
147
148 Whether you edited an imported template or created a deck in the desktop app, export it from the client as a PPTX that remains editable in PowerPoint / Keynote, with close to 100% fidelity in typical cases.
149
150 You can also save an existing session to the template library, or import a PPTX as a template from the Templates page, then reuse the same structure and visual style to create new PPT sessions.
151
152 After configuring and verifying an image model in **Settings**, enable **Image Generation** on the creation page. When you choose a style marked **Image generation**, the creation flow will produce visuals where they genuinely improve the page, guided by the page content and the style direction. Automatic visuals add generation time; you can still generate images on demand in the editor when this option is off.
153
154 After generation, you can enter preview or presentation mode, keep editing by dragging elements, inserting images/videos, using chat edits, rolling back history, and generate speaker scripts for the full deck or the current slide.
155
156 <a id="style-skills"></a>
157 ## 🎨 90+ Built-in Style Skills
158
159 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.
160
161 <img src="./docs/images/4.webp" alt="Oh My PPT" width="500" />
162
163 <a id="image-generation"></a>
164 ## 🖼️ AI Image Generation & Smart Visuals
165
166 Image generation has two entry points for deck-wide visuals and targeted additions:
167
168 | Use case | How to use it | Result |
169 | --- | --- | --- |
170 | 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 |
171 | 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 |
172
173 You can configure multiple image services and choose a model while creating or editing. Built-in provider presets currently include Jimeng 3.0 / 4.0, Agnes AI, Seedream, SiliconFlow, Gemini, and OpenAI-compatible image APIs. Available dimensions, speed, cost, and content policies depend on the chosen provider.
174
175 Start by running a real test in **Settings → Image Models**. The app generates a test image at the default resolution, and the configuration can only be saved after it returns a visible image. Text models and image models are configured separately: for example, local Ollama can handle text generation, while automatic visuals still need an image-capable provider.
176
177 Automatic visuals retain the canvas format you selected and do not replace images you uploaded yourself. Successful outputs are archived in the current session's local asset directory, ready to edit, replace, export, or move with the session. When you submit an image request, its prompt and the necessary page semantics are sent to the image provider you selected; use it in accordance with that provider's privacy and content policies.
178
179 <a id="fonts"></a>
180 ## 🔤 Font Management
181
182 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).
183
184 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.
185
186 <img src="./docs/images/font.webp" alt="Oh My PPT" width="500" />
187
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="https://arcsin1.github.io/anime.gif" alt="Oh My PPT animation demo" width="40%" />
210 <img src="./docs/images/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`), recommended 14B+ (or a strong cloud model)
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, Xiaomi MiMo, MiniMax, and more 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 <img src="./docs/images/3.png" alt="Oh My PPT" width="500" />
245
246
247 <a id="assets"></a>
248 ### How to add images, videos, and AI visuals to a PPT
249
250 Local images and videos are copied into the current session's local asset directory. In the editor, insert them from the asset library or local files. You can also open the image-generation panel, let AI develop a prompt from the current page or write your own, and then add the result to the canvas or set it as the background.
251
252 Oh My PPT does not upload local assets to its own cloud service. However, an image-generation request is sent to the image provider you configured.
253
254 <img src="./docs/images/edit.webp" alt="Oh My PPT" width="500" />
255
256
257 <a id="preview"></a>
258 ### About preview mode
259
260 Supports keyboard navigation (Left/Right), presentation mode, fullscreen presentation mode, and `ESC` to exit presentation mode.
261
262 <img src="./docs/images/2.png" alt="Oh My PPT" width="500" />
263
264 <a id="export"></a>
265 ### About export
266
267 Oh My PPT currently supports five export modes, plus standalone HTML packaging:
268
269 - **PDF**: best for sharing, archiving, and printing.
270 - **PNG**: batch-export every slide as an image for docs, Notion, articles, or social posts.
271 - **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.
272 - **Editable PPTX**: export with a fully in-house foundation to a file that remains editable in PowerPoint / Keynote. Typical cases reach close to 100% fidelity while preserving text, images, colors, formulas, and basic layout; text overlap, mixed text, complex charts, tables, shapes, and animations are still being improved.
273 - **MP4**: export the presentation as a video for social posts, client sharing, or playback when a PPT file is not the best fit.
274 - **Packaged HTML**: bundle the deck and its runtime resources so it can be opened and presented in a browser with a double click.
275
276 <a id="unsigned-app"></a>
277 ## 📦 Opening Unsigned Apps
278
279 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.
280
281 ### macOS
282
283 If macOS says the app cannot be opened, is damaged, or cannot verify the developer, use either option below.
284
285 **Option 1: Right-click Open**
286
287 1. Open Finder or the Applications folder.
288 2. Find `OhMyPPT.app`.
289 3. Right-click the app and choose **Open**.
290 4. Click **Open** again in the confirmation dialog.
291
292 This usually only needs to be done once.
293
294 **Option 2: Clear the quarantine attribute**
295
296 If right-click Open still does not work, run:
297
298 ```bash
299 xattr -cr /Applications/OhMyPPT.app
300 ```
301
302 Then open the app again.
303
304 If you placed the app somewhere else, replace the path with the actual location, for example:
305
306 ```bash
307 xattr -cr ~/Downloads/OhMyPPT.app
308 ```
309
310 ### Windows
311
312 Unsigned installers may trigger Windows SmartScreen, such as “Windows protected your PC”. This is expected for unsigned apps.
313
314 Steps:
315
316 1. Click **More info**.
317 2. Confirm the app name is `OhMyPPT`.
318 3. Click **Run anyway**.
319
320 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.
321
322 > Download builds only from the official Releases page when possible.
323
324 <a id="feedback"></a>
325 ## 🙌 Feedback & Requests
326
327 If you have new requirements, feature ideas, or bug reports, feel free to open an Issue in this repository or join the feedback groups.
328 <p>
329 <a href="https://discord.gg/FSkzBgsQ"><img src="https://img.shields.io/badge/Discord-join-5865F2?logo=discord&logoColor=white" alt="Discord"></a>
330 &nbsp;&nbsp;|&nbsp;&nbsp;
331 <a href="https://arcsin1.github.io/v.png">📱 WeChat group</a>
332 &nbsp;&nbsp;|&nbsp;&nbsp;
333 <a href="https://arcsin1.github.io/qq.png">💬 QQ group</a>
334 </p>
335 I will keep following up and improving the experience.
336
337 <a id="sponsor"></a>
338 ## Sponsor Support
339
340 Oh My PPT is currently mainly developed and maintained by one person. If it helps you, you can sponsor the project a little (please do not exceed ¥5, and include your GitHub ID in the note). Thank you.
341
342 <p>
343 <img src="https://arcsin1.github.io/vv.jpg" alt="WeChat Pay" width="200" />
344 &nbsp;
345 <img src="https://arcsin1.github.io/zz.jpg" alt="Alipay" width="200" />
346 </p>
347
348 <a id="references"></a>
349 ## Reference
350
351 - [@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.
352 - [@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.
353 - [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.
354 - [ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
355 - [html-ppt-skill](https://github.com/lewislulu/html-ppt-skill)
356
357 <a id="sponsors"></a>
358 ## 💖 Sponsors
359
360 Special thanks to everyone who has supported this project! Your generosity keeps Oh My PPT alive and growing.
361
362 See [SponsorsList.md](./SponsorsList.md) for the full list of sponsors.
363
364 <a id="contributors"></a>
365 ## Contributors
366
367 Thanks to all contributors!
368
369 <p>
370 <a href="https://github.com/m13891290332"><img src="https://github.com/m13891290332.png" width="50" height="50" alt="m13891290332" /></a>
371 <a href="https://github.com/whisper-xiang"><img src="https://github.com/whisper-xiang.png" width="50" height="50" alt="whisper-xiang" /></a>
372 <a href="https://github.com/Jacobinwwey"><img src="https://github.com/Jacobinwwey.png" width="50" height="50" alt="Jacobinwwey" /></a>
373 </p>
374
375 <a id="license"></a>
376 ## License
377
378 This project is licensed under the [Apache License 2.0](LICENSE) © 2026 arcsin1 &lt;zy19931129@gmail.com&gt;.
379
379 lines MARKDOWN