Innoviertes Formdesign durch die Einführung der „Ship Shape“-Technologie

 (canva.dev)
2 Punkte von GN⁺ 2023-11-14 | 1 Kommentare | Auf WhatsApp teilen

Einführung

  • Canva-Nutzer können mit dem neuen Draw-Tool ihrer Kreativität freien Lauf lassen und benutzerdefinierte Zeichnungen zu Designs hinzufügen.
  • Einfache Linien oder Formen, die Nutzer mit Maus oder Trackpad zeichnen, können ungenau sein; zur Korrektur wurde daher die Funktion Shape Assist entwickelt.
  • Shape Assist nutzt maschinelles Lernen (ML), um unsichere Skizzen in saubere Vektorgrafiken umzuwandeln.

Designüberlegungen

  • Bei der Entwicklung der Funktion wurde die Klassifizierungsverzögerung als oberste Priorität behandelt, damit die Nutzererfahrung schnell und zugleich präzise bleibt.
  • Die Lösung wird im Browser bereitgestellt und ermöglicht Formenerkennung und Zeichenunterstützung in Echtzeit.
  • Es ist keine Internetverbindung erforderlich, wodurch die Zugänglichkeit auch offline gewährleistet ist.

Datenerfassung

  • Die Grundlage eines erfolgreichen ML-Modells ist die Datenerfassung; dafür wurden Zeichnungsdaten von vielfältigen Nutzern gesammelt.
  • Die von Nutzern gezeichneten Linien wurden als Sequenzen von x- und y-Koordinaten aufgezeichnet, um einen Datensatz mit verschiedenen Stilen und Variationen zu erfassen.
  • Durch die Aufzeichnung der Daten über Koordinaten wurde Flexibilität für die Datenvorverarbeitung und die Anwendung verschiedener Data-Augmentation-Techniken geschaffen.

Modelldesign und Training

  • Es wurde ein ML-Modell entworfen, das clientseitig ausgeführt werden kann, ohne die Seitenladezeit negativ zu beeinflussen.
  • Statt eines CNN wurde mit einem RNN experimentiert, das Koordinaten direkt verwendet, um die Modellgröße zu minimieren.
  • Durch das Abstimmen verschiedener Hyperparameter wurden die optimalen Eigenschaften des Modells ermittelt.
  • Unter Berücksichtigung unterschiedlicher Zeichengeschwindigkeiten der Nutzer wurde die Anzahl der Punkte, die jede Form darstellen, fixiert.
  • Der Ramer-Douglas-Peucker-(RDP)-Algorithmus wurde angepasst, um die Anzahl der Punkte zu reduzieren und dabei wichtige Details zu erhalten.

Überlegungen zur Bereitstellung

  • Das Modell ist klein und rechnerisch einfach, sodass die gesamte Verarbeitung innerhalb der Client-Anwendung ausgeführt werden kann.
  • Die Funktion arbeitet vollständig offline, ohne dass eine Verbindung zu einem Server erforderlich ist.

Modellarchitektur

  • Das Modell besteht aus einer Struktur mit einer LSTM-Schicht und Gemm (einer dichten bzw. vollständig verbundenen Schicht).
  • Das Modell ist etwa 250 Kilobyte groß und wurde für die Ausführung auf dem Client direkt in Typescript implementiert.

Formersetzung

  • Nachdem die vom Nutzer gezeichnete Form bestimmt wurde, wird ein Template-Matching-Ansatz verwendet, um die Vektorgrafikdarstellung und den Zeichenpfad des Nutzers präzise auszurichten.

Fazit

  • Es freut uns sehr, die Funktion Shape Assist mit der ganzen Welt zu teilen, und wir hoffen, dass sowohl professionelle Designer als auch Doodle-Fans daran Freude haben werden.

Meinung von GN⁺

Der wichtigste Punkt dieses Artikels ist, dass Canva die Funktion Shape Assist entwickelt hat, die mit einem im Browser laufenden Machine-Learning-Modell von Nutzern gezeichnete Formen präzise erkennt und in saubere Vektorgrafiken umwandelt. Die Funktion gibt Nutzern sofortiges Feedback und kann auch ohne Internetverbindung verwendet werden, was die Zugänglichkeit erhöht. Interessant an diesem Artikel ist, dass er zeigt, wie technischer Fortschritt kreative Arbeit einfacher und angenehmer machen kann.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-11-14
Hacker-News-Kommentare

  • Anstelle von RNNs ist der Algorithmus "$1 unistroke recognizer" eine einfache und elegante Lösung für das Problem

    • Der "$1 unistroke recognizer" funktioniert gut, selbst wenn er nur mit einem einzigen Beispiel trainiert wird
    • Er lässt sich leicht in ein Projekt integrieren, um die Benutzeroberfläche vertrauter zu machen
    • Er funktioniert zuverlässig für Texteingaben im "Graffiti"-Stil und ist effektiv, wenn jeder Buchstabe aus einem einzelnen Strich besteht
    • Das Originalpapier ist leicht verständlich und angenehm zu lesen
    • Link zum Unistroke-Recognizer-Projekt

  • Ingenieure bei ASML, TSMC und anderen erzeugen jeden Tag Licht mit extrem kurzen Wellenlängen, indem sie Laser auf flüssiges Blei schießen, um kleinere und leistungsfähigere Chips herzustellen

    • Webentwickler bemühen sich jeden Tag darum, dass ihre Arbeit nicht auffällt

  • Selbst beim Zeichnen gerader Linien mit Maus oder Trackpad entstehen leicht unregelmäßige Formen

    • Es stellt sich die Frage, ob man in Canva überhaupt Formen mit der Maus zeichnen muss
    • Miro hatte früher eine Funktion, die einen mit der Maus gezeichneten Stern in einen geometrisch exakten Stern umwandelte
    • Beim Erstellen von Diagrammen verwendet man vorgefertigte Formen, und zum Erstellen von Icons nutzt man spezielle Programme
    • Wenn man tatsächlich zeichnet, verwendet man ein Tablet
    • Die Technik selbst ist cool, aber es gibt Zweifel an den realen Anwendungsfällen

  • Interesse an der Bibliothek, die Canva zum Zeichnen von Linien verwendet

  • Erstaunen über die Funktion in Macromedia Flash vor mehr als 20 Jahren, die beim Zeichnen freihändiger Kurven die Linien glättete

    • Gemessen an der damals begrenzten Rechenleistung war das eine beeindruckende Funktion

  • Erwähnung der Entwicklung einer Variante des Ramer-Douglas-Peucker-(RDP)-Algorithmus

    • RDP ist ein Algorithmus zur Kurvenvereinfachung, der die Anzahl der Punkte in einer Kurve reduziert und dabei wichtige Details beibehält
    • Geteilt wurde ein Beispiel aus der Strange Loop 2018, bei dem Douglas-Peucker auf Picassos Werk angewendet wurde
    • Link zum Projekt Picasso's Bulls

  • Eine handgezeichnet wirkende "zitternde Kritzel"-Version kann ansprechender sein als glatte Vektorgrafiken

    • In einer Welt künstlicher Perfektion liegt ein besonderer Reiz in echter handgezeichneter Arbeit

  • Bei der Implementierung solcher Funktionen sollten Nutzer wählen können, und der aktive Zustand sollte klar erkennbar sein

    • Es kann frustrierend sein, wenn ein Tool zu schlau sein will und dabei nicht perfekt funktioniert

  • Ein Modell wurde darauf trainiert, neun vordefinierte Formen zu erkennen

    • Beim Trainieren eines Modells sollte man eine allgemeine Glättungs-/Hilfsfunktion zum Zeichnen von Formen schaffen
    • Dadurch lassen sich einzigartigere Formen in einem stärker "analogen" Stil erhalten

  • Es wäre schön, wenn diese Funktion Open Source wäre

    • In letzter Zeit erscheinen wieder kleine Modelle (dieses Modell ist 250 KB groß)
    • Ich freue mich auf den Tag, an dem wir wieder zu kleinen Modellen für nützliche Anwendungen zurückkehren können