slides2gif

How It Works

Technical architecture and flow for engineers

System Architecture

graph TB User["User Browser"] -->|"1. Select Slides and Generate"| Frontend["Next.js Frontend"] Frontend -->|"2. POST /api/gifs"| API["API Route<br/>/api/gifs"] API -->|"3. Authenticate"| OAuth["Google OAuth<br/>Access Token"] OAuth -->|"4. Fetch Thumbnails"| SlidesAPI["Google Slides API<br/>getThumbnail"] SlidesAPI -->|"5. Thumbnail URLs"| API API -->|"6. Cache Images"| GCS["Google Cloud Storage<br/>presentations/id/slides/"] API -->|"7. GET /createGif<br/>with Bearer Token"| PNG2GIF["png2gif Service<br/>Express + Cloud Run"] PNG2GIF -->|"8. Download Images"| GCS GCS -->|"9. PNG/JPG Files"| PNG2GIF PNG2GIF -->|"10. Convert to GIF<br/>gifencoder + canvas"| GIFLib["GIF Library<br/>gifencoder + png-file-stream"] GIFLib -->|"11. Generated GIF"| PNG2GIF PNG2GIF -->|"12. Upload GIF"| GCS GCS -->|"13. Public URL"| PNG2GIF PNG2GIF -->|"14. Return GCS Path"| API API -->|"15. Return GIF URL"| Frontend Frontend -->|"16. Display GIF"| User style User fill:#fff4e6,color:#141e32 style Frontend fill:#ffba44,color:#141e32 style API fill:#fea003,color:#fff style OAuth fill:#fff8f0,color:#141e32 style SlidesAPI fill:#ffba44,color:#141e32 style GCS fill:#fea003,color:#fff style PNG2GIF fill:#ff9500,color:#fff style GIFLib fill:#ffba44,color:#141e32

Key Components

1. Frontend (Next.js)

React-based UI where users select slides and configure GIF options (delay, quality, repeat). Makes API calls to generate GIFs.

2. API Route (/api/gifs)

Next.js API route that handles authentication, fetches slide thumbnails from Google Slides API, caches them in Google Cloud Storage, and orchestrates the GIF generation by calling the png2gif service.

  • Uses Google OAuth2 for authentication
  • Calls Google Slides API: presentations.pages.getThumbnail
  • Caches thumbnails in GCS with size suffixes (_small, _medium, _large)
  • Authenticates requests to png2gif service using Google Auth ID tokens

3. png2gif Service (Express)

Separate Express.js service deployed on Cloud Run that handles the actual GIF generation. Downloads cached images from GCS, converts them to a GIF, and uploads the result back to GCS.

  • Libraries: gifencoder, png-file-stream, canvas
  • Downloads images from GCS matching the requested thumbnail size
  • Creates GIF with configurable delay, quality (1-20), and repeat settings
  • Uploads generated GIF to GCS and returns the public URL
  • Uses service-to-service authentication in production (Cloud Run)

4. Google Cloud Storage

Stores cached slide thumbnails and generated GIFs. Thumbnails are cached to reduce API calls and improve performance.

  • Thumbnail path: presentations/{presentationId}/slides/{objectId}_{size}.jpg
  • GIF path: Temporary files with UUID names
  • Public URLs are generated for cached content

5. Google Slides API

Provides access to presentation metadata and slide thumbnails. Supports three thumbnail sizes: SMALL (200×112), MEDIUM (800×450), and LARGE (1600×900).

Data Flow

  1. User selects slides and clicks "Generate GIF" in the frontend
  2. Frontend sends POST request to /api/gifs with presentationId, slideList (comma-separated objectIds), and GIF options
  3. API route authenticates using Google OAuth tokens from session
  4. API fetches high-resolution thumbnails from Google Slides API for selected slides
  5. Thumbnails are cached in Google Cloud Storage (if not already cached)
  6. API calls png2gif service at /createGif endpoint with query parameters (presentationId, slideList, thumbnailSize, delay, quality, repeat)
  7. png2gif service downloads cached images from GCS matching the requested size
  8. Images are converted to GIF using gifencoder and png-file-stream libraries
  9. Generated GIF is uploaded back to GCS
  10. Public URL is returned to the API route
  11. API route returns GIF URL to frontend
  12. Frontend displays the GIF to the user

Technologies Used

Frontend & API

  • Next.js 15
  • React 19
  • TypeScript
  • Tailwind CSS
  • iron-session (session management)
  • googleapis (Google Slides API client)
  • google-auth-library (OAuth2)

GIF Generation

  • Express.js
  • gifencoder
  • png-file-stream
  • canvas (image processing)
  • @google-cloud/storage

Infrastructure

  • Google Cloud Run
  • Google Cloud Storage
  • Google Slides API
  • Google OAuth2

Authentication

  • Google OAuth2 for user authentication
  • Service-to-service auth (ID tokens) for Cloud Run
  • Scopes: Slides API, Drive metadata, User profile