🧑🏻 🚊 🤹🏾 सेलिब्रिटी लगता है 🙎🏿 💬 🦉

फिल्म खोज पर एक प्रश्नोत्तरी है जिसे "सेलिब्रिटी का अनुमान है" कहा जाता है। फोटो में अभिनेता (निर्देशक, पटकथा लेखक, सिर्फ एक प्रसिद्ध व्यक्ति) का अनुमान लगाने के लिए 10 सेकंड में यह आवश्यक है। नियम सरल हैं, लेकिन किसी व्यक्ति को जानना इतना आसान नहीं है। खासकर यदि आप नहीं जानते हैं। यह यहां था कि इस विचार का जन्म हल करने में खुद को "मदद" करने के लिए हुआ था।

पहले आपको एक अवधारणा पर निर्णय लेने की आवश्यकता है। पहली बात जो मन में आती है वह है व्यक्ति की आईडी का पता लगाना और उसकी फोटो अपलोड करना। व्यक्ति की आईडी का पता लगाना मुश्किल नहीं है, सिनेमा खोज लगातार अपडेट की जाती है, और इनमें से एक नवाचार खोज लाइन में स्वत: पूर्ण था (पहले खोज किसी अन्य डोमेन - s.kinopoisk.ru पर पुनर्निर्देशित हुई थी, यह कार्य और भी जटिल होगा)। अलग-अलग, लोगों की खोज करने के लिए, यह फ़ॉर्म के प्रश्नों का उपयोग करता है:

www.kinopoisk.ru/handler_search_people.php?q={query}

जवाब सुंदर JSON आता है। हमारे पास व्यक्तियों के पहचानकर्ता हैं, यह फ़ोटो अपलोड करने के लिए बने हुए हैं। अपलोड प्रक्रिया को गति देने के लिए, हम फ़ोटो की छोटी प्रतियों का उपयोग करेंगे। वे यहां स्थित हैं:

st.kinopoisk.ru/images/sm_actor{id}.jpg

जैसा कि आप देख सकते हैं, स्टैटिक्स एक अलग डोमेन पर हैं (और यह हमें समस्याएं जोड़ देगा)। हमारे पास सारा डेटा है, यह कुछ शैलियों को जोड़ने और उपयोगकर्ता स्क्रिप्ट के रूप में व्यवस्थित करने के लिए बना हुआ है:

 (function(){ function doMain(){ $('img[name="guess_image"]').css({"border":"1px solid black","margin":"10px 0 10px 0"}); $("#answer_table").parent().css({"background":"#f60","padding-left":"130px","padding-bottom":"30px"}); for (var i=0; i<4; ++i){ $('<div><img src="http://st.kinopoisk.ru/images/users/user-no-big.gif" \ class="cheet_image" width=52 hight=82 /></div>') .bind("click", function(){ $(".cheet_image").css({'box-shadow':'','border':''}); }) .bind("load", function() { $(this).css({'box-shadow':'0 0 10px rgba(0,0,0,0.9)',"border":"1px solid red"}); }) .appendTo("#a_win\\["+i+"\\]"); } $('img[name="guess_image"]').bind("load", function(){ doLoader(0); }); } function doLoader(i){ $.getJSON( "/handler_search_people.php", { q: $("#win_text\\["+i+"\\]").html() }, function(data){ $(".cheet_image").eq(i) .attr('src','http://st.kinopoisk.ru/images/sm_actor/'+data[0].id+'.jpg'); if (i < 4) doLoader(++i); } ); } window.addEventListener('DOMContentLoaded', doMain, false); })();

अब, हर बार एक नई छवि अपलोड होने पर, उत्तर विकल्पों में से तस्वीरें लोड की जाती हैं:

इस पद्धति के नुकसान में यह तथ्य शामिल है कि हमें अभी भी कुछ कार्यों को करने की आवश्यकता है - नेत्रहीन तस्वीरों को पहचानें। आदर्श रूप में, केवल एक कार्रवाई की आवश्यकता है हमें - "प्रारंभ" बटन पर क्लिक करना चाहिए।

हम अपनी स्क्रिप्ट में सुधार करेंगे। अब हम छवियों की तुलना करेंगे और तुलना के आधार पर सही विकल्प का चयन करेंगे। पहले, आइए छवि के हैश की तुलना करने का प्रयास करें। हमें यह सुनिश्चित करने की आवश्यकता है कि छिपी हुई छवि और सांख्यिकीय रूप से सुलभ एनालॉग एक ही बात है। हेक्स संपादक में चित्र खोलें और देखें कि यह ऐसा नहीं है:

