DOCSEARCHbyAlgolia
Submit Docs

presenton

repository·main·Indexed 25 days ago

https://github.com/presenton/presenton

An open-source AI presentation generator and API (version 0.9.3-beta) available as a desktop Electron application and cloud-based service. It features a JSON-driven Template V2 slide editor, support for multiple LLM providers (including OpenAI, Anthropic, and Ollama), and a programmatic API for generating presentations in PPTX and PDF formats.

Tokens
18.2K
Snippets
43
Records
97
Agent score
90%

What's inside presenton

  1. Understand the Template V2 Slide Editor Mental Model

    main

    Template V2 is a JSON-driven slide system where a slide's ui layout object defines its structure. The system uses two primary rendering paths:

    1. Editor Rendering: Uses surface/TemplateV2KonvaSlide.tsx to render editable Konva nodes via surface/nodes.tsx.
    2. HTML Rendering/Export: Uses TemplateV2LayoutPreview.tsx and lib/template-v2-json-to-html.ts to render slide data for previews or exports outside the Konva editor.

    Editor Workflow:

    1. A slide layout is loaded into TemplateV2KonvaSlide.
    2. The slide is normalized and stored in a local uiDraft state.
    3. Konva nodes render components/elements from uiDraft.
    4. Selection state determines which toolbar or editor is visible.
    5. Toolbars generate partial changes to elements or components.
    6. commitUi() persists changes to local state, undo history, and Redux.
    7. Redux maintains the current slide ui within the presentation state.

  2. Configure IAM permissions for Amazon Bedrock

    main

    The IAM principal (user or role) used for authentication must have permissions to call Bedrock in the configured region. Ensure the following permissions are granted:

    • bedrock:InvokeModel
    • bedrock:InvokeModelWithResponseStream

    If using inference profiles, ensure the IAM policy includes the specific profile ARN or an appropriate wildcard in the resource list. Additionally, ensure model access is enabled in the Bedrock console (Model access) for the foundation models used.

  3. Verify Published Multi-Arch Manifests

    main

    Verify that your published manifests correctly include both linux/amd64 and linux/arm64 architectures using the docker buildx imagetools inspect command.

    docker buildx imagetools inspect ghcr.io/presenton/presenton:v0.9.0-beta
docker buildx imagetools inspect ghcr.io/presenton/presenton:latest

  4. Set up a macOS Release Build Machine

    main

    Perform these steps once on the Mac designated for building releases.

    1. Install Apple Command Line Tools

    Ensure notarytool is available by installing/updating Xcode and running:

    xcode-select --install
xcrun notarytool --version

    2. Install the Developer ID Certificate

    1. In Xcode -> Settings -> Accounts, select your Apple Developer team.
    2. Click Manage Certificates -> + -> Developer ID Application.
    3. Verify the identity is visible to codesign:
    security find-identity -v -p codesigning | grep "Developer ID Application"

    3. Store Notarization Credentials

    Create an app-specific password for your Apple ID, then store credentials in the local Keychain using notarytool:

    xcrun notarytool store-credentials "presenton-notary" \
  --apple-id "apple-id@example.com" \
  --team-id "TEAMID" \
  --password "app-specific-password"

    Then, add the profile to your shell environment (e.g., ~/.zshrc):

    export APPLE_KEYCHAIN_PROFILE="presenton-notary"
    xcrun notarytool store-credentials "presenton-notary" \
  --apple-id "apple-id@example.com" \
  --team-id "TEAMID" \
  --password "app-specific-password"

  5. Sign and notarize the DMG container

    main

    If the Electron Builder process produces a DMG that is not itself signed/notarized (i.e., dmg.sign is false), follow these steps to sign and notarize the DMG container manually:

    1. Sign the DMG:
      codesign --force --sign "<YOUR_DEVELOPER_ID_IDENTITY>" --timestamp dist/Presenton-<version>.dmg
    2. Notarize the DMG: Submit the signed DMG to Apple using your keychain profile:
      xcrun notarytool submit dist/Presenton-<version>.dmg --keychain-profile presenton-notary --wait
    3. Staple the DMG: Embed the notarization ticket into the DMG:
      xcrun stapler staple dist/Presenton-<version>.dmg

  6. Build Presenton for Mac App Store (MAS) or Development

    main

    Run these commands from the electron/ directory. Ensure you have run npm run setup:env at least once.

    MAS Development (Sandbox testing)

    Used for testing on Macs registered in your development provisioning profile. Requires PRESENTON_MAS_DEV_IDENTITY (e.g., Apple Development: Your Name (TEAMID)).

    MAS Distribution (App Store submission)

    Used for uploading to App Store Connect. Requires PRESENTON_MAS_DISTRIBUTION_IDENTITY and PRESENTON_APP_STORE_VERSION (required if your package.json version has a suffix like -beta).

    Direct DMG (Non-App Store)

    Produces a signed and notarized disk image for direct download.

    cd electron

