sslides 0.0.33
Create awsome Solveit slides
License: Apache-2.0
Requires Python: >=3.9
Keywords: nbdev jupyter notebook python

# sslides


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## 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

## Get a standalone file for presenting offline

- Click Show all files toggle where you ran the presentation
- sslides.html file avalable for download

## Usage

### Installation

Install latest from the GitHub
[repository](https://github.com/rleyvasal/sslides):

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

or from [pypi](https://pypi.org/project/sslides/)

``` sh
$ pip install sslides
```

### Documentation

Documentation can be found hosted on this GitHub
[repository](https://github.com/rleyvasal/sslides)’s
[pages](https://rleyvasal.github.io/sslides/). Additionally you can find
package manager specific guidelines on
[pypi](https://pypi.org/project/sslides/).

## How to use

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

``` python
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

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

``` python
sshow(theme='dark')
```

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

``` python
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

``` python
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()`](https://rleyvasal.github.io/sslides/slides.html#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
- Code hidden in notes also hidden in slides press arrow next Code to
  see code

## Content Suported

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

## Markdown latex

``` markdown
## 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

![](index_files/figure-commonmark/84770ba2-2-ddbefb5a-1a42-449b-add3-a9d59ed0d332.png)

## Plots

### Activation Functions Comparisons

- Code hidden in Solveit = Code hidden in slides

``` python
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()
```

![](index_files/figure-commonmark/cell-4-output-1.png)