duccioo/spitonslides
šØ MacPaint-style presentation annotator with drawing tools
Image
0
1.4K
duccioo/spitonslides repository overview
ā SpitOnSlides šØ
A modern presentation annotator with drawing tools. Upload your slides, annotate them, and export as PDF.
ā āØ Features
- š Upload PPTX/PDF - Converts presentations to high-res images
- āļø Drawing Tools - Pencil, Brush, Eraser, Paint Bucket, Selection
- šØ Pattern System - Multiple fill patterns for artistic effects
- š¾ Save & Load Projects - Keep your work and continue later
- š Export to PDF - Composites drawings on top of original slides
- ā©ļø Undo/Redo - Full history support
ā š Quick Start
ā Using Docker Hub (Recommended)
# Pull and run with a single command
docker run -d -p 80:80 --name spitonslides duccioo/spitonslides:latest
# Open in browser
open http://localhost
ā Using Docker Compose
# Clone the repo
git clone https://github.com/duccioo/SpitOnSlides.git
cd SpitOnSlides
# Start with Docker Compose
docker-compose up --build
# Open in browser
open http://localhost:5173
ā Using Portainer
- In Portainer, go to Stacks ā Add Stack
- Name it
spitonslides - Use the Web editor tab and paste the contents of
docker-compose.portainer.yml - Click Deploy the stack
ā š ļø Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 18, Vite, HTML5 Canvas |
| Backend | Python 3.11, FastAPI |
| Conversion | LibreOffice, Poppler (pdf2image) |
| Image Processing | Pillow, img2pdf |
| Container | Docker, GitHub Actions |
| Fonts | Instrument Serif, Inter |
ā š Project Structure
SpitOnSlides/
āāā .github/
ā āāā workflows/
ā āāā docker-publish.yml # GitHub Actions CI/CD
āāā docker-compose.yml # Development compose
āāā docker-compose.portainer.yml # Production/Portainer compose
āāā Dockerfile # Multi-stage production build
āāā backend/
ā āāā main.py # FastAPI entry
ā āāā routes/
ā āāā upload.py # File upload & conversion
ā āāā export.py # PDF export
ā āāā projects.py # Project save/load
āāā frontend/
āāā src/
āāā App.jsx # Main application
āāā components/
ā āāā Toolbar.jsx # Drawing tools (emoji icons)
ā āāā Canvas.jsx # Drawing canvas
ā āāā SlideNav.jsx # Navigation bar
ā āāā PatternPicker.jsx
āāā styles/
āāā macpaint.css # Modern design system
ā š API Endpoints
| Method | Endpoint | Description |
|---|---|---|
POST | /api/upload | Upload PPTX/PDF |
GET | /api/sessions/{id} | Get slide info |
POST | /api/export | Export annotated PDF |
GET | /api/projects | List saved projects |
POST | /api/projects | Save a project |
GET | /api/projects/{id} | Load a project |
DELETE | /api/projects/{id} | Delete a project |
GET | /slides/{id}/{file} | Serve slide images |
GET | /health | Health check |
ā šØ Drawing Tools
| Tool | Emoji | Description |
|---|---|---|
| Pencil | āļø | 1px black stroke |
| Brush | šļø | Variable size with pattern |
| Eraser | š§½ | Reveals slide underneath |
| Bucket | šŖ£ | Flood fill with pattern |
| Selection | ā¬ | Move/delete drawn pixels |
| Clear | šļø | Clear all drawings |
| Undo | ā©ļø | Undo last action |
| Redo | āŖļø | Redo undone action |
ā š GitHub Actions
The project includes automatic Docker Hub deployment:
-
Set up secrets in your GitHub repository:
DOCKERHUB_USERNAME: Your Docker Hub usernameDOCKERHUB_TOKEN: Docker Hub access token
-
Push to main or create a version tag (e.g.,
v1.0.0) -
The image will be automatically built and pushed to Docker Hub
ā š„ļø Development
# Backend only
cd backend
pip install -r requirements.txt
uvicorn main:app --reload
# Frontend only
cd frontend
npm install
npm run dev
ā š License
MIT License - feel free to use this project for personal or commercial purposes.
Tag summary
Content type
Image
Digest
sha256:2c5293be6ā¦
Size
296.9 MB
Last updated
8 months ago
docker pull duccioo/spitonslides