During a recent review of a client's Azure application and part of a Digital Transformation requirement the lights came on for us all after a simple whiteboarding session. Often when technical concepts are being explained, it is difficult to visualise the primary building blocks and interactions of a system at a high level.
After just a few minutes at the whiteboard we were able to quickly confirm our understanding of the existing solution and effectively contribute to a plan of next steps to support the transformation process going forward and detail some business and technical requirements.
Another tool that can really help to take white board sketches to a new level is Sketch2Code which transforms a hand-written user interface design into valid working wire-frame. It is a web based app that captures the whiteboard image and converts it to a usable HTML prototype.
The benefits of this type of approach are great because each and every stakeholder is able to add real value in a short space of time. It is amazing how much initial confidence and validation can be achieved when the whiteboard comes to life.
The coolest part for us has been the Azure integration in that an app service is generated to show the prototype.
Below is the application workflow leveraging Azure services and storage:
You can find the code on GitHub for this project along with some really interesting use cases for AI.
After just a few minutes at the whiteboard we were able to quickly confirm our understanding of the existing solution and effectively contribute to a plan of next steps to support the transformation process going forward and detail some business and technical requirements.
Another tool that can really help to take white board sketches to a new level is Sketch2Code which transforms a hand-written user interface design into valid working wire-frame. It is a web based app that captures the whiteboard image and converts it to a usable HTML prototype.
The benefits of this type of approach are great because each and every stakeholder is able to add real value in a short space of time. It is amazing how much initial confidence and validation can be achieved when the whiteboard comes to life.
The coolest part for us has been the Azure integration in that an app service is generated to show the prototype.
Below is the application workflow leveraging Azure services and storage:
- A Microsoft Custom Vision Model: This model has been trained with images of different handwritten designs tagging the information of most common HTML elements like buttons, text box, and images.
- A Microsoft Computer Vision Service: To identify the text written into a design element a Computer Vision Service is used.
- An Azure Blob Storage: All steps involved in the HTML generation process are stored, including the original image, prediction results and layout grouping information.
- An Azure Function: Serves as the backend entry point that coordinates the generation process by interacting with all the services.
- An Azure website: User font-end to enable uploading a new design and see the generated HTML results.
You can find the code on GitHub for this project along with some really interesting use cases for AI.
If you would like some hands on expertise for your business feel free to reach via my company assemblysoft or checkout some other musings via my blazor.net and azure blog here carlrandall.net