जैसा कि आप देख सकते हैं, चित्र गतिशील रूप से उत्पन्न होते हैं। वहाँ केवल एक ही रास्ता है - पिक्सेल द्वारा छवियों पिक्सेल तुलना करने के लिए। और यहां HTML5 बचाव में आता है, विशेष रूप से <canvas> । हम सभी की आवश्यकता है कि एक छवि बनाने के लिए और getImageData(x, y, width, height) विधि को कॉल करें। हालाँकि, हमें याद है कि छवि किसी अन्य डोमेन पर संग्रहीत है और किसी भी कोर की बात नहीं है:

इस स्थिति से बाहर का रास्ता खिड़की संचार का उपयोग है - postMessage() विधि और message घटना। छिपे हुए फ्रेम में, हम उस डोमेन के मुख्य पृष्ठ को लोड करेंगे जहां तस्वीरें स्थित हैं, छवि को स्वयं अपलोड करें, बेस 64 स्ट्रिंग को बेस 64 में रूपांतरित करें और इसे मूल फ्रेम में भेजें। हालांकि, आप कुछ और कर सकते हैं: एक छवि अपलोड करें, गतिशील रूप से एक कैनवास तत्व बनाएं और इससे पिक्सेल मूल्यों की एक सरणी प्राप्त करें। चूंकि परिणामी वस्तु का प्रकार केवल ऐरे नहीं होगा, लेकिन Uint8ClampedArray (एक सरल 8-बिट सरणी), जिसमें एक सम्मिलित विधि नहीं है, आपको डेटा को क्रमांकित / deserialize करने के लिए JSON का उपयोग करना होगा। अपने आप से, यह बहुत महंगा है और पहली विधि के प्रदर्शन में खो जाता है, जिसका हम उपयोग करेंगे।

सबसे पहले, हमें एक base64 एन्कोडेड छवि प्राप्त करने की आवश्यकता है। छिपे हुए फ्रेम में, मुख्य पृष्ठ को लोड करें, और लंगर में हम छवि पहचानकर्ता और उत्तर विकल्प की संख्या को प्रसारित करते हैं। फ़्रेम में ही, हम वांछित छवि को लोड करते हैं और उसका बेस 64 कोड पाते हैं:

 xhr = new XMLHttpRequest(); xhr.open('GET', '/images/sm_actor/'+hash[0]+'.jpg', false); xhr.overrideMimeType('text/plain;charset=x-user-defined'); xhr.onload = function() { if (xhr.readyState == 4){ var resp = xhr.responseText; var data = 'data:'; data += xhr.getResponseHeader('Content-Type'); data += ';base64,'; var decodedResp = ''; for(var i = 0, L = resp.length; i < L; ++i) decodedResp += String.fromCharCode(resp.charCodeAt(i) & 255); data += btoa(decodedResp); } }; xhr.send(null);

Chrome ब्राउज़र में छवि भेजने के दौरान, एक अप्रिय विशेषता का पता चला: इस तरह से प्राप्त छवि अभी भी CORS नीति द्वारा सुरक्षित है और आप इसका डेटा कैनवास से प्राप्त नहीं कर सकते। इस गतिरोध का तरीका पृष्ठ कोड में स्क्रिप्ट को एम्बेड करना और इस तरह से छवि भेजना है (जैसा कि यह निकला, और यह विधि पहली बार काम नहीं करती है):

 if (typeof window.chrome == 'undefined') window.parent.postMessage(hash[1]+"|"+data, "http://www.kinopoisk.ru/"); else { var scr = document.createElement("script"); scr.setAttribute('type','application/javascript'); scr.textContent = "window.parent.postMessage('"+hash[1]+"|"+data+"', 'http://www.kinopoisk.ru/');"; document.body.appendChild(scr); }

अब मज़ा शुरू होता है - छवि तुलना। सबसे पहले, मेरी पसंद IM.js लाइब्रेरी पर गिरी (शब्द इमेज मैच से, जाने-माने इंटरनेट मेसेंजर से इसका कोई लेना-देना नहीं है)। अज्ञात कारणों से, उसने मुझे शुरू करने से इनकार कर दिया। मुझे चित्रों की तुलना के बारे में साहित्य का अध्ययन करना था। मैं सबसे सरल विधि पर बस गया - CE * मैट्रिक और इसके सरलतम कार्यान्वयन, CIE76 का उपयोग करते हुए। यद्यपि यह LAB रंग स्थान का उपयोग करता है, हम इसे सामान्य RGB में उपयोग करेंगे। इस वजह से, त्रुटियां अनिवार्य रूप से उत्पन्न होंगी, लेकिन उनके साथ भी परिणाम काफी स्वीकार्य है। इसके अलावा, आपको मध्यवर्ती XYZ स्थान के माध्यम से RGB -> LAB कन्वर्ट करना होगा, जो और भी अधिक त्रुटियों का कारण होगा। CIE76 का सार rms रंग खोजने के लिए है:

कोड में, यह इस तरह दिखता है:

 //     //  ,    function doDiff(context) { var all_pixels = 25*40*4; var changed_pixels = 0; var first_data = context.getImageData(0, 0, 25, 40); var first_pixel_array = first_data.data; //     //      canvas var second_ctx = $("#guess_transformed").get(0).getContext('2d'); var second_data = second_ctx.getImageData(0, 0, 25, 40); var second_pixel_array = second_data.data; for(var i = 0; i < all_pixels; i+=4) { if (first_pixel_array[ i ] != second_pixel_array[ i ] || // R first_pixel_array[i+1] != second_pixel_array[i+1] || // G first_pixel_array[i+2] != second_pixel_array[i+2]) // B { changed_pixels+=Math.sqrt( Math.pow( first_pixel_array[ i ] - second_pixel_array[ i ] , 2) + Math.pow( first_pixel_array[i+1] - second_pixel_array[i+1] , 2) + Math.pow( first_pixel_array[i+2] - second_pixel_array[i+2] , 2) ) / (255*Math.sqrt(3)); } } return 100 - Math.round(changed_pixels / all_pixels * 100); }

सब कुछ तैयार है, यह उपयोगकर्ता स्क्रिप्ट के रूप में सभी भागों को छोड़ना और इसे परीक्षण करना है।

जैसा कि हम देख सकते हैं, सब कुछ काम करता है। सबसे महंगा हिस्सा छवियों को डाउनलोड करना है। यही कारण है कि सभी छवियों को क्रमिक रूप से लोड किया जाता है (संदेश घटना प्राप्त करने के बाद)। एक ही समय में सभी 4 परिणामों को संसाधित करने के लिए छवियों को लोड करना, कभी-कभी 10 सेकंड से अधिक समय लगता है। यह समानता के प्रतिशत पर भी ध्यान देने योग्य है। यह 96% से अधिक और पूरी तरह से अलग छवियों के साथ भी 75% से कम कभी नहीं है।

हमारे ओपेरा का अंतिम तार स्वचालित तुलना और वांछित बटन पर क्लिक करने के अलावा होगा:

 //   message function doMessage(e) { var data = e.data.split("|", 2); var index = parseInt(data[0]); // ... if (index == 3) $(document).trigger("cheetcompare"); //... } //  main      function doMain(){ // ... $(document).bind("cheetcompare", function(e){ var max = 0; //  input,      var cheetd = $(".cheet_diff"); for(var i = 0; i < 4; ++i) { max = (cheetd.eq(max).val() > cheetd.eq(i).val()) ? max : i; } $("#a_win\\["+max+"\\]").trigger("click"); }); // ... }

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

ओपेरा 12, क्रोम 22 + टेम्परॉन्की में स्क्रिप्ट का परीक्षण किया गया था (यदि यह काम नहीं करता है, तो पृष्ठ को ताज़ा करें, यह पहली बार काम नहीं करता है)। फ़ायरफ़ॉक्स 16.0.1 में, स्क्रिप्ट ने शुरू करने से इनकार कर दिया - अनुरोधित छवि getImageData काम नहीं करता है।

आप scriptcripts.org से स्क्रिप्ट डाउनलोड कर सकते हैं: डाउनलोड करें

साहित्य

UPD # 1 जैसा कि मांडर ने सही कहा है, एक बग सूत्र में क्रेप है। अर्थात्, विभक्त, जो अधिकतम रंग अंतर (अधिकतम रंग अंतर) है। आप इसकी कल्पना इस प्रकार कर सकते हैं:

यदि आप एक घन के रूप में RGB परिवार का प्रतिनिधित्व करते हैं, तो अधिकतम रंग का अंतर विकर्ण होगा, जिसे निम्न प्रकार से पाया जा सकता है:

यह ध्यान देने योग्य है कि मूल्यों का बिखराव अधिक पर्याप्त हो गया है: 60% - 95%। अब दृश्य फ़िल्टर की पट्टी को 90% तक कम किया जा सकता है। इस मामले में, लगभग निश्चित रूप से समान फोटो नहीं है और आपको अपने लिए अनुमान लगाना होगा।

UPD # 2 nick4fake के हैबराइज़र ने 0 ... 100 ... के लिए राशनिंग फॉर्मूला को सफलतापूर्वक भूल जाने का सुझाव दिया।

new = (पुराना - min) / (अधिकतम - min) * 100

हमारे कार्य के लिए, यह निम्नानुसार दिखता है: Y = (X - 55) / 38 * 100 । मूल्यों का बिखराव और भी अधिक ध्यान देने योग्य हो गया है, विशेषकर उन तस्वीरों के लिए जो विभिन्न रंगों (प्रकाश / अंधेरे) पर हावी हैं, अब यह लगभग 30% - 90% है।

सेलिब्रिटी लगता है

साहित्य

More articles: