Image AI Assistant App Installation Guide

Image AI Assistant is an AI-based natural language processing platform that processes and transforms images. It can generate and edit your images with more accuracy.

Through the Contentstack Marketplace, you can install the Image AI Assistant app and use it within your entries to generate images. You can add the Image AI Assistant app in the Field Modifier UI location for different entry fields such as File and JSON Rich Text Editor.

• Contentstack account
• Access to the Contentstack Organization/Stack as the Owner/Admin

Let's follow the step-by-step guide to install the Image AI Assistant app within your stack.

1. Install Image AI Assistant in Contentstack Marketplace
2. Use Image AI Assistant within your Stack Entry

1. Install Image AI Assistant in Contentstack Marketplace

   link

   Follow the steps given below to install the Image AI Assistant app in Contentstack.

   1. Log in to your Contentstack account.
   2. From the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace.
      Click to enlarge
   3. Click Apps from the left panel.
   4. Within the Marketplace, you can see all the available apps. Hover over the Image AI Assistant app and click Install.
   5. In the pop-up window that opens, select the stack where you want to install the Image AI Assistant app, accept the terms of service, and click the Install button.
      Click to enlarge
   6. On the Configuration page, you can select the way you want to configure the app under the Platform Configuration for Image Generation section. The following are the two methods through which you can configure the Image AI Assistant app:
      1. Managed by Contentstack: By using this method, you can configure the app using the Contentstack powered API keys. Select the Managed by Contentstack radio button and click Save and Proceed.
         Click to enlarge
      2. Custom Credentials: In this method, you can configure the app using the third-party API credentials, such as OpenAI, AWS Bedrock, or Google Vertex AI. Select the Provider name from the dropdown, enter the required credentials, and click Save and Proceed to configure the app.
         Click to enlarge
   7. Click Save to save the app configurations.
   8. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.
      Click to enlarge

      Additional ResourceFor more information on UI locations, please refer to the Installed Apps guide.

   9. Once you have configured the app, click Open Stack to start using the Image AI Assistant app.

   Additional ResourceYou must configure and specify the field type(s) that will work for the Field Modifier UI location to use the Image AI Assistant app within your stack. Please refer to the Field Modifier UI location document to configure the Image AI Assistant app for the UI location.

2. Use Image AI Assistant within your Stack Entry

   link

   To use the Image AI Assistant app within an entry of your stack, follow the steps given below:

   1. Go to your stack, click the Content Models icon from the left navigation panel, and click the + New Content Type button.
   2. Create a content type by adding relevant details as displayed below and click the Save and proceed button.
      Click to enlarge
   3. To use the Image AI Assistant app, create an entry for the above content type. In the left navigation panel, navigate to the Entries page, click + New Entry to create a new entry for the above content type, and then click Proceed.
   4. You can see the Image AI Assistant app in the Field Modifier location. The Image AI Assistant app adds images to the File and JSON Rich Text Editor field.
   5. Click the Image AI Assistant app icon to add images (as shown in the screenshot).
      Click to enlarge
   6. You can generate an image using prompts, existing assets, or by uploading new assets.
      Click to enlarge

   Let's now discuss how to use these options in detail.

   Generate Image using Prompt

   link
   1. Select Prompt from the available options to generate an image.
      Click to enlarge
   2. Provide the appropriate image description as a prompt and click the Generate button.
      Click to enlarge
   3. To get more options, click the Generate More button.
      Click to enlarge
   4. Choose the image and click Add Asset(s) to add the selected image in the File field.
      Click to enlarge
   5. Now, click Upload Image to upload the images to the assets folder.
      Click to enlarge

      The selected image gets added to the File field.

      Click to enlarge
   6. If you have changed the prompt after generating an image, the app will ask you to generate a new image or edit an existing image. You can use the Generate New dropdown.
      1. Generate New: Select the Generate New option from the dropdown to generate a new image.
         Click to enlarge
      2. Edit: Select the Edit option from the dropdown to edit an existing image using a new prompt.
         Click to enlarge
      3. You can view the edited image. Now you can generate more images or add assets to the File field.
         Click to enlarge
   7. To add multiple images in the File field, go to the File field Advanced properties option and check the Multiple option as shown in the screenshot below. If required, you can also set the maximum limit.
      Click to enlarge
   8. Select multiple images by clicking the checkboxes and add them to the File field.
      Click to enlarge

   Edit with AI

   link
   1. Hover over the image and click the Edit with AI icon to edit the image.
      Click to enlarge
   2. The Image AI Assistant app provides few editing tools, as discussed below:
      1. Erase: You can set the eraser to a required value by using the progress bar (given below the image) and erase any area within the image.
         Click to enlarge
      2. Select: You can select a specific area and erase it for editing.
         Click to enlarge
      3. Reset: You can reset the image.
      4. Undo: You can undo the edit action.
      5. Redo: You can redo the edit action.
         Click to enlarge
   3. Then, provide the respective prompt in the image description field and click the Generate button.
      Click to enlarge
   4. You can view the updated images. Select and add them by clicking the Add Asset(s) button.
      Click to enlarge

   Expand Image

   link
   1. Click the Expand icon to view the image in full-screen.
      Click to enlarge
   2. View the image in full-screen mode and click the Add Asset button.
      Click to enlarge

   Generate Image using Asset

   link
   1. Click Asset to generate an image from the existing image in the asset folder.
      Click to enlarge
   2. Choose an image and click the Add Selected Asset button to add the image.
      Click to enlarge
   3. This opens up the image in the edit mode. You can edit the image, add the asset, and upload it to view the image in the File field.

      TipRefer to the Edit with AI section for further information.

   Generate Image using New Upload

   link
   1. Click New Upload to add a new image in the assets folder and generate an image from the uploaded asset.
      Click to enlarge
   2. Click the Upload Here button to select a new image and add it to the assets folder.
      Click to enlarge

      Note The image dimensions must be the same i.e. it must be square.

   3. This opens up the image in the edit mode. You can edit the image, add the asset, and upload it to view the image in the File field.

      TipRefer to the Edit with AI section for further information.

   You can also generate images in the JSON Rich Text Editor field by clicking the icon (pointed in the screenshot).

   Click to enlarge

   You can generate an image using prompts, existing assets, or by uploading new assets.

   Click to enlarge

   NoteYou can add multiple images in JSON RTE.