# MAS development
PRESENTON_MAS_DEV_IDENTITY="Apple Development: Your Name (TEAMID)" \
  npm run build:all:mas-dev

# MAS distribution
PRESENTON_MAS_DISTRIBUTION_IDENTITY="Apple Distribution: Your Org (TEAMID)" \
  PRESENTON_APP_STORE_VERSION=1.0.0 \
  npm run build:all:mas

# Direct DMG
npm run build:all:mac:signed

  7. Verify Developer ID and Notarytool configuration for macOS builds

    main

    Before building, ensure your macOS environment is correctly configured for code signing and notarization:

    1. Check Developer ID Certificate: Verify that a Developer ID Application certificate is installed using:

      security find-identity -v -p codesigning

      If multiple certificates exist, pin the correct one using the PRESENTON_MAC_SIGN_IDENTITY environment variable.

    2. Check Notarytool Profile: Verify that the Apple notarization profile (e.g., presenton-notary) is available in your Keychain:

      xcrun notarytool history --keychain-profile presenton-notary
    export PRESENTON_MAC_SIGN_IDENTITY="Developer ID Application: Presenton Inc. (S6W5C54KL6)"
xcrun notarytool history --keychain-profile presenton-notary

  8. Publish Multi-Arch Docker Images to GHCR

    main
    To publish presenton as a multi-architecture image to the GitHub Container Registry (ghcr.io), follow a four-step workflow: build images on their native platforms, push architecture-specific tags, create a multi-arch manifest, and promote that manifest to latest.

  9. Use HTML Renderers for Previews and Exports

    main

    Presenton provides two distinct HTML-based rendering paths for non-interactive use cases:

    1. HTML Preview Renderer (app/(presentation-generator)/custom-template/components/EachSlide/TemplateV2LayoutPreview.tsx):

      • Used for slide thumbnails or non-editable previews.
      • Renders Template V2 layout data as standard React DOM.
      • Functions include renderImage(), renderText(), renderTable(), renderFlex(), etc.

    2. HTML Export Renderer (lib/template-v2-json-to-html.ts):

      • Produces raw HTML strings from Template V2 JSON for exporting.
      • The renderItem() function acts as the main switch for all element types.
      • Any visual feature intended to survive export must be implemented here (e.g., renderLine() handles stroke-dasharray).

  11. Regenerate DMG blockmap and update release metadata

    main

    Because signing and stapling modify the DMG bytes, you must regenerate the blockmap and update the release manifest to ensure updates work correctly.

    1. Regenerate Blockmap: Use the app-builder_arm64 tool to create a new blockmap from the final DMG. Note the size and sha512 output.

      node_modules/app-builder-bin/mac/app-builder_arm64 blockmap --input dist/Presenton-<version>.dmg --output dist/Presenton-<version>.dmg.blockmap

    2. Update latest-mac.yml: Update the manifest with the new sha512 and size values.

    files:
  - url: Presenton-<version>.dmg
    sha512: <final-dmg-sha512>
    size: <final-dmg-size>
path: Presenton-<version>.dmg
sha512: <final-dmg-sha512>
releaseDate: '<current-utc-release-date>'

  12. Manage Images and Cropping

    main

    Images are rendered using RawImageElement() and support various fit modes and cropping.

    Fit Modes:

    • cover (labeled as "Fill" in the toolbar)
    • `contain"
    • fill (labeled as "Stretch" in the toolbar)

    Cropping Model: Cropping is not stored as a pixel rectangle. Instead, it is persisted as a combination of fit: "cover", focus_x, focus_y, and an optional crop_scale.

    Image Replacement: Use openImageUpload() to trigger a file input. The resulting asset is uploaded via ImagesApi.uploadImage() and the path is normalized using resolveBackendAssetSource() before being assigned to the element's data field.