refactor: Move keyword highlighting to separate component

lib/medical_transcription_web/components/keyword_highlighter.ex

@@ -0,0 +1,52 @@
+defmodule MedicalTranscriptionWeb.Components.KeywordHighlighter do
+  use MedicalTranscriptionWeb, :html
+  # alias Phoenix.HTML.Tag
+
+  def highlight(assigns) do
+    # TODO: Eliminate the need to use `raw` here.
+    ~H"""
+    <%= raw(format_text(@text, @keywords)) %>
+    """
+  end
+
+  # To highlight the keywords within the transcription, we find the start and end index of each keyword within `text`,
+  # split the text at those points, and then join it back together, wrapping the keyword portion in a span with the
+  # `text-brand` class.
+  defp format_text(text, [first | rest]) do
+    if String.contains?(first.label, "and") do
+      format_text(text, rest)
+    else
+      # [one | two] = String.split(text, first.label)
+      #
+      # keyword =
+      #   Tag.content_tag(:span, first.label,
+      #     class: "text-brand",
+      #     title: "Score: #{Float.round(first.score, 2)}"
+      #   )
+      #
+      # with_replaced_keyword =
+      #   Tag.content_tag :div do
+      #     "#{one}#{keyword}#{two}"
+      #   end
+
+      # with_replaced_keyword = ~E"""
+      # #{one}
+      # <span class="text-brand" title="Score: #{Float.round(first.score, 2)}">#{first.label}</span>
+      # #{two}
+      # """
+
+      # with_replaced_keyword = "#{one}#{keyword}#{two}"
+
+      with_replaced_keyword =
+        text
+        |> String.split(first.label)
+        |> Enum.join(
+          "<span class=\"text-brand\" title=\"Score: #{Float.round(first.score, 2)}\">#{first.label}</span>"
+        )
+
+      format_text(with_replaced_keyword, rest)
+    end
+  end
+
+  defp format_text(text, []), do: text
+end

lib/medical_transcription_web/components/transcription_text_component.ex

@@ -1,6 +1,7 @@
 defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
   use MedicalTranscriptionWeb, :live_component
   import MedicalTranscriptionWeb.Components
+  import MedicalTranscriptionWeb.Components.KeywordHighlighter
   alias AudioTagger.Structs.TagResult
 
   @impl Phoenix.LiveComponent
@@ -30,8 +31,7 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
         <p class="text-[28px] leading-normal text-type-black-tertiary">
           <.async_result :let={keywords} assign={@keywords}>
             <:loading><%= @row.text %></:loading>
-            <!-- TODO: Replace this with a method that builds HTML tags instead of using `raw` -->
-            <%= raw(format_text(@row.text, keywords)) %>
+            <.highlight text={@row.text} keywords={keywords} />
           </.async_result>
         </p>
 
@@ -55,33 +55,17 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
     """
   end
 
-  # To highlight the keywords within the transcription, we find the start and end index of each keyword within `text`,
-  # split the text at those points, and then join it back together, wrapping the keyword portion in a span with the
-  # `text-brand` class.
-  defp format_text(text, [first | rest]) do
-    if String.contains?(first.label, "and") do
-      format_text(text, rest)
-    else
-      with_replaced_keyword =
-        text
-        |> String.split(first.label)
-        |> Enum.join(
-          "<span class=\"text-brand\" title=\"Score: #{Float.round(first.score, 2)}\">#{first.label}</span>"
-        )
-
-      format_text(with_replaced_keyword, rest)
-    end
-  end
-
-  defp format_text(text, []), do: text
-
   defp find_keywords(live_view_pid, text) do
+    # First, we use token classification to determine parts of speech and then retrieve the verb and adjective+noun phrases.
     %{entities: entities} = Nx.Serving.batched_run(TokenClassificationServing, text)
     phrases = AudioTagger.KeywordFinder.cleanup_phrases(entities)
 
+    # Then, we use one of two processes to determine which to show as keywords:
+    # 1. A slower process that looks to classify the text by the extracted phrases.
     # serving = AudioTagger.KeywordFinder.prepare_zero_shot_classification_serving(phrases)
     # %{predictions: predictions} = Nx.Serving.run(serving, text)
 
+    # 2. A fast process finding the phrase closest in vector space to the whole text.
     predictions = AudioTagger.KeywordFinder.find_most_similar_label(text, phrases, 2)
 
     # For now, retrieve the top three keywords that have a score of more than 0.25