<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Erxin, Shang(Edwin, 尚尔鑫)&#039;s Home Page</title>
	<atom:link href="http://www.shangerxin.com/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.shangerxin.com</link>
	<description>Knowledge should be free.</description>
	<lastBuildDate>Tue, 24 Aug 2021 02:27:23 +0000</lastBuildDate>
	<language>en-US</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.8.13</generator>
	<item>
		<title>Memory increasing issue when convert Pillow Image (8.3.1) either to Numpy array or OpenCV Image</title>
		<link>http://www.shangerxin.com/?p=424</link>
		<comments>http://www.shangerxin.com/?p=424#comments</comments>
		<pubDate>Wed, 11 Aug 2021 06:29:05 +0000</pubDate>
		<dc:creator><![CDATA[Shang Erxin]]></dc:creator>
				<category><![CDATA[Machine Learning]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[OpenCV]]></category>
		<category><![CDATA[Performance]]></category>

		<guid isPermaLink="false">http://www.shangerxin.com/?p=424</guid>
		<description><![CDATA[Background introduction Recently our project encounter a memory increase issue after upgrade from Pillow 8.2.0 to Pillow 8.3.0. Memory consumption after upgrading the Pillow (8.3.1): The memory consumption before upgrading the Pillow (8.2.0): It seems the library bring lots of memory increments. BTW. The issue can not be produce before we build the project. Solution After [&#8230;]]]></description>
				<content:encoded><![CDATA[<h1>Background introduction</h1>
<p>Recently our project encounter a memory increase issue after upgrade from <a href="https://python-pillow.org/">Pillow</a> 8.2.0 to Pillow 8.3.0.</p>
<p>Memory consumption after upgrading the Pillow (8.3.1):</p>
<p><a href="http://www.shangerxin.com/wordpress/wp-content/uploads/2021/08/issue.png"><img class="aligncenter  wp-image-425" alt="issue" src="http://www.shangerxin.com/wordpress/wp-content/uploads/2021/08/issue.png" width="1123" height="583" /></a></p>
<p>The memory consumption before upgrading the Pillow (8.2.0):</p>
<p><a href="http://www.shangerxin.com/wordpress/wp-content/uploads/2021/08/normal.png"><img class="aligncenter size-full wp-image-426" alt="normal" src="http://www.shangerxin.com/wordpress/wp-content/uploads/2021/08/normal.png" width="985" height="392" /></a></p>
<p>It seems the library bring lots of memory increments. BTW. The issue can not be produce before we build the project.</p>
<h1>Solution</h1>
<p>After I spent a few days to find the root cause and the solution. The issue code is located to a pillow image conversion</p>
<p>At the beginning, I suspect this would be a regression in Pillow, so I search their github issues</p>
<p><a href="https://github.com/python-pillow/Pillow/issues/2019">https://github.com/python-pillow/Pillow/issues/2019</a></p>
<p><a href="https://github.com/python-pillow/Pillow/issues/5180">https://github.com/python-pillow/Pillow/issues/5180</a></p>
<p>Both of these two threads indicate the issues are fixed. But I still tried to pull the fix code into our project. Without luck.</p>
<p>To keep the long story short, I grab two heap memory dump and compare with objects which increased most. This great help me reduce the search scope.</p>
<p><a href="http://www.shangerxin.com/wordpress/wp-content/uploads/2021/08/stack-trace.png"><img class="aligncenter size-full wp-image-439" alt="stack-trace" src="http://www.shangerxin.com/wordpress/wp-content/uploads/2021/08/stack-trace.png" width="680" height="948" /></a></p>
<p>The relative issue code:</p>
<div id="wpshdo_1" class="wp-synhighlighter-outer"><div id="wpshdt_1" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_1"></a><a id="wpshat_1" class="wp-synhighlighter-title" href="#codesyntax_1"  onClick="javascript:wpsh_toggleBlock(1)" title="Click to show/hide code block">Code block</a></td><td align="right"><a href="#codesyntax_1" onClick="javascript:wpsh_code(1)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_1" onClick="javascript:wpsh_print(1)" title="Print code"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_1" class="wp-synhighlighter-inner" style="display: block;"><pre class="python" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">np.<span style="color: #dc143c;">array</span><span style="color: black;">&#40;</span>pillow_image, <span style="color: black;">[</span>dtype=...<span style="color: black;">]</span><span style="color: black;">&#41;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">np.<span style="color: black;">asarray</span><span style="color: black;">&#40;</span>pillow_image<span style="color: black;">&#41;</span></div></li></ol></pre></div></div>
<p>&nbsp;</p>
<p>All the above conversion will lead to the numpy array keep exist till a certain point trigger python release the accumulated objects.</p>
<p>Then I check the release note of the Pillow, there is only one place directly relative to numpy array. First I try to withdraw the changes directly in 8.3.1, no help. Second try to directly down grade to 8.3.0. Still not works.</p>
<p>Now, what? Checked Pillow API, Numpy API, OpenCV API again and also check their source. A idea pop up and write a workaround code</p>
<div id="wpshdo_2" class="wp-synhighlighter-outer"><div id="wpshdt_2" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_2"></a><a id="wpshat_2" class="wp-synhighlighter-title" href="#codesyntax_2"  onClick="javascript:wpsh_toggleBlock(2)" title="Click to show/hide code block">Code block</a></td><td align="right"><a href="#codesyntax_2" onClick="javascript:wpsh_code(2)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_2" onClick="javascript:wpsh_print(2)" title="Print code"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_2" class="wp-synhighlighter-inner" style="display: block;"><pre class="python" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">numpy_array = np.<span style="color: black;">frombuffer</span><span style="color: black;">&#40;</span>pillow_image.<span style="color: black;">tobytes</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span>, dtype=np.<span style="color: black;">uint8</span><span style="color: black;">&#41;</span></div></li></ol></pre></div></div>
<p>To convert the image array to OpenCV</p>
<div id="wpshdo_3" class="wp-synhighlighter-outer"><div id="wpshdt_3" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_3"></a><a id="wpshat_3" class="wp-synhighlighter-title" href="#codesyntax_3"  onClick="javascript:wpsh_toggleBlock(3)" title="Click to show/hide code block">Code block</a></td><td align="right"><a href="#codesyntax_3" onClick="javascript:wpsh_code(3)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_3" onClick="javascript:wpsh_print(3)" title="Print code"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_3" class="wp-synhighlighter-inner" style="display: block;"><pre class="python" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #808080; font-style: italic;"># 3 or 4 base on your image mode is RGB or RGBA</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">numpy_array.<span style="color: black;">shape</span> = <span style="color: black;">&#40;</span><span style="color: #66cc66;">*</span><span style="color: #008000;">reversed</span><span style="color: black;">&#40;</span>image.<span style="color: black;">size</span><span style="color: black;">&#41;</span>, <span style="color: #ff4500;">3</span><span style="color: black;">&#41;</span> </div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #808080; font-style: italic;"># If want to convert the image to BGR then call the OpenCV method</span></div></li><li style="font-weight: bold; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #808080; font-style: italic;"># COLOR_RGB2BGR will required the image mode is 3</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">numpy_array= cv2.<span style="color: black;">cvtColor</span><span style="color: black;">&#40;</span>numpy_array, cv2.<span style="color: black;">COLOR_RGB2BGR</span><span style="color: black;">&#41;</span></div></li></ol></pre></div></div>
<p>It works! Now the memory consumption return to normal level.</p>
<h1><a href="http://www.shangerxin.com/wordpress/wp-content/uploads/2021/08/fixed.png"><img class="aligncenter size-full wp-image-427" alt="fixed" src="http://www.shangerxin.com/wordpress/wp-content/uploads/2021/08/fixed.png" width="1034" height="536" /></a></h1>
<p>There are several places directly use the image conversion, we should consider unify the similar logic into a utility class and add a wrapper for the third party library the isolation the influences.</p>
<h1>Summary</h1>
<p>Third party library upgrade is a risk to a product. We have to upgrade the library due to a security reason in this time. The Pillow changes are checked too, have found several suspicious code will cause the issue. Need time to test, maybe update the result later.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shangerxin.com/?feed=rss2&#038;p=424</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create two scratch games</title>
		<link>http://www.shangerxin.com/?p=374</link>
		<comments>http://www.shangerxin.com/?p=374#comments</comments>
		<pubDate>Thu, 18 Jun 2020 00:55:54 +0000</pubDate>
		<dc:creator><![CDATA[Shang Erxin]]></dc:creator>
				<category><![CDATA[Scratch]]></category>

		<guid isPermaLink="false">http://www.shangerxin.com/?p=374</guid>
		<description><![CDATA[1. The magician defend against bats: Youtube demo: Detail: https://scratch.mit.edu/projects/405781728/ 2. Simpliedi Feeding frenzy Youtube Demo: Detail: https://scratch.mit.edu/projects/405784127/ Have fun.]]></description>
				<content:encoded><![CDATA[<p>1. The magician defend against bats:</p>
<p>Youtube demo:</p>
<p><iframe src="https://www.youtube.com/embed/u6NcxLprMQw" height="315" width="560" allowfullscreen="" frameborder="0"></iframe></p>
<p>Detail:</p>
<p><a href="https://scratch.mit.edu/projects/405781728/">https://scratch.mit.edu/projects/405781728/</a></p>
<p>2. Simpliedi Feeding frenzy</p>
<p>Youtube Demo:</p>
<p><iframe src="https://www.youtube.com/embed/NMvXxkWNhgA" height="315" width="560" allowfullscreen="" frameborder="0"></iframe></p>
<p>Detail:</p>
<p><a href="https://scratch.mit.edu/projects/405784127/">https://scratch.mit.edu/projects/405784127/</a></p>
<p>Have fun.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shangerxin.com/?feed=rss2&#038;p=374</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create a New Browser Extension</title>
		<link>http://www.shangerxin.com/?p=349</link>
		<comments>http://www.shangerxin.com/?p=349#comments</comments>
		<pubDate>Wed, 18 Sep 2019 13:55:14 +0000</pubDate>
		<dc:creator><![CDATA[Shang Erxin]]></dc:creator>
				<category><![CDATA[Browser Extension]]></category>

		<guid isPermaLink="false">http://www.shangerxin.com/?p=349</guid>
		<description><![CDATA[Demo the basic features of the Connected extension. It is design for helping management the tabs of the browser. Currently it support save a window as a session, export a session as a file and import the session file. The sesion can be restore at any time.]]></description>
				<content:encoded><![CDATA[<p>Demo the basic features of the Connected extension. It is design for helping management the tabs of the browser. Currently it support save a window as a session, export a session as a file and import the session file. The sesion can be restore at any time. </p>
<p><iframe src="https://www.youtube.com/embed/38FSU8PyOYs" height="315" width="560" allowfullscreen="" frameborder="0"></iframe></p>
]]></content:encoded>
			<wfw:commentRss>http://www.shangerxin.com/?feed=rss2&#038;p=349</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tips for resolve pip install error for some of the python 2.7 package on window</title>
		<link>http://www.shangerxin.com/?p=343</link>
		<comments>http://www.shangerxin.com/?p=343#comments</comments>
		<pubDate>Thu, 21 Dec 2017 01:27:48 +0000</pubDate>
		<dc:creator><![CDATA[Shang Erxin]]></dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://www.shangerxin.com/?p=343</guid>
		<description><![CDATA[Pip is a wide used python package management tool, it works properly most of the time. But occasionally there will be a few error when install some special package which may required local build after download. Here are two common ways to resolve these kinds of error 1. Use a prebuild binary, the most common [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>Pip is a wide used python package management tool, it works properly most of the time. But occasionally there will be a few error when install some special package which may required local build after download.<br />
Here are two common ways to resolve these kinds of error </p>
<p>1. Use a prebuild binary, the most common library could be download from <a href="http://www.lfd.uci.edu/~gohlke/pythonlibs">here</a>. But the links seems dead for a while.</p>
<p>2. Install the necessary Cpp compiler for python 2.7 on window from <a href="https://www.microsoft.com/en-us/download/details.aspx?id=44266">here</a></p>
<p>After install the compiler rerun the pip install
<package> again</p>
<p>Good luck!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shangerxin.com/?feed=rss2&#038;p=343</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Handling None Standard File Upload with TruClient</title>
		<link>http://www.shangerxin.com/?p=319</link>
		<comments>http://www.shangerxin.com/?p=319#comments</comments>
		<pubDate>Sun, 05 Nov 2017 05:39:37 +0000</pubDate>
		<dc:creator><![CDATA[Shang Erxin]]></dc:creator>
				<category><![CDATA[TruClient]]></category>
		<category><![CDATA[truclient]]></category>

		<guid isPermaLink="false">http://www.shangerxin.com/?p=319</guid>
		<description><![CDATA[First let&#8217;s explain what is the &#8220;none standard file upload&#8221; for a website. Let a user upload a file is a very common use case for a website. The most common way to implement this would be &#160; Then post the file content with form to the server. This is the standard way to upload [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>First let&#8217;s explain what is the &#8220;none standard file upload&#8221; for a website. Let a user upload a file is a very common use case for a website. The most common way to implement this would be</p>
<div id="wpshdo_4" class="wp-synhighlighter-outer"><div id="wpshdt_4" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_4"></a><a id="wpshat_4" class="wp-synhighlighter-title" href="#codesyntax_4"  onClick="javascript:wpsh_toggleBlock(4)" title="Click to show/hide code block">Code block</a></td><td align="right"><a href="#codesyntax_4" onClick="javascript:wpsh_code(4)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_4" onClick="javascript:wpsh_print(4)" title="Print code"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.shangerxin.com/wordpress/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_4" class="wp-synhighlighter-inner" style="display: block;"><pre class="html4strict" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;file&quot;</span><span style="color: #66cc66;">/</span>&gt;</span></div></li></ol></pre></div></div>
<p>&nbsp;</p>
<p>Then post the file content with form to the server. This is the standard way to upload a file with HTML. The standard way have several limitation. The most significant is difficult to customize the style for the upload file control.</p>
<p>So the none standard file upload come up with this requirement. The main idea is let the web designer customize the looking as they preferred. After the user click the control then dynamically create an input element or trigger a hidden input click in the background. This make the upload control looks much better, but it lead the feature hard for automation UI test. The common automation tools such as selenium(webdriver) and jmeter do not provide a elegant way to handle none standard upload. The reason is due to the input element is dynamically created which nearly impossible to locate it with CSS selector or XPath.</p>
<p>In TruClient 12.55+ which provide a easy way to handle none standard file upload.</p>
<p>Here is a simply code snippet for demo none standard file upload with jsfiddle at <a title="http://jsfiddle.net/erxin/o4menymo/" href="http://jsfiddle.net/erxin/o4menymo/"> http://jsfiddle.net/erxin/o4menymo/</a></p>
<div id="attachment_323" style="width: 1376px" class="wp-caption aligncenter"><a href="http://jsfiddle.net/erxin/o4menymo/"><img class="size-full wp-image-323" alt="None standard file upload code sample" src="http://www.shangerxin.com/wordpress/wp-content/uploads/2017/11/2017-11-05_133707.png" width="1366" height="647" /></a><p class="wp-caption-text">None standard file upload code sample</p></div>
<p>1. Drag a &#8220;General Object Action&#8221; step<br />
2. Select the aim object which the user will click to upload the file<br />
3. Change the step type from &#8220;Click&#8221; to &#8220;Upload&#8221;<br />
4. Assign the right file path to the &#8220;Path&#8221; parameter<br />
5. Done.<br />
<a href="http://www.shangerxin.com/wordpress/wp-content/uploads/2017/11/none-standard-upload.gif"><img class="aligncenter size-full wp-image-326" alt="none-standard-upload" src="http://www.shangerxin.com/wordpress/wp-content/uploads/2017/11/none-standard-upload.gif" width="1364" height="736" /></a></p>
<p>Currently the none standard file upload step only support in TruClient Chrome and IE. The Firefox version will coming soon. </p>
<p>Enjoy!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shangerxin.com/?feed=rss2&#038;p=319</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
