Merge pull request #11 from headwayio/feature/edit-transcription

lib/medical_transcription/transcription.ex

@@ -1,18 +1,8 @@
 defmodule MedicalTranscription.Transcription do
   @moduledoc """
-  Takes a path to an audio file and transcribes it to text. As each chunk is available, it passes it to the `Coding`
-  context to look for possible matching codes.
+  Takes a path to an audio file and transcribes it to text.
   """
 
-  alias MedicalTranscription.Coding
-
-  defp get_tags_and_send_result(chunk, index, live_view_pid) do
-    tags = Coding.process_chunk(chunk.text)
-    result = build_result(index, chunk, tags)
-
-    send(live_view_pid, {:transcription_row, result})
-  end
-
   # Ideas for future exploration:
   # - Instead of storing the long description vectors in a binary file on disk, we could store them within a vector DB
   #   (such as pgvector or Pinecone.io)
@@ -25,7 +15,7 @@ defmodule MedicalTranscription.Transcription do
       audio_file_path
       |> stream_transcription()
       |> Enum.reduce("", fn {chunk, index}, acc ->
-        get_tags_and_send_result(chunk, index + 1, live_view_pid)
+        send_result(chunk, index + 1, live_view_pid)
 
         acc <> chunk.text
       end)
@@ -36,7 +26,7 @@ defmodule MedicalTranscription.Transcription do
       end_timestamp_seconds: nil
     }
 
-    get_tags_and_send_result(summary_chunk, 0, live_view_pid)
+    send_result(summary_chunk, 0, live_view_pid)
   end
 
   defp stream_transcription(audio_file_path) do
@@ -45,14 +35,15 @@ defmodule MedicalTranscription.Transcription do
     |> Stream.with_index()
   end
 
