refactor: Move more of the UI into separate components

lib/medical_transcription_web/components/components.ex

@@ -4,6 +4,36 @@ defmodule MedicalTranscriptionWeb.Components do
   alias AudioTagger.Classifier.TagResult
   use MedicalTranscriptionWeb, :verified_routes
 
+  def upload_form(assigns) do
+    ~H"""
+    <form id="audio-form" phx-submit="save" phx-change="validate">
+      <div class="flex items-center pb-4 border-b border-[#444444]/20">
+        <.live_file_input
+          class="file:text-sm file:rounded-full file:px-4 file:py-2 file:border-0 file:bg-brand file:hover:bg-brand-active file:text-white"
+          upload={@audio_upload}
+        />
+        <button
+          name="submit-btn"
+          class="rounded-full bg-brand hover:bg-brand-active text-white py-2 px-4 font-light text-black"
+        >
+          Submit <span aria-hidden="true">&rarr;</span>
+        </button>
+      </div>
+    </form>
+    """
+  end
+
+  def loading_message(assigns) do
+    ~H"""
+    <%= if @visible do %>
+      <div class="flex gap-2 items-center p-2 rounded-md text-slate-800 text-sm bg-slate-200 border border-slate-300">
+        <.icon name="hero-arrow-path" class="w-4 h-4 animate-spin" />
+        <p>Transcribing and tagging audio file...</p>
+      </div>
+    <% end %>
+    """
+  end
+
   def result_list(assigns) do
     ~H"""
     <div class="flex flex-col gap-14">
@@ -31,8 +61,8 @@ defmodule MedicalTranscriptionWeb.Components do
     ~H"""
     <div class="flex items-center gap-4 px-[14px] py-3 text-sm">
       <div class="flex gap-3">
-        <.feedback_button code={@code} text={@text} response="true" />
-        <.feedback_button code={@code} text={@text} response="false" class="" />
+        <.feedback_button code={@code} text={@text} label={@label} response="true" />
+        <.feedback_button code={@code} text={@text} label={@label} response="false" class="" />
       </div>
 
       <div
@@ -52,6 +82,7 @@ defmodule MedicalTranscriptionWeb.Components do
       phx-click="add_feedback"
       phx-value-code={@code}
       phx-value-text={@text}
+      phx-value-long-description={@label}
       phx-value-response={@response}
       type="button"
       class="p-2 border border-button-deactivated-background rounded-lg hover:bg-slate-200"

lib/medical_transcription_web/live/home_live/index.ex

@@ -15,39 +15,19 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
 
   @impl Phoenix.LiveView
   def render(assigns) do
-    # TODO: Show a loading state while returning results from the audio transcription & tagging.
-    # TODO: Stream audio recording instead of uploaded audio.
-    # TODO: Allow editing the transcription inline to correct mistakes. Then, retag based on the updated transcription.
-    # TODO: Show multiple codes.
-    # TODO: Allow users to accept/decline suggested codes.
-    # TODO: Train model based on user feedback for suggested codes.
+    # Future ideas:
+    # - Fine-tune results based on feedback:
+    #   - Allow users to accept/decline suggested codes.
+    #   - Train model based on user feedback for suggested codes.
+    # - Allow editing the transcription inline to correct mistakes. Then, retag based on the updated transcription.
+    # - Stream audio recording instead of uploaded audio.
 
     ~H"""
-    <form id="audio-form" phx-submit="save" phx-change="validate">
-      <div class="flex flex-col space-y-6">
-        <div class="flex items-center pb-4 border-b border-[#444444]/20">
-          <.live_file_input
-            class="file:text-sm file:rounded-full file:px-4 file:py-2 file:border-0 file:bg-brand file:hover:bg-brand-active file:text-white"
-            upload={@uploads.audio}
-          />
-          <button
-            name="submit-btn"
-            class="rounded-full bg-brand hover:bg-brand-active text-white py-2 px-4 font-light text-black"
-          >
-            Submit <span aria-hidden="true">&rarr;</span>
-          </button>
-        </div>
-
-        <%= if @transcription_in_progress do %>
-          <div class="flex gap-2 items-center p-2 rounded-md text-slate-800 text-sm bg-slate-200 border border-slate-300">
-            <.icon name="hero-arrow-path" class="w-4 h-4 animate-spin" />
-            <p>Transcribing and tagging audio file...</p>
-          </div>
-        <% end %>
-
-        <.result_list rows={@streams.transcription_rows} />
-      </div>
-    </form>
+    <div class="flex flex-col space-y-6">
+      <.upload_form audio_upload={@uploads.audio} />
+      <.loading_message visible={@transcription_in_progress} />
+      <.result_list rows={@streams.transcription_rows} />
+    </div>
     """
   end
 
@@ -65,8 +45,6 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
         {:ok, dest}
       end)
 
-    # Task async -> Audio Tagger -> get transcribed audio
-
     uploaded_file = Enum.at(uploaded_files, 0)
     live_view_pid = self()
 
@@ -114,7 +92,7 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
     {:noreply, assign(socket, :transcription_in_progress, false)}
   end
 
-  def transcribe_and_tag_audio(live_view_pid, audio_file_path) do
+  defp transcribe_and_tag_audio(live_view_pid, audio_file_path) do
     MedicalTranscription.Transcriber.stream_transcription_and_search(
       live_view_pid,
       audio_file_path