switch to query flag, and use streams

lib/emoji/embeddings.ex

@@ -6,6 +6,8 @@ defmodule Emoji.Embeddings do
   @doc """
   Creates an embedding and returns it in binary form.
   """
+  def create("", _), do: nil
+
   def create(text, embeddings_model) do
     embeddings_model
     |> Replicate.run(text_input: text, modality: "text")
@@ -16,6 +18,8 @@ defmodule Emoji.Embeddings do
   @doc """
   Creates an image embedding given an image url and returns it in binary form.
   """
+  def create_image("", _), do: nil
+
   def create_image(image_url, embeddings_model) do
     image_uri =
       image_url |> Req.get!() |> Map.get(:body) |> binary_to_data_uri("image/png")

lib/emoji_web/live/home_live.ex

@@ -52,7 +52,7 @@ defmodule EmojiWeb.HomeLive do
   end
 
   def handle_event("save", %{"prompt" => prompt, "submit" => "search"}, socket) do
-    {:noreply, socket |> push_navigate(to: ~p"/experimental-search?q=#{prompt}")}
+    {:noreply, socket |> push_navigate(to: ~p"/experimental-search?query=#{prompt}")}
   end
 
   def handle_event("save", %{"prompt" => prompt, "submit" => "generate"}, socket) do

lib/emoji_web/live/search_live.ex

@@ -8,11 +8,16 @@ defmodule EmojiWeb.SearchLive do
     {:ok,
      socket
      |> assign(
-       results: [],
-       query: nil,
        loading: false,
+       num_results: @num_results,
        form: to_form(%{"query" => nil, "search_via_images" => false})
-     )}
+     )
+     |> stream_configure(:results,
+       dom_id: fn {prediction, _distance} ->
+         "prediction-#{prediction.id}"
+       end
+     )
+     |> stream(:results, [])}
   end
 
   @impl true
@@ -23,12 +28,38 @@ defmodule EmojiWeb.SearchLive do
       ) do
     {:noreply,
      push_patch(socket,
-       to: ~p"/experimental-search?q=#{query}&search_via_images=#{search_via_images}"
+       to: ~p"/experimental-search?query=#{query}&search_via_images=#{search_via_images}"
+     )}
+  end
+
+  @impl true
+  def handle_params(
+        %{
+          "query" => query,
+          "search_via_images" => search_via_images,
+          "num_results" => num_results
+        } = params,
+        _uri,
+        socket
+      ) do
+    Task.async(fn ->
+      Emoji.Embeddings.search_emojis(query, num_results, search_via_images == "true")
+    end)
+
+    {:noreply,
+     socket
+     |> assign(
+       loading: true,
+       form: to_form(params)
      )}
   end
 
   @impl true
-  def handle_params(%{"q" => query, "search_via_images" => search_via_images}, _uri, socket) do
+  def handle_params(
+        %{"query" => query, "search_via_images" => search_via_images} = params,
+        _uri,
+        socket
+      ) do
     Task.async(fn ->
       Emoji.Embeddings.search_emojis(query, @num_results, search_via_images == "true")
     end)
@@ -37,19 +68,19 @@ defmodule EmojiWeb.SearchLive do
      socket
      |> assign(
        loading: true,
-       form: to_form(%{"query" => query, "search_via_images" => search_via_images})
+       form: to_form(params)
      )}
   end
 
   @impl true
-  def handle_params(%{"q" => query}, _uri, socket) do
+  def handle_params(%{"query" => query} = params, _uri, socket) do
     Task.async(fn -> Emoji.Embeddings.search_emojis(query, @num_results, false) end)
 
     {:noreply,
      socket
      |> assign(
        loading: true,
-       form: to_form(%{"query" => query})
+       form: to_form(params)
      )}
   end
 
@@ -61,6 +92,9 @@ defmodule EmojiWeb.SearchLive do
   def handle_info({ref, results}, socket) do
     Process.demonitor(ref, [:flush])
 
-    {:noreply, socket |> assign(results: results, loading: false)}
+    {:noreply,
+     socket
+     |> assign(loading: false)
+     |> stream(:results, results, reset: true)}
   end
 end

lib/emoji_web/live/search_live.html.heex

@@ -24,9 +24,15 @@
 
   <div :if={@loading} class="mt-2 animate-pulse">Searching...</div>
 
-  <ul :if={not @loading} role="list" class="mt-4 gap-6 grid grid-cols-3 divide-y divide-gray-200">
-    <li :for={{prediction, distance} <- @results}>
-      <EmojiWeb.Components.emoji id={prediction.id} prediction={prediction} />
+  <ul
+    :if={not @loading}
+    id="emoji-list"
+    phx-update="stream"
+    role="list"
+    class="mt-4 gap-6 grid grid-cols-3 divide-y divide-gray-200"
+  >
+    <li :for={{id, {prediction, distance}} <- @streams.results}>
+      <EmojiWeb.Components.emoji id={id} prediction={prediction} />
       <div class="mt-2">
         <.badge text={"Search distance: #{distance |> round()}"} />
       </div>