"Ship Shape" तकनीक अपनाकर बदला गया shape design

परिचय

• Canva उपयोगकर्ता नए Draw टूल के ज़रिए अपनी creativity दिखाते हुए अपने designs में कस्टम चित्र जोड़ सकते हैं.
• यूज़र द्वारा mouse या trackpad से खींची गई साधारण lines या shapes भी सटीक न हों, इसे बेहतर बनाने के लिए Shape Assist फीचर विकसित किया गया.
• Shape Assist machine learning (ML) का उपयोग करके अस्थिर doodles को smooth vector graphics में बदल देता है.

डिज़ाइन से जुड़ी बातें

• फीचर विकसित करते समय classification latency को सबसे बड़ी प्राथमिकता दी गई, ताकि user experience तेज़ होने के साथ सटीक भी रहे.
• solution को browser के भीतर deploy किया गया ताकि real-time shape recognition और drawing support मिल सके.
• internet connection की जरूरत नहीं है, इसलिए offline स्थिति में भी accessibility बनी रहती है.

डेटा संग्रह

• एक सफल ML मॉडल की नींव data collection पर टिकी होती है, और इसके लिए अलग-अलग उपयोगकर्ताओं से drawing data इकट्ठा किया गया.
• उपयोगकर्ता द्वारा खींची गई रेखाओं को x और y coordinates की sequence के रूप में रिकॉर्ड करके अलग-अलग styles और variations वाला dataset बनाया गया.
• coordinates का उपयोग करके data रिकॉर्ड करने से data preprocessing और कई data augmentation techniques लागू करने की flexibility मिली.

मॉडल डिज़ाइन और प्रशिक्षण

• ऐसा ML मॉडल डिज़ाइन किया गया जो page load time पर नकारात्मक असर डाले बिना client side पर चल सके.
• CNN के बजाय सीधे coordinates का उपयोग करने वाले RNN के साथ प्रयोग किए गए ताकि मॉडल का आकार न्यूनतम रखा जा सके.
• अलग-अलग hyperparameters को समायोजित करके मॉडल के optimal गुणों की पहचान की गई.
• उपयोगकर्ताओं की drawing speed में अंतर को ध्यान में रखते हुए हर shape को दर्शाने वाले points की संख्या तय रखी गई.
• Ramer-Douglas-Peucker (RDP) algorithm में बदलाव करके महत्वपूर्ण details को बनाए रखते हुए points की संख्या घटाई गई.

deployment से जुड़ी बातें

• मॉडल छोटा है और computational रूप से सरल है, इसलिए सारा processing client application के भीतर चल सकता है.
• server से जुड़े बिना यह फीचर पूरी तरह offline काम करता है.

मॉडल आर्किटेक्चर

• मॉडल की संरचना में एक LSTM layer और Gemm (dense या fully connected layer) शामिल है.
• मॉडल का आकार लगभग 250 kilobytes है, और इसे client पर चलाने के लिए सीधे Typescript में implement किया गया.

shape replacement

• उपयोगकर्ता द्वारा खींचे गए shape का निर्धारण होने के बाद, vector graphic representation और उपयोगकर्ता के drawing path को सटीक रूप से align करने के लिए template matching approach का उपयोग किया गया.

निष्कर्ष

• Shape Assist फीचर को दुनिया भर के साथ साझा करने को लेकर टीम बहुत उत्साहित है, और उम्मीद है कि professional designers से लेकर doodling पसंद करने वाले सभी लोग इस फीचर का आनंद लेंगे.

GN⁺ की राय

इस लेख की सबसे महत्वपूर्ण बात यह है कि Canva ने browser के भीतर चलने वाले machine learning मॉडल का उपयोग करके उपयोगकर्ताओं द्वारा बनाए गए shapes को सटीक रूप से पहचानने और उन्हें smooth vector graphics में बदलने वाला Shape Assist फीचर विकसित किया है. यह फीचर उपयोगकर्ताओं को तुरंत feedback देता है और internet connection के बिना भी इस्तेमाल किया जा सकता है, जिससे accessibility बढ़ती है. यह लेख इसलिए दिलचस्प है क्योंकि यह दिखाता है कि तकनीक में प्रगति creative काम को कैसे अधिक आसान और आनंददायक बना सकती है.

