RectCoGen: Machine Learning Based Code Generation for Frontend Implementation

Abstract

"In existing web design and development, the process of translating visual representations, such as web wireframes and Graphical User Interfaces (GUIs), into functional React components poses significant challenges. This project seeks to reduce the complexities and inefficiencies associated with this manual conversion process. The prevalent issues include a cumbersome and error-prone transformation, time-consuming manual coding tasks, and the financial demands of involving separate User Interface (UI) design and programming teams. To address these challenges, the project proposes a novel solution that leverages machine learning techniques to automate the conversion of web wireframes or web GUIs into React components, providing a more efficient, cost-effective, and streamlined approach to web development. The methodology employed in this research follows a pragmatic approach, emphasizing practicality and problem-solving. Through a deductive research strategy, the project integrates existing theories and employs deep learning techniques to facilitate the generation of React component code. The development methodology adopts the Agile Software Development Life Cycle, allowing for iterative and incremental development, aligning well with the project's requirements. The choice of the Functional Programming Paradigm complements the goal of transforming data efficiently. Evaluation methodologies include User-Centered Evaluation and Empirical Evaluation, ensuring a comprehensive assessment of user satisfaction, usability, and technical performance. As the project progresses, the initial results will be discussed, providing insights into the effectiveness of the proposed solution. The ultimate aim is to contribute to the evolution of web development practices by offering a system that automates the conversion of web wireframes into React components, optimizing the development workflow and enhancing the overall quality of the end product."