Algorithm to parse PSD into html/XML?

I have been working on a project and we were trying to convert a PSD (Adobe Photoshop) file to a HTML for web applications as well as a Layout XML for android. We worked our way to generate basic skeletal html/xml but hit a wall for complex scenarios such as identifying separate divs and components.

Our initial approach was to standardize the PSD and get metadata about each component from PSD but due to it's limitations we could only add metadata as a prefix to the name of each layer or component for example : If PSD has a component which is supposed to be button we would name it btn_submit and convert this component into button in HTML/XML based on btn suffix. But this was not scalable and seems more like Expert Systems. So our team decided to move to Machine Learning.

We are considering supervised learning as our first approach so I would like to know which algorithms can guide me to achieve this and is it better to use Expert System instead of Machine Learning in this case?