Articles on: Integrations

Bubble Integration

Integrate Cogniflow with Bubble



Bubble.io is a no-code app development platform. It is used to develop software and application without coding or can say Bubble.io offers a way to build an application without having knowledge of core programming languages. Visit Bubble website and create a free account.

Let's create a simple Bubble app which performs an image classification to detect if in an image Coke or Pepsi is present and integrate a text classification model to identify the written language automatically.

First search and install the Cogniflow plugin:

Install Cogniflow plugin

Add your API Key.

Set your Cogniflow API Key

From your Design view, use a PictureUploader element, a multi line input, some buttons and some text to show their results, similar to the screen below:

Bubble App Design

Let create some actions for the buttons.

Use Cogniflow in your action

When you select Cogniflow API - Image classification you need to enter the following information:

model_url: copy that from you Cogniflow model integration tab.
format: you need the file extension, you can get that by splitting the name using “.” and the getting the last element.
base64_image: Select the PictureUploader image value and click con encoded in base64.

Connect to your Cogniflow Image AI model

Then you can set to show the Cogniflow API result to the "Text A" label using a custom state. To create a custom state go to the TextA element and create a custom state called "res" for example which is a text.

Set Custom State to the Text element

Now you can use that custom state to automatically update the "Text A" text after the predict button is clicked.

Set your label to show Cogniflow response

Following the same process, you can connect a Cogniflow text classification model.

Now run the app and voila!

Bubble App using Cogniflow running

Updated on: 30/12/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!