Skip to main content
SpringerLink
Log in
Book cover

International Conference on Artificial Neural Networks

ICANN 2021: Artificial Neural Networks and Machine Learning – ICANN 2021 pp 53–65Cite as

GUIS2Code: A Computer Vision Tool to Generate Code Automatically from Graphical User Interface Sketches

  • Conference paper
  • First Online:

Part of the book series: Lecture Notes in Computer Science ((LNTCS,volume 12893))

Abstract

It is a typical task for front-end developers to repetitively transform the graphical user interface model provided by the designer into code. Automatically converting the design draft provided by the designer into code can simplify the task of the front-end engineer and avoid a lot of simple and repetitive work. In this paper, we propose GUIS2Code using deep neural network, which is trained on the datasets of the design drafts to detect the UI elements of the input sketches and generate corresponding codes through the UI parser. Our method can generate code for three different platforms (i.e., iOS, Android, and Web). Our experimental results illustrates that GUIS2Code achieves an average GUI-component classification accuracy of 95.04% and generates code that can restore the target sketches more accurately while exhibiting reasonable code structure.

This is a preview of subscription content, log in via an institution.

Chapter
USD   29.95
Price excludes VAT (USA)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
USD   84.99
Price excludes VAT (USA)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Softcover Book
USD   109.99
Price excludes VAT (USA)
  • Compact, lightweight edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

Learn about institutional subscriptions

References

  1. Beltramelli, T.: Pix2Code: generating code from a graphical user interface screenshot. In: Proceedings of the ACM SIGCHI Symposium on Engineering Interactive Computing Systems, pp. 3:1–3:6. ACM (2018). https://doi.org/10.1145/3220134.3220135

  2. Bochkovskiy, A., Wang, C.Y., Liao, H.Y.M.: YOLOv4: optimal speed and accuracy of object detection. arXiv e-prints arXiv:2004.10934, April 2020

  3. Chen, C., Su, T., Meng, G., Xing, Z., Liu, Y.: From UI design image to GUI skeleton: a neural machine translator to bootstrap mobile GUI implementation. In: Proceedings of the 40th International Conference on Software Engineering, pp. 665–676. ACM (2018). https://doi.org/10.1145/3180155.3180240

  4. Chen, J., et al.: Object detection for graphical user interface: old fashioned or deep learning or a combination? In: ESEC/FSE 2020: 28th ACM Joint European Software Engineering Conference and Symposium on the Foundations of Software Engineering, pp. 1202–1214. ACM (2020). https://doi.org/10.1145/3368089.3409691

  5. Gao, F., Yang, C., Ge, Y., Lu, S., Shao, Q.: Dense receptive field network: a backbone network for object detection. In: Tetko, I.V., Kůrková, V., Karpov, P., Theis, F. (eds.) ICANN 2019. LNCS, vol. 11729, pp. 105–118. Springer, Cham (2019). https://doi.org/10.1007/978-3-030-30508-6_9

    Chapter  Google Scholar 

  6. Girshick, R.B.: Fast R-CNN. In: IEEE International Conference on Computer Vision, Santiago, Chile, pp. 1440–1448. IEEE Computer Society (2015). https://doi.org/10.1109/ICCV.2015.169

  7. He, K., Zhang, X., Ren, S., Sun, J.: Spatial pyramid pooling in deep convolutional networks for visual recognition. In: Fleet, D., Pajdla, T., Schiele, B., Tuytelaars, T. (eds.) ECCV 2014. LNCS, vol. 8691, pp. 346–361. Springer, Cham (2014). https://doi.org/10.1007/978-3-319-10578-9_23

    Chapter  Google Scholar 

  8. Huang, G., Liu, Z., van der Maaten, L., Weinberger, K.Q.: Densely connected convolutional networks. In: IEEE Conference on Computer Vision and Pattern Recognition, pp. 2261–2269. IEEE Computer Society (2017). https://doi.org/10.1109/CVPR.2017.243

  9. Jain, V., Agrawal, P., Banga, S., Kapoor, R., Gulyani, S.: Sketch2Code: transformation of sketches to UI in real-time using deep neural network. arXiv e-prints arXiv:1910.08930, October 2019

  10. Liu, S., Qi, L., Qin, H., Shi, J., Jia, J.: Path aggregation network for instance segmentation. In: IEEE Conference on Computer Vision and Pattern Recognition, pp. 8759–8768. IEEE Computer Society (2018). https://doi.org/10.1109/CVPR.2018.00913

  11. Liu, W., et al.: SSD: single shot multibox detector. In: Leibe, B., Matas, J., Sebe, N., Welling, M. (eds.) ECCV 2016. LNCS, vol. 9905, pp. 21–37. Springer, Cham (2016). https://doi.org/10.1007/978-3-319-46448-0_2

    Chapter  Google Scholar 

  12. Moran, K., Bernal-Cárdenas, C., Curcio, M., Bonett, R., Poshyvanyk, D.: Machine learning-based prototyping of graphical user interfaces for mobile apps. IEEE Trans. Softw. Eng. 46(2), 196–221 (2020). https://doi.org/10.1109/TSE.2018.2844788

    Article  Google Scholar 

  13. Nguyen, T.A., Csallner, C.: Reverse engineering mobile application user interfaces with REMAUI (T). In: 30th IEEE/ACM International Conference on Automated Software Engineering, pp. 248–259. IEEE Computer Society (2015). https://doi.org/10.1109/ASE.2015.32

  14. Pang, X.W., Zhou, Y., Li, P., Lin, W., Wu, W., Wang, J.Z.: A novel syntax-aware automatic graphics code generation with attention-based deep neural network. J. Netw. Comput. Appl. 161, 102636 (2020). https://doi.org/10.1016/j.jnca.2020.102636

  15. Redmon, J., Divvala, S.K., Girshick, R.B., Farhadi, A.: You only look once: unified, real-time object detection. In: IEEE Conference on Computer Vision and Pattern Recognition, pp. 779–788. IEEE Computer Society (2016). https://doi.org/10.1109/CVPR.2016.91

  16. Shi, B., Bai, X., Yao, C.: An end-to-end trainable neural network for image-based sequence recognition and its application to scene text recognition. IEEE Trans. Pattern Anal. Mach. Intell. 39(11), 2298–2304 (2017). https://doi.org/10.1109/TPAMI.2016.2646371

    Article  Google Scholar 

  17. Shi, B., Wang, X., Lyu, P., Yao, C., Bai, X.: Robust scene text recognition with automatic rectification. In: IEEE Conference on Computer Vision and Pattern Recognition, pp. 4168–4176. IEEE Computer Society (2016). https://doi.org/10.1109/CVPR.2016.452

  18. Wang, C., Liao, H.M., Wu, Y., Chen, P., Hsieh, J., Yeh, I.: CSPNet: a new backbone that can enhance learning capability of CNN. In: IEEE/CVF Conference on Computer Vision and Pattern Recognition, CVPR Workshops 2020, pp. 1571–1580. IEEE (2020). https://doi.org/10.1109/CVPRW50498.2020.00203

  19. Yu, J., Jiang, Y., Wang, Z., Cao, Z., Huang, T.: UnitBox: an advanced object detection network. In: Proceedings of the 24th ACM International Conference on Multimedia, pp. 516–520. Association for Computing Machinery, New York (2016). https://doi.org/10.1145/2964284.2967274

  20. Zhan, F., Lu, S.: ESIR: end-to-end scene text recognition via iterative image rectification. In: IEEE Conference on Computer Vision and Pattern Recognition, pp. 2059–2068. Computer Vision Foundation/IEEE (2019). https://doi.org/10.1109/CVPR.2019.00216

  21. Zheng, Z., Wang, P., Liu, W., Li, J., Ye, R., Ren, D.: Distance-IoU loss: faster and better learning for bounding box regression. In: The Thirty-Fourth AAAI Conference on Artificial Intelligence, pp. 12993–13000. AAAI Press (2020). https://doi.org/10.1609/aaai.v34i07.6999

  22. Zhu, R., et al.: ScratchDet: training single-shot object detectors from scratch. arXiv e-prints arXiv:1810.08425, October 2018

  23. Zhu, Z., Xue, Z., Yuan, Z.: Automatic graphics program generation using attention-based hierarchical decoder. In: Jawahar, C.V., Li, H., Mori, G., Schindler, K. (eds.) ACCV 2018. LNCS, vol. 11366, pp. 181–196. Springer, Cham (2019). https://doi.org/10.1007/978-3-030-20876-9_12

    Chapter  Google Scholar 

