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

At Assemblysoft we specialise in Custom Software Development tailored to your requirements. We have experience creating Booking solutions, as we did for HappyCamperVan Hire. You can read more here.

We can onboard and add value to your business rapidly. We are an experienced Full-stack development team able to provide specific technical expertise or manage your project requirements end to end. We specialise in the Microsoft cloud and .NET Solutions and Services. Our developers are Microsoft Certified. We have real-world experience developing .NET applications and Azure Services for a large array of business domains. If you would like some assistance with Azure | Azure DevOps Services | Blazor Development  or in need of custom software development, from an experienced development team in the United Kingdom, then please get in touch, we would love to add immediate value to your business.

Assemblysoft - Your Safe Pair of Hands

https://assemblysoft.com/





Labels:
Location: 2 Woodland Walk, Bournemouth BH5 1LU, UK

Popular posts from this blog

Windows Azure Storage Emulator failed to install

CodeProject Windows Azure Storage Emulator failed to install When attempting to install a new version of the Azure Storage Emulator either as a separate installation package or automatically as part of an Azure SDK update, you may run into an error message which states the storage emulator has failed to install. This can occur using the Web Platform Installer (WebPI), NuGet Package Manager or when performing the install manually. Below is the message received using the WebPI.   Storage Emulator Background  (optional reading) The windows azure storage emulator executable lives under the Microsoft SDKs directory as shown below: Configuration If we take a quick look inside the WAStorageEmulator.exe.config file we can see each of the storage services pointing to local service endpoints. <StorageEmulatorConfig>     <services>       <service name=" Blob " url="http://127.0.0.1:10000/"/>       <service
Read more

Debugging Python and Iron Python using Visual Studio

Now Python is a first class citizen since the release of Visual Studio 2017 and can be configured directly from the Installation IDE, below are a few settings worth bookmarking for your next python integration project. Debugging Python One of the first things you are going to want to do is step through your code when using Visual Studio, particularly as the language is dynamic and inspection of local and global scope soon becomes necessary. One thing to note is that if you start from a native python project, this is all wired up for you but if you are using .Net to call python modules or want to support an older python version, such as 2.7, you will soon see that breakpoints are not being hit due to symbols not being loaded.   Enable Just My Code To distinguish user code from non-user code in .net, Just My Code looks at two things: PDB (Program Database) files, and Optimization Program Database A .pdb file, otherwise known as a symbol file, maps the identifiers
Read more

Test connection to remote SQL Server Database from an Application server

While aiming to test whether a SQL connection is succeeding between an Application server and a remote Database Server, it is often not possible to install SQL Server Management Studio (SSMS) or Microsoft Command Line Utilities (MsSqlCmdLnUtils) due to the locked down nature of the targets, particularly in test and production environments. A lightweight approach that worked for me recently, makes use of components that have been a part of windows boxes for a long time, albeit different levels of database driver support as the components have evolved, the Microsoft Data Access Components (MDAC). MDAC provide a Universal Data Link, which can be configured using a common user interface for specifying connection properties as well as testing the connection.  Data Link properties dialog box At Assemblysoft we specialise in  Custom Software Development  tailored to your requirements. We have experience creating Booking solutions, as we did for HappyCamper
Read more