Salesforce Integration with OpenAI : Revolutionizing Image Generation

Hey Guys, today we are discussing DALL-E (which is a product of openAI) and Salesforce Integration (Salesforce Integration with OpenAI). DALL·E is designed to generate coherent and creative images based on textual descriptions. To understand if the discussions going on in the social circles were a fad or a real trend, we worked on integrating DALL-E with Salesforce. Join the boat of learning in this article to learn more about Salesforce integration with DALL-E.

What is OpenAI?

OpenAI is an AI research lab and company that develops and supports safe and effective AI technologies. Founded in 2015, OpenAI is known for creating advanced language models such as GPT-3 that can generate human-like responses to text. OpenAI's main goal is to improve artificial intelligence while ensuring fair and responsible use.

What is DALL·E?

The name "DALL·E" is a combination of the artist Salvador Dalí and the robot character WALL·E from the animated movie "WALL·E." The model is designed to generate creative and coherent images from textual prompts, demonstrating an understanding of both textual and visual information.

DALL·E's architecture and capabilities build upon the successes of previous models like GPT-3 and CLIP, enabling it to produce impressive visual outputs based on descriptive text input. It has the potential to be used in various applications, such as content creation, graphic design, and creative storytelling.

Benefits of integrating DALL-E with Salesforce

Integrating DALL·E with Salesforce (Salesforce Integration with OpenAI) can bring several benefits, especially if you want to enhance your Salesforce application with advanced image generation capabilities. Some of them are listed below to lure our developer friends into trying this new functionality out

• Language Translation to Images: DALL·E can translate textual descriptions in one language to corresponding images, showcasing its potential applications in cross-lingual contexts.

• Semantic Understanding: The model can grasp the underlying semantics of the input text and use that understanding to produce semantically relevant images.
• Image Generation from Text: DALL·E can generate creative and coherent images based on textual descriptions provided as input. Users can input detailed instructions or complex prompts, and the model will attempt to visualize the given text.

Don't forget to check out: Salesforce Integration with ChatGPT

DALL-E Integration in Salesforce (Salesforce Integration with OpenAI):

1. Set the HTTP method to POST.
2. Specify the URI as "https://api.openai.com/v1/images/generations".
3. In the request body (Raw), provide the necessary information in JSON format:
   1. Include the user's message within the "prompt" array, with the role as "user" and the content as the desired query.
4. Configure the authorization type as Bearer Token.
5. Enter the access token ("sk-xxxxxxxxxxxxxxxxxxxxx") provided by OpenAI.
6. Send the request to the API endpoint.
7. Retrieve the response, which will contain the generated reply from the OPENAI model.

By following these steps, We can effectively use DALL-E via POSTMAN, especially if you want to enhance your application with advanced image-generation capabilities.

To know how to integrate Salesforce with ChatGPT: https://kizzyconsulting.com/salesforce-integration-with-chatgpt/

DALL-E Integration in Salesforce using APEX:

1. Create a LWC component  which will provide a chat window-like interface.

HTML:

<template>
 <!--Lightning card for OpenAI-->
    <lightning-card title="Image Generator">
        <lightning-spinner alternative-text="Loading..." variant="brand" if:true={IsSpinner}>
        </lightning-spinner>
        <div class="slds-p-around--small">
            <template if:true={data}>
                <img src={data}/>
            </template>
            <B>Describe about the image</B>
            <lightning-textarea name="input1" value={question} onchange={handleChange}></lightning-textarea>
        </div>
        <div class="slds-align_absolute-center">
            <lightning-button variant="brand" label="Generate Image" title="Primary action" onclick={handleClick}
                class="slds-m-left_x-small"></lightning-button>
        </div>
    </lightning-card>
</template>

     JS

