sslides 0.0.29

Create awsome Solveit slides

sslides

Use cases

1. Research & Exploration - Document exploratory data analysis and present key findings - Share results with visualizations - Present literature review with Math formulas

2. Teaching & Learning - Create tutorial presentations from working code examples - Build step-by-step coding lessons with captured outputs - Share problem-solving workflows with students

3. Quick Topic Presentations - Ask Solveit to research a topic and generate slides with ## header - Copy/paste screenshots to illustrate concepts - Turn conversation into shareable slides

All this without typing all the content in a slides app e.g. Powerpoint or Google Slides

Usage

Installation

Install latest from the GitHub repository:

$ pip install git+https://github.com/rleyvasal/sslides.git

or from pypi

$ pip install sslides

Documentation

Documentation can be found hosted on this GitHub repository’s pages. Additionally you can find package manager specific guidelines on pypi.

How to use

1. Code cell with Import package - run after finish slides content

from sslides import sshow
sshow()

2. #| s to tell sslides all cells below are your slides
3. # header creaate the title slide
4. ## header creates regular slides - all content below heading is the slide content

# 
# #Making presentation from instructions
# from sslides import sshow

# sshow(theme='dark')

Two themes included light and dark or you can use your own theme:

my_theme = {
    # title slide styles
    'title-heading': 'text-9xl font-serif font-bold mb-4 text-blue-600',  # h1 - blue serif
    'slide-title': 'flex flex-col justify-center items-center text-center p-12 bg-gray-300',  # gray background
    
    # regular slides styles
    'heading': 'text-8xl font-serif font-bold mb-16 text-blue-600',  # h2 - blue serif
    'slide-content': 'flex flex-col justify-start items-start pt-16 px-12 pb-12 bg-gray-300 text-black overflow-y-auto overflow-x-hidden',  # gray bg, black text
    'paragraph': 'text-5xl mb-6 leading-loose break-words text-black',   
    'list-item': 'text-5xl mb-10 ml-2 list-disc text-black break-words',
    'list': 'text-lg ml-2 max-w-full w-full',
    'code': 'mb-2',
    'output': 'bg-gray-100 p-2 text-sm font-mono max-w-full text-black whitespace-pre-wrap break-words',
    'output-image': 'max-w-full max-h-96 object-contain',
    'error': 'bg-red-200 text-red-900 p-2 text-sm font-mono',
    'pygments-style': 'default'  # lighter syntax highlighting for gray background
}
sshow(theme=my_theme)

Introducing sslides

What is sslides

A tool for creating beautiful presentations from your solveit dialogs and research.

Share your learning by creating a slide deck from dialog.

Editing and navigation of slides without leaving the Dialog.

Create slides

1. Import sslides and function

from sslides import sshow
sshow(theme='dark')

2. #| s marks the begining of slides
3. # Creates a title slide
4. ## Creates a regular slides - all Markdown and code cells become content of in slide
5. Run sshow()

Navigate sslides

• Click on preview window to make it active
• Navigate with arrow keys
• Navigate with mouse - hover on bottom right corner to see controls and page number
• f key enters fullscreen mode
• esc key exits fullscreen

Content Suported

• Markdown
• Bullet lists
• Latex Math
• Attachments from screenshots
• Code - highlighted

Markdown latex

## Latex - Content too long, scroll available

### Scaled Dot-Product Attention

The attention mechanism from "Attention is All You Need":

$$\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V$$

Where $Q$ is queries, $K$ is keys, $V$ is values, and $d_k$ is the dimension of the keys.

## Math Examples

Inline math: The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

Display math:
$$\int_a^b f(x)dx = F(b) - F(a)$$

Statistics:
$$\bar{x} = \frac{1}{n}\sum_{i=1}^n x_i$$

Calculus derivative:
$$\frac{d}{dx}(x^n) = nx^{n-1}$$

Matrix:
$$\begin{bmatrix} a & b \\ c & d \end{bmatrix}$$

Latex - Content too long, scroll available

Scaled Dot-Product Attention

The attention mechanism from “Attention is All You Need”:

$$\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V$$

Where $Q$ is queries, $K$ is keys, $V$ is values, and $d_k$ is the dimension of the keys.

Math Examples

Inline math: The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

Display math: $$\int_a^b f(x)dx = F(b) - F(a)$$

Statistics: $$\bar{x} = \frac{1}{n}\sum_{i=1}^n x_i$$

Calculus derivative: $$\frac{d}{dx}(x^n) = nx^{n-1}$$

Matrix: $$\begin{bmatrix} a & b \ c & d \end{bmatrix}$$

Attachments

Plots

Activation Functions Comparisons

• Code hidden in Solveit = Code hidden in slides

import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(-3, 3, 1000)

# Activation functions
relu = np.maximum(0, x)
gelu = 0.5 * x * (1 + np.tanh(np.sqrt(2/np.pi) * (x + 0.044715 * x**3)))
swish = x / (1 + np.exp(-x))
leaky_relu = np.where(x > 0, x, 0.01 * x)

fig, ax = plt.subplots(figsize=(10, 6))
ax.plot(x, relu, label='ReLU', linewidth=2)
ax.plot(x, gelu, label='GELU', linewidth=2)
ax.plot(x, swish, label='Swish', linewidth=2)
ax.plot(x, leaky_relu, label='Leaky ReLU', linewidth=2, linestyle='--')

ax.axhline(0, color='black', linewidth=0.5, alpha=0.3)
ax.axvline(0, color='black', linewidth=0.5, alpha=0.3)
ax.grid(True, alpha=0.3)
ax.legend(fontsize=12)
ax.set_xlabel('Input', fontsize=12)
ax.set_ylabel('Output', fontsize=12)
ax.set_title('Activation Functions Comparison', fontsize=14, pad=15)
plt.tight_layout()
plt.show()