-  defp build_result(index, chunk, tags) do
-    %{
+  defp send_result(chunk, index, live_view_pid) do
+    result = %{
       id: index,
       start_mark: format_timestamp(chunk.start_timestamp_seconds),
       end_mark: format_timestamp(chunk.end_timestamp_seconds),
-      text: chunk.text,
-      tags: tags
+      text: chunk.text
     }
+
+    send(live_view_pid, {:transcription_row, result})
   end
 
   defp format_timestamp(seconds) when is_nil(seconds), do: nil

lib/medical_transcription_web/components/components.ex

@@ -143,7 +143,13 @@ defmodule MedicalTranscriptionWeb.Components do
       phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
     >
       <%= for {dom_id, row} <- @rows do %>
-        <.live_component module={TranscriptionTextComponent} id={dom_id} row={row} />
+        <.live_component
+          module={TranscriptionTextComponent}
+          id={dom_id}
+          start_mark={row.start_mark}
+          end_mark={row.end_mark}
+          text={row.text}
+        />
       <% end %>
     </div>
     """

lib/medical_transcription_web/components/layouts/app.html.heex

@@ -1,5 +1,5 @@
 <div class="min-h-[calc(100vh-56px)] flex gap-5">
-  <header class="w-[335px] min-w-[335px] pt-6 border-r border-gray-200 flex flex-col gap-12">
+  <header class="hidden w-[335px] min-w-[335px] pt-6 border-r border-gray-200 lg:flex flex-col gap-12">
     <div class="flex items-center gap-[10.5px]">
       <img src={~p"/images/logo.svg"} width="48" />
 

lib/medical_transcription_web/components/transcription_text_component.ex

@@ -1,30 +1,42 @@
 defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
   @moduledoc """
-  Represents a portion of transcribed text and its codes and starts a task to determine keywords within the text.
-  """
+  Represents a portion of transcribed text.
 
+  Once rendered, starts tasks to find relevant codes and keywords for the text.
+  """
   use MedicalTranscriptionWeb, :live_component
+
   import MedicalTranscriptionWeb.Components
   import MedicalTranscriptionWeb.Components.KeywordHighlighter
+
   alias AudioTagger.KeywordFinder
+  alias MedicalTranscription.Coding
   alias MedicalTranscription.Coding.CodeVectorMatch
 
   @impl Phoenix.LiveComponent
   def update(assigns, socket) do
-    socket = assign_for_row(assigns, socket)
+    socket = assign_initial_state(assigns, socket)
 
     {:ok, socket}
   end
 
-  defp assign_for_row(%{row: row}, socket) do
+  defp assign_initial_state(%{start_mark: start_mark, end_mark: end_mark, text: text}, socket) do
     self_pid = self()
 
+    initial_state = %{
+      start_mark: start_mark,
+      end_mark: end_mark,
+      text: text,
+      editing: false
+    }
+
     socket
-    |> assign(:row, row)
-    |> assign_async(:keywords, fn -> find_keywords(self_pid, row.text) end)
+    |> assign(initial_state)
+    |> assign_async(:tags, fn -> classify_text(text) end)
+    |> assign_async(:keywords, fn -> find_keywords(self_pid, text) end)
   end
 
-  defp assign_for_row(_assigns, socket), do: socket
+  defp assign_initial_state(_assigns, socket), do: socket
 
   @impl Phoenix.LiveComponent
   def render(assigns) do
@@ -32,14 +44,20 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
     <div class="flex gap-12 pb-10 border-b border-[#444444]/20">
       <div class="flex-1 flex flex-col gap-4">
         <p class="text-[32px] leading-normal font-semibold">
-          <%= if !is_nil(@row.start_mark) && !is_nil(@row.end_mark) do %>
-            <%= @row.start_mark %> - <%= @row.end_mark %>
+          <%= if !is_nil(@start_mark) && !is_nil(@end_mark) do %>
+            <%= @start_mark %> - <%= @end_mark %>
           <% end %>
         </p>
         <p class="text-[28px] leading-normal text-type-black-tertiary">
           <.async_result :let={keywords} assign={@keywords}>
-            <:loading><%= @row.text %></:loading>
-            <.highlight text={@row.text} keywords={keywords} />
+            <:loading><%= @text %></:loading>
+            <%= if @editing do %>
+              <textarea class="w-full" phx-blur="reclassify_transcription" phx-target={@myself}><%= @text %></textarea>
+            <% else %>
+              <div class="text-[28px]" phx-click="edit_transcription" phx-target={@myself}>
+                <.highlight text={@text} keywords={keywords} />
+              </div>
+            <% end %>
           </.async_result>
         </p>
 
@@ -55,21 +73,50 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
       </div>
 
       <div class="flex-1 flex flex-col items-stretch gap-3">
-        <%= for %CodeVectorMatch{id: id, code: code, description: label, cosine_similarity: score, weighting: weighting} <- @row.tags do %>
-          <.tag_result
-            code_vector_id={id}
-            code={code}
-            label={label}
-            score={score}
-            text={@row.text}
-            weighting={weighting}
-          />
-        <% end %>
+        <.async_result :let={tags} assign={@tags}>
+          <:loading>
+            <img src={~p"/images/loading.svg"} width="16" class="animate-spin" /> Finding codes...
+          </:loading>
+          <:failed :let={reason}>There was an error finding codes: <%= reason %></:failed>
+          <%= for %CodeVectorMatch{id: id, code: code, description: label, cosine_similarity: score, weighting: weighting} <- tags do %>
+            <.tag_result
+              code_vector_id={id}
+              code={code}
+              label={label}
+              score={score}
+              text={@text}
+              weighting={weighting}
+            />
+          <% end %>
+        </.async_result>
       </div>
     </div>
     """
   end
 
+  @impl Phoenix.LiveComponent
+  def handle_event("edit_transcription", _params, socket) do
+    {:noreply, assign(socket, :editing, true)}
+  end
+
+  @impl Phoenix.LiveComponent
+  def handle_event("reclassify_transcription", %{"value" => value} = _params, socket) do
+    self_pid = self()
+
+    socket =
+      socket
+      |> assign(:text, value)
+      |> assign(:editing, false)
+      |> assign_async(:tags, fn -> classify_text(value) end)
+      |> assign_async(:keywords, fn -> find_keywords(self_pid, value) end)
+
+    {:noreply, socket}
+  end
+
+  def classify_text(value) do
+    {:ok, %{tags: Coding.process_chunk(value)}}
+  end
+
   defp find_keywords(_live_view_pid, ""), do: {:ok, %{keywords: []}}
 
   defp find_keywords(live_view_pid, text) do