👨🏻‍⚖️ 🏉 🤽 opencv4arts: मेरा शहर, विंसेंट ड्रा 🕵️ 🤙 👎🏻

OpenCV 20 वर्षों में निरंतर विकास के इतिहास के साथ एक पुस्तकालय है। वह उम्र जब आप खुद को खोदना शुरू करते हैं, एक मंजिल की तलाश में। क्या इस पर आधारित कोई परियोजना है जिसने किसी के जीवन को बेहतर बनाया है, किसी को खुश? क्या आप इसे स्वयं कर सकते हैं? उत्तर की तलाश में हैं और पहले के अज्ञात ओपनसीवी मॉड्यूल की खोज करना चाहते हैं, मैं उन अनुप्रयोगों का निर्माण करना चाहता हूं जो "खूबसूरती से करते हैं" - ताकि पहले तो "वाह" हो और तभी आप कहते हैं "ओह हां, यह कंप्यूटर विजन है"।

पहले लेख का अधिकार फोटोग्राफी में विश्व कलाकारों की शैलियों के हस्तांतरण के साथ एक प्रयोग था। लेख से आप जानेंगे कि प्रक्रिया का दिल क्या है और अपेक्षाकृत नए OpenCV.js के बारे में - OpenCV लाइब्रेरी का जावास्क्रिप्ट संस्करण।

शैली हस्तांतरण

मशीन लर्निंग के विरोधियों ने मुझे माफ़ कर दिया, लेकिन आज के लेख में मुख्य घटक एक गहन दृढ़ नेटवर्क होगा। क्योंकि यह काम करता है। OpenCV में तंत्रिका नेटवर्क को प्रशिक्षित करने का कोई तरीका नहीं है, लेकिन आप मौजूदा मॉडल चला सकते हैं। हम पूर्व प्रशिक्षित CycleGAN नेटवर्क का उपयोग करेंगे। लेखक, जिसके लिए वे बहुत आभारी हैं, पूरी तरह से मुफ्त में नेटवर्क डाउनलोड करने की पेशकश करते हैं जो सेब की छवियों को संतरे, घोड़ों को ज़ेब्रा, नक्शे के लिए उपग्रह छवियों, गर्मियों की तस्वीरों को सर्दियों की तस्वीरें और बहुत कुछ प्रदान करते हैं। इसके अलावा, नेटवर्क प्रशिक्षण प्रक्रिया आपको दो जनरेटर मॉडल को एक साथ दोनों दिशाओं में काम करने की अनुमति देती है। यही है, गर्मियों में सर्दियों के परिवर्तन को पढ़ाने से, आपको गर्मियों की तस्वीरों में सर्दियों के परिदृश्य को चित्रित करने के लिए एक मॉडल मिलेगा। एक अनूठी पेशकश जिसे अस्वीकार करना असंभव है।

हमारे उदाहरण में, हम मॉडल लेते हैं जो कलाकारों द्वारा तस्वीरों को चित्रों में बदलते हैं। अर्थात्, विन्सेन्ट वान गॉग, क्लाउड मोनेट, पॉल सेज़ान या जापानी प्रिंट्स उकीयो-ई की पूरी शैली में। यही है, हमारे पास हमारे निपटान में चार अलग-अलग नेटवर्क होंगे। यह ध्यान देने योग्य है कि प्रत्येक के प्रशिक्षण के लिए कलाकार की एक तस्वीर नहीं, बल्कि एक पूरी भीड़ का उपयोग किया गया था, जिससे लेखकों ने तंत्रिका नेटवर्क को एक काम की शैली को स्थानांतरित करने के लिए प्रशिक्षित करने की कोशिश नहीं की, लेकिन, जैसा कि यह था, लेखन की शैली को अपनाने के लिए।

OpenCV.js

OpenCV C ++ में विकसित एक पुस्तकालय है, जबकि इसकी अधिकांश कार्यक्षमता के लिए स्वचालित रैपर बनाने की संभावना है जो देशी तरीकों को कहते हैं। आधिकारिक तौर पर, पायथन और जावा भाषाओं के लिए रैपर का समर्थन किया जाता है। इसके अलावा, गो , पीएचपी के लिए कस्टम समाधान हैं। यदि आपके पास अन्य भाषाओं का उपयोग करने का अनुभव है, तो यह जानना शानदार होगा कि किसमें, और किसके प्रयासों के लिए धन्यवाद।

