How I use o1-mini to Generate Slide Decks
Leveraging o1-mini's capabilities and Reveal.js to Create Dynamic Presentations
Ever since ChatGPT came out, I’ve been looking for ways to make use of the abilities of LLMs, whether that’s in writing code, analyzing documents or rewriting text. I’m always toying with new ideas to see whether a new usecase pops up, and sometimes applications that are just not there and a little bit too cumbersome to work with, with certain models. But then a new model comes out, and it’s capabilities suddenly make it viable.
LLM’s have been able to write decent code, but the output length has been a limitation. With the new o1 models, this has changed. o1-mini can write a 1000+ lines of code all at once, and it’s solid code too compared to what other LLM’s can output.
We can leverage this! There are a few great frameworks that allow us to visualize things with some very basic programming. With these usecases LLM’s excel, as you can explain what you’re looking for or want to change, the model can visualize it for you.
We’ve seen some great examples of this, mostly using languages like PlantUML or Mermaid. Ask ChatGPT or any other LLM for a flowchart gives you something like this:
flowchart TD
Start("Start")
Action("Take Action")
End("End")
Start --> Action --> End
Copay and paste that into a mermaid viewer, and there you go! You have a basic example of a flowchart.
We can apply the same idea to slide decks. All we need is a framework that allows us to turn written text or code into slides, and luckily for that there’s reveal.js, Reveal.js is a HTML Presentation Framework. Through HTML, we can create a complete slide deck with extra presenter notes, animations, code highlights, and more features from Reveal.js. On top of that, it’s completely free! It can be customized with HTML and CSS, but in this case we can simply prompt o1-mini to write the HTML and CSS for us.
The HTML presentation framework | reveal.js (revealjs.com)
Before o1-mini this was somewhat possible, but very tedious as no model could output long context, which would force clunky copy and pasting. That clunkyness made regular tools like PowerPoint easier to use. But now, with o1-mini, this has changed. It’s capable of outputting a long, complete and well styled slide deck in reveal.js at once, so all you have to do is replace all of it’s content.
You can take any existing content, such as a report or essay, whatever input it may be in o1-mini, and get a complete, stylish presentation with cool features.
Another really great benefit is that you can push o1-mini to get creative with programming and animate slides with CSS — see example here where I made o1-mini create a few slides on sorting algorithms, creating animations visualizing each sorting algorithm. Good luck doing that in PowerPoint.
So, how can we get to work? It’s very simple. First, we need to download Reveal.js. The basic setup is fine, which you can find here:
Installation | reveal.js (revealjs.com)
Once downloaded and unpacked, open it up and you should see a few files.
That’s all for set-up. Now, we got to prompt o1-mini. There’s a few common mistakes o1-mini tends to make, but luckily with a little addition to the prompt we can mitigate the most common problems.
Getting o1-mini to build full-fledged slide decks for you
All we got to do now is open up index.html in a text editor or IDE, and you’ll see some HTML in there. For reference, in reveal.js, this is what a basic slide can look like:
Which, if you open the file in your browser, will look something like this:
All we got to do now is get o1-mini to write the html for you, that we can copy and paste into index.html.
This is pretty easy, however, o1-mini tends to get a few things wrong. With a few simple additions to the prompt, we can point o1 in the right direction and make the chance of mistakes significantly smaller.
What to include in the prompt (aside from your slide deck topic and other instructions):
Ask for a reveal.js presentation/slide deck.
Instruct o1-mini that this is the base url where styles and plugins can be found:
https://unpkg.com/reveal.js@4/Include the original contents of the index.html file
I highly recommend including all three. o1-mini tends to trip up on pointing to the correct link, which will break any presentation. By including this instruction, it’ll stop making mistakes. Including the original index.html file (simply copy and paste it) also nudges o1-mini in the right direction.
This of course, is aside from instructing o1-mini about the actual contents of your presentation. You can ask to make it fancy, add consistent styling, what the presentation should be about etc.
Send it, and after a short wait o1-mini will output a long piece of code. Copy it, overwrite index.html with the new content, and there you have it. Want to make adjustments? Just prompt o1-mini! You can keep it simple with basic instructions like:
Make it more professional
Adjust the colors to be more playful
Pick a more modern font
Reduce the amount of text per slide
The model gets to work, adjusts the presentation. All that you have to do as a user? Copy and paste, hit save and refresh the presentation.
Extra tips and tricks
If you want to get very fancy results (similar to the animated sorting) it’s best to prompt it to do so with DOM and CSS, as o1-mini tends to make more mistakes with more intricate reveal.js features.
Want to make use of some of the features of reveal.js? Then it’s generally very helpful to copy and paste instruction into your prompt from the reveal.js documentation. For example, if you want to use some code highlights, copy and paste instructions from here and pass it on to o1-mini. Presenting Code | reveal.js (revealjs.com)
If you’ve downloaded the basic setup, take a look at the examples folder. It’s got some really neat examples of what Reveal.js is capable of. If you want to replicate those with the help of o1-mini, simply share them!