La necesidad

El proceso de diseño creativo parte con la colaboración en una pizarra donde los diseñadores comparten ideas. Después de dibujar un diseño, este suele convertirse manualmente en un esquema en HTML operativo. Esto toma tiempo y retrasa el proceso de diseño.

La idea

Podemos usar Computer Vision para crear un sistema que entienda lo que un diseñador dibujó en una pizarra y traduzca ese conocimiento a código HTML. De este modo, podemos generar código HTML directamente a partir de una imagen dibujada a mano.

La solución

El servicio de Custom Vision entrena modelos para detectar objetos HTML y luego se vale del reconocimiento de texto para extraer texto manuscrito del diseño. Al combinar el objeto y el texto, podemos generar fragmentos de código HTML de diferentes elementos de diseño.

Detalles técnicos de Sketch2Code

Computer Vision Service

La visión artificial es una disciplina dentro de la inteligencia artificial que permite que una aplicación vea y comprenda lo que está viendo. Con Microsoft Cognitive Services, podemos entrenar Custom Computer Vision con millones de imágenes y logramos detectar una amplia variedad de tipos de objetos.

En este caso, entrenamos el modelo para que reconozca elementos de diseño web dibujados a mano, como un cuadro de texto o un botón. Usamos la funcionalidad de reconocimiento de texto de Computer Vision Service para extraer el texto manuscrito presente en el diseño. Al combinar el elemento de diseño y el contenido extraído, podemos generar fragmentos de código HTML de los distintos elementos en el diseño. Luego podemos inferir el diseño a partir de la posición de los elementos identificados y generar el código HTML final.

Proyectos relacionados con Sketch2Code

Explora más proyectos

Explora las posibilidades de la IA

Inicia tus propias innovaciones en IA con los recursos de aprendizaje y las soluciones de desarrollo de IA de Microsoft.