AIImageGenerator.Optimizely 1.0.0

AI Image Generator for Optimizely Commerce 14

A powerful extension that brings AI-powered image generation directly into your Optimizely Commerce 14 product editing experience.

Features

• ✨ AI-Powered Image Generation - Generate professional product images using AI
• 🎨 Customizable Prompts - Add custom descriptions for tailored results
• 🖼️ Lifestyle Image Blending - Combine product images with lifestyle photos
• 🔐 Secure API Integration - API key management through appsettings.json
• 🚀 Easy Installation - Simple NuGet package installation
• 📱 Modern UI - Beautiful, responsive interface integrated into Commerce edit mode

Requirements

• Optimizely Commerce 14.x
• Optimizely CMS 12.x
• .NET 6.0 or higher
• Active AI Image Generation API subscription

Installation

Step 1: Install NuGet Package

dotnet add package AIImageGenerator.Optimizely

Or via Package Manager Console:

Install-Package AIImageGenerator.Optimizely

Step 2: Configure API Key

Add the following configuration to your appsettings.json:

{
  "AIImageGenerator": {
    "ApiKey": "your-api-key-here",
    "Endpoint": "https://avance-ecommerce.app.n8n.cloud/webhook/item_image_creator"
  }
}

Important: The Endpoint is optional and will default to the value shown above if not specified.

Step 3: Add Property to Product Content Type

Add the following property to your ProductContent model:

using System.ComponentModel.DataAnnotations;
using EPiServer.Core;

namespace YourProject.Models.Catalog
{
    public class YourProductContent : ProductContent
    {
        [Display(
            Name = "AI Generated Image",
            Description = "Generate AI-powered product images",
            GroupName = SystemTabNames.Content,
            Order = 100)]
        [UIHint("AIImageGenerator")]
        public virtual string AIGeneratedImage { get; set; }
    }
}

Step 4: Build and Run

1. Build your solution
2. Clear browser cache
3. Navigate to Commerce → Catalogs → [Your Product]
4. The AI Image Generator widget will appear in your product edit view

Usage

1. Open a Product - Navigate to any product in Commerce Manager
2. Locate the AI Image Generator - Find the "AI Generated Image" property
3. Optional: Add Custom Inputs
   • Lifestyle Image URL: Add a background/context image URL
   • Custom Prompt: Describe the desired scene or setting
4. Click "Generate Image" - Wait for the AI to create your image
5. Review & Save - Preview the generated image and save your product

API Authentication

The extension sends requests to your AI service with the following header:

Authorization: API-key {your-api-key}

Ensure your API endpoint accepts this authentication format.

Request Format

The extension sends the following JSON payload:

{
  "item_image_url": "https://...",
  "item_name": "Product Name",
  "item_description": "Product description",
  "item_info": "Additional info",
  "item_product_number": "SKU123",
  "item_supplier": "Supplier name",
  "image_combine_url": "https://... (optional)",
  "image_combine_prompt": "Custom prompt (optional)"
}

Response Format

The API should return:

[
  {
    "combinedImage": "https://generated-image-url.jpg"
  }
]

Or:

[
  {
    "convertedImage": "https://generated-image-url.jpg"
  }
]

Monetization & Licensing

This extension is designed to be sold as a commercial product. Each API request can be tracked and billed based on:

• Number of image generations
• API usage metrics
• Customer subscription tier

Configure your n8n webhook to track usage per API key for billing purposes.

Customization

Change the Widget Appearance

Modify the styles in ClientResources/Scripts/AIImageGeneratorWidget.js (lines with .ai- CSS classes).

Add Additional Fields

Extend the ImageGenerationRequest model in Models/ImageGenerationRequest.cs.

Custom API Endpoint

Override the endpoint in your appsettings.json:

{
  "AIImageGenerator": {
    "ApiKey": "your-key",
    "Endpoint": "https://your-custom-endpoint.com/api/generate"
  }
}

Troubleshooting

Widget Not Appearing

1. Clear browser cache and do a hard refresh (Ctrl+F5)
2. Check module.config is properly loaded
3. Verify UIHint is correctly set to "AIImageGenerator"
4. Check browser console for JavaScript errors

API Key Errors

1. Verify appsettings.json contains the correct API key
2. Check configuration path: AIImageGenerator:ApiKey
3. Restart application after changing appsettings.json

Image Not Generating

1. Check browser network tab for failed requests
2. Review application logs for detailed error messages
3. Verify product has a primary image (required for generation)
4. Test API endpoint directly with Postman/cURL

Authorization Issues

The extension requires one of these roles:

• WebEditors
• WebAdmins
• Administrators

Ensure the current user has appropriate permissions.

Support

For support, please contact:

• Email: support@genieai.com
• Documentation: [Link to your docs]

License

Commercial License - © 2024 GenieAI. All rights reserved.

Changelog

Version 1.0.0

• Initial release
• AI image generation integration
• Lifestyle image blending
• Custom prompt support
• Secure API key management