Proto Code

Project Title

Proto Code

Project Area of Specialization Artificial IntelligenceProject Summary

The early stage of Application Development was the prototype of User Interface (UI). It was a very time-consuming task for a UI design to fetch sketch from graphical user interface & transfer it into a coded version for UI application. Thus, it sounds a very uninspired for any UI Developer. For such task, it is being thought that there should be an automated system that can perform this task within minutes i.e. transforming the images from Graphical User Interface (GUI) into UI Code format. Our Propose Idea for FYP is to Design a Web Based Application, an automated system that will take image as an input & convert the html UI coded format with accuracy. Our proposed idea will basically be based on UI wireframes (as input) instead of hard-design sketches. In our proposal, we will try to give a brief idea to have a clear image of our project. This project will involve deep working related Neural Networking, which will be trained enough on our customized database of such images/sketches in order to detect the UI element as an initial input. The output will be UI of the website.

Project Objectives

Project objectives are goals, plain and simple. These are the business objectives that you want the project to accomplish. Within project management, it is of utmost importance that a objectives are stated clearly as these will impact every decision in the project lifecycle. These indicators will often encompass areas such as budget, quality and time to completion. Our project objective is to provide a prominent solution to an interesting problem. A solution that uses AI to transform handwritten images to valid HTML code. Our project completely relies on AI and to achieve our project objective we will train a simple neural network in order to understand the images/sketch and convert it into HTML/UI with accuracy. We will train a neural network to identify UI elements in hand-drawn sketches. Performance, which is affected by the training set, can be improved by providing more labelled examples of sketches.While analyzing, we evaluated the model on a set of diverse images. The model learns about the shape of the UI components, and after fixing overlapped components, it gives a final UI representation object allowing the UI parser to create platform specific UI. Our main objective is to predisposed people to adopt this technology and avoid old methods to convert sketches into coded form, which took a lot of time. By acquiring this technology will help them to save their time and also some money in terms of discarding UI designers.

Project Implementation Method

Phase-I
In phase I, we will gather or collect different data sets of different domains. These data sets will act as a main brick in order to develop our system. The more the data sets, the more the system will get trained & work efficiently. This phase is very much important for our system.

Phase-II
After gathering the data sets from different users & domain and calculating these data sets, we will plot design images of desired or prototype user interface on paper by using different methodologies. used case, we will put a representation of UI to our system that will define or show the relationship of the system & used cases. We will add different class diagrams in our system which will describe different types of objects in the system & all the kind of different relationships exist among them. It helps and allows to have through analysis & design of the static view of the web page / software application. Similarly, we will use activity diagram to capture the dynamic behavior of the system. Likewise, Data Flow Diagrams (DFD) will be used to providing the representation of flow of a data or a system. DFD also provides the information of inputs & outputs of individual entry of the process.Data Flow Diagram has no control loops, mean there will be no decision rules & loops.

Phase-III
In phase III, we will start our development working of our proposed project ProtoCode. We will be using our main actors, roles, actions, artifacts or classes for front end in order to have understand better, modify, maintain or document the information of the system. After that, we can utilize the work flow of the system. We will use OOSE Technique which will make the design in order to check what would be the best possible design to make a user-friendly interface (UI). 

Phase-IV
In this phase, we will implement our idea through coding & we will build our application model using our prototype of the system by using different skill-sets, technologies languages. Authentication will surely be implemented on each step during the implementation procedure. Many AI modules will also be integrate with the system so that product capability & functionality would be increased.

Phase-V
Phase V will be simultaneously started with phase 4 during product development. First unit timing will be testing will be performed & then we'll move towards integration testing. After interaction testing, module will clear integration testing phase. 

Phase-VI
Phase VI will be conducted after the completion of phase 5 which is to maintain the product reliablity by refactoring and implementing different methodologies to make more precise, scalable, secured, efficient, stable & making it functionalities advanced enough to meet the latest technologies level. And with time we would gather more data to have bigger datasets inorder to increase its efficiency.

Benefits of the Project

Some of benefits provide by project scope to any organization are:

1. Articulates what the project entails so that all stakeholders can understand what's involved;
2. Provides a roadmap that managers can use to assign tasks, schedule work and budget appropriately;
3. Helps focus team members on common objectives; and
4. Prevents projects, particularly complex ones, from expanding beyond the established vision.
5. The typical development process would gradually come to an end where most of the innovators would focus on creativity instead of implementing them with old coding methods by automating the development of the basic app structure.
6. This project would renovate the app development industry as more companies and more businesses will prefer to use AI instead of human labor for the development phase of any web or app.

Technical Details of Final Deliverable

Protocode is completely a image recognition application which completes the process of generating by using Convolutional Neural Network (CNN). To run Convolutional Neural Network we have to use Graphics processing unit (GPU). Nvidia GTX-750ti with DD5, 128 bit, 2GB of memory & clock speed 1020 MHz because the dataset consists of the UI/UX designs, prototypes of web and mob apps which are inclusively designed on various designing software like photoshop designs (PSD), Figma designs etc. that's why we have to use this Graphics processing unit (GPU) to decrease the duration of training the model.

Final Deliverable of the Project Software SystemCore Industry ITOther Industries Others Core Technology Artificial Intelligence(AI)Other Technologies Others, Big DataSustainable Development Goals Decent Work and Economic Growth, Industry, Innovation and Infrastructure, Partnerships to achieve the GoalRequired Resources

Item Name	Type	No. of Units	Per Unit Cost (in Rs)	Total (in Rs)
			Total in (Rs)	58750
Printing Documents	Miscellaneous	160	10	1600
FYP Book printing	Miscellaneous	450	15	6750
16 GB RAM DDR4	Equipment	14000	2	28000
Net cable	Equipment	1	1800	1800
Wifi Router	Equipment	1	2000	2000
Net Switch	Equipment	1	2000	2000
5MB Net connection	Equipment	1	1600	1600
GPU Nvidia GTX-750ti	Equipment	1	15000	15000