Overview

OpenAI’s vision capabilities allow users to upload one or more images and ask questions regarding them. There are plenty of use cases in which it can come in handy like

• Automatic suggestion for captions, alt tags, and titles for uploaded images
• Automatic verification of uploaded images for faces or checking for nudity or other checks.
• Help in planning a meal from the uploaded image of the user’s refrigerator

In this article, we will integrate Vision API with Gravity Forms using a no-code solution.

Gravity Forms Integration with Vision AI

AI for Gravity Forms plugin lets you integrate OpenAI features with your forms. It has support for Vision AI that can take images as input and answer questions regarding the things present in images. You can map the Vision AI response to Gravity Forms entry notes or form fields.

Setting up Gravity Forms with Vision AI

The integration between Gravity Forms and OpenAI vision can be done using the following two plugins

• Gravity Booster
• AI for Gravity Forms

Gravity Booster is a free plugin that has 100+ controls to design the different parts of Gravity Forms. The AI for Gravity Forms works together with Gravity Booster to add AI capabilities like, text generation, label generation, image generation, and Vision capabilities in Gravity Forms.

Enabling Vision AI in Gravity Forms

• After installing and activating AI for Gravity Forms navigate to Forms -> Booster from your website’s backend.
• Select the form for which you want to enable Vision AI. After the form selection, the page will automatically reload with controls and form preview.
• Now click the Settings icon and go to the AI Section to add your OpenAPI Key.
• Now go to AI Panel and then click on the Vision section.
• In the Vision section, you can enable the feed, set the feed name, select the vision AI model, set the detail, max tokens, form image field, prompt, and the field where the Vision AI response should be saved inside the Gravity Forms entry.

Step-by-step guide for Using Vision AI with Gravity Forms

Let’s assume that you have a resume builder website where you require a profile picture from the user. In such a case you can use Vision AI to detect the face inside the pic. The good part is that if you need multiple images then a multi-file upload field is also supported and the vision AI will check faces in all the uploaded images.

Create a Gravity Form with a File Upload Field

Create a new Form and add the following fields in it.

• Name: It will contain the first and last name.
• Age: This is a number field.
• Address: It is the advanced address field provided by Gravity Forms.
• Profile Pic: It is a single file upload field. The field is restricted to support only .png, .jpeg, .jpg, and .webp files. 
• Additional Details: This is a textarea field where users can enter all the details they want to show in the resume.

After setting up the form add it to a page in the frontend where users can fill it.

Enable Face Detection using Vision AI

For this follow the below steps

• Navigate to Forms -> Booster and select the form we just created.
• Here under the AI panel go to the Vision section and do the following settings.
  • Enable the Feed by clicking on the checkbox.
  • Set the Feed Name to Face detection. This name is for your reference and if you map the vision AI results to Gravity Forms entry notes then it will display over there as well.
  • For the AI model select GPT-4o as it is the latest and most cost-effective model yet.
  • Keep the detail setting to Auto 
  • Set the max token to any number greater than 300. If Vision AI decides to use high detail even then it will use a maximum of 300 tokens. However, if you have used multi-upload files and sent multiple files so, you have to consider tokens for each file separately.
  • In the Take Image From select the file upload file which in our case is the Profile Pic field.
  • In the prompt, you can type the following for human face detection “Detect if a human face is present in the provided image. Return a true or false indicating the presence of at least one human face.”
  • You can Map the results to the Notes field. So, whatever response we get from Vision AI is stored in Gravity Notes and while editing the entry from the backend you can immediately know if the user has uploaded a correct profile pic or not.
• After all these settings click on the Save button.

Testing Gravity Forms Integration with Vision AI

To test the integration with Vision AI submit the form once with a wrong image that doesn’t contain any human and once with an image of a human. After this go to the backend and check the entry notes for both submissions.

The entry notes will contain the results or any errors it faced while executing the Vision AI prompt.