Canva Ship Shape: हाथ से बने आकारों को वेक्टर में बदलने वाला Shape Assist

 (canva.dev)
2 पॉइंट द्वारा GN⁺ 2023-11-14 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Canva का Shape Assist एक ऐसा फीचर है जो Draw tool में एक ही stroke से बने डगमगाते हाथ-से-खींचे गए shapes को ब्राउज़र के भीतर पहचानकर साफ़-सुथरे vector graphics में बदल देता है
  • नियमों और threshold पर आधारित computer vision heuristics rectangle, circle और triangle जैसे shapes पर काम कर सकते थे, लेकिन cloud, star और heart जैसे जटिल shapes तथा नए shapes जोड़ने में उनकी सीमाएँ थीं
  • मॉडल stroke को image की तरह नहीं बल्कि x·y coordinate sequence के रूप में संभालता है, और client-side execution के लिए CNN की जगह RNN/LSTM आधारित संरचना तथा custom inference code चुना गया
  • अंतिम मॉडल P = 25, H = 100, N = 9 सेटिंग वाले एक single LSTM layer और Gemm layer से बना है, जिसमें 64,109 parameters हैं, आकार लगभग 250KB है, और यह आधुनिक laptop पर 10ms से कम समय में चलता है
  • यह बिना server round trip के काम करता है, लेकिन इसे इस तरह डिज़ाइन किया गया है कि shape तभी अपने-आप replace हो जब उपयोगकर्ता shape बनाने के बाद cursor को 1 सेकंड से अधिक स्थिर रखे और drawing predefined shape से पर्याप्त मेल खाती हो

Draw tool और Shape Assist की भूमिका

  • Canva का Draw tool उपयोगकर्ताओं को अपने design में सीधे हाथ से drawing जोड़ने देता है
  • Shape Assist को हाथ से बने हल्के काँपते doodle को अधिक smooth vector graphic में बदलने के लिए बनाया गया
  • classification latency एक महत्वपूर्ण शर्त थी, इसलिए server processing के बजाय browser में execution चुना गया
    • उपयोगकर्ता shape बनाते ही तुरंत feedback पा सकते हैं
    • server-based processing से होने वाली latency से बचा जा सकता है
    • लगातार internet connection के बिना भी इसे offline इस्तेमाल किया जा सकता है

heuristics से ML मॉडल पर जाने की वजह

  • शुरुआती Shape Assist उपयोगकर्ता द्वारा खींचे गए coordinates के geometric गुणों का विश्लेषण करने वाली computer vision heuristics का उपयोग करता था
    • यह rectangle, circle और triangle जैसे specific shapes को rules और thresholds के आधार पर detect करता था
    • coordinates का विश्लेषण Cartesian coordinate system के points के रूप में किया जाता था
  • यह basic shape recognition में काम करता था, लेकिन नए shapes जोड़ना या अधिक complex shapes संभालना कठिन था
    • शुरुआती implementation उन shapes तक सीमित थी जिन्हें single stroke में बनाया जा सकता था
    • प्रस्तावित shapes की सूची में cloud, star और heart जैसे shapes भी थे, जिन्हें heuristic तरीके से संभालना कठिन था
  • ML मॉडल उपयोगकर्ताओं के hand-drawn dataset से तरह-तरह की styles और variations सीख सकता था, जिससे Shape Assist को simple geometric shapes से आगे बढ़ाकर अधिक complex shapes तक विस्तारित किया जा सका

hand-drawn data और coordinate-based representation

  • Canva ने single-stroke shapes draw करने के लिए एक simple UI के जरिए उपयोगकर्ताओं का hand-drawn data एकत्र किया
  • हर stroke को x·y coordinate sequence के रूप में रिकॉर्ड किया गया
    • यह तरीका shape को binary image के रूप में सहेजने की तुलना में preprocessing और data augmentation के लिए अधिक flexible है
    • image-based representation में flipping, rotation और shear जैसे spatial augmentation लागू किए जा सकते हैं
    • coordinate-based representation में coordinates को random तरीके से हटाना, point positions में random jitter जोड़ना, और points के क्रम को उलटना जैसे augmentation भी संभव हैं
  • केवल volunteers के data से भी एक अच्छा dataset इकट्ठा हुआ, लेकिन engineers और designers की drawings औसत Canva उपयोगकर्ता का सही प्रतिनिधित्व नहीं करती थीं
    • ML engineers अक्सर adversarial data देने की प्रवृत्ति रखते थे
    • designers की drawings बहुत अच्छी होती थीं, इसलिए कुछ को मुख्य हाथ के बजाय दूसरे हाथ से draw करने को कहा गया
    • अधिक सख्त guidelines और expectations देने के बाद काफ़ी बड़ा dataset हासिल किया गया

