Skip to main content

A(I) Picture paints a thousand words...

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.


Sketch2Code

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.


Architecture elements


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




Popular posts from this blog

Azure Devops - Pull Request Merge Conflicts

Before a Git pull request can complete, any conflicts with the target branch must be resolved. Out of the box, at the time of writing this article, Azure DevOps requires this to be resolved locally. Following best practices to not allow direct commits to our release/master branches further exasperates the problem as we need to effectively clone the branch or go with a rebase approach, both of which break the natural flow of resolving the conflicts as part of the pull request.

With this extension, from the Microsoft DevLabs team via the Marketplace, you can resolve these conflicts online, as part of the pull request process, instead of being forced to break flow and resolve locally.




Online Experience After adding the extension the new conflicts tab is visible which enables conflict resolution in the familiar side by side review page as shown below:


Really nice extension, which should make resolving merge conflicts a much more straightforward part of the DevOps workflow. 

Additional - Ad…

.Net TDD (Test Driven Development) by example - Part 1


Introduction In part 1 of this mini-series, we will develop a trivial business logic layer from scratch with a TDD approach with the goal of achieving the following:

Better code quality through Red, Green, RefactorDocumentation that grows as we develop and remains up to dateAutomatic regression test harness
This will primarily involve creating unit testsfirst, having them fail, making them pass and then refactoring the code to be of better quality and then re-running the tests. When using tools such as resharper to aid in refactoring code, having the tests in place right from the beginning really gives you peace of mind that you haven't broken anything. It also helps the thought processes while designing and developing an application or feature to be more targeted.

We will further develop the application in part 2 to add an MVC4 web client and continue the TDD story... 


Some BackgroundTest First or Test Driven development is a valuable software engineering practice. It c…

Azure DevOps Authorisation

Managing whether an identity has access to a given service, feature, function, object, or method in Azure DevOps comes down to authorisation. Fortunately, by default, the DevOps permissions are set in such a way to enable you to focus on the job at hand, DevOps. Loosely translated this means 'don't get in my way'. My experience is that the Azure DevOps team have done a good job at this, enabling you to crack on developing, building, testing and releasing without much hindrance.

Working with relaxed permissions is great when you are the owner and possibly either a one man band or small team but as soon as we need to consider larger teams, varying roles with approvals and degrees of access, authorisation becomes a real concern. I was recently involved in a project utilising offshore developers where trust was a concern and a number of specific teams handling specific roles needed to come together to approve a set of pipelines. 
This article is a pick of findings and a memory …