OpenCV.js एक परियोजना है जिसने 2017 में Google समर ऑफ कोड प्रोग्राम के लिए जीवन का अधिकार प्राप्त किया है। वैसे, एक बार डीप लर्निंग मॉड्यूल OpenCV खुद बनाया गया था और इसकी रूपरेखा में काफी सुधार हुआ था। अन्य भाषाओं के विपरीत, फिलहाल OpenCV.js जावास्क्रिप्ट में मूल तरीकों का आवरण नहीं है, लेकिन एलवीवीएम और क्लेंग का उपयोग करते हुए एम्सस्क्रिप्ट का पूरा संकलन है। यह आपको अपने C और C ++ एप्लिकेशन या लाइब्रेरी से एक फ़ाइल बनाने की अनुमति देता है। एक ब्राउज़र में, कहा जा सकता है।

एक उदाहरण के लिए,

 #include <iostream> int main(int argc, char** argv) { std::cout << "Hello, world!" << std::endl; return 0; }

asm.js में संकलन

 emcc main.cpp -s WASM=0 -o main.js

और लोड करें:

 <!DOCTYPE html> <html> <head> <script src="main.js" type="text/javascript"></script> </head> </html>

आप OpenCV.js को अपनी परियोजना से इस प्रकार जोड़ सकते हैं (रात्रि निर्माण):

 <script src="https://docs.opencv.org/master/opencv.js" type="text/javascript"></script>

छवियों को पढ़ने के लिए एक अतिरिक्त पुस्तकालय, कैमरा और अन्य चीजों के साथ काम करना, जो कि जावास्क्रिप्ट में मैन्युअल रूप से लिखा गया है, उपयोगी भी हो सकता है:

 <script src="https://docs.opencv.org/master/utils.js" type="text/javascript"></script>

छवियाँ अपलोड करें

OpenCV.js में छवियाँ canvas या img जैसे तत्वों से पढ़ी जा सकती हैं। इसका मतलब है कि उनके लिए सीधे इमेज फाइल डाउनलोड करना यूजर का काम रहता है। सुविधा के लिए, सहायक फ़ंक्शन addFileInputHandler स्वचालित रूप से वांछित canvas तत्व में छवि को लोड करेगा जब एक बटन के क्लिक पर एक तस्वीर डिस्क से चुनी जाती है।

 var utils = new Utils(''); utils.addFileInputHandler('fileInput', 'canvasInput'); var img = cv.imread('canvasInput');

जहाँ

 <input type="file" id="fileInput" name="file" accept="image/*" /> <canvas id="canvasInput" ></canvas>

महत्वपूर्ण बिंदु यह है कि img एक 4-चैनल RGBA छवि होगी, जो सामान्य cv::imread से भिन्न होती cv::imread , जो BGR छवि बनाता है। उदाहरण के लिए, अन्य भाषाओं के एल्गोरिदम को पोर्ट करते समय इसे ध्यान में रखा जाना चाहिए।

प्रतिपादन के साथ, सब कुछ सरल है - बस वांछित canvas की id साथ imshow को कॉल करें (आरजीबी या आरजीबीए की उम्मीद है)।

 cv.imshow("canvasOutput", img);

एल्गोरिथ्म

संपूर्ण छवि प्रसंस्करण एल्गोरिथ्म एक तंत्रिका नेटवर्क का प्रक्षेपण है। मान लीजिए कि अंदर क्या होता है जादू रहता है, हमें केवल सही इनपुट तैयार करने और भविष्यवाणी को सही ढंग से (नेटवर्क आउटपुट) की व्याख्या करने की आवश्यकता है।

इस उदाहरण में माना गया नेटवर्क अंतराल में [-1, 1] में float वैल्यू के साथ एक चार आयामी टेंसर प्राप्त करता है। परिवर्तन की गति के क्रम में प्रत्येक आयाम, चित्र, चैनल, ऊंचाई और चौड़ाई का सूचकांक है। इस स्टाइलिंग को NCHW कहा जाता है, और टेंसर को ही एक बूँद, बाइनरी लार्ज ऑब्जेक्ट कहा जाता है। पूर्व-प्रसंस्करण कार्य एक OpenCV छवि को परिवर्तित करने के लिए है, जिनमें से तीव्रता में हस्तक्षेप किया जाता है, मानों की एक अंतराल [0, 255] प्रकार के unsigned char NCHW बूँद मानों की एक सीमा के साथ [-1, 1] ।

