Episode

Sketch2Code

Der Prozess "Need- User Interface Design" beinhaltet viel Kreativität, die auf einem Whiteboard beginnt, in dem Designer Ideen austauschen. Sobald ein Design gezeichnet wird, wird es in der Regel in einem Foto aufgenommen und manuell in ein funktionierendes HTML-Drahtmodell übersetzt, um mit einem Webbrowser zu spielen. Dies erfordert Aufwand und verzögert den Entwurfsprozess.

 

Die Lösung – in Microsoft Cognitive Services hosten wir maschinelles Sehen Service. Das Modell hinter diesem Dienst wurde mit Millionen von Bildern trainiert und ermöglicht die Objekterkennung für eine vielzahl von Objekttypen. In diesem Fall müssen wir ein benutzerdefiniertes Modell erstellen und mit Bildern von handgezeichneten Designelementen wie einem Textfeld, einer Schaltfläche oder einem Kombinationsfeld trainieren. Der Custom Vision Service bietet uns die Möglichkeit, benutzerdefinierte Modelle zu trainieren und die Objekterkennung für sie durchzuführen. Sobald wir HTML-Objekte identifizieren können, verwenden wir die Im maschinelles Sehen Service vorhandene Texterkennungsfunktion, um handschriftlichen Text zu extrahieren, der im Design vorhanden ist. Durch die Kombination dieser beiden Informationselemente können wir die HTML-Codeausschnitte der verschiedenen Elemente im Design generieren. Anschließend können wir das Layout des Designs von der Position der identifizierten Elemente ableiten und den endgültigen HTML-Code entsprechend generieren.

 

Produkte und Dienste– maschinelles Sehen (handschriftliche OCR-Modelle), Custom Vision, Azure Functions, Blob Storage, WebApp

Kostenloses Konto erstellen (Azure)