[GN⁺]

Hacker News की राय

• RNN के बजाय "$1 unistroke recognizer" एल्गोरिदम इस समस्या का एक सरल और सुरुचिपूर्ण समाधान है

  • "$1 unistroke recognizer" केवल एक सैंपल पर train होने के बाद भी अच्छी तरह काम करता है
  • इसे प्रोजेक्ट में आसानी से integrate किया जा सकता है ताकि user interface और अधिक परिचित लगे
  • यह "Graffiti"-style text input पर भरोसेमंद तरीके से काम करता है, और तब प्रभावी होता है जब हर अक्षर एक single stroke हो
  • मूल शोध-पत्र को इस तरह लिखा गया है कि उसे समझना और पढ़ना आसान है
  • unistroke recognizer project link

• ASML, TSMC जैसी कंपनियों के engineers हर दिन बेहद छोटी wavelength की रोशनी पैदा करने के लिए liquid tin पर laser मारते हैं ताकि और छोटे व बेहतर chips बनाए जा सकें

  • web developers हर दिन इस बात के लिए मेहनत करते हैं कि उनका काम नज़र ही न आए

• mouse या trackpad से सीधी रेखा खींचते समय भी उसका अनियमित आकार बन जाना आसान है

  • यह सवाल है कि Canva में mouse से shape draw करने की ज़रूरत ही क्यों पड़ती है
  • Miro में पहले ऐसी सुविधा थी जो mouse से बनाए गए star को ज्यामितीय रूप से सटीक star में बदल देती थी
  • diagram बनाते समय पहले से बने हुए shapes का इस्तेमाल किया जाता है, और icon बनाते समय dedicated program का
  • सच में drawing करनी हो तो tablet का इस्तेमाल किया जाता है
  • तकनीक खुद में शानदार है, लेकिन इसके वास्तविक use case पर सवाल है

• Canva लाइनें खींचने के लिए कौन-सी library इस्तेमाल करता है, इसमें रुचि

  • perfect-freehand GitHub link

• 20 साल से भी पहले Macromedia Flash में freeform curve बनाते समय curves को smooth करने वाली सुविधा पर हैरानी

  • उस समय की सीमित processing power को देखते हुए यह काफ़ी प्रभावशाली feature था

• Ramer-Douglas-Peucker (RDP) एल्गोरिदम के एक variant के विकास का उल्लेख

  • RDP एक curve simplification algorithm है जो महत्वपूर्ण details को बनाए रखते हुए curve के points की संख्या कम करता है
  • 2018 के Strange Loop में Picasso के काम पर Douglas-Peucker लागू करने का एक उदाहरण साझा किया गया था
  • Picasso's Bulls project link

• हाथ से बनी हुई जैसी "कांपती हुई scribble" version, smooth vector graphics से ज़्यादा आकर्षक हो सकती है

  • कृत्रिम पूर्णता की दुनिया में सचमुच हाथ से बनी रचना का अलग आकर्षण है

• ऐसी functionality लागू करते समय user को चुनने का विकल्प मिलना चाहिए और इसका सक्रिय होना साफ़ दिखना चाहिए

  • जब tool बहुत ज़्यादा smart बनने की कोशिश करे और फिर भी perfect न हो, तो वह झुंझलाहट पैदा कर सकता है

• model को train करके 9 predefined shapes पहचानने लायक बनाया गया

  • model को train करते समय shapes draw करने के लिए एक सामान्य smoother/assistant feature बनाना चाहिए
  • इससे और ज़्यादा "analog" style के अनोखे shapes मिल सकते हैं

• काश यह feature open source होता

  • हाल में छोटे size के models सामने आ रहे हैं (यह model 250kb का है)
  • ऐसे दिन का इंतज़ार है जब उपयोगी applications के लिए फिर से छोटे models की ओर लौट सकें