DESIGNER-CENTRIC IDE: ACCURATE INTERPRETATION OF HAND DRAWN WEB LAYOUTS INTO FULLY FUNCTIONAL CODE

The proposed Designer-Centric IDE helps convert hand-drawn web sketches into HTML and CSS code automatically. The system combines sketch recognition, code generation, and webpage preview in a single platform. Using deep learning techniques such as FPN, ResNet-50, and Seq2Seq with Attention, the system can identify UI components and generate webpage code while maintaining the layout structure. The results show that the proposed approach supports accurate and efficient webpage development. The system reduces development time and makes the design-to-code process easier for users. In the future, the project can be improved by adding responsive webpage generation and advanced UI recognition features.

[1]  A. Deolekar, K. Dhanawade, R. Chavan and S. Bhambure, "UI Code Generation using Deep Learning", International Research Journal of Engineering and Technology, vol. 8, no. 05, 2021.   [2]  D. Soselia, K. Saifullah, and T. Zhou, "Learning UI-To-Code Reverse Generator Using Visual Critic Without Rendering," arXiv preprint, 2023.   [3]   G. Vitkare, R. Jejurkar, S. Kamble, Y. Thakare and A. P. Lahare, "Automated HTML Code Generation From Hand Drawn Images Using Machine Learning Methods", vol. 04, no. 01, Jan. 2022.   [4]   D. S. Baulé, C. G. von Wangenheim, A. von Wangenheim, J. C. R. Hauck, and E. C. Vargas Júnior, "Automatic Code Generation from Sketches of Mobile Applications in End-User Development Using Deep Learning," arXiv preprint arXiv:2103.05704, 2021.   [5]    S. Patil, R. Pawar, S. Punder and J. John, "Generation of HTML Code Using Machine Learning Techniques from Mock-Up Images", International Research Journal of Engineering and Technology, vol. 7, no. 03, 2020.   [6]   D. Yashaswini, Sneha, and N. Kumar, "HTML Code Generation from Website Images and Sketches using Deep Learning-Based Encoder-Decoder Model," in 2022 IEEE 4th International Conference on Cybernetics, Cognition and Machine Learning Applications (ICCCMLA), 2022.   [7]    V. Kalbande, K. Meshram, S. Somnathe, R. Deshmukh and M. Mohod, "Automatic HTML Code Generation from Mock-Up Images Using Machine Learning Techniques", International Research Journal of Engineering and Technology, vol. 8, no. 06, 2021.   [8]   Yong Xu, Lili Bo, Xiaobing Sun, Bin Li, Jing Jiang and Wei Zhou, "Image2Emmet: Automatic Code Generation from Web User Interface Image", Journal of Software Evolution and Process, vol. 33, e2369, 2021. [9]   B. Cai, J. Luo, and Z. Feng, "A Novel Code Generator for Graphical User Interfaces," Scientific Reports, vol. 13, Article 20329, 2023.