Tuesday, August 6, 2019

TensorFlow, Docker, and macOS


I wanted to experiment a bit with TensorFlow on a macOS installation but did not want to go through the installation of python3 and all the needed dependencies on the machine itself. So, I decided to give the latest TensorFlow docker image a spin.

There is an instruction page on the TensorFlow flow about how to get a TensorFlow docker image up and running. However I still ran into an error when following the instructions...

I started out by installing Docker Desktop to get a running docker environment on my machine. Once the docker environment is installed docker itself can be started. This took a little while though...

Once the docker environment is running, the docker command becomes available on the command line / terminal.

Next step pulling the latest stable TensorFlow docker image:


$ docker pull tensorflow/tensorflow
Using default tag: latest
latest: Pulling from tensorflow/tensorflow
5b7339215d1d: Pull complete 
14ca88e9f672: Pull complete 
a31c3b1caad4: Pull complete 
b054a26005b7: Pull complete 
ce020afbc108: Pull complete 
ff2859ce8b51: Pull complete 
fcbc4a17b2cb: Pull complete 
2ba8286c8cf8: Pull complete 
c7618033dbfa: Pull complete 
879aa66b376b: Pull complete 
Digest: sha256:87463fd80faa6e7979b78d2f1a26d62262210653eb166b638069ed06ae68dacb
Status: Downloaded newer image for tensorflow/tensorflow:latest
docker.io/tensorflow/tensorflow:latest

So far, so good.

Now when I ran the first example for CPU-only images I got the following output:

$ docker run -it --rm tensorflow/tensorflow \
>    python -c "import tensorflow as tf; tf.enable_eager_execution(); print(tf.reduce_sum(tf.random_normal([1000, 1000])))"
2019-08-06 19:19:56.383326: I tensorflow/core/platform/cpu_feature_guard.cc:142] Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2 FMA
2019-08-06 19:19:56.413668: I tensorflow/core/platform/profile_utils/cpu_utils.cc:94] CPU Frequency: 2904000000 Hz
2019-08-06 19:19:56.414661: I tensorflow/compiler/xla/service/service.cc:168] XLA service 0x5639b0667000 executing computations on platform Host. Devices:
2019-08-06 19:19:56.414929: I tensorflow/compiler/xla/service/service.cc:175]   StreamExecutor device (0): <undefined>, <undefined>
tf.Tensor(345.6819, shape=(), dtype=float32)


All the extra messages make it look like there is something wrong with our environment. But there isn't. The line last line containing "tf.Tensor(345.6819, shape(), dtype=float32)" is an expected output of the example command.
All those extra information log lines are quite confusing, at least for me they were. Especially the line about the StreamExecutor; mentions of undefined are usually indications that something is wrong somewhere.

The CPU instruction warning can be suppressed by setting the environment variable TF_CPP_MIN_LOG_LEVEL to 2. This will cause the warnings to simply no longer get printed on the screen.

After adding the setting to the example program the execution is a lot cleaner:

docker run -it --rm tensorflow/tensorflow    python -c "import os; import tensorflow as tf; os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'; tf.enable_eager_execution(); print(tf.reduce_sum(tf.random_normal([1000, 1000])))"
tf.Tensor(-112.096924, shape=(), dtype=float32)


The parts added to the script were "import os;" and "os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2';". These can be added to the start of any TensorFlow python script to get cleaner output under macOS.




Tuesday, January 22, 2019

Favicons and touch icons



You know the icon that your browser displays when you visit a page, the favicon, or the icon that get displayed on your mobile. They look so simple; 1 or 2 image you think and that should do it. Boy, was I wrong. It turns out there's a plethora of sizes for different purposes, devices and operating systems. Detailed information can be found in the favicon cheat sheet.

I am not an expert on all these different icons and formats. The information gathered here is based on what I found in the links listed in the references section. If you find any mistakes or outdated information feel free to let me know in the comments.

For the simple shopping list application I picked a simple shopping cart logo in SVG format. SVG format because vector graphics scale much better. To add proper support for all devices and operating systems the logo will have to be resized to 14 different sizes!


