Challenge

MIT App Inventor ImageBot Tutorial: Imagine, Articulate, Generate, and Share

Have you ever wondered how to create your own generative AI app for wildly imaginative visualizations? In this tutorial, you will build a simple app with MIT App Inventor that allows users to connect to OpenAI’s DALL-E generative AI program, submit their own prompts, and see the result in exciting artistic visions from the AI.

Setup

Getting Your Own OpenAI API Key

For this project, you will need to get your own OpenAI API key to use MIT App Inventor’s ImageBot component. Follow the steps below to create your OpenAI account and get your OpenAI API key.

Note: As of the writing of this tutorial, OpenAI allows users 13 years old and older to create their own OpenAI accounts and generate their own OpenAI API keys. You will need a credit card.

1. Go to https://openai.com/

2. Click on the Sign up button on the upper right

   

3. Create your account by entering your email and choosing a password. You can also sign up using your Google, Microsoft and Apple accounts.

   

   

4. You will need to verify your e-mail and phone number during the signup process.

5. To get your personal OpenAI API key go to https://platform.openai.com/account/api-keys

6. Click on the API keys tab and the Create new secret key button.

   

7. Give your key a name if you wish. This step is optional.

   

8. Copy and save your API key somewhere safe on your computer. You will need it while doing the project.

Updating AI2 Companion

If you have not done so, please upgrade your AI2 Companion to version 2.67 or higher.

ImageBot Tutorial

Overview

In this tutorial, you will explore the ImageBot component of App Inventor, building an app that allows users to create images using OpenAI’s DALL-E. Here is how it works:

• Choose an image resolution.
• Speak a prompt that goes to OpenAI.
• Click Create.
• Once OpenAI creates the image in the app, you can re-generate other images with the same prompt until you like the final result.
• With the click of a button, Share the image with friends on social media or email it to yourself.
• Reset the interface and start again!

The User Interface (UI)

In this project, most of the User Interface (UI) has been created for you. Study the given components (most should be intuitive). The Spinner component may be unfamiliar to you — in this app, it provides a drop-down menu for users to select the desired resolution for the image to be generated.

Drag and drop the following non-visible components to your app:

• Notifier (from User Interface components drawer)
• ImageBot (from Experimental components drawer)
• Sharing (from Social components drawer)
• SpeechRecognizer (from Media components drawer)

Your final GUI should look like the one below. (Note: you may need to scroll down to see all your components in the Viewer.)

Adding Your OpenAI API Key

To use the DALL-E program, you will need an OpenAI API Key. (You generated the key in this tutorial’s Setup section above.) Copy & paste your key to the ApiKey property of your ImageBot component. (Your key will look different than the partial key shown below.)

Coding the UI Functionality

Now you are ready to give functionality to all these components. Click on the Blocks button to go to the Blocks editor.

Start by initializing a global variable imageFileName which you will use to keep track of the image files created. Initially, this variable should be assigned an empty string.

Getting Users’ Prompt Input

Code an event block that allows users to speak their prompt into the app. When users press the SpeakButton, the SpeechRecognizer must capture their utterance and turn it into text.

After the SpeechRecognizer returns with the text of the user’s prompt, set the PromptTextBox’s text to this returned text.

Selecting a Resolution

Next, users can choose a resolution (256, 512, or 1024) for the image. The default is 256.

After a selection has been made using the ResolutionSpinner, the value selected must be set as the Size property of the ImageBot component.

Generating an Image

Now you have all the info needed to generate an image. When users click the CreateButton, unless the PromptTextBox is empty, have the Notifier inform users that the generation process has started via a Progress Dialog message. Then send the entered prompt to OpenAI so that an image based on the description in the prompt can be generated.

When OpenAI returns with an image filename, cancel the Notifier and set the Canvas component’s BackgroundImage property to the image file. Also, set the global variable imageFileName to this filename returned by OpenAI. You will need this available when you code the when ShareButton.Click event.

Once the image shows up on the Canvas, users can repeat the process until they generate an image they like.

Sharing the Image

When users finish with image generation, the ShareButton allows users to access the social media apps available on their mobile devices and share with their friends.

To prevent runtime errors (such as when users press the ShareButton before generating an image), you will need to make sure that the imageFileName is not an empty string. In the message sent on social media, be sure to include the prompt of the image generated along with the image.

Resetting

Finally, when users are done sharing their image, they may wish to get a clean slate and start the process again by generating a new image with a different prompt. So when users click the ResetButton, set the image resolution back to the default 256, clear the Canvas background image, clear the global variable imageFileName and clear the PromptTextBox.

Testing the App

Now test your app by speaking a prompt, generating an image, sharing it on social media, and resetting the app. Try to break it by testing different possibilities of button presses. If any issues are found, revisit your code and make the necessary revisions.

Congratulations — you have just created a powerful app that can generate and share creative images from user prompts.

Expand Your App

• Research artistic generative AI programs like DALL-E to catch a glimpse of how they are trained and how they operate.
• Create a version of your app in which users can save their favorite image in an image gallery.
• Create a UI that allows users to draw over generated images and share these.
• Create a program that uses ChatGPT to generate a story from user input and then uses DALL-E to generate the visuals that go with the story.
• Play a game where you separate the prompts from their generated images and see if people can guess which goes with which.
• Organize a visual arts competition (in your class, school, district) to see who can create the best images.
• What awesome ideas do you have?

About Youth Mobile Power

A lot of us spend all day on our phones, hooked on our favorite apps. We keep typing and swiping, even when we know the risks phones can pose to our attention, privacy, and even our safety. But the computers in our pockets also create untapped opportunities for young people to learn, connect and transform our communities.

That’s why MIT and YR Media teamed up to launch the Youth Mobile Power series. YR teens produce stories highlighting how young people use their phones in surprising and powerful ways. Meanwhile, the team at MIT is continually enhancing MIT App Inventor to make it possible for users like you to create apps like the ones featured in YR’s reporting.

Essentially: Get inspired by the story, get busy making your own app!

The YR + MIT collaboration is supported in part by the National Science Foundation. This material is based upon work supported by the National Science Foundation under Grant No. (1906895, 1906636). Any opinions, findings and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.

Check out more apps and interactive news content created by YR here.