निज़नी नोवगोरोड क्रेमलिन का एक टुकड़ा (जैसा कि एक व्यक्ति देखता है)

interleaved दृश्य (OpenCV स्टोर कैसे)

प्लानर व्यू (नेटवर्क को क्या चाहिए)

पोस्ट-प्रोसेसिंग के रूप में, उलटा रूपांतरण करना आवश्यक होगा: नेटवर्क अंतराल में मूल्यों के साथ एक एनसीएचडब्ल्यू बूँद लौटाता है [-1, 1] , जिसे चित्र में वापस लाया जाना चाहिए, जिसे सामान्य कर दिया जाता है [0, 255] और unsigned char बदल दिया जाता है।

इस प्रकार, OpenCV.js चित्रों को पढ़ने और लिखने की सभी विशेषताओं को ध्यान में रखते हुए, निम्नलिखित कदम आकार ले रहे हैं:

 imread -> RGBA -> BGR [0, 255] -> NCHW [-1, 1] -> [] [] -> NCHW [-1, 1] -> RGB [0, 255] -> imshow

परिणामी पाइपलाइन को देखते हुए, सवाल उठता है कि नेटवर्क इंटरलेस्ड आरजीबीए पर तुरंत काम क्यों नहीं कर सकता है और इंटरलेस्ड आरजीबी वापस कर सकता है? पिक्सेल क्रमचय और सामान्यीकरण के लिए अतिरिक्त परिवर्तनों की आवश्यकता क्यों है? उत्तर यह है कि एक तंत्रिका नेटवर्क एक गणितीय वस्तु है जो एक निश्चित वितरण के इनपुट डेटा पर परिवर्तन करता है। हमारे मामले में, उसे इस रूप में डेटा प्राप्त करने के लिए प्रशिक्षित किया गया था, इसलिए, वांछित परिणाम प्राप्त करने के लिए, यह आवश्यक है कि प्रशिक्षण में उपयोग किए जाने वाले लेखकों को प्रीप्रोसेसिंग पुन: पेश करें।

कार्यान्वयन

तंत्रिका नेटवर्क जिसे हम चलाएंगे, बाइनरी फ़ाइल के रूप में संग्रहीत किया जाता है, जिसे पहले स्थानीय फ़ाइल सिस्टम में लोड किया जाना चाहिए।

 var net; var url = 'style_vangogh.t7'; utils.createFileFromUrl('style_vangogh.t7', url, () => { net = cv.readNet('style_vangogh.t7'); });

वैसे, url फ़ाइल का पूर्ण लिंक है। इस मामले में, हम बस वर्तमान HTML पृष्ठ के बगल में फ़ाइल अपलोड करते हैं, लेकिन आप इसे मूल स्रोत से बदल सकते हैं (इस मामले में, डाउनलोड समय लंबा हो सकता है)।

canvas से एक छवि पढ़ना और RGBA से BGR में परिवर्तित करना:

 var imgRGBA = cv.imread('canvasInput'); var imgBGR = new cv.Mat(imgRGBA.rows, imgRGBA.cols, cv.CV_8UC3); cv.cvtColor(imgRGBA, imgBGR, cv.COLOR_RGBA2BGR);