Resizing and converting an SVG image


For resizing the SVG image I am going to use the convert tool from imageMagick; ImageMagick is a free set of graphics identification and manipulation tools.

Assuming you have already installed the brew package manager on macOs, installation is as simple as executing the following command:

$ brew install imagemagick

On linux/bsd use your favourite package manager to install imagemagick. For windows follow the instructions on the download page of the imageMagick website.

The following command can then be used to resize and convert an SVG file to a 16x16 PNG file:


$ convert -size 16x16 shopping-cart.svg icon-16.png


Favicon.ico


Let's first start with the actual favicon.ico file. A .ico file is actually a single so-called container file which contains multiple small icon images in different sizes! The following sizes are needed: 16x16, 24x24, 32x32, 48x48, and 64x64 so let's do some resizing:


$ convert -size 16x16 shopping-cart.svg icon-16.png
$ convert -size 24x24 shopping-cart.svg icon-24.png
$ convert -size 32x32 shopping-cart.svg icon-32.png
$ convert -size 48x48 shopping-cart.svg icon-48.png
$ convert -size 64x64 shopping-cart.svg icon-64.png

And then we will have to combine all these separate small images into the final favicon container file:


$ convert icon-16.png icon-24.png icon-32.png icon-48.png icon-64.png favicon.ico


Touch icons (for iOS and Android)


Touch icons introduced by apple have had quite a number of supported sizes throughout the years: 57x57, 72x72, 76x76, 114x114, 120x120, 144x144, 152x152, 167x167, 180x180, and 192x192 for android. However, some of these sizes are only used on old versions of iOS. To keep things simple I am going to stick to the original 57x57 size, the 192x192 size for android, and the sizes that Apple currently recommends: 152x152, 167x167, and 180x180.

Resize time!


$ convert -size 57x57 shopping-cart.svg apple-touch-icon.png
$ convert -size 152x152 shopping-cart.svg apple-touch-icon-152x152.png
$ convert -size 167x167 shopping-cart.svg apple-touch-icon-167x167.png
$ convert -size 180x180 shopping-cart.svg apple-touch-icon-180x180.png
$ convert -size 192x192 shopping-cart.svg touch-icon-192x192.png

Notice that we did not include a size in the 57x57 image. By convention this file is expected to be named apple-touch-icon.png and present in the root folder of our application. Therefor we will keep this file in the root folder but we will move the other icon files into an icons folder. This will keep our project a bit cleaner and easier to manage.

Now we just need to reference these touch icons from the head section of our index.html:


<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="167x167" href="icons/apple-touch-icon-167x167.png" />
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon-180x180.png" />
<link rel="icon" sizes="192x192" href="icons/touch-icon-192x192.png" />


IE11 tiles for Window 8.1


For tiles on windows we are going to have to some more resizing to 70x70, 150x150, 310x150, and 310x310.


$ convert -size 70x70 shopping-cart.svg smalltile.png
$ convert -size 150x150 shopping-cart.svg mediumtile.png
$ convert -size 310x150 shopping-cart.svg widetile.png
$ convert -size 310x310 shopping-cart.svg largetile.png

This will cause the widetile.png to display a stretched version of the shopping cart. In a real application you will want to replace that with a nicer looking image, but for our testing purposes it will be just fine.

To keep things a bit tidy in the root of our application we will put these files in a tiles folder. These images will then have to be referenced from a separate file called browserconfig.xml:


<?xml version="1.0" encoding="utf-8"?>

<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="tiles/smalltile.png" />
      <square150x150logo src="tiles/mediumtile.png" />
      <wide310x150logo src="tiles/widetile.png" />
      <square310x310logo src="tiles/largetile.png" />
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Which in turn will have to be referenced from our index.html:


<meta name="application-name" content="Simple Shopping List" />
<meta name="msapplication-tooltip" content="Simple List" />
<meta name="msapplication-config" content="browserconfig.xml" />


References


Simple shopping list bitbucket link