Blogs

What an exciting time to be working in the technology field! We have so many great tools available to us that can benefit everyone. Generative AI (GenAI) is a perfect example of an amazing set of tools that is quickly gaining traction. I have to share my excitement about GenAI since the ways it can be used seem to be limitless!

You might think that integrating GenAI with your current technical landscape will be very complex or costly. In this article, I will share my story of going from being new to GenAI and tinkering around with an idea, to having over a dozen GenAI integrations built for Liferay’s Headless APIs in a helpful tool that we are happy to be able to share with you and the community.

Options seen within the Liferay OpenAI Content Wizard React project

But first, let’s set the stage.

Many people think that GenAI is limited to generating blogs or articles quickly, which it can do, but we have seen teams take existing content from one group or department and, using GenAI, transform it into something useful for another group or different audiences. Here is an example: If you have promotional materials for services intended for an adult audience, you could easily use GenAI to transform that content into informational or educational material for a K-12 audience (elementary and secondary school grades) with a friendly tone and language suitable for that audience. Just as easily, you can translate existing content into a different language. Liferay currently offers both tone selection in its OOTB Generative AI content integration and integration with automatic translation providers to ease the process of translating. For example, with a single click of a button, you can get a full article/page translated into the language of your choice. You can also configure Liferay to automatically tag content and images through OOTB AI integrations.

Recently, we have been working with teams that want to generate images in a similar way to text content. This is now easy to do based on a prompt from the user without that user having to have any technical knowledge. The quality of the newer GenAI image models are surprisingly good. These GenAI-created images can then be used within many aspects of the user experience and content creation. Liferay has OOTB image generation on its near-term roadmap for the Document Library.

Through this journey, we discovered that when properly integrated, we can use Generative AI to create complex data structures. Liferay supports a visual, low-code approach to building data structures that automatically creates a full set of Headless APIs. I have quite a bit of personal pride in working with teams on a project where we integrated Generative AI with Liferay’s Headless APIs for a custom data structure to generate datasets of a list of counties and populations within a region in only a few seconds. This can be applied to any variety of topics or themes that are useful to the teams we work with. The outcomes are limitless.

The Idea Forms…

My team builds Liferay demos. We do this to share the story of Liferay with our customers. Since Liferay can be deployed and implemented in countless ways, each demo offers its unique challenge of showcasing our extensive toolbox of business tools in a way that relates to each customer’s wants and needs. I have to hand it to my team – they are tireless in this effort. Thank you for this!

When generating content within Liferay, we like to gather content that matches the customer’s business verticals, provided services, and expected outcomes. And sorry, “lorem ipsum” just does not cut it. This can take a sizable amount of time and effort and can distract from other responsibilities. In the case of complex structures, such as products, knowledge bases, or message boards it often requires time-consuming research to create content that provides an impactful result and feels “authentic”.

Previously our team had used data imports and Groovy scripts to bring content into Liferay. Scripts provided a notable improvement in efficiency. The downside was that you needed to be somewhat tech-savvy and edit the scripts to use this approach. So we thought, “What if we integrated GenAI with Liferay’s extensive Headless APIs?”.

The Liferay OpenAI Product Generator

Using a few front-end technologies, we created a simple interface allowing users to enter an OpenAI prompt and return a JSON result that provided product details. The returned JSON is generated by an integration with OpenAI using an integration key. 


Product Creation within the Liferay OpenAI Content Wizard React project

returns:

[ 
      {
        "productName": "Smart Light Switch",
        "price": "$29.99",
        "shortDescription": "Control your lights remotely and save energy"
      },
      {
        "productName": "Motion Sensor Light",
        "price": "$14.99",
        "shortDescription": "Automatically turns on and off based on movement"
      },
      {
        "productName": "Smart Thermostat",
        "price": "$59.99",
        "shortDescription": "Programmable thermostat that optimizes energy usage"
      }
]

It is critical that the returned JSON structure is the same each time to be able to store the data properly and catch any errors in formatting. Simple string parsing will not do! To make sure that the result returned is exactly the correct JSON structure, OpenAI offers function calls. In our case, we needed to define the schema to describe what needs to be returned. The following is an example of a product schema used in this approach:

