Comparative Analysis of Gemini 2.0 Flash, Microsoft Copilot, and ChatGPT-4o’s Accuracy in Translating UI Images into Front-End Web Code

In recent years, Artificial Intelligence (AI) has been increasingly utilized to enhance workflow and overall productivity by automating complex tasks. AI models such as ChatGPT, Copilot, and Gemini are frequently used to generate and debug codes, making the development process much easier for programmers. However, the overall accuracy of the code generated are key factors in evaluating how effective and practical these models are. This study aims to analyze and compare the accuracy of AI models, specifically Gemini 2.0 Flash, Microsoft Copilot, and ChatGPT-4o in their ability to translate a UI image into a working front-end web code. Using a series of textual and UI images as prompts, the models were asked to generate HTML, CSS, and JavaScript code. Their outputs were then evaluated across two metrics, Elements accuracy and Validation Logic Accuracy. ChatGPT-4o outperformed other models, achieving the highest accuracy in all metrics: 87% for color, 83% for position, and 100% for element selection, with solid validation logic despite a tendency to over style components. Gemini 2.0 Flash matched closely in position (82%) and element selection (100%) and excelled in input validation but lagged in color accuracy (78%). Microsoft Copilot underperformed overall, with 88% in element selection, 73% in position, and just 64% in color accuracy. These results highlight the varying strengths and weaknesses of current AI models in front-end web code generation.