Draw To Code

Students find it a very hectic task to draw the class diagram when assigned. They think it is useless because it does not help them. So, they directly move to the code portion. ?Sketch2Code? is a website based on this theory in which the user sketches the website design and it converts into HTML cod

Project Title

Draw To Code

Project Area of Specialization

Artificial Intelligence

Project Summary

Students find it a very hectic task to draw the class diagram when assigned. They think it is useless because it does not help them. So, they directly move to the code portion. “Sketch2Code” is a website based on this theory in which the user sketches the website design and it converts into HTML code. And also if someone puts more effort into the UML diagram then it is very easy for him/her to code it down and it took less time

Students usually don’t bother about the design part of the program and most students skip the UML diagram part and directly jump to code. But, while doing code they face multiple issues so we are making a web-based application that converts the design part(class diagram) to code then they will focus on the class diagram rather than jumping on the implementation. In this way, they can just put effort into the class diagram and the template code will be ready for them.

We as a student explore things so while exploring we found a Microsoft website (sketch2code) in which the user uploads an image and that website converts that image into HTML Front End. So we thought to make a similar but unique platform thing that converts the UML into Python code there is a reason why we are doing this, as in today's era everything is done smartly and python is a smart language all the libraries are available you just have to include them and make your program workable in very few line of code. So we thought we should make a web-based application that helps to convert UML into Python code.

“Draw 2 Code” is a web-based application that can convert a class diagram to Python code.  The User will upload a hand-drawn image of a class diagram and converts it into Python code. All the relations between the classes will also be implemented to code by seeing the UML diagram eg. (aggregation, composition, association). On BackEnd Deep learning will be used for testing and training the model and the FrontEnd will be based on Vue.js/ReactJs/Bootstrap CSS

Project Objectives

1. To provide ease in developing the application to the students in their final year projects.
2. To give a dataset of class diagrams to a programming community on a platform like Kaggle.
3. To provide a platform to students and encourage them to design UML class diagrams for automatic code generation.

Project Implementation Method

The functionality of our project “Draw2Code” is:

1. Users will find a button named “upload an image” to upload the image.
2. Taking all care of the necessary things like proper light and blur-less image, the user will upload the image.
3. Our backend ML Algorithm will segment out the boxes in a row-wise form like class names, variables, and functions[2].
4. The symbols like +, -, # will be used for keywords like public, private, and protected respectively. 
5. After processing time, the class diagram image will be converted to code.

Step 1: The user will open the website and there will be a button named “Upload Image”. The user will upload the image of the class diagram.

Step 2: The website will give some guidelines before uploading an image.

An image should be clear, try to upload an image without cutting. The class diagram should be on one page. 

Step 3: If all the pathways went correct. It will segment out the boxes. In the first row, we have a class diagram. In the second row, we will have data members and in the third column, we have functions[3].

Step 4: The second phase of the backend machine learning algorithm will work and detect the symbols like +, - and # to convert into a keyword like public, private, and protected keywords.

Step 5: After analyzing the data and keywords, your class diagram will be converted into python code. 

How our Project will be Completed?

1. Requirement elicitation and analysis:
   • During this phase, we will determine our project's functional and non-functional needs. The functional requirements are the features and tasks that the application is required to execute. Quality constraints that make the application dependable and efficient are examples of nonfunctional requirements. We will also ensure that we have all of the necessary hardware and software resources to begin development.
2. Design
   • During this phase, we will create the design for our project. Class diagrams and activity diagrams will be made in this process.

1. Development
   • The coding will start from this phase. We will test our model on a single class image and then if it is working fine we move on to the two-class detection. If all is planned well then we will add more classes and test with the inherited classes images.

1. Testing and validation
   • In this phase, we will test the accuracy of our model. The classes, variables, and member functions are detected with good accuracy or not.

1. Deployment
   • We will execute the project on localhost with an appropriate domain when the testing is completed. 

Benefits of the Project

The beneficiaries of this system are the students who consider code only and got stuck in the middle. It's an opportunity for all the students to get focused on UML diagrams first and the code will be automatically generated for them. From this tool, students can get a firm grip on UML class diagrams.

The other benefit will be that no such application is created. It is a total innovation and motivate other students to participate in these types of project.

Technical Details of Final Deliverable

CNN is used for image processing. Layers will be design first for CNN. OCR cannot be used because it does not use Deep learning. OCR only use simple ANN, and also feature extraction is manual. On the other hand, CNN is also used vastly, so CNN is best fit for our Project and Draw2Code will be trained on CNN and then deployed on the website.

Yolov3:

YOLO is a Deep Learning architecture suggested in the article 'You Only Look Once: Unified, Real-Time Object Detection by Joseph Redmon, Santosh Divola, Ross Girshick, and Ali Farhadi that takes a completely new approach. It is a smart convolutional neural network (CNN) for real-time object identification.

Furthermore, it is well-known for its great accuracy while also being able to operate in real-time or be utilized for real-time applications. The YOLO method "just looks once" at the input image, which means it only needs one forward propagation pass through the network to generate predictions.

Dataset:

There is no Dataset available right now, so we create our dataset with the help of students and teachers. The dataset contains about 500-1000 handwritten images from which the model will be trained.

Features:

• Class diagram shape
• Class diagram Relation symbols
• Class diagram element names (Data members, Access modifiers, Member function)

Built in library of OCR will be used for text detection/Recognition.

Data Pre-Processing

Uniform aspect ratio:

            One of the first tasks is to make sure the images are of the same size and aspect ratio. Most neural network models assume a square-shaped input picture, which implies that each image must be evaluated to see whether it is a square and cropped accordingly. Cropping, as demonstrated, may be used to choose a square portion of an image. When cropping, we normally focus on the center of the image.

Image Scaling:

            After ensuring that all photos are square (or have a predefined aspect ratio), we may scale each image properly. We've opted to use photos with 100 pixel width and height. We'll need to double the width and height of each image by 0.4 (100/250). There are several approaches for up-scaling and down-scaling, and we normally utilize a library function to perform this for us.

Mean, Standard Deviation of input data:

It is sometimes beneficial to examine the ‘mean image,' which is generated by taking the mean values for each pixel across all training samples. Observing this might provide us with information about the pictures' underlying structure. The mean picture from the first 100 photographs in our data-set, for example, is presented to the left. Clearly, this gives the sense of a human face, leading us to believe that the faces are slightly aligned to the center and are of equal size. If we don't want our raw data to have this intrinsic structure, we can supplement it with perturbed photos. On the right, you can see the standard deviation of all photos.

Final Deliverable of the Project

Software System

Core Industry

IT

Other Industries

Core Technology

Artificial Intelligence(AI)

Other Technologies

Sustainable Development Goals

Quality Education, Industry, Innovation and Infrastructure

Required Resources

If you need this project, please contact me on contact@adikhanofficial.com