import { LightningElement, track } from 'lwc';
//Importing the Apex method to use in Js Controller
import getOpenAIResponse from '@salesforce/apex/ImageGeneratorUsingOpenAI.getOpenAIResponse';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ImageGenerationUsingOpenAI extends LightningElement {
    @track question;
    @track IsSpinner = false;
    @track lstData = [];
    data;
    // this method will used to store the Input Value in the Variable
    handleChange(event) {
        this.question = event.target.value;
        console.log(this.question);
    }
    //This method is used to call the Apex to send the request to the Open-AI
    handleClick() {
        // to start the spinner
        this.IsSpinner = true;
        getOpenAIResponse({ messageBody: this.question })
            .then(result => {
                if (result.isSuccess == true) {
                    //update the data to the apex response
                    this.data = result.response;
                    //to stop the spinner 
                    this.IsSpinner = false;
                }
                else{
                   this.showToast(result.message,result.response,result.message); 
                }
            });
    }
    showToast(title,msg,variant) {
    const event = new ShowToastEvent({
        title: title,
        message: msg,
        variant: variant,
    });
    this.IsSpinner = false;
    this.dispatchEvent(event);
}
}

Hit OpenAI endpoints by using a secret Key

//this class is used to Handle the Event from the imageGenerationUsingOpenAI.
public class ImageGeneratorUsingOpenAI {
    //this class is used to Handel the Event from the ImageGenerationUsingOpenAI
    @AuraEnabled
    public static AuraResponse getOpenAIResponse(String messageBody) {
        AuraResponse auraResponse;
        IntegrateChatGPTWithSalesforce__mdt newIntegrateChatGPTWithSalesforce = [SELECT URL__c,Access_token__c
                                                                                 FROM IntegrateChatGPTWithSalesforce__mdt 
                                                                                 WHERE Label = 'DalleImageGeneration' ];
        String requestBodyJson = '{"prompt": "'+messageBody+'"}';
        String endpointUrl = newIntegrateChatGPTWithSalesforce.URL__c;
        string accessToken = newIntegrateChatGPTWithSalesforce.Access_token__c;
        Http http = new Http();
        HttpRequest request = new HttpRequest();
        HttpResponse response;
        if(string.isNotBlank(endpointUrl)){
            request.setEndpoint(endpointUrl);
        }
        request.setMethod('POST');
        request.setHeader('Content-Type', 'application/json');
        if(string.isNotBlank(accessToken)){
            request.setHeader('Authorization', 'Bearer ' + accessToken); 
        }
        // Set the JSON data as the request body
        request.setBody(requestBodyJson);
                try {
            response = http.send(request);
            // Process the response here
            if (response.getStatusCode() == 200) {
                // Successful response
                String responseBody = response.getBody();
                fromJSON responseWrapper = (fromJSON) JSON.deserialize(responseBody, fromJSON.class);
                Integer createdValue = responseWrapper.created;
                List<cls_data> dataList = responseWrapper.data;
                String urlValue;
                // Access the URL(s) inside the data list
                for (cls_data dataItem : dataList) {
                    urlValue = dataItem.url;
                }
                if(string.isnotblank(urlValue)){
                    AuraResponse = new AuraResponse(true, 'SUCCESS', urlValue);  
                }
                // Process the responseBody JSON data
            } else {
                // Error handling for non-200 status codes
                AuraResponse = new AuraResponse(false, 'Error', response.getStatus());
            }
        } catch (Exception ex) {
            // Exception handling
            AuraResponse = new AuraResponse(false, 'Error', ex.getMessage());
        }
        return AuraResponse;    
    }
    public class AuraResponse {      
        @auraEnabled public Boolean isSuccess;
        @auraEnabled  public string message;
        @auraEnabled  public string response;
        public AuraResponse(Boolean isSuccess,
                            string message,
                            string response) {
                                this.isSuccess = isSuccess;
                                this.message = message;
                                this.response = response;
                            }
    }   
    public class fromJSON{
        public Integer created;
        public cls_data[] data;
    }
    public class cls_data {
        public String url;  
    }
}