dcermak · cigdemkadakoglu · Jul 16, 2023 · Jul 16, 2023
diff --git a/README-EN.md b/README-EN.md
@@ -0,0 +1,62 @@
+# Container Layer Analyzer
+
+We create and use base images for our applications. So how much do we pay attention to the size of these images when creating them? Why are these images so large? What is the size of each layer in the image on the disk? When we look at images in depth, analyzing them with graphics provides an easier solution. You may click on these images to see how much space they have, especially when comparing two separate layers. There is a container layer analyzer that shows how much space these layers have. This analyzer, created by Dan Čermák, analyzes the layers of one or more images with a simple interface.
+
+# How to Run?
+To begin, the frontend, which execute the analysis, is running on the 5050 port, while the backend, which allow us to make comparisons, is running on the 4040 port. Both Docker and Podman are options for running it.
+
+In this article, I will make an example for Docker. The images used here will be used from Dan Čermák’s Github repository.
+
+```
+docker run --rm -p 5050:5050 ghcr.io/dcermak/container-layer-sizes:latest
+docker run -d -p 4040:4040 ghcr.io/dcermak/container-layer-sizes-backend:latest
+```
+
+If you are running them locally, you will see the screen below when you visit http://localhost:5050 . If you are running on a different server, you can check by typing the port with that server ip.
+
+![1](./images/1.png)
+
+In the “Image to analyze:” section, the name of the image you want to be scanned is written.
+
+![2](./images/2.png)
+
+When the “Pull and analyze this image” button is clicked, the image is pulled and analyzed. The “Image Properties” section shows the image properties.
+
+![3](./images/3.png)
+
+Clicking on the desired layer and the "Plot this layer" button creates an image.
+
+![4](./images/4.png)
+
+![5](./images/5.png)
+
+If this image has to be compared to another image, it is saved to the backend running on port 4040.
+
+![6](./images/6.png)
+
+When you go to http://localhost:4040, you can see which images are saved as a json.
+
+![7](./images/7.png)
+
+Secondly, the same steps are repeated for the "tomcat" image and saved in the backend.
+To compare the images, click the "History" button at http://localhost:5050 and all images found in the backend are listed.
+
+![8](./images/8.png)
+
+Here, the desired layers for "node" and "tomcat" are selected.
+
+![9](./images/9.png)
+
+And finally, click the "Compare the selected layers" button.
+
+![10](./images/10.png)
+
+In this way, the two layers are compared.
+The meaning of the colors in the chart:
+- green: The file or directory in this image is smaller than the one in the other.
+- red: The file or directory in this image is larger than the one in the other.
+- yellow: This directory or file is the same size as the other image
+- blue: this file or directory exists only in this image.
+In addition, when a directory or file is clicked in the graphic, it focuses on that same directory or file in the other image.
+
+![11](./images/11.png)
diff --git a/README-TR.md b/README-TR.md
@@ -0,0 +1,63 @@
+# Container Layer Analyzer
+
+Uygulamalarımız için base imajlar oluşturup kullanıyoruz. Peki bu imajları oluştururken boyutlarına ne kadar dikkat ediyoruz? Bu imajların boyutları neden bu kadar büyük? Imaj içerisinde bulunan her bir layerın boyutu diskte ne kadar yer kaplamakta? Derinlemesine bakıp incelerken görsellerle analiz edip görmek daha iyidir. Özellikle farklı iki layerı karşılaştırırken bu görsellere tıklayarak ne kadar boyuta sahip olduklarına bakılabilir. Bu layerların ne kadar yer kapladığını görselleştirerek sunan bir container layer analyzer var. Dan Čermák'ın oluşturmuş olduğu bu analyzer, basit bir arayüzle bir veya birden fazla imajın layerlarını analiz eder.
+
+# Nasıl Çalıştırılır?
+Öncelikle, analiz yapacak olan frontend 5050 portunda çalıştırılır, daha sonra ise karşılaştırmalar yapmamızı sağlayacak olan backend ise 4040 portunda çalıştırılır. Podman ile çalıştırılabileceği gibi Docker ile de çalıştırılabilir.
+
+Bu kullanımda Docker için örnek yapacağım. Burada kullanılan imajlar Dan Čermák'ın Github reposundan kullanılacaktır.
+
+```
+docker run --rm -p 5050:5050 ghcr.io/dcermak/container-layer-sizes:latest
+docker run -d -p 4040:4040 ghcr.io/dcermak/container-layer-sizes-backend:latest
+```
+
+Eğer lokalinizde bunları çalıştırıyorsanız http://localhost:5050 adresine gittiğinizde aşağıdaki gibi bir ekran sizi karşılar. Farklı bir sunucuda çalıştırıyorsanız o sunucu ip si ile portu yazarak bakabilirsiniz.
+
+![1](./images/1.png)
+
+"Image to analyze:" kısmına taranmasını istediğiniz imaj adı yazılır.
+
+![2](./images/2.png)
+
+Pull and analyze this image butonuna tıklandığında imaj pull edilip analiz edilir. Imajla ilgili özellikler de Image Properties kısmında görülür.
+
+![3](./images/3.png)
+
+Görüntülenmesi istenilen layera tıklanır ve Plot this layer butonuna tıklanıldığında görsel oluşturulur.
+
+![4](./images/4.png)
+
+![5](./images/5.png)
+
+Eğer bu imaj başka bir imaj ile karşılaştırılacaksa 4040 portunda çalışan backend e kaydedilir.
+
+![6](./images/6.png)
+
+http://localhost:4040 adresine gidildiğinde json olarak hangi imajların kaydedildiği görülür.
+
+![7](./images/7.png)
+
+İkinci olarak ise "tomcat" imajı için aynı adımlar tekrarlanır ve backend e kaydedilir.
+İmajları karşılaştırmak için http://localhost:5050 'de bulunan History e tıklanır ve backend de bulunan tüm imajlar listelenir.
+
+![8](./images/8.png)
+
+Burada "node" ve "tomcat" için istenilen layerlar seçilir.
+
+![9](./images/9.png)
+
+Ve son olarak Compare the selected layers butonuna tıklanır.
+
+![10](./images/10.png)
+
+Bu sayede iki layer karşılaştırılmış olur.
+Grafikteki renklerin anlamına gelecek olursak:
+- yeşil: bu dosya ya da dizin diğer imajda bulunandan daha küçüktür.
+- kırmızı: bu dosya ya da dizin diğer imajda bulunandan daha büyüktür.
+- sarı: bu dosya ya da dizin diğer imajda bulunanla aynı boyuta sahiptir.
+- mavi: bu dosya ya da dizin yalnızca bu imajda bulunmaktadır.
+Ek olarak, grafikte bir dizine ya da dosyaya tıklanıldığında diğer imajda da bu dizin ya da dosya varsa ona odaklanır.
+
+![11](./images/11.png)
+
diff --git a/images/1.png b/images/1.png
diff --git a/images/10.png b/images/10.png
diff --git a/images/11.png b/images/11.png
diff --git a/images/2.png b/images/2.png
diff --git a/images/3.png b/images/3.png
diff --git a/images/4.png b/images/4.png
diff --git a/images/5.png b/images/5.png
diff --git a/images/6.png b/images/6.png
diff --git a/images/7.png b/images/7.png
diff --git a/images/8.png b/images/8.png
diff --git a/images/9.png b/images/9.png