एक 4D ब्लॉब बनाना, जहां blobFromImage फ़ंक्शन सामान्यीकरण स्थिरांक का उपयोग करके एक float डेटा float कनवर्ट करता है। फिर - नेटवर्क लॉन्च करें।

 var blob = cv.blobFromImage(imgBGR, 1.0 / 127.5, //  {width: imgBGR.cols, height: imgBGR.rows}, //  [127.5, 127.5, 127.5, 0]); //   net.setInput(blob); var out = net.forward();

परिणाम वांछित प्रकार की छवि और मूल्यों के अंतराल में परिवर्तित हो जाता है [0, 255]

 //     [-1, 1]  [0, 255] var outNorm = new cv.Mat(); out.convertTo(outNorm, cv.CV_8U, 127.5, 127.5); //  interleaved   planar  var outHeight = out.matSize[2]; var outWidth = out.matSize[3]; var planeSize = outHeight * outWidth; var data = outNorm.data; var b = cv.matFromArray(outHeight, outWidth, cv.CV_8UC1, data.slice(0, planeSize)); var g = cv.matFromArray(outHeight, outWidth, cv.CV_8UC1, data.slice(planeSize, 2 * planeSize)); var r = cv.matFromArray(outHeight, outWidth, cv.CV_8UC1, data.slice(2 * planeSize, 3 * planeSize)); var vec = new cv.MatVector(); vec.push_back(r); vec.push_back(g); vec.push_back(b); var rgb = new cv.Mat(); cv.merge(vec, rgb); //   cv.imshow("canvasOutput", rgb);

फिलहाल, OpenCV.js को अर्ध-स्वचालित मोड में बनाया जा रहा है। इस अर्थ में कि सभी मॉड्यूल और उनके तरीकों को जावास्क्रिप्ट में संबंधित हस्ताक्षर प्राप्त नहीं होते हैं। उदाहरण के लिए, dnn मॉड्यूल के लिए, मान्य कार्यों की सूची निम्नानुसार परिभाषित की गई है:

 dnn = {'dnn_Net': ['setInput', 'forward'], '': ['readNetFromCaffe', 'readNetFromTensorflow', 'readNetFromTorch', 'readNetFromDarknet', 'readNetFromONNX', 'readNet', 'blobFromImage']}

अंतिम रूपांतरण, बूँद को तीन चैनलों में विभाजित करना और फिर उन्हें एक तस्वीर में मिलाना, वास्तव में, imagesFromBlob विधि की imagesFromBlob किया जा सकता है, जो कि अभी तक उपरोक्त सूची में जोड़ा नहीं गया है। शायद यह OpenCV के विकास में आपका पहला योगदान होगा? ;)

निष्कर्ष

एक प्रदर्शन के रूप में, मैंने GitHub पर एक पृष्ठ तैयार किया, जहाँ आप परिणामी कोड का परीक्षण कर सकते हैं: https://dkurtaev.imtqy.com/opencv4arts (सावधानी! 22MB के बारे में नेटवर्क डाउनलोड करना, अपना ट्रैफ़िक बचाना। प्रत्येक नई छवि के लिए पृष्ठ को पुनः लोड करने की भी अनुशंसा की गई है, अन्यथा गुणवत्ता बाद के प्रसंस्करण किसी तरह दृढ़ता से विकृत है)। एक लंबी प्रसंस्करण प्रक्रिया के लिए तैयार रहें या छवि का आकार बदलने की कोशिश करें, जो एक परिणाम होगा, एक स्लाइडर।

लेख पर काम करते समय और बहुत ही छवि का चयन करें जो उसका चेहरा बन जाएगा, मुझे गलती से मेरे दोस्त की एक तस्वीर मिली, जिसमें हमारे शहर के क्रेमलिन को दर्शाया गया है और सब कुछ एक साथ आया है - लेख के नाम के साथ आया और तभी लगा कि यह ऐसा होना चाहिए। मेरा सुझाव है कि आप अपने पसंदीदा स्थान की तस्वीरों पर आवेदन करने की कोशिश करें और, शायद, टिप्पणियों में या एक व्यक्तिगत पत्र में इसके बारे में कुछ दिलचस्प बताएं।

मुझसे - एक मजेदार तथ्य। निज़नी नोवगोरोड और निज़नी नोवगोरोड क्षेत्र के अधिकांश निवासी "फिट" शब्द के अर्थ में "गेट आउट" का उपयोग करते हैं (एक मुक्त स्थान खोजें)। उदाहरण के लिए, सवाल "क्या हम आपकी कार को साफ करेंगे?" इसका मतलब है "क्या आपके पास आपकी कार में पर्याप्त जगह है?", लेकिन "क्या हम आपकी कार को साफ नहीं कर सकते?"। जब अन्य क्षेत्रों के छात्र ग्रीष्मकालीन इंटर्नशिप के लिए हमारे पास आते हैं, तो हम इस तथ्य को बताना पसंद करते हैं - कई लोग ईमानदारी से आश्चर्यचकित होते हैं।

उपयोगी लिंक

OpenCV.js प्रलेखन
साइकिल मॉडल
अन्य शैली हस्तांतरण मॉडल (सामान्यीकरण में भिन्न)

opencv4arts: मेरा शहर, विंसेंट ड्रा