Con la ayuda de Microsoft AI.lab y Azure, una nueva aplicación llamada Sketch2Code toma bocetos de pizarra y los convierte en código de trabajo. Como se señaló en una publicación en el blog de Azure , Sketch2Code descifra las imágenes tomadas de los bocetos de la pizarra y puede convertir las imágenes en un código de marcado HTML válido.
Así es como Sketch2Code procesa las imágenes en código:
- El usuario carga una imagen a través del sitio web.
- Un modelo de visión personalizado predice qué elementos HTML están presentes en la imagen y su ubicación.
- Un servicio de reconocimiento de texto escrito a mano lee el texto dentro de los elementos predichos.
- Un algoritmo de diseño utiliza la información espacial de todos los cuadros delimitadores de los elementos predichos para generar una estructura de cuadrícula que se adapta a todos.
- Un motor de generación de HTML utiliza toda esta información para generar un código de marcado HTML que refleja el resultado.
Flujo de trabajo de Sketch2code
Sketch2Code utiliza los siguientes recursos de Microsoft AI y Azure:
- Un modelo de visión personalizado de Microsoft: este modelo se entrenó con imágenes de diferentes diseños escritos a mano que etiquetan la información de los elementos HTML más comunes, como botones, cuadros de texto e imágenes.
- Un servicio de visión por computadora de Microsoft: para identificar el texto escrito en un elemento de diseño, se utiliza un servicio de visión por computadora.
- Un Azure Blob Storage: se almacenan todos los pasos involucrados en el proceso de generación de HTML, incluida la imagen original, los resultados de la predicción y la información de agrupación de diseños.
- Una función de Azure: actúa como el punto de entrada del backend que coordina el proceso de generación al interactuar con todos los servicios.
- Un sitio web de Azure: final de fuente de usuario para permitir la carga de un nuevo diseño y ver los resultados HTML generados.
Sketch2Code se desarrolla en colaboración con Kabel y Spike Techniques. Puedes encontrar todos los recursos para Sketch2Code en Github .
