First, I knew it would be hard to make the algorithm write both HTML and CSS code, so I decide to make a stylesheet library inspired by Bootstrap. Enter Manuscript.css.
This pre-written stylesheet that saved me time and effort styling each component. It helps anyone add simple and professional UI components to their websites. I spent about a week to make it as customizable as possible and made sure there were several design options and themes to work with.
This library allowed me to style components through HTML itself by compounding classes that contained pre-written styles.
2. Generating Code
I wouldn't go through the entire process of coding a bot that understands natural language to write HTML code because I think it'll be long and boring. Here's a quick summary for the same:
I wrote functions that allowed manipulation of HTML code by considering the code as plain text. These functions required certain parameters to be known (arguments) such as the HTML tag to target, the action to perform, the classes involved, the text to be added, the positioning of the element and more.
3. Understanding intent from natural language and context
The next task was to extract the required information from a natural language instruction and supply that to the appropriate function that could perform the intended action. I implemented this using a standard word to vector conversion and hard coded a heuristic approach that used the presence of keywords and their position in the sentence to run a specific function. (I guess it's not the best way to do this, but certainly effective given that I was manually creating a dataset and vocabulary for the bot.)
Additionally, one could not expect every instruction to contain all the information, so some form of memory must be added to the program to remember context through past instructions. This was done by maintaining a stack of operations performed and using previous instructions to determine new actions. This information is also used to reply with relevant questions to obtain missing pieces of information.