Charla impartida en el SQLSaturday Madrid 2018 por Miguel Ángel Castejón, director de Kabel Lab. En la sesión se presentó a los asistentes Sketch2Code, una herramienta que hemos desarrollado para Microsoft. Esta aplicación parte de los servicios cognitivos de Computer Vision y Custom Vision, permitiendo tomar fotografías de dibujos realizados en una pizarra, libreta u otro soporte y procesarlas para crear prototipos en formato HTML de dichos diseños.

1. Sketch2Code
Transform any hands-drawn design into HTML with AI

6. DEMO
http://sketch2code.azurewebsites.net

7. Detección de objetos
• Modelo creado con Custom Vision (Microsoft Cognitve Services)
• Entrenado con imágenes creadas ad-hoc
• Detección de 8 tipos de elementos (tags)
• Acceso mediante API
• A partir de una imagen genera:
• Objetos reconocidos
• Posiciones de dichos objetos en la imagen
• Probabilidad de acierto

8. Reconocimiento de escritura
• Uso de Handwritten Text Recognition (Computer Vision)
• Acceso mediante API
• A partir de una imagen genera:
• Líneas de texto identificadas
• Posición del texto dentro de la imagen

9. Construcción del layout
• Algoritmo recursivo
• Identificación de filas y columnas
• Posicionamiento de cada elemento dentro de
una fila/columna
• Identificación de overlapping
• Generar una estructura de datos independiente
del código a generar

10. Generación de HTML
• Generación mediante plantillas Razor (ASP.Net MVC)
• La fuente de entrada es la salido del algoritmo de posicionamiento
• Uso de estilos Bootstrap

11. Arquitectura

12. Need help?
Miguel Angel Castejón (mac)
macastejon@kabel.es