More than 1 year has passed since last update.

「What's new in Livebook 0.7」YouTubeを楽しみました（Elixir）

Last updated at 2022-10-17Posted at 2022-10-16

はじめに

「What's new in Livebook 0.7」と題したYouTubeがあります。
José Valimさんが紹介していました。

Official Livebook v0.7 announcement with a video showcasing some of the new features!#MyElixirStatus https://t.co/KXUGWli5MS
— José Valim (@josevalim) October 11, 2022

このツイートのリンク先に、YouTubeの紹介があります。

What's new in Livebook 0.7

Secret management
Visual representations of the running system (supervision trees, inter-process messaging, and more)
Interactive user interface to visualize and edit Elixir pipelines

上記3点です。
ひとつずつ見ていきます。
まず動画をご覧になってください。
以下、動画を見ている前提で、動画の中で使われているコードスニペットやポイントのみを記しておきます。
ただし、動画で使われたコードスニペットはすべて書き写せているわけではありません。

Livebookの起動

Dockerで動かします。

docker run -p 8080:8080 -p 8081:8081 --pull always livebook/livebook

Secret management

左端のアイコンから設定します。

NAMEをAPI_USERNAMEとした場合、コードで読み出す場合は接頭辞LB_をつけて、LB_API_USERNAMEとしてSystem.fetch_env!/1で読み出します。

Reqのインストールが未でしたら、インストールします。

Mix.install([:req])

api_username = System.fetch_env!("LB_API_USERNAME")
api_password = System.fetch_env!("LB_API_PASSWORD")

Req.get!("https://postman-echo.com/basic-auth", auth: {api_username, api_password})

Visual representations of the running system (supervision trees, inter-process messaging, and more)

kinoのインストールが未でしたら、インストールします。

Mix.install([:kino])

f = fn ->
  parent = self()

  child = 
    spawn(fn ->
      receive do
        :ping -> send(parent, :pong)
      end
    end)

  send(child, :ping)

  receive do
    :pong -> :ponged!
  end
end

Kino.Process.render_seq_trace(fn ->
  f.()
end)

Kino.Process.render_seq_trace(fn ->
  1..4
  |> Task.async_stream(fn i ->
    i
  end)
  |> Stream.run()
end)

{:ok, supervisor_pid} =
  Supervisor.start_link(
    [
      {Task, fn -> Process.sleep(:infinity) end},
      {Agent, fn -> [] end}
    ],
    strategy: :one_for_one
  )

Kino.Process.render_sup_tree(supervisor_pid)

supervisor_pid

Interactive user interface to visualize and edit Elixir pipelines

"Elixir is cool!"
|> String.trim_trailing("!")
|> String.split()
|> List.first()
|> dbg()

まずこのコードで、Kernel.dbg/2の説明がされました。

Elixir の dbg を Livebook で遊び倒す

@RyoWakabayashi さんの記事がまんま紹介されていました。
こちらを試すときは、いくつかミドルウェアが必要です。

docker run -p 8080:8080 -p 8081:8081 --pull always livebook/livebook

の実行環境下では、Mix.install/2のときに以下のエラーが発生します。

12:43:02.464 [warning] Failed to load nif: {:load_failed, 'Failed to load NIF library /home/livebook/.cache/mix/installs/elixir-1.14.0-erts-12.3.2.2/bfadb99b0851f0ef64f7e431eb2b2d46/_build/dev/lib/evision/priv/evision: \'libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory\''}

そこでこの記事では、macOSで動かしてみます。
参考： Dockerコンテナで動かす方法は、「Elixir の dbg を Livebook で遊び倒すーー画像処理をDockerで楽しむ」にまとめています。

brew install ffmpeg@4
echo 'export PATH="/usr/local/opt/gettext/bin:$PATH"' >> ~/.zshenv
source ~/.zshenv
brew link --overwrite ffmpeg@4

上記は私のmacOSで行った手順です。
お試しされるマシンの状態により、必要に応じて調整してください。
特に、brew link --overwrite ffmpeg@4 はよくよく意味をご理解した上で実施してください。
ちなみに私は説明できません。

ままよ、どうにでもなれ！　という気持ちで実行しています。

踏み出せば
その一足が道となり
その一足が道となる
迷わず行けよ（エンター押せよ）
行けばわかるさ
ありがとうーーーーッ！
の気持ちで実行しています。

