Update example, closes #292

elixir-nx · Nov 23, 2023 · e34d123 · e34d123
1 parent 6f1c6c2
commit e34d123
Showing 1 changed file with 25 additions and 21 deletions.
diff --git a/examples/phoenix/speech_to_text.exs b/examples/phoenix/speech_to_text.exs
@@ -9,12 +9,11 @@ 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_live_view, "~> 0.20.1"},
   # Bumblebee and friends
   {:bumblebee, "~> 0.4.0"},
-  {:nx, "~> 0.5.1"},
-  {:exla, "~> 0.5.1"}
+  {:nx, "~> 0.6.1"},
+  {:exla, "~> 0.6.1"}
 ])
 
 Application.put_env(:nx, :default_backend, EXLA.Backend)
@@ -177,7 +176,7 @@ defmodule PhoenixDemo.SampleLive do
   def mount(_params, _session, socket) do
     {:ok,
      socket
-     |> assign(transcription: nil, task: nil)
+     |> assign(transcription: nil)
      |> allow_upload(:audio, accept: :any, progress: &handle_progress/3, auto_upload: true)}
   end
 
@@ -186,6 +185,10 @@ defmodule PhoenixDemo.SampleLive do
     ~H"""
     <div class="h-screen w-screen flex items-center justify-center antialiased">
       <div class="flex flex-col items-center w-1/2">
+        <div class="mb-6 text-gray-600 text-lg">
+          <h1>Press and hold</h1>
+        </div>
+
         <button
           type="button"
           id="microphone"
@@ -201,12 +204,12 @@ defmodule PhoenixDemo.SampleLive do
         </form>
 
         <div class="mt-6 flex space-x-1.5 items-center text-gray-600 text-lg">
-          <span>Transcription:</span>
-          <%= if @task do %>
-            <.spinner />
-          <% else %>
-            <span class="text-gray-900 font-medium"><%= @transcription || "?" %></span>
-          <% end %>
+          <span>Transcription: </span>
+          <.async_result :let={transcription} assign={@transcription} :if={@transcription}>
+            <:loading><.spinner /></:loading>
+            <:failed :let={_reason}>oops, something went wrong!</:failed>
+            <%= transcription %>
+          </.async_result>
         </div>
       </div>
     </div>
@@ -261,9 +264,17 @@ defmodule PhoenixDemo.SampleLive do
     # We always pre-process audio on the client into a single channel
     audio = Nx.from_binary(binary, :f32)
 
-    task = Task.async(fn -> Nx.Serving.batched_run(PhoenixDemo.Serving, audio) end)
+    socket =
+      socket
+      # 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()
+        transcription = output.chunks |> Enum.map_join(& &1.text) |> String.trim()
+        {:ok, %{transcription: transcription}}
+      end)
 
-    {:noreply, assign(socket, task: task)}
+    {:noreply, socket}
   end
 
   defp handle_progress(_name, _entry, socket), do: {:noreply, socket}
@@ -275,13 +286,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])
-    %{results: [%{text: text}]} = result
-    {:noreply, assign(socket, transcription: text, task: nil)}
-  end
 end
 
 defmodule PhoenixDemo.Router do
@@ -316,7 +320,7 @@ end
 
 serving =
   Bumblebee.Audio.speech_to_text_whisper(model_info, featurizer, tokenizer, generation_config,
-    compile: [batch_size: 10],
+    compile: [batch_size: 4],
     defn_options: [compiler: EXLA]
   )