The Complete Guide To Connecting OpenAI With Bubble

This course is built for:

• Anyone interested in creating fully-responsive applications with Bubble
• Anyone looking to extend their skills as a freelance Bubble developer
• Makers who want to extend their knowledge of Bubble’s no-code toolset

• Get started with no background in coding.
• A free Bubble account
• A basic understanding of Bubble, although I’ll walk you through everything is thorough detail

What OpenAI services are covered?

Text Generation APIS

1. Completions API

The completions API allows users to type a prompt, then have OpenAI respond with generated text. You can think of this like the ChatGPT service you already know and love.

Real-world example:

You build an app that generates love letters for users. A user adds the name of their partner, as well as the date of their anniversary. The app will send this data to OpenAI, then respond with a generated poem that you can display as text and store in your Bubble database.

2. Chat completions API

This service is similar to the standard completions API, but with a minor twist. The chat completions API allows GPT to maintain a conversation and refer back to previous messages that have been sent (unlike the completions API which focuses on one response at a time).

Real-world example:

If you wanted to build your own AI-powered customer support chatbot, this is the API you’d use. The chatbot would be able to refer to previous questions and answers your users have asked.

3. Creating a custom GPT

As the name suggests, a custom GPT allows you to create a bespoke version of ChatGPT that can be tailored to your specific app or business needs.

With custom GPTs, the responses your end-users receive will be tailored to a specific task or knowledge set.

Real-world example:

You could create a GPT that takes the tole of an ancient history professor. Any response it provides will give subject-matter expertise, as well as a tonne that matches the given persona.

4. GPT-4 turbo with vision (image input)

User can upload an image to OpenAI, then have the model review the contents of the file. Once it understands the image, it can provide a response based on its knowledge of the photo.

Real-world example:

A user can upload a photo of some ingredients, then ask OpenAI to create a recipe that matches.

Assistants API

1. Creating a custom AI assistant

Train a custom GPT model on your own unique dataset. Have it refer to the pre-determined knowledge you provide.

Real-world example:

Upload a PDF that outlines best practices for trading stocks. Your assistant will train itself on this PDF, then refer to this as a reference point when responding to user queries.

Speech To Text APIS

1. Transcriptions API (speech-to-text)

To put it simply, this API allows OpenAI to transcribe audio files into text.

Real-world example:

Upload a recording from a meeting, then have OpenAI transcribe this into a text document.

2. Translations API

Transcribe audio recorded in a foreign language to English

Real-world example:

If a Ted talk was delivered in German, you could transcribe this into a text that’s written in English.

Text To Speech APIS

1. Audio generation (text-to-speech)

This service allows you to transform written text into spoken audio.

Real-world example:

If a user is writing copy for an ad, they could have OpenAI turn this text into a narrated audio file that can play in the background of a video.

Image Generation APIS

1. Generating images with DALL-E 3

Allows you to turn written user prompts into photo-realistic images.

Real-world example:

If you’re creating a blogging platform, your users can generate custom thumbnail images for their blog posts.

2. Image editing (Inpainting) with DALL-E 2

Inpainting allows you to modify an existing image using the DALL-E 2 model. The image is altered based on a prompt you provide.

Real-world example:

If you had an image of a pool, you could prompt the API to add a flamingo floating in the water. It would then generate a modified version of the image to match the desired prompt.

3. Image variations with DALL-E 2

The image variations API allows you to upload an image, then have OpenAI generate an alternative version. The model will generate a new image at its own discretion.

Real-world example:

If you weren’t happy with an image, this API would generate an alternative version that closely matches the original.

BONUS CONTENT INCLUDED – Mixing API services

Beyond the individual modules that cover each specific API, you’ll also learn how to mix multiple API services to create next-level apps.

By using these additional tutorials, you’ll become a master at connecting all OpenAI services.

Video #1: Building a meeting summary app

API services: Speech-to-text + completions API

Tutorial overview: In this video, you’ll learn how to build an end-to-end meeting summary tool. This will start by transcribing an audio recording of a meeting.

Once OpenAI generates the text transcription, it’ll pass this on to the completions API which will be used to summarise this text into actionable bullet points.

Video #2: Transcribing Audio Between Languages

API services: Speech-to-text + text-to-speech

Tutorial overview: Using OpenAIs speech-to-text model, you’ll transcribe a TED talk that was delivered in German.

Once this audio file is turned into text, you’ll then use the text-to-speech to generate a new audio file that’s spoken in English.

Video #3: Custom recipe app

API services: DALL-E 3 + Completions API

Tutorial overview: We’ll build an AI-powered recipe app that allows users to type in a specific food they’d like to make.

We’ll connect DALL-E 3 to generate a photorealistic image of that meal, then have the Completions API generate a list of the ingredients, as well as the step-by-step instructions.