← Nieuwste papers
🤖 AI

Video2Code: Generating Interactive Webpages from UI Videos via Action-Aware Revisit

Video2Code is een actiebewust framework dat UI video-naar-code generatie verbetert door kritieke actieregio's te identificeren en opnieuw te bezoeken op een hogere temporele resolutie om uitvoerbare staatsovergangen nauwkeurig te herstellen, waardoor de functionele correctheid in complexe interactieve webpagina's aanzienlijk wordt verbeterd.

Oorspronkelijke auteurs: Mingde Xu, Zhen Yang, Yan Wang, Yu Wang, Xijun Liu, Zijun Dou, Wenyi Hong, Xiaotao Gu, Bin Xu, Jie Tang

Gepubliceerd 2026-06-23
📖 5 min leestijd🧠 Diepgaand

Oorspronkelijke auteurs: Mingde Xu, Zhen Yang, Yan Wang, Yu Wang, Xijun Liu, Zijun Dou, Wenyi Hong, Xiaotao Gu, Bin Xu, Jie Tang

Oorspronkelijk artikel gelicentieerd onder CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). Dit is een AI-gegenereerde uitleg van het onderstaande artikel. Het is niet geschreven of goedgekeurd door de auteurs. Raadpleeg het oorspronkelijke artikel voor technische nauwkeurigheid. Lees de volledige disclaimer

Stel je voor dat je een robot wilt leren hoe hij een specifieke, interactieve website moet bouwen. Je zou de robot een enkele, statische foto van de site kunnen laten zien. De robot zou een geweldige indruk maken door de kleuren, de lay-out en de knoppen te kopiëren. Maar hier is het probleem: een foto kan de robot niet vertellen wat er gebeurt als je op een knop klikt, in een tekstvak typt of naar beneden scrolt. De foto is bevroren in de tijd; het mist de "magie" van hoe de site daadwerkelijk werkt.

Je zou de robot ook een video kunnen laten zien van iemand die de site gebruikt. Dit is veel beter, omdat het de beweging vastlegt. Echter, huidige AI-modellen die deze video's bekijken, zijn als mensen met een zeer korte concentratieboog. Ze kijken misschien even naar de video, zien een paar frames, en missen het minuscule, fractie van een seconde durende moment waarop een gebruiker op een knop klikt en er een menu verschijnt. Als de AI dat fractie van een seconde aan de overgang mist, kan hij de code niet schrijven om dat menu te laten verschijnen. Hij bouwt een prachtige buitenkant, maar de binnenkant is kapot.

Maak kennis met "Video2Code".

De onderzoekers achter dit artikel hebben een nieuwe methode ontwikkeld genaamd Video2Code. Denk aan het als een slim, tweestaps detectiveproces om een AI te leren websites te bouwen vanuit video's.

Het Probleem: De "Wazige Snapshot"

De meeste AI-modellen proberen een hele video te begrijpen door een paar "snapshots" (frames) te nemen die ver uit elkaar liggen.

  • De Analogie: Stel je voor dat je een goocheltruc probeert te begrijpen door naar een foto te kijken die is genomen vóór de goochelaar een konijn uit een hoed trekt, en een andere foto nadat het konijn weg is. Je ziet de hoed en het konijn, maar je hebt geen idee hoe het konijn daar gekomen is. Je zou kunnen gissen dat het konijn er de hele tijd al was, of je zou kunnen denken dat de hoed gewoon een afbeelding van een konijn is.
  • Het Resultaat: De AI mist de "actiegrenzen" — het precieze moment waarop een gebruiker met het scherm interageert. Zonder dat moment duidelijk te hebben gezien, kan de AI de code niet schrijven om de interactie te laten plaatsvinden.

De Oplossing: De "Actie-bewuste Herbezoek"

Video2Code verandert het spel door te fungeren als een detective die precies weet waar hij goed moet kijken. Het verspilt geen tijd aan het staren naar de saaie delen van de video; het zoomt in op de spannende delen.

Stap 1: De Grove Scan (De Groothoeklens)
Eerst kijkt de AI snel de hele video, net zoals je door een boek zou bladeren om de interessante hoofdstukken te vinden. Het probeert nog niet direct elk detail te begrijpen. In plaats daarvan vraagt het: "Waar klikt de gebruiker? Waar typt hij? Waar verandert er iets?" Het markeert deze plekken als "Actie-kritieke Regio's".

Stap 2: Het Herbezoek (Het Vergrootglas)
Zodra de AI weet waar de belangrijke zaken zijn gebeurd, gebruikt het een speciale tool om die specifieke momenten te "herbezoeken". Het pauzeert de video en kijkt die paar seconden in high definition en slow motion.

  • De Analogie: Het is als een filmmonteur die een scène ziet waarin een personage een deur opent. In plaats van alleen de hele film één keer te kijken, knipt de editor precies die 3 seconden waarin de deur opengaat eruit, vertraagt de beelden en bestudeert de draaiende kruk, het klikken van de vergrendeling en het zwaaien van de deur.
  • Het Resultaat: Nu ziet de AI de volledige sequentie: de staat vóór de klik, de klik zelf, en de staat ná de klik.

De Training: Leren van een Tijdlijn

Om de AI dit te leren, hebben de onderzoekers hem niet alleen willekeurige video's getoond. Ze creëerden een speciale dataset genaamd WebVidCoding.

  • Ze namen video's op van mensen die echte websites gebruiken.
  • Ze voegden een kleine, onzichtbare "marker" toe (zoals een balk onderaan het scherm die van kleur verandert) die precies flitste wanneer een gebruiker klikte of typte.
  • Dit gaf de AI een perfecte "tijdlijn" om van te leren: "Wanneer de balk rood wordt, is dat de klik. Kijk wat er vlak voor en vlak na gebeurt."

De Resultaten: Werkt het?

De onderzoekers hebben Video2Code getest tegen andere top AI-modellen.

  • Visueel: Alle modellen waren goed in het maken van de website die er goed uitzag.
  • Functionaliteit: Dit is waar Video2Code uitblonk. Terwijl andere modellen websites bouwden die er goed uitzagen maar niet werkten (de knoppen deden niets), bouwde Video2Code websites die zich daadwerkelijk gedroegen zoals de video.
  • De "Dichte" Test: De verbetering was het meest duidelijk in video's met veel stappen (achter elkaar klikken, scrollen, typen). Andere modellen raakten in de war door de complexiteit, maar Video2Code begreep de logica door de kritieke momenten te herbezoeken.

In een Notendop

Video2Code is een systeem dat voorkomt dat AI slechts een "vluchtige blik" werpt op een video. In plaats daarvan leert het de AI om de belangrijke momenten te spotten, in te zoomen en ze nauwgezet te bestuderen voordat de code wordt geschreven. Dit zorgt ervoor dat de uiteindelijke website niet alleen lijkt op de video, maar ook echt acteert als de video, waarbij de volledige "staat-actie-staat" dans van een echte gebruikersinteractie wordt gevangen.

Verdrinkt u in papers in uw vakgebied?

Ontvang dagelijkse digests van de nieuwste papers die bij uw onderzoekswoorden passen — met technische samenvattingen, in uw taal.

Probeer Digest →