Generate Image Description

• Nov 20, 2024
• 2 minutes to read

AI-powered “Generate Image Description” extension generates the description for the image.

Applies To

• Rich Text Editor
• Spreadsheet Control

How It Works

The following animation uses the AI-powered “Generate Image Description” extension in a WinForms Rich Text Editor to generate image description:

The “Generate Image Description” extension also enables you to generate alternative text for an image. This feature is available from the Alt Text form, as shown in the image below:

Activate Generate Image Description

1. Install DevExpress NuGet Packages

1. DevExpress.AIIntegration.WinForms
2. DevExpress.Win.Design (enables design-time features for DevExpress UI controls)

Read the following help topics for information on how to obtain the DevExpress NuGet Feed and install DevExpress NuGet packages:

• Choose Between Offline and Online DevExpress NuGet Feeds
• Install NuGet Packages in Visual Studio, VS Code, and Rider

2. Register AI Client

The following code snippet registers the Azure OpenAI client:

C#

using Microsoft.Extensions.AI;
using DevExpress.AIIntegration;

internal static class Program {
    [STAThread]
    static void Main() {
        Application.EnableVisualStyles();
        Application.SetCompatibleTextRenderingDefault(false);
        IChatClient asChatClient = new Azure.AI.OpenAI.AzureOpenAIClient(new Uri(AzureOpenAIEndpoint),
            new System.ClientModel.ApiKeyCredential(AzureOpenAIKey))
            .AsChatClient("GPT4o");
        AIExtensionsContainerDesktop.Default.RegisterChatClient(asChatClient);
        Application.Run(new Form1());
    }
    static string AzureOpenAIEndpoint { get { return Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT"); } }
    static string AzureOpenAIKey { get { return Environment.GetEnvironmentVariable("AZURE_OPENAI_APIKEY"); } }
}

VB.NET

Imports Microsoft.Extensions.AI
Imports DevExpress.AIIntegration

Friend Module Program
    <STAThread>
    Sub Main()
        Application.EnableVisualStyles()
        Application.SetCompatibleTextRenderingDefault(False)
        ' Register Azure.OpenAI
        Dim asChatClient As IChatClient = (New Azure.AI.OpenAI.AzureOpenAIClient(New Uri(AzureOpenAIEndpoint), New System.ClientModel.ApiKeyCredential(AzureOpenAIKey))).AsChatClient("GPT4o")
        AIExtensionsContainerDesktop.Default.RegisterChatClient(asChatClient)
        Application.Run(New Form1())
    End Sub
    Private ReadOnly Property AzureOpenAIEndpoint() As String
        Get
            Return Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT")
        End Get
    End Property
    Private ReadOnly Property AzureOpenAIKey() As String
        Get
            Return Environment.GetEnvironmentVariable("AZURE_OPENAI_APIKEY")
        End Get
    End Property
End Module

Tip

Read the following help topic for additional information: How to Register an AI Client.

3. Create and Configure Behavior

1. Drop the BehaviorManager component from the Toolbox onto a Form.

2. Add a GenerateImageDescriptionBehavior, configure its settings, and attach the behavior to a DevExpress WinForms Spreadsheet or Rich Text Edit control. You can do this at design time or in code:

   

   C#

   using DevExpress.AIIntegration.WinForms;
   
    //...
   public SpreadsheetForm() {
       InitializeComponent();
       behaviorManager1.Attach<GenerateImageDescriptionBehavior>(richEditControl1);
   }
   

   VB.NET

   Imports DevExpress.AIIntegration.WinForms
   
   '...
   Public Sub New()
       InitializeComponent()
       behaviorManager1.Attach(Of GenerateImageDescriptionBehavior)(richEditControl1)
   End Sub