This article presents a web application that transforms visual interface sketches into functional code using artificial intelligence, specifically the OpenAI API. The proposed solution aims to facilitate programming learning and foster interest in technological fields from an early age. A modern architecture was implemented using technologies such as Next.js, Node.js, JWT, and MongoDB, integrating GPT-4 Vision models to interpret images and generate code automatically. An observational and cross-sectional study was conducted with users of varying programming experience, organized into two scenarios: beginner and junior developers. The results demonstrate a favorable perception in terms of usability, code generation speed, and understanding of programming concepts. In particular, the tool achieved an overall effectiveness of 77.6% in beginner users and 80% in junior developers, confirming its value as an educational and motivational resource that showcases the potential of artificial intelligence to reduce entry barriers to programming and provides a solid foundation for future research and development focused on visual and adaptive methods for computer science education.

错误:搜索内容不能为空,请输入英文关键词
错误:关键词超出字数限制,请精简
高级检索

From Image to Code: An Automated Approach to Programming from Visual Interfaces

  • Andres Ortiz,
  • Graciela Guerrero,
  • Bryan Castro,
  • Daniel Avila

摘要

This article presents a web application that transforms visual interface sketches into functional code using artificial intelligence, specifically the OpenAI API. The proposed solution aims to facilitate programming learning and foster interest in technological fields from an early age. A modern architecture was implemented using technologies such as Next.js, Node.js, JWT, and MongoDB, integrating GPT-4 Vision models to interpret images and generate code automatically. An observational and cross-sectional study was conducted with users of varying programming experience, organized into two scenarios: beginner and junior developers. The results demonstrate a favorable perception in terms of usability, code generation speed, and understanding of programming concepts. In particular, the tool achieved an overall effectiveness of 77.6% in beginner users and 80% in junior developers, confirming its value as an educational and motivational resource that showcases the potential of artificial intelligence to reduce entry barriers to programming and provides a solid foundation for future research and development focused on visual and adaptive methods for computer science education.