Atunci când scriem un articol în WordPress o mare parte din timp este consumat cu stabilirea imaginilor din articol. Dacă nu dispunem de imagini făcute de noi de obicei căutăm imagini disponibile pe internet, le prelucrăm, le convertim, le adăugăm în WordPress și probabil tot nu suntem mulțimiți de ele.
Mie cel puțin această sarcină repetitivă îmi consumă foarte mult timp și aproape de fiecare dată sunt nemulțumit și cred că aș fi putut alege o imagine mai bună.
Deci cum am putea automatiza acest proces și obține imagini reprezentative în cel mai scurt timp folosind inteligența artificială?
Există mai multe soluții pentru această problemă, dar pentru exemplu de azi vom alege o variantă ușor de înțeles și rapid de implementat, folosind modelul Flux și platforma Replicate.
Puteți urmări videoclipul youtube asociat acestui articol aici.
Etapele automatizării
Pentru a genera imagini pentru articole putem împărți procesul în trei etape distincte:
Generarea unui prompt sau descriere a imaginii asociate unui articol și preluarea acestui prompt
Această etapă poate fi abordată în mai multe moduri, dar premiza este că atunci când scrie un articol, utilizatorul ar trebui să poată utiliza un câmp în care să introducă descrierea imaginii dorite și să existe un buton prin care utilizatorul să solicite generarea imaginii.
Putem constui un plugin wordpress cu avantajul prelucrăii datelor în interiorul website-ului, dar și cu consecința negativă a încărcării serverului și suprasolicitării resurselor acestuia, sau – varianta aleasă de mine acum – putem construi o extensie chrome care să ruleze doar în pagina de editare a produsului.
Extensia chrome se poate instala local, nu încarcă website-ul cu nimic și este extrem de rapid de programat.
Fișierele cele mai imporante sunt:
Manifest.js
{
"manifest_version": 3,
"name": "Wordpress Generate Imagini",
"version": "1.0",
"description": "Generate images for WordPress posts",
"permissions": ["activeTab", "scripting"],
"host_permissions": [
"https://ai-romania.ro/*"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["*://*/*/wp-admin/post-new.php*", "*://*/*/wp-admin/post.php*"],
"js": ["content.js"],
"css": ["styles.css"]
}
],
"action": {
"default_popup": "popup.html"
}
}background.js
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === 'complete' && tab.url && tab.url.includes('post')) {
chrome.scripting.executeScript({
target: { tabId: tabId },
files: ['content.js']
}).catch(err => console.error('Failed to execute content script:', err));
}
});Am setat în acest fișier pagina în care va funcționa extensia, respectiv paginile care includ expresia post.
content.js
function addImageGenerationElements() {
if (document.getElementById('wp-generate-imagini')) {
return; // Elements already added
}
// Create container
const container = document.createElement('div');
container.id = 'wp-generate-imagini';
container.style.position = 'fixed';
container.style.bottom = '20px';
container.style.left = '20px';
container.style.width = '250px';
container.style.zIndex = '9999';
// Create textarea
const textarea = document.createElement('textarea');
textarea.placeholder = 'prompt';
textarea.id = 'wp-generate-imagini-prompt';
textarea.style.width = '250px';
textarea.style.height = '350px';
// Create button
const button = document.createElement('button');
button.textContent = 'Generare Imagine';
button.id = 'wp-generate-imagini-button';
button.style.width = '250px';
// Create span
const span = document.createElement('span');
span.id = 'wp_generate_imagini_span';
span.textContent = 'Imaginea este generata';
span.style.display = 'none';
span.style.width = '250px';
// Append elements to container
container.appendChild(textarea);
container.appendChild(button);
container.appendChild(span);
// Append container to body
document.body.appendChild(container);
// Add event listener to button
button.addEventListener('click', function() {
const prompt = textarea.value;
if (prompt ) {
const url = `https://api.ai-romania.ro/replicate_flux.php?prompt=${encodeURIComponent(prompt)}`;
wp_generate_imagini_span.style.display = 'block';
setTimeout(() => wp_generate_imagini_span.style.display = 'none', 3000);
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.json();
})
.then(data => {
});
}
});
}
// Run the function when the DOM is fully loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', addImageGenerationElements);
} else {
addImageGenerationElements();
}
addImageGenerationElements();După cum se vede din cod, extensia generează un container populat cu un textarea unde se poate introduce descrierea imaginii, un buton de generare a imaginii și un span în care va apărea o notificare legată de generarea imaginii.
Promptul este trimis către un webhook care apelează utilitarul de generare a imaginii.
Generarea unei imagini pe baza promptului utilizatorului
Putem genera imagini cu inteligență artificială atât local, cât și în cloud folosind Stable Diffusion, Flux și alte aplicații.
Am ales să folosesc platforma Replicate care găzduiește mai multe modele AI, printre care și mai multe variante FLUX care sunt extrem de ușor de apelat prin API.
Costul de generare a unei imagini pornește de la 0.3 euro cenți. Desigur putem evita aceste costuri instalând aplicațiile generative pe dispozitivele locale, dar trebuie să ținem seama și de cerințele tehnice, respectiv puterea de calcul necesară. Eu personal folosesc Stable Diffusion și Flux local, doar câ generarea unei imagini nu se face instant.
Replicate introduce cererea de generare a unei imagini într-o coadă de așteptare și când imaginea este generată trimite o notificare câtre un webhook precizat de utilizator împreună cu url-ul unic al imaginii respective.
O implementare a codului de apelare a API-ului replicate este următoarea:
<?php
$prompt = isset($_GET['prompt']) ? $_GET['prompt'] : '';
if (empty($prompt)) exit;
$url = "https://api.replicate.com/v1/models/black-forest-labs/flux-schnell/predictions";
$REPLICATE_API_TOKEN = "XXXXXXXXXXXXXX";
$data = array(
"webhook" => "https://n8n.ai-chatbots.ro/webhook/a3ae0191-43a9-450XXXXXXXXXX",
"webhook_events_filter" => ["completed"],
"input" => array(
"prompt" => $prompt,
"aspect_ratio" => "16:9",
"output_format" => "webp",
"output_quality" => 100
)
);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Authorization: Bearer ' . $REPLICATE_API_TOKEN,
'Content-Type: application/json'
));
$response = curl_exec($ch);
curl_close($ch);
exit;
?>După cum se observă din cod, API-ul Replicate este apelat cu promptul primit de la extensia chrome la care se adaugă parametri specifici: aspect, format de ieșire și calitatea imaginii.
De asemenea am generat un webhook pentru notificări prin sistemul N8N care va fi apelat de Replicate când imaginea este generată.
Preluarea imaginii generate și încarcarea acesteia în WordPress
Această etapă are la rândul ei doi pași:
- Replicate anunță webhook-ul că imaginea este pregătită;
- Webhookul apelează un endpoint care preia imaginea și o adaugă în WordPress prin REST API.
Acești pași sunt strict pentru a explica funcționalitatea acestui exemplu. Desigur Replicate poate trimite datele direct către un plugin WordPress, dar hai să vedem ce se întâmplă în exemplul meu:
Webhookul primește informația de la Replicate în format json, apoi prelucrează această informație și extrage url-ul imaginii generate.
În pasul final N8N trimite o notificare pe email că o imagine a fost generată și apelează endpointul care face încărcarea imaginii în WordPress cu codul următor:
<?php
$imagine_url = isset($_GET['imagine_url']) ? $_GET['imagine_url'] : '';
if (!empty($imagine_url)) {
$content = file_get_contents($imagine_url);
$info = explode(".", $imagine_url);
$ext = end($info);
$filename = time() . '.' . $ext; // name the file with the current timestamp
file_put_contents($filename, $content); // save the file locally
$username = "XXXXXXXX";
$password = "XXXXXXXXXX";
$basic_auth = base64_encode("$username:$password");
// upload in wordpress
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://ai-romania.ro/wp-json/wp/v2/media/",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_HTTPHEADER => array(
"authorization: Basic " . $basic_auth,
"cache-control: no-cache",
"content-disposition: attachment; filename=" . $filename,
"content-type: image/" . $ext,
),
CURLOPT_POSTFIELDS => $content,
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
}
exit;
?>După cum se vede, codul are ca intrare url-ul imaginii. Codul preia conținutul acesteia și apoi o adaugă în Media Library din WordPress.
Implementare automatizare generare imagini în WordPress
Așadar în rezumat:
- o extensie chrome adaugă un textarea și un buton în pagina de editare articole;
- utilizatorul completează textarea și dă click pe butonul de generare imagini;
- extensia trimite promptul către un webhook care apelează API-ul Replicate și îi seteazaă webhookul unde trebuie notificată generarea imaginii;
- Replicate generează imaginea și trimite notificarea;
- N8N prelucrează notificarea și la rândul lui trimite o notificare pe email și apelează un ultim webhook cu url-ul imaginii generate;
- ultimul webhook preia imaginea generată și o adaugă în WordPress.
Într-o aplicație reală pluginul WordPress ar adâuga textarea și butonul în pagina de articol și ar apela direct API-ul Replicate, iar acesta ar notifica un listener din plugin care ar salva imaginea pe server.
Concluzii
Pe același principiu inteligența artificială ar putea fi utilizată pentru a îmbunățăți și conținutul text al articolului, de exemplu prin generarea unui cuprins, un scurt rezumat, corecturi automate ale textului sau chiar cercetare și rescriere a unor secțiuni din text.
Fie că folosim extensii chrome sau scriem pluginuri rezultatul este același, contează mai mult ce resurse cerem server-ului WordPress (recomand să nu îl încărcăm inutil) și ce API-uri integrăm (un generator de imagini sau un model AI conversațional.
Există probabil suficiente pluginuri deja pe piață, dar prin abordarea aceasta însă avem un control total asupra integrărilor folosite. Putem controla costurile, calitatea (alege modelele AI) și chiar instrui inteligența artificială cum să răspundă cel mai convenabil pentru noi.