Copia una web mirant-la

Fred o calent

Copiar una cosa mirant-la és molt més fàcil quan se'n pot comprovar el resultat. Amb un model d'IA passa el mateix: si el bucle li diu en què s'aparta la seva còpia de l'original, la pot anar afinant sense que ningú li expliqui com estava feta.

Dos treballs de recerca del 2026 han portat aquesta idea a programes sencers i a milers de pàgines web. I el mateix esquema cap en un ordinador personal, amb una targeta de producte com la de la imatge.

Programes sencers sense veure el codi

MirrorCode és una prova de programació de llarg recorregut publicada el 29 de juny de 2026 a arXiv, el repositori obert d'articles científics. La signen investigadors d'Epoch AI, organització de recerca sense ànim de lucre sobre el futur de la intel·ligència artificial que es finança amb donacions i fa estudis per encàrrec per a empreses i governs; de METR, organització sense ànim de lucre que avalua models d'IA, i de tres organitzacions més.

Un agent d'IA ha de refer un programa sencer sense veure'n el codi font. Només el pot executar amb els arguments que vulgui i mirar què retorna, el que els autors anomenen «a black-box oracle», un oracle de caixa negra. La seva versió ha de donar exactament la mateixa sortida en proves de principi a fi, incloses altres que no ha vist.

Són 25 programes de camps molt diferents, des d'utilitats d'Unix fins a criptografia i compressió. Dels tres models principals avaluats, Claude Opus 4.7, GPT-5.5 i Gemini 3.1 Pro Preview, el millor va ser Claude Opus 4.7, que segons els autors va refer gairebé del tot gotree, una eina de bioinformàtica escrita en Go.

Els autors matisen que funciona sobretot quan els requisits estan definits amb precisió, i que la majoria de les fallades van venir de casos límit.

Webs a partir d'una foto

WebUI-95 aplica la idea a la web. És un resum ampliat acceptat a CHI 2026, un congrés internacional d'interacció persona-ordinador celebrat a Barcelona, i el publica a la seva pàgina Tommaso Calò, investigador postdoctoral de la Universitat IT de Copenhaguen (IT University of Copenhagen) especialitzat en interacció persona-ordinador i intel·ligència artificial.

A un model d'IA especialitzat a passar de captura a codi se li va donar la imatge de cada pàgina de WebUI, un conjunt de dades de pàgines web, i el seu codi es va pintar amb Playwright, una biblioteca de codi obert per controlar navegadors. La semblança la mesura UIClip, un model ajustat per comparar captures d'interfícies, amb la similitud cosinus: una altra mesura, diferent de la de l'exemple de més avall.

Segons els autors, el codi refet ocupa al voltant d'un 95 % menys que l'original perquè les webs reals arrosseguen frameworks, restes de compilació i capes que no es veuen, i el model només reescriu el que és visible.

El bucle, ronda a ronda

En un exemple amb una targeta de producte fictícia, una «Lámpara Girasol» feta a mà en HTML i CSS, es va capturar la pàgina a 800 × 600 píxels amb Playwright i se li va passar a Claude Haiku 5.5, el model més lleuger de la família Claude d'Anthropic, amb `claude -p --model claude-haiku-5-5` des de Claude Code.

La primera ordre: escriure un únic HTML autònom, amb el CSS a `<style>`, sense imatges externes ni JavaScript i amb la font DejaVu Sans, que reproduís la captura a 800 × 600. En les rondes següents rebia l'original, el seu últim intent, el mapa de diferències, el seu HTML i la nota SSIM, amb l'ordre de corregir posicions, mides, colors, tipografia i marges.

La nota es va calcular sobre la pàgina sencera i sobre un retall de la targeta, perquè el fons llis, que qualsevol intent encerta, infla la primera.

El primer intent ja va encertar la composició. Fallaven els detalls fins, que el seu mapa de diferències, el de la imatge, marca en vermell: la mida, l'interlineat i la posició del text, el botó i el cercle. El mapa està normalitzat al màxim de cada imatge: el de l'última ronda es veuria igual de vermell, tot i que les seves diferències són molt més petites.

I no sempre va millorar. El millor intent va ser el tercer; el quart va empitjorar una mica, i les dues últimes rondes només van tocar píxels solts, com una lletra que va passar de 13 a 12,8 píxels. Guarda el millor intent, no l'últim, i atura't quan la nota deixi de pujar.

L'HTML refet és més llarg que l'original, que ja era net: l'estalvi de WebUI-95 ve de webs reals carregades de codi que no es veu. I cinc rondes d'un únic exemple no mesuren la qualitat d'un model; només ensenyen com funciona el bucle.

Fes-ho tu

Cal Python 3, `pip install playwright scikit-image pillow`, `playwright install chromium` per descarregar el navegador i un model que llegeixi imatges: serveix qualsevol assistent que accepti una imatge i torni codi, o un model local amb visió, encara que pot rendir pitjor.

Pas 1: captura una pàgina pròpia i senzilla a una mida fixa, per exemple 800 × 600, amb `page.screenshot(path="original.png")`. Pas 2: demana al model un HTML autònom que la reprodueixi, amb l'ordre de la primera ronda de l'exemple.

Pas 3: pinta l'HTML a la mateixa mida i calcula l'SSIM amb `structural_similarity(a, b, channel_axis=2, data_range=255)` de scikit-image, a la pàgina sencera i a la zona del contingut. Amb `full=True` també retorna el mapa píxel a píxel, d'on surt la imatge de diferències.

Pas 4: passa al model l'original, el seu intent, el mapa, l'HTML i la nota, i demana-li que corregeixi; repeteix-ho quatre o cinc rondes. Pas 5: apunta cada ronda a la taula i queda't amb la millor.

La imatge mostra l'última ronda: a simple vista amb prou feines es distingeix de l'original, tot i que la seva nota va quedar una mica per sota de la del tercer intent.

Compte: l'SSIM castiga molt que el text es mogui uns quants píxels, una nota alta no garanteix un codi bo ni accessible i la font ha de ser la mateixa a les dues captures.

El que pots copiar i el que no

La Llei de propietat intel·lectual separa la idea de la seva expressió. El seu article 96.4 diu, traduït del castellà: «No estaran protegits mitjançant els drets d'autor d'acord amb aquesta Llei les idees i els principis en què es basa qualsevol dels elements d'un programa d'ordinador, inclosos els que serveixen de fonament a les seves interfícies».

L'article 100.3 permet a l'usuari legítim d'un programa «observar, estudiar o verificar el seu funcionament, sense autorització prèvia del titular, amb la finalitat de determinar les idees i els principis implícits en qualsevol element del programa» mentre el fa servir amb dret a fer-ho.

Però el codi, els textos, les fotos, les il·lustracions, els logotips i les marques d'una web sí que poden estar protegits, i les condicions d'ús d'un lloc web poden prohibir copiar-lo. Practica amb webs pròpies o amb permís i no publiquis la còpia d'una web aliena. Això no és assessorament legal.