A vida de um gerente de loja no mundo do eCommerce nem sempre é glamourosa. Você pode sonhar com lançamentos de produtos incríveis e receita disparando, mas muitas vezes acaba preso escrevendo descrições de produtos manualmente, preenchendo campos no Magento e tomando uma quantidade excessiva de mate.

Mas não precisa ser assim. Neste post, vou te guiar pelo processo de criação de uma extensão Magento 2 que automatiza a geração de descrições de produtos usando modelos de IA como OpenAI GPT-4 e Google Gemini.

Por que humanos deveriam gastar horas escrevendo descrições se podemos fazer as máquinas fazerem isso por nós? Vamos ao trabalho!

O Problema

Escrever descrições de produtos deveria ser responsabilidade do fornecedor, mas muitas vezes não é o caso, e os gerentes de loja acabam tendo que assumir essa tarefa tediosa. Ponto final. No entanto, é essencial para SEO, vendas e para fornecer aos clientes as informações necessárias para comprar.

Escrever manualmente centenas ou milhares de descrições pode ser extremamente demorado. Eu queria uma solução que pudesse:

• Usar IA para gerar descrições envolventes e concisas.
• Extrair dados de produtos dinamicamente: nome, categorias, preço, etc.
• Ser facilmente configurável para que os usuários pudessem escolher entre provedores de IA como OpenAI e Google Gemini.

Planejamento da Extensão

Para começar, eu mapeei os principais recursos que eu queria:

1. Ativar/Desativar o recurso: Os lojistas devem poder ativar ou desativar o recurso.
2. Seleção do provedor de IA: Permitir a troca entre as APIs do OpenAI e do Gemini.
3. Entradas de dados dinâmicos: Usar dados de produtos em tempo real, como nome, preço e categorias.
4. Configurações de administração: Adicionar campos para chaves de API e uma mensagem personalizada para orientar a saída da IA.

Para isso, aproveitei o sistema de configuração de administração existente do Magento e construí um controlador backend para interagir com as APIs de IA.

Codificando a Extensão

Estrutura de Arquivos

O Magento é construído em uma estrutura modular, o que facilita a criação de extensões “plug and play”. Toda extensão deve ter o nome de um fornecedor (como Werules) e o nome de um módulo (como Autofill). Dentro do diretório app/code, você cria a estrutura Vendor/Module.

Veja como a estrutura de arquivos ficou para esta extensão:

app/
└─ code/
    └─ Werules/
        └─ Autofill/
            ├─ Block/
            │   └─ Adminhtml/
            │       └─ AutofillButton.php
            ├─ Controller/
            │   └─ Adminhtml/
            │       └─ Autofill/
            │           └─ Generate.php
            ├─ Model/
            │   └─ Config/
            │       └─ Source/
            │           └─ ApiProvider.php
            ├─ etc/
            │   ├─ adminhtml/
            │   │   ├─ di.xml
            │   │   ├─ routes.xml
            │   │   └─ system.xml
            │   ├─ default.xml
            │   └─ module.xml
            ├─ registration.php
            └─ view/
                └─ adminhtml/
                    ├─ layout/
                    │   └─ catalog_product_edit.xml
                    └─ templates/
                        └─ button.phtml

Configuração do Admin

Primeiro, adicionei opções de configuração em Lojas > Configuração > Werules Autofill. Aqui está uma rápida visão geral das configurações criadas:

• Ativar recurso de preenchimento automático (alternar sim/não)
• Provedor de IA (dropdown: OpenAI ou Gemini)
• Chave da API OpenAI
• Chave da API Gemini
• Mensagem personalizada para LLM (instruções personalizadas para a saída da IA)

Aqui está o trecho XML para adicionar essas configurações:

<field id="api_provider" translate="label" type="select" sortOrder="6" showInDefault="1">
    <label>AI Provider</label>
    <source_model>Werules\Autofill\Model\Config\Source\ApiProvider</source_model>
</field>
<field id="api_key" type="text" sortOrder="10">
    <label>OpenAI API Key</label>
</field>
<field id="gemini_api_key" type="text" sortOrder="15">
    <label>Gemini API Key</label>
</field>
<field id="system_message" type="textarea" sortOrder="20">
    <label>System Message for LLM</label>
</field>

Com isso, criei um dropdown para selecionar o provedor de IA e campos para armazenar as chaves de API com segurança.

O botão na página de produto

Em seguida, injetei um botão personalizado na Página de Edição de Produto no admin do Magento. Quando clicado, esse botão envia os dados do produto para o controlador backend e obtém a descrição gerada pela IA.

Aqui está o script do frontend:

require(['jquery'], function ($) {
    window.fetchAutofillData = function () {
        var productId = '<?= $productId ?>';
        var productName = $('[name="product[name]"]').val() || 'N/A';
        var productPrice = $('[name="product[price]"]').val() || 'N/A';

        $.ajax({
            url: '<?= $ajaxUrl ?>',
            type: 'POST',
            data: { product_id: productId, product_name: productName, product_price: productPrice },
            success: function (response) {
                $('#product_form_short_description').val(response.short_description);
            }
        });
    };
});

Quando o botão é clicado, os dados do produto são enviados para o controlador backend, que então chama a API de IA para gerar a descrição. Assim é como o botão fica na página do produto:

Conectando com OpenAI e Gemini

O controlador backend verifica o provedor selecionado e chama a API apropriada. Aqui está a função para interagir com o Google Gemini:

private function generateDescriptionFromGemini($prompt, $apiKey)
{
    $ch = curl_init("https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateText?key={$apiKey}");
    $data = ['contents' => [['parts' => [['text' => $prompt]]]]];

    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $response = curl_exec($ch);
    $decoded = json_decode($response, true);
    return $decoded['candidates'][0]['content'] ?? 'No description generated.';
}

Ao escolher dinamicamente entre OpenAI e Gemini, os lojistas podem usar o serviço de IA que melhor se adapta às suas necessidades.

Testando a Extensão

Depois de configurar tudo, testei o fluxo:

1. Ative o recurso no painel de administração.
2. Selecione OpenAI ou Gemini e insira a chave de API correspondente.
3. Vá para a Página de Edição de Produto e clique no botão “Preencher descrição curta”.

O botão enviou os dados do produto (nome, preço, categorias) para a IA e obteve uma descrição concisa.

Publicando a Extensão

Para tornar a extensão acessível a todos, eu a publiquei no GitHub:
👉 Magento 2 Short Description Autofill

Considerações Finais

Este projeto foi uma exploração divertida de como combinar Magento 2 com ferramentas de IA como OpenAI e Gemini. Automatizar tarefas repetitivas, como escrever descrições de produtos, é uma ótima maneira de economizar tempo e energia para os lojistas.

Seja você o proprietário de uma loja de eCommerce ou alguém que gerencia centenas de produtos, integrar a IA pode melhorar significativamente seu fluxo de trabalho.

Sinta-se à vontade para conferir a extensão, contribuir com o projeto ou compartilhar suas ideias para novos recursos. Vamos continuar fazendo as máquinas realizarem as tarefas chatas enquanto focamos no crescimento dos nossos negócios 🚀.

Até a próxima!