मॉडल डिज़ाइन और training तरीका

  • मॉडल को client पर चलना था और page load time पर बुरा असर नहीं डालना था, इसलिए उसका आकार न्यूनतम रखना ज़रूरी था
  • Canva ने CNN की जगह, जिसमें points को pixels में बदलना पड़ता, stroke के x·y coordinates को सीधे इस्तेमाल करने वाले RNN के साथ प्रयोग किया
  • सबसे उपयुक्त model properties खोजने के लिए hyperparameter search किया गया
    • input size, layers की संख्या, और hidden state features की संख्या जैसे parameters बदले गए
  • अलग-अलग उपयोगकर्ता अलग गति से draw करते हैं, इसलिए एक ही shape के लिए point list की लंबाई अलग हो सकती है
    • जो उपयोगकर्ता धीरे draw करते हैं वे अधिक points छोड़ते हैं
    • जो तेज़ draw करते हैं वे कम points छोड़ते हैं
  • points की संख्या fix करने के लिए uniform interval-based linear interpolation का उपयोग किया जा सकता था, लेकिन इससे महत्वपूर्ण points हट सकते थे और details खो सकती थीं
  • इसके बजाय Canva ने Ramer-Douglas-Peucker algorithm का एक modified रूप विकसित किया
    • RDP एक curve simplification algorithm है जो curve की महत्वपूर्ण details को बचाए रखते हुए points की संख्या कम करता है
    • यह simplified curve से अर्थपूर्ण रूप से न हटने वाले points को recursively हटाता है

गलत automatic replacement कम करने के लिए classification तरीका

  • Shape Assist को hand-drawn shape तभी replace करना चाहिए जब वह predefined classes में से किसी एक से पर्याप्त समान हो
  • क्योंकि एक समय में केवल एक shape ही सही उत्तर हो सकता है, इसलिए softmax activation और cross-entropy loss स्वाभाविक विकल्प थे
    • इस तरीके में highest-probability class का confidence threshold से कम होने पर prediction को reject किया जाता है
  • लेकिन इस approach में मॉडल गलत होने पर भी बहुत ऊँचा confidence दिखा सकता था
  • अंततः इसे हर output class के लिए sigmoid activation इस्तेमाल करने वाले multi-class, multi-label classifier के रूप में train किया गया
    • अगर कोई भी class threshold पार न करे, तो prediction reject कर दी जाती है

client inference architecture

  • ML मॉडल अक्सर बड़े और computation-heavy होते हैं, इसलिए वे आम तौर पर cloud के शक्तिशाली computers पर चलाए जाते हैं
  • Shape Assist मॉडल छोटा है और इसमें mathematical operations भी कम हैं, इसलिए पूरी processing को client application के भीतर चलाया जा सका
  • इस तरीके ने server connection की आवश्यकता हटा दी और server round-trip time भी खत्म कर दिया, जिससे shape की पहचान लगभग तुरंत होने लगी

मॉडल architecture और आकार

  • अंतिम मॉडल में एक single LSTM layer के बाद Gemm layer जुड़ी है
    • Gemm को Dense या Fully Connected layer भी कहा जाता है
  • मुख्य configuration values इस प्रकार हैं
    • interpolated points की संख्या: P = 25
    • hidden size: H = 100
    • predefined shapes की संख्या: N = 9
  • parameters की संख्या इस प्रकार निकाली जाती है
    • LSTM: 4H * 2 + 4H * H + 8H = 41,600
    • Gemm: P * H * N + N = 22,509
    • कुल: 64,109
  • IEEE754 32-bit floating point के हिसाब से प्रति parameter 4 bytes मानें तो मॉडल का आकार लगभग 250KB है
    • यह बिना compressed की गई 360p 16:9 image के लगभग एक frame जितना है
    • parameters को कम precision में store करके इसे और छोटा किया जा सकता है
  • Canva ने किसी general-purpose ML engine के बजाय LSTM और Gemm operations को सीधे TypeScript में implement किया
    • यह तरीका अधिक complex models पर आसानी से generalize नहीं होता
    • implementation 300 lines से कम है
    • यह आधुनिक laptop पर 10ms से कम समय में चलता है

