Evaluation of selected code generation AI models in responsive web design

Abstract

Ovaj diplomski rad istražuje mogućnosti besplatno dostupnih AI modela, koji se mogu koristiti i izvanmrežno, u generiranju koda za izradu web stranice. Istraživanje se usredotočuje na procjenu izvedbe pet najboljih modela kroz zadatak izrade jednostavne responzivne web stranice temeljene na unaprijed definiranom dizajnu. Svaki se model procjenjuje pomoću šest ključnih kriterija: HTML kvaliteta, CSS kvaliteta i vizualna vjernost, učinkovitost koda i optimizacija, funkcionalnost i interaktivnost, semantički HTML i pristupačnost te responzivnost. Teorijski dio ovog rada bavi se evolucijom AI tehnologija, počevši od ranih chatbot sustava, rješenja temeljena na AIML-u koji su postavili temelje za moderne AI aplikacije pa do uspona obrade prirodnog jezika i umjetne inteligencije. Praktični dio će biti izrada dizajna jednostavne responzivne web stranice i prema tome stvaranje zadatka koji će se zadati svakom modelu. Istraživanje koristi standardizirani okvir za ocjenjivanje kako bi se osigurala dosljednost i pravednost u svim modelima. Rezultati ističu značajne razlike u sposobnostima modela, naglašavajući prednosti i slabosti. Cilj istraživanja je pronaći najbolji model za generiranje koda za izradu jednostavne responzivne web stranice.This thesis explores the capabilities of freely available AI models, which can also be used offline, in generating code for website development. The research focuses on evaluating the performance of the five best models through the task of creating a simple responsive website based on a predefined design. Each model is assessed using six key criteria: HTML quality, CSS quality and visual fidelity, code efficiency and optimization, functionality and interactivity, semantic HTML and accessibility, and responsiveness. The theoretical part of this thesis examines the evolution of AI technologies, starting from early chatbot systems and AIML-based solutions that laid the foundation for modern AI applications to the rise of natural language processing and artificial intelligence. The practical part involves designing a simple responsive website and creating a task that will be assigned to each model accordingly. The research employs a standardized evaluation framework to ensure consistency and fairness across all models. The results highlight significant differences in model capabilities, emphasizing strengths and weaknesses. The goal of this research is to identify the best model for generating code for the development of a simple responsive website