const productSchema = {
  "parameters": {
    "products": {
      "description": "An array of products within the suggested category",
      "items": {
        "properties": {
          "price": {
            "description": "Cost of this product in USD",
            "type": "string"
          },
          "productName": {
            "description": "The name of a product that exists in the given category",
            "type": "string"
          },
          "shortDescription": {
            "description": "A short description of this product",
            "type": "string"
          }
        },
        "type": "object"
      },
      "required": [
        "productName",
        "shortDescription",
        "price"
      ],
      "type": "array"
    }
  },
  "type": "object"
}

Once the data is returned from OpenAI, we can pass that along to Liferay’s Headless endpoints to load into the system resulting in the quick creation of products. With the GenAI creation of images, this process takes slightly longer by ~ 6-10 seconds per image. Comparatively, we get the result in a very small amount of time for a handful of categorized products which saves a massive amount of time gathering and loading content manually.
 

Products created using a Liferay/OpenAI content integration

Make an Impact with GenAI Images!

One of the things that we were excited to try out was the ability for GenAI to create images based on a description. At first, it was a bit intimidating to attempt, but it turns out that it was just as simple as using the text generation models – just supply a description of what you want and the model you wish to use. For OpenAI, two excellent image generation models are provided – DALL·E-2 and DALL·E-3. 

With the Product example above, we are giving the user the option to choose the image generation model and also select the style of the images. Also, we provide a calculated cost of the generation based on the number of generated images. 

DALL·E-3 is a bit more expensive at 0.04 cents per generated image, with DALL·E-2 coming in at 0.02 cents, but since we are speaking in pennies and not dollars GenAI images will most likely not break the bank. We have seen a significant improvement in DALL·E-3 in the ability to create realistic human depictions and options to generate images based on artistic styles.

As an example of choosing an artistic style, you could create images with a specific look to give the feeling of consistency over time or meet specific branding guidelines. Options are wide open for this. We would suggest style prompts such as “Vector Art”, “Photorealism”, “Flat Design”, ”Pixel Art”, or “Digital Impressionism”, but in the end, it is up to you to choose.

Blogs created using a Liferay/OpenAI content integration with a “Flat Design” image style

Leveraging GenAI for Liferay Objects and Custom Schemas

Liferay Objects is a low-code approach to building data structures where you get Headless APIs automatically. As noted in the introduction, we are happy to say that GenAI can work in that context too. Recently we were involved in a project where we integrated Generative AI with Liferay’s Headless APIs for a custom data structure to create a list of counties, capitals, and populations.

For this integration, we provide a user interface where the data set can expand to as many fields as needed. The user specifies the list of field names and descriptions since some of the fields can be optional, and indicates which Liferay API endpoint to call to populate the data set. As the user makes changes in the interface, the schema request to OpenAI needs to be updated accordingly.

UI for a Liferay/OpenAI content integration with Liferay Objects

Using the Liferay Object’s batch endpoint, this integration was able to populate this schema with records in 10 seconds. 

Custom Liferay Object records that were generated using a Liferay/OpenAI content integration

The flexibility of these integrations and potential outcomes is quite exciting. An example we have seen recently is generating a list of recipes with instructions, cook times, cook temperature, and ingredients. We look forward to hearing more stories about how people use these integrations!

Where to go from here?

We hope you share our excitement about the power of GenAI integrations with Liferay, and we would love to hear your story! We will continue to invest in our integrations with these technologies. Some of the most exciting updates have been incorporating feedback on features such as the importance of language support. The new language support feature of the Liferay OpenAI Content Wizard has enabled teams to create a multilingual FAQ section on a topic in a matter of seconds!

As a company, we enjoy integrating with technologies such as GenAI, but more importantly, we love helping others do their work efficiently. Let’s build great things!
 

The “Liferay OpenAI Content Wizard” featured in this article can be found here:
https://github.com/weskempa-liferay/liferay-openai-demo-wizard