Download references

Author information

Authors and Affiliations

  1. Key Laboratory of Aerospace Information Security and Trusted Computing, Ministry of Education, School of Cyber Science and Engineering, Wuhan University, Wuhan, China

    Zhen Feng, Jiaqi Fang, Bo Cai & Yingtao Zhang

Authors
  1. Zhen Feng
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. Jiaqi Fang
    View author publications

    You can also search for this author in PubMed Google Scholar

  3. Bo Cai
    View author publications

    You can also search for this author in PubMed Google Scholar

  4. Yingtao Zhang
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Bo Cai .

Editor information

Editors and Affiliations

  1. Comenius University in Bratislava, Bratislava, Slovakia

    Igor Farkaš

  2. iMotions A/S, Copenhagen, Denmark

    Paolo Masulli

  3. University of Tübingen, Tübingen, Baden-Württemberg, Germany

    Sebastian Otte

  4. Universität Hamburg, Hamburg, Germany

    Stefan Wermter

Rights and permissions

Reprints and permissions

Copyright information

© 2021 Springer Nature Switzerland AG

About this paper

Check for updates. Verify currency and authenticity via CrossMark

Cite this paper

Feng, Z., Fang, J., Cai, B., Zhang, Y. (2021). GUIS2Code: A Computer Vision Tool to Generate Code Automatically from Graphical User Interface Sketches. In: Farkaš, I., Masulli, P., Otte, S., Wermter, S. (eds) Artificial Neural Networks and Machine Learning – ICANN 2021. ICANN 2021. Lecture Notes in Computer Science(), vol 12893. Springer, Cham. https://doi.org/10.1007/978-3-030-86365-4_5

Download citation

  • DOI: https://doi.org/10.1007/978-3-030-86365-4_5

  • Published:

  • Publisher Name: Springer, Cham

  • Print ISBN: 978-3-030-86364-7

  • Online ISBN: 978-3-030-86365-4

  • eBook Packages: Computer ScienceComputer Science (R0)

Publish with us

Policies and ethics

Search

Navigation