Tag: graph

透過類神經網路，直接把圖變成 HTML

看到 GitHub 上的「emilwallner/Screenshot-to-code-in-Keras」這個專案，直接把圖片轉成 HTML。介紹的文章則是「Turning Design Mockups Into Code With Deep Learning」。

有點像是「將 Sketch 輸出成 iOS/Android 的程式碼」與「透過 NN (類神經網路) 訓練好的系統，直接把圖片轉成程式碼」(後面這篇剛好在介紹文章裡也有提到)。

愈來愈有 NN 在逐步取代人類工作的感覺了...

Amazon CloudWatch 支援縮放與拖拉調整時間區間

Amazon CloudWatch 的操作上支援 Zoom 與 Pan 了：「Amazon CloudWatch now supports two new chart visualization options in metrics and dashboards」。

Zoom 是改變時間的粒度：

You can use the CloudWatch console to graph metric data generated by AWS services and your applications. Now, you can zoom into a shorter time period such as one minute or five minutes while viewing the metric graph at a longer interval.

Pan 則是維持一樣的粒度，但改變開始與結束的時間：

Once zoomed, you can also pan the metric graph across your selected interval, but at a zoomed detail level.

變得更容易操作，而不用滑鼠移過去修改...

Google Chrome 支援 APNG 了...

翻資料的時候才發現 Google Chrome 從 59 版 (今年六月進 stable channel) 就支援 APNG 了，這樣所有主流瀏覽器只剩下微軟家的 IE 與 Edge 還沒支援了：

找了一下當時的新聞：「Chrome 59 will fully support animated PNGs」，以及對應的 ticket：「Request for enhancement: APNG (animated PNG)」。

APNG 相較於 GIF 多了透明的設計 (GIF 需要拿一個顏色來當作透明)，以及更多的色彩，但對於瀏覽器的支援一直都不完整：

The GIF file format has better application and browser support than APNG, but it is limited to 256 colors per frame and supports only index transparency, by mapping one of the palette colors to transparent.

現在這樣讓 GIF 退休的日子又前進了一大步...

CPU 指令的速度

在「Infographics: Operation Costs in CPU Clock Cycles」這邊看到張有趣的圖片：

文章大致說明了底層指令速度差異的由來，另外也提到了 C/C++ Function Calls、Indirect and Virtual Calls、Allocations、Kernel Calls、C++ Exceptions 以及 Thread Context Switches 這些高階面向的 CPU clock cycle 差異...

不過重點還是在這張圖 XD

Dropbox 針對 JPEG 圖片再次「無損壓縮」的 Lepton

Dropbox 針對 JPEG 圖片再次無損壓縮所發展出來的 Lepton：「Lepton image compression: saving 22% losslessly from images at 15MB/s」。

直接用傳統壓縮方式對 JPEG 檔壓縮是沒有用的，他們針對 JPEG 裡的內容分析後再次無損壓縮，並且可以還原成原來的 JPEG：

Lepton achieves a 22% savings reduction for existing JPEG images, by predicting coefficients in JPEG blocks and feeding those predictions as context into an arithmetic coder. Lepton preserves the original file bit-for-bit perfectly.

當檔案夠大時的壓縮率大約就是 22%：

很可觀的數字... 另外 Dropbox 也透漏了至少有 160 億張 JPEG 圖片：

We have used Lepton to encode 16 billion images saved to Dropbox, and are rapidly recoding our older images.

Flame Graph

常看到這種圖，但卻不知道這種圖是用什麼做出來的，或是他的名字：

剛剛在「Igniting Node.js Flames」這邊看到這叫做 Flame Graph，出自「brendangregg/FlameGraph」這邊。

在 Linux 上可以用 perf 產生資料檔案，在 FreeBSD 或是 Solaris 上可以用 DTrace 產生... 是個來理解效能瓶頸的好工具 :o

用 mermaid 畫流程圖...

mermaid 這個專案畫出來的圖還蠻順眼，雖然與 DOT graph 的語法不太一樣，不過還是很簡單，看一下介紹就會用了。

在 cdnjs 上有 hosting，把 code 放到 div 裡面，設定 class="mermaid"，然後直接 script 掛進來就可以了。不過最近 CloudFlare 的速度一直很不順，在意的人可以考慮自己 hosting 一份。

簡單的像是這樣：

比較複雜點的：