git clone https://github.com/livebook-dev/livebook.git
cd livebook
git checkout -b tag-v0.7.1 v0.7.1
mix deps.get --only prod
MIX_ENV=prod mix phx.server

Mix.install([
  :download, :evision, :kino, :nx
])

特にバージョンは指定せず実行しました。
2022-10-16現在、以下がインストールされました。
Application.loaded_applications()で調べました。

Hex	バージョン
download	0.0.4
evision	0.1.12
kino	0.7.0
nx	0.3.0

alias Evision, as: OpenCV

defmodule Helper do
  def download!(url, save_as) do
    unless File.exists?(save_as) do
      Download.from(url, path: save_as)
    end

    save_as
  end

  def show_image(mat) do
    OpenCV.imencode(".png", mat)
    |> IO.iodata_to_binary()
    |> Kino.Image.new(:png)
  end

  def show_image_from_path(image_path) do
    image_path
    |> File.read!()
    |> Kino.Image.new(:jpeg)
  end
end

元記事とは使用しているEvisionのバージョンが異なります。
私は、0.1.12を使っています。
imencode!は存在しないと言われたので、カンで!を外しました。
Hexのドキュメントをチラ見しつつ、カンで適当に変更しました。
動きました。

image_path = "dog.jpg"

"https://raw.githubusercontent.com/pjreddie/darknet/master/data/dog.jpg"
|> Helper.download!(image_path)
|> Helper.show_image_from_path()

move = 
  [
    [1, 0, 100],
    [0, 1, 50]
  ]
  |> Nx.tensor(type: {:f, 32})
  |> OpenCV.Nx.to_mat()

rotation = OpenCV.getRotationMatrix2D({512 / 2, 512 / 2}, 90, 1)

image_path
|> OpenCV.imread()
|> OpenCV.blur({9, 9})
|> OpenCV.warpAffine(move, {512, 512})
|> OpenCV.warpAffine(rotation, {512, 512})
|> OpenCV.rectangle({50, 10}, {125, 60}, {255, 0, 0})
|> OpenCV.ellipse({300, 300}, {100, 200}, 30, 0, 360, {255, 255, 0}, thickness: 3)
|> Helper.show_image()
|> dbg()

繰り返します。
元記事とは使用しているEvisionのバージョンが異なります。
私は、0.1.12を使っています。
!付きのメソッドがなくなっていたり、関数の戻り値がタプルではなくなっていたり、引数がListではなくタプルで指定するようになっていたりしました。
Hexのドキュメントをチラ見しつつ、カンで適当に変更しました。
動きました

猫たち

Mix.install([
  :kino
])

urls = [
  "https://images.unsplash.com/photo-1603203040743-24aced6793b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&h=580&q=80",
  "https://images.unsplash.com/photo-1578339850459-76b0ac239aa2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&h=580&q=80",
  "https://images.unsplash.com/photo-1633479397973-4e69efa75df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&h=580&q=80",
  "https://images.unsplash.com/photo-1597838816882-4435b1977fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&h=580&q=80",
  "https://images.unsplash.com/photo-1629778712393-4f316eee143e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&h=580&q=80",
  "https://images.unsplash.com/photo-1638667168629-58c2516fbd22?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&h=580&q=80"
]


images = 
  for {url, i} <- Enum.with_index(urls, 1) do
    image = Kino.Markdown.new("![](#{url})")
    label = Kino.Markdown.new("**Image #{i}**")
    Kino.Layout.grid([image, label], boxed: true)
  end

Kino.Layout.grid(images, columns: 3)

おわりに

「What's new in Livebook 0.7」と題されたYouTubeを私は楽しみました。
見るだけではなくコードを書いたほうが楽しめますので私は書きました。
この記事では、そのコードスニペットを共有しました。

Livebook v0.7に追加された、3つの機能を紹介しました。

Secret management
Visual representations of the running system (supervision trees, inter-process messaging, and more)
Interactive user interface to visualize and edit Elixir pipelines

Enjoy Elixir!!!

追伸

私は、動画をみながら文字起こししました。
よくよく元記事をよくみると、コードスニペットは載っていました
Evisionのバージョンアップに伴う関数IFの変更に追従したのがこの記事のレゾンデートルです。
私自身は、写すことを楽しみました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up