From 73c6e5f5d90aa625eda7247e60c2f63198a5c154 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Thu, 23 Nov 2023 15:34:02 +0700
Subject: [PATCH] Update examples

---
 examples/phoenix/image_classification.exs | 47 +++++++++++++---------
 examples/phoenix/speech_to_text.exs       | 21 ++++++----
 examples/phoenix/text_classification.exs  | 49 +++++++++++++----------
 3 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/examples/phoenix/image_classification.exs b/examples/phoenix/image_classification.exs
index 8c0729e9..b028bf33 100644
--- a/examples/phoenix/image_classification.exs
+++ b/examples/phoenix/image_classification.exs
@@ -9,8 +9,8 @@ Application.put_env(:sample, PhoenixDemo.Endpoint,
 Mix.install([
   {:plug_cowboy, "~> 2.6"},
   {:jason, "~> 1.4"},
-  {:phoenix, "~> 1.7.0"},
-  {:phoenix_live_view, "~> 0.18.3"},
+  {:phoenix, "1.7.10"},
+  {:phoenix_live_view, "0.20.1"},
   # Bumblebee and friends
   {:bumblebee, "~> 0.3.0"},
   {:nx, "~> 0.5.1"},
@@ -24,10 +24,10 @@ defmodule PhoenixDemo.Layouts do
 
   def render("live.html", assigns) do
     ~H"""
-    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.0-rc.0/priv/static/phoenix.min.js">
+    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.10/priv/static/phoenix.min.js">
     </script>
     <script
-      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.18.3/priv/static/phoenix_live_view.min.js"
+      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.20.1/priv/static/phoenix_live_view.min.js"
     >
     </script>
     <script>
@@ -189,7 +189,7 @@ defmodule PhoenixDemo.SampleLive do
   def mount(_params, _session, socket) do
     {:ok,
      socket
-     |> assign(label: nil, task: nil)
+     |> assign(label: nil)
      |> allow_upload(:image, accept: :any, progress: &handle_progress/3, auto_upload: true)}
   end
 
@@ -203,11 +203,15 @@ defmodule PhoenixDemo.SampleLive do
         </form>
         <div class="mt-6 flex space-x-1.5 items-center text-gray-600 text-lg">
           <span>Label:</span>
-          <%= if @task do %>
-            <.spinner />
-          <% else %>
-            <span class="text-gray-900 font-medium"><%= @label || "?" %></span>
-          <% end %>
+          <.async_result :let={label} assign={@label} :if={@label}>
+            <:loading>
+              <.spinner />
+            </:loading>
+            <:failed :let={_reason}>
+              <span>Oops, something went wrong!</span>
+            </:failed>
+            <span class="text-gray-900 font-medium"><%= label %></span>
+          </.async_result>
         </div>
       </div>
     </div>
@@ -266,8 +270,18 @@ defmodule PhoenixDemo.SampleLive do
       end)
 
     image = decode_as_tensor(binary)
-    task = Task.async(fn -> Nx.Serving.batched_run(PhoenixDemo.Serving, image) end)
-    {:noreply, assign(socket, task: task)}
+
+    socket =
+      socket
+      # Discard previous label so we show the loading state once more
+      |> assign(:label, nil)
+      |> assign_async(:label, fn ->
+        output = Nx.Serving.batched_run(PhoenixDemo.Serving, image)
+        %{predictions: [%{label: label}]} = output
+        {:ok, %{label: label}}
+      end)
+
+    {:noreply, socket}
   end
 
   def handle_progress(_name, _entry, socket), do: {:noreply, socket}
@@ -283,13 +297,6 @@ defmodule PhoenixDemo.SampleLive do
     # ignore this event
     {:noreply, socket}
   end
-
-  @impl true
-  def handle_info({ref, result}, socket) when socket.assigns.task.ref == ref do
-    Process.demonitor(ref, [:flush])
-    %{predictions: [%{label: label}]} = result
-    {:noreply, assign(socket, label: label, task: nil)}
-  end
 end
 
 defmodule PhoenixDemo.Router do
@@ -323,7 +330,7 @@ end
 serving =
   Bumblebee.Vision.image_classification(model_info, featurizer,
     top_k: 1,
-    compile: [batch_size: 10],
+    compile: [batch_size: 4],
     defn_options: [compiler: EXLA]
   )
 
diff --git a/examples/phoenix/speech_to_text.exs b/examples/phoenix/speech_to_text.exs
index ef3a6f65..6626de88 100644
--- a/examples/phoenix/speech_to_text.exs
+++ b/examples/phoenix/speech_to_text.exs
@@ -9,7 +9,8 @@ Application.put_env(:sample, PhoenixDemo.Endpoint,
 Mix.install([
   {:plug_cowboy, "~> 2.6"},
   {:jason, "~> 1.4"},
-  {:phoenix_live_view, "~> 0.20.1"},
+  {:phoenix, "1.7.10"},
+  {:phoenix_live_view, "0.20.1"},
   # Bumblebee and friends
   {:bumblebee, "~> 0.4.0"},
   {:nx, "~> 0.6.1"},
@@ -23,10 +24,10 @@ defmodule PhoenixDemo.Layouts do
 
   def render("live.html", assigns) do
     ~H"""
-    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.0-rc.0/priv/static/phoenix.min.js">
+    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.10/priv/static/phoenix.min.js">
     </script>
     <script
-      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.18.3/priv/static/phoenix_live_view.min.js"
+      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.20.1/priv/static/phoenix_live_view.min.js"
     >
     </script>
     <script>
@@ -204,11 +205,15 @@ defmodule PhoenixDemo.SampleLive do
         </form>
 
         <div class="mt-6 flex space-x-1.5 items-center text-gray-600 text-lg">
-          <span>Transcription: </span>
+          <div>Transcription:</div>
           <.async_result :let={transcription} assign={@transcription} :if={@transcription}>
-            <:loading><.spinner /></:loading>
-            <:failed :let={_reason}>oops, something went wrong!</:failed>
-            <%= transcription %>
+            <:loading>
+              <.spinner />
+            </:loading>
+            <:failed :let={_reason}>
+              <span>Oops, something went wrong!</span>
+            </:failed>
+            <span class="text-gray-900 font-medium"><%= transcription %></span>
           </.async_result>
         </div>
       </div>
@@ -269,7 +274,7 @@ defmodule PhoenixDemo.SampleLive do
       # Discard previous transcription so we show the loading state once more
       |> assign(:transcription, nil)
       |> assign_async(:transcription, fn ->
-        output = Nx.Serving.batched_run(PhoenixDemo.Serving, audio) |> dbg()
+        output = Nx.Serving.batched_run(PhoenixDemo.Serving, audio)
         transcription = output.chunks |> Enum.map_join(& &1.text) |> String.trim()
         {:ok, %{transcription: transcription}}
       end)
diff --git a/examples/phoenix/text_classification.exs b/examples/phoenix/text_classification.exs
index 11cca518..025f9621 100644
--- a/examples/phoenix/text_classification.exs
+++ b/examples/phoenix/text_classification.exs
@@ -8,8 +8,8 @@ Application.put_env(:sample, PhoenixDemo.Endpoint,
 Mix.install([
   {:plug_cowboy, "~> 2.6"},
   {:jason, "~> 1.4"},
-  {:phoenix, "~> 1.7.0"},
-  {:phoenix_live_view, "~> 0.18.3"},
+  {:phoenix, "1.7.10"},
+  {:phoenix_live_view, "0.20.1"},
   # Bumblebee and friends
   {:bumblebee, "~> 0.3.0"},
   {:nx, "~> 0.5.1"},
@@ -23,10 +23,10 @@ defmodule PhoenixDemo.Layouts do
 
   def render("live.html", assigns) do
     ~H"""
-    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.0-rc.0/priv/static/phoenix.min.js">
+    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.10/priv/static/phoenix.min.js">
     </script>
     <script
-      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.18.3/priv/static/phoenix_live_view.min.js"
+      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.20.1/priv/static/phoenix_live_view.min.js"
     >
     </script>
     <script>
@@ -49,7 +49,7 @@ defmodule PhoenixDemo.SampleLive do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, text: "", label: nil, task: nil)}
+    {:ok, assign(socket, text: "", label: nil)}
   end
 
   @impl true
@@ -67,18 +67,22 @@ defmodule PhoenixDemo.SampleLive do
           <button
             class="px-5 py-2.5 text-center mr-2 inline-flex items-center text-white bg-blue-700 font-medium rounded-lg text-sm hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
             type="submit"
-            disabled={@task != nil}
+            disabled={@label != nil and @label.loading != nil}
           >
             Predict
           </button>
         </form>
         <div class="mt-2 flex space-x-1.5 items-center text-gray-600 text-lg">
           <span>Emotion:</span>
-          <%= if @task do %>
-            <.spinner />
-          <% else %>
-            <span class="text-gray-900 font-medium"><%= @label || "?" %></span>
-          <% end %>
+          <.async_result :let={label} assign={@label} :if={@label}>
+            <:loading>
+              <.spinner />
+            </:loading>
+            <:failed :let={_reason}>
+              <span>Oops, something went wrong!</span>
+            </:failed>
+            <span class="text-gray-900 font-medium"><%= label %></span>
+          </.async_result>
         </div>
       </div>
     </div>
@@ -107,15 +111,18 @@ defmodule PhoenixDemo.SampleLive do
 
   @impl true
   def handle_event("predict", %{"text" => text}, socket) do
-    task = Task.async(fn -> Nx.Serving.batched_run(PhoenixDemo.Serving, text) end)
-    {:noreply, assign(socket, text: text, task: task)}
-  end
-
-  @impl true
-  def handle_info({ref, result}, socket) when socket.assigns.task.ref == ref do
-    Process.demonitor(ref, [:flush])
-    %{predictions: [%{label: label}]} = result
-    {:noreply, assign(socket, label: label, task: nil)}
+    socket =
+      socket
+      |> assign(:text, text)
+      # Discard previous label so we show the loading state once more
+      |> assign(:label, nil)
+      |> assign_async(:label, fn ->
+        output = Nx.Serving.batched_run(PhoenixDemo.Serving, text)
+        %{predictions: [%{label: label}]} = output
+        {:ok, %{label: label}}
+      end)
+
+    {:noreply, socket}
   end
 end
 
@@ -150,7 +157,7 @@ end
 serving =
   Bumblebee.Text.text_classification(model_info, tokenizer,
     top_k: 1,
-    compile: [batch_size: 10, sequence_length: 100],
+    compile: [batch_size: 4, sequence_length: 100],
     defn_options: [compiler: EXLA]
   )