Die Notwendigkeit

Der kreative Designprozess beginnt mit einer Zusammenarbeit am Whiteboard, bei der Designer ihre Ideen austauschen. Sobald ein Design vorliegt, wird es üblicherweise manuell in einen funktionierenden HTML-Prototypen übersetzt. Dies kostet Zeit und verzögert den Designprozess.

Die Idee

Mithilfe von Computer Vision können wir ein System aufbauen, das versteht, was ein Designer auf einem Whiteboard gezeichnet hat und das Ergebnis dann in HTML-Code übersetzt. Beispielsweise können wir HTML-Code direkt aus einem handgezeichneten Bild generieren.

Die Lösung

Der Custom Vision-Dienst trainiert Modelle zur Erkennung von HTML-Objekten und verwendet dann die Texterkennung, um handschriftlichen Text im Design zu extrahieren. Durch die Kombination von Objekt und Text können wir HTML-Code-Schnipsel aus verschiedenen Designelementen erzeugen.

Technische Details zu Sketch2Code

Computer Vision Service

Computer Vision ist eine Disziplin innerhalb der künstlichen Intelligenz, die einer Anwendung ermöglicht, zu sehen und zu verstehen, was sie sieht. Mithilfe von Microsoft Cognitive Services können wir Computer Vision mit Millionen von Bildern trainieren und die Objekterkennung für eine breite Palette von Objekttypen ermöglichen.

Also haben wir das Modell so trainiert, dass es handgefertigte Webdesign-Elemente wie ein Textfeld oder eine Schaltfläche erkennt. Wir verwenden die Texterkennungsfunktionalität des Computer Vision Service, um handgeschriebenen Text aus dem Entwurf zu extrahieren. Indem wir das Designelement und den extrahierten Inhalt kombinieren, können wir HTML-Schnipsel aus den verschiedenen Elementen im Design erzeugen. Wir können dann aus der Position der identifizierten Elemente auf das Layout des Entwurfs schließen und den endgültigen HTML-Code generieren.

Projekte im Umfeld von Sketch2Code

Weitere Innovations-Projekte durchsuchen

Entdecken Sie die Möglichkeiten von KI

Starten Sie Ihre eigenen KI-Innovationen mit Schulungsressourcen und Entwicklungslösungen von Microsoft AI.