shape replacement और alignment

  • मॉडल hand-drawn shape की पहचान करने के बाद, Canva template matching तरीके से hand-drawn path को vector graphic representation के साथ align करता है
  • alignment प्रक्रिया input shape और template shape को normalize करने के बाद की जाती है
    • template shape को 15° के steps में rotate करके आज़माया जाता है
    • rotated coordinate space में input points के first और second moments की गणना की जाती है
    • input points और template shape के बीच dissimilarity की गणना की जाती है
    • सबसे कम dissimilarity वाले rotation को optimal angle चुना जाता है
  • उपयोगकर्ता shape draw करने के बाद अगर cursor को कम-से-कम 1 सेकंड तक उसी जगह स्थिर रखे, और drawing predefined shape से पर्याप्त मेल खाए, तो Shape Assist shape को replace कर देता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-11-14
Hacker News की राय

  • इस समस्या के लिए recurrent neural network (RNN) कुछ ज़्यादा ही लगता है, और सरल व सुंदर $1 unistroke recognizer ज़्यादा उपयुक्त दिखता है
    हर gesture के लिए सिर्फ़ एक sample train करने पर भी यह काफ़ी अच्छा काम करता है, और किसी भी project में आधे दिन की मेहनत से जोड़कर gesture recognition के ज़रिए UI को अधिक सहज बनाया जा सकता है
    अगर हर अक्षर एक ही stroke में हो, तो Palm की Graffiti text input में भी यह काफ़ी स्थिरता से काम करता है, और मूल paper भी पढ़ने व समझने में आसान ढंग से लिखा गया है
    https://depts.washington.edu/acelab/proj/dollar/index.html

    • $1 recognizer की बड़ी समस्या यह है कि stroke को एक खास तरीके से बनाना पड़ता है
      उदाहरण के लिए, circle बनाते समय उसे counterclockwise बनाना पड़ता है, और अगर उसे ज़्यादा स्वाभाविक लगने वाले clockwise तरीके से बनाएं तो वह caret के रूप में पहचाना जाता है
      free drawing के ऐसे संदर्भ में, जहाँ user implementation details नहीं जानता, इसे व्यवहार में इस्तेमाल करना मुश्किल है
    • इस पेज के examples को test करके errors रिपोर्ट करने वाले लोग अक्सर यह बात चूक जाते हैं कि यह demo सिर्फ़ एक example से ही “train” किया गया है
      लिंक किए गए paper[0] में error rate पर चर्चा है, और कुछ ही examples और जोड़ने से यह काफ़ी तेज़ी से बेहतर हो जाता है
      [0]https://faculty.washington.edu/wobbrock/pubs/uist-07.01.pdf , पेज 8
    • खुद आज़माकर देखा तो, कम से कम बिना training के इस्तेमाल के लिए यह काफ़ी खराब था
      मेरे बनाए rectangle को caret और zigzag को curly brace के रूप में पहचाना गया
      दो strokes में बनाए जाने वाले shapes, जैसे arrow, भी supported नहीं हैं
    • थोड़ी देर इस्तेमाल करने पर यह बहुत ही सरल लगा। अगर example shape को ठीक-ठीक follow न करें तो वे एक-दूसरे से गड़बड़ा जाते हैं
      example shapes में “delete” और “x” की तुलना करके इसकी performance कितनी खराब है, यह आसानी से देखा जा सकता है
      हर बार shapes को एक ही तरीके से बनाने की उम्मीद रखने वाले gesture interface की शुरुआत के रूप में यह ठीक हो सकता है, लेकिन यहाँ जिस diagram creation उपयोग की बात हो रही है, उसके लिए यह ज़्यादा उपयुक्त नहीं है
    • मैं भी सहमत हूँ कि इतनी सरल चीज़ होने के बावजूद यह बहुत अच्छा काम करता है
      मैंने एक university project के रूप में इसका ES6 implementation बनाया था, दिलचस्पी हो तो यहाँ है: https://github.com/gurgunday/onedollar-unistroke-es6

  • “माउस या trackpad से खींची गई साधारण सी सीधी रेखा भी किसी नशे में धुत गिलहरी के गुजरने के रास्ते जैसी दिख सकती है” — यह बात समझ में आती है, लेकिन Canva में आखिर किसे माउस से shapes सीधे draw करने की ज़रूरत पड़ती है, यह स्पष्ट नहीं है
    पहले Miro में ऐसा feature था कि अगर आप माउस से किसी स्टार का मोटा-मोटा sketch बना दें तो वह उसे ज्यामितीय रूप से सटीक star, circle, triangle वगैरह में बदल देता था, और मुझे यह काफ़ी शानदार लगा था, लेकिन व्यवहार में मुझे इसकी कभी ज़रूरत नहीं पड़ी
    diagram बनाते समय पहले से तैयार shapes इस्तेमाल करना ज़्यादा तेज़ होता है, और icon बनाते समय boolean operations, point moving, और Pen tool पर आधारित अलग workflow इस्तेमाल किया जाता है, जिसमें आमतौर पर Illustrator जैसे dedicated program का उपयोग होता है
    असली illustration बनाते समय तो मैं tablet निकालकर इस्तेमाल करता हूँ, इसलिए तकनीक अपने आप में भले शानदार हो, लेकिन इसका use case क्या है, यह जानना दिलचस्प है

    • Canva कोई diagram tool नहीं, बल्कि काफ़ी अलग user base वाला visual design tool है
      उसकी asset library बहुत बड़ी है, और उसमें photos व vector graphics समेत लाखों, शायद करोड़ों images हैं
      सीमित उपयोग के मेरे अनुभव में, जब आपको पहले से ठीक-ठीक पता हो कि कौन-सा simple shape चाहिए, तब भी उस अंतहीन library में search करना खासा झुंझलाहट भरा था, और यह tool शायद उसी परेशानी को कम करने की कोशिश लगती है
      मैंने कुछ साल पहले Canva में काम किया था
      मेरे पास कोई अंदरूनी जानकारी नहीं है, लेकिन Canva शायद competitive diagram tool भी बनना चाहता है, इसलिए यह use case महत्वपूर्ण हो सकता है। हालाँकि, ऐसा लगता है कि मौजूदा 99% users के design experience को बुनियादी तौर पर बदल पाना उसके लिए मुश्किल होगा
    • ऐसे designers या marketers के लिए जो keyboard shortcuts याद नहीं रखते, “माउस से shape draw करना” तेज़ हो सकता है, जबकि “आधे-अधूरे menus से होकर सही shape चुनना, उसे रखना और फिर उसका size बदलना” धीमा पड़ता है
      भले ही shape बिना menu के तुरंत उपलब्ध हो, फिर भी सिर्फ़ cursor से पूरी चीज़ draw कर लेना कई icons को place व resize करने और फिर arrow feature पर switch करके arrow जोड़ने से तेज़ हो सकता है

  • Canva line drawing के लिए जिस library का इस्तेमाल करता है, वह भी दिलचस्प हो सकती है: https://github.com/steveruizok/perfect-freehand

    • लगता है Canva इसका sponsor नहीं है

  • “हमने Ramer-Douglas-Peucker(RDP) algorithm का एक variant विकसित किया” — यह पढ़कर मुझे एक पुराना side project याद आ गया
    2018 की Strange Loop प्रस्तुति में Douglas-Peucker को Picasso पर लागू किया गया था
    Picasso's Bulls: Deconstructing his design process with Python
    https://rrherr.github.io/picasso/

  • यह देखकर जिज्ञासा होती है कि 20 साल से भी पहले Macromedia Flash में ऐसा मिलता-जुलता काम कैसे किया गया था
    उस समय CPU performance आज की तुलना में बहुत अधिक सीमित थी, फिर भी freeform curve बनाते समय curves को smoothly refine होते देख कर जो हैरानी हुई थी, वह अब भी याद है

    • LeCun और उनकी टीम ने 1995 में handwritten digit recognition में 99% से अधिक accuracy हासिल की थी, और यह shape identification से काफ़ी मिलता-जुलता है
      फिर भी इसे browser में हल्का और तेज़ चलने लायक बनाना अब भी एक उपलब्धि है। आखिरकार सबसे महत्वपूर्ण चीज़ हमेशा user experience ही होती है
    • 1993 का Apple Newton 20MHz ARM processor पर भी इस feature को एक core functionality के रूप में देता था
      https://en.wikipedia.org/wiki/MessagePad#User_interface
    • Smoothing एक अलग काम है, जिसमें Bezier curve में लगभग duplicate points को हटाकर उसे simplify किया जाता है
      जैसे अगर आपने लगभग सीधी रेखा खींची और उससे 100 control points बन गए, तो software उसे घटाकर लगभग 4 points कर सकता है
    • शायद यह mouse events लेकर शुरुआत में events के बीच सीधी रेखाएँ जोड़कर draw करता होगा। 1990s hardware पर line drawing तेज़ थी, और तेज़ी से draw करना ज़रूरी भी रहा होगा
      drawing खत्म होने पर शायद उन्हीं points को input बनाकर spline curve algorithm से line को फिर से draw किया जाता होगा
      spline को draw करने की calculation अपने आप में बहुत कठिन नहीं है, लेकिन महत्वपूर्ण बात यह है कि अंत में एक point और जोड़ने पर पहले से drawn line का कुछ हिस्सा बदल जाता है
      तब उस line के बाद की हर चीज़ को फिर से draw करना पड़ता है, इसलिए computational cost बढ़ जाती है और यह गारंटी देना मुश्किल होता है कि इसे 60fps पर निश्चित रूप से संभाला जा सके

  • अच्छा लेख है और यह काम भी बहुत दिलचस्प है
    शायद यह कम लोगों की पसंद हो, लेकिन अजीब तरह से smooth vector graphics की तुलना में हाथ से बने हल्के डगमगाते doodle जैसा एहसास मुझे ज़्यादा अच्छा लगता है
    बेशक context के अनुसार पसंद बदल सकती है, इसलिए यह feature अपने आप में शानदार है। कृत्रिम पूर्णता से भरी दुनिया में असली hand-drawn नतीजों की ओर स्वाभाविक खिंचाव होता है

  • अगर ऐसा feature implement किया जाए, तो इसे ज़रूर optional बनाया जाए और enabled होने पर साफ़ दिखे भी
    जब कोई tool ज़रूरत से ज़्यादा smart बनने की कोशिश करे और फिर बिल्कुल सही न निकले, तो बहुत झुंझलाहट होती है। मुझसे भी ऐसी गलती हो चुकी है

  • हाल की machine learning/AI लहर से कुछ साल पहले Scribblenauts नाम का एक game था, जिसे बच्चे बहुत पसंद करते थे, और वह बहुत ही rough scribbles को हैरान कर देने वाली तरह-तरह की वस्तुओं में बदल देता था
    यह कैसे करता था, पता नहीं, लेकिन मुझे भी यह प्रभावशाली लगा था, और बच्चों को तो यह जादू जैसा लगता था
    https://store.steampowered.com/app/218680/Scribblenauts_Unli...

    • मैंने इसे खेला है, और यह सच में कमाल का था। अगर सही याद है, तो शायद यह iOS पर भी आया था

  • काश यह open source होता
    हाल में कई छोटे models आ रहे हैं। यह model 250KB का है, और बड़े model को fine-tune करने जैसे सरल कामों में लगभग 50KB के models भी थे
    उस समय का इंतज़ार है जब उपयोगी applications में छोटे models को फिर से वास्तव में इस्तेमाल किया जा सकेगा

  • पंचकोण और चमकता हुआ सितारा एक ही चीज़ नहीं हैं। क्या यह underfitting का उदाहरण है?