feat: Additional UI elements

- Style upload form
- Add header to results
- Set up different status states (:pending, :loading, :success)

assets/tailwind.config.js

@@ -18,8 +18,10 @@ module.exports = {
         brand: "#0A8390",
         "brand-active": "#93BC6B",
         "type-black-primary": "#202020",
+        "type-black-secondary": "#202020CC",
         "type-black-tertiary": "#202020B2",
         "button-deactivated-background": "#010101",
+        "light-divider": "#EBEBEB",
       },
       fontFamily: {
         sans: ["Poppins", ...defaultTheme.fontFamily.sans],

lib/medical_transcription_web/components/components.ex

@@ -6,19 +6,29 @@ defmodule MedicalTranscriptionWeb.Components do
 
   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">
+    <form
+      id="audio-form"
+      phx-submit="save"
+      phx-change="validate"
+      class="w-full flex flex-col items-center gap-[21px]"
+    >
+      <div class="w-full px-4 py-[19px] rounded-[10px] flex items-center bg-light-divider">
+        <label
+          for={@audio_upload.ref}
+          class="mr-4 px-[16.5px] py-[9.941667px] rounded-lg bg-[#444444]/10"
+        >
+          <img src={~p"/images/paperclip.svg"} width="15" height="30" />
+        </label>
         <.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"
+          class="flex-1 file:hidden file:font-secondary 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 name="submit-btn" title="Upload and process file">
+          <img src={~p"/images/upload.svg"} />
         </button>
       </div>
+
+      <p class="leading-normal text-type-black-secondary">Audio file can be .mp3</p>
     </form>
     """
   end
@@ -34,6 +44,46 @@ defmodule MedicalTranscriptionWeb.Components do
     """
   end
 
+  def result_heading(assigns) do
+    # TODO: Generate the summary keywords from the audio transcription
+
+    ~H"""
+    <div class="flex justify-between">
+      <div class="flex items-center">
+        <%= if @status == :loading do %>
+          <img src={~p"/images/loading.svg"} width="36" class="mr-6 animate-spin" />
+        <% end %>
+        <%= if @status == :success do %>
+          <img src={~p"/images/checkmark.svg"} width="46" class="mr-[17px]" />
+        <% end %>
+        <div class="px-[14px] py-3 flex items-center gap-3 bg-brand rounded-lg text-white">
+          <img src={~p"/images/document.svg"} width="20" />
+          <span class="font-secondary"><%= @filename %></span>
+        </div>
+      </div>
+      <button phx-click="reset_to_pending" type="button" class="p-3 rounded-lg bg-[#444444]/10">
+        <.icon name="hero-x-circle" class="w-6 h-6" />
+      </button>
+    </div>
+
+    <div class="border-b border-[#444444]/20">
+      <div class="px-4 py-2 flex items-center gap-2">
+        <img src={~p"/images/calendar.svg"} width="16" />
+
+        <span class="text-sm leading-normal font-bold text-type-black-tertiary uppercase">
+          <%= Calendar.strftime(DateTime.now!("Etc/UTC"), "%a, %b %d, %Y, %I:%M %p") %>
+        </span>
+      </div>
+      <div class="px-4 pt-2 pb-10 flex flex-col gap-2">
+        <p class="leading-normal font-bold text-type-black-primary uppercase">Summary Keywords</p>
+        <p class="text-sm leading-normal text-type-black-tertiary">
+          coronary, artery, disease, unstable, angina, admitted
+        </p>
+      </div>
+    </div>
+    """
+  end
+
   def result_list(assigns) do
     ~H"""
     <div
@@ -92,9 +142,9 @@ defmodule MedicalTranscriptionWeb.Components do
       class="p-2 border border-button-deactivated-background rounded-lg hover:bg-slate-200"
     >
       <%= if @response == "true" do %>
-        <img src={~p"/images/thumbs-up.svg"} width="20" height="20" />
+        <img src={~p"/images/thumbs-up.svg"} width="20" height="20" class="w-5 h-5 min-w-[20px]" />
       <% else %>
-        <img src={~p"/images/thumbs-down.svg"} width="20" height="20" />
+        <img src={~p"/images/thumbs-down.svg"} width="20" height="20" class="w-5 h-5 min-w-[20px]" />
       <% end %>
     </button>
     """

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

@@ -1,4 +1,4 @@
-<div class="flex gap-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">
     <div class="flex items-center gap-[10.5px]">
       <a href="/">
@@ -14,8 +14,8 @@
     </div>
   </header>
 
-  <main class="pl-16 pr-16 pt-[25px]">
-    <div class="mx-auto max-w-5xl">
+  <main class="flex-1 pl-16 pr-16 pt-[25px]">
+    <div class="flex flex-col h-full mx-auto max-w-5xl">
       <.flash_group flash={@flash} />
       <%= @inner_content %>
     </div>

lib/medical_transcription_web/live/home_live/index.ex

@@ -4,13 +4,19 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
 
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
-    {:ok,
-     socket
-     |> assign(:uploaded_files, [])
-     # |> stream(:transcription_rows, [])
-     |> stream(:transcription_rows, SampleResults.get_sample_results())
-     |> assign(:transcription_in_progress, false)
-     |> allow_upload(:audio, accept: ~w(.mp3), max_entries: 1)}
+    # We're storing atoms in `:status` as LiveView's AsyncResult doesn't support modeling a "pending" state, but only
+    # loading / ok / failed.
+    socket =
+      socket
+      |> assign(:uploaded_file_name, nil)
+      |> stream(:transcription_rows, [])
+      |> assign(:status, :pending)
+      # To test the success UI, replace the two lines above with these:
+      # |> stream(:transcription_rows, SampleResults.get_sample_results())
+      # |> assign(:status, :success)
+      |> allow_upload(:audio, accept: ~w(.mp3), max_entries: 1)
+
+    {:ok, socket}
   end
 
   @impl Phoenix.LiveView
@@ -23,10 +29,22 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
     # - Stream audio recording instead of uploaded audio.
 
     ~H"""
-    <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 class="flex-1 flex flex-col space-y-6">
+      <%= if @status == :loading || @status == :success do %>
+        <.result_heading status={@status} filename={@uploaded_file_name} />
+      <% end %>
+
+      <%= if @status != :pending do %>
+        <.result_list rows={@streams.transcription_rows} />
+      <% end %>
+
+      <%= if @status == :pending do %>
+        <div class="flex-1 flex flex-col justify-center items-center gap-4">
+          <img src={~p"/images/logo.svg"} width="106" />
+          <p class="text-2xl leading-normal font-semibold">Medical Code Transcriber</p>
+        </div>
+        <.upload_form audio_upload={@uploads.audio} />
+      <% end %>
     </div>
     """
   end
@@ -38,6 +56,11 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
 
   @impl true
   def handle_event("save", _params, socket) do
+    filename =
+      socket.assigns.uploads.audio.entries
+      |> Enum.at(0)
+      |> Map.get(:client_name)
+
     uploaded_files =
       consume_uploaded_entries(socket, :audio, fn %{path: path}, _entry ->
         dest = Path.join("priv/static/uploads", Path.basename(path))
@@ -52,9 +75,9 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
 
     socket =
       socket
-      |> assign(:transcription_in_progress, true)
+      |> assign(:status, :loading)
       |> assign(:transcription_rows, [])
-      |> update(:uploaded_files, &(&1 ++ uploaded_files))
+      |> assign(:uploaded_file_name, filename)
 
     {:noreply, socket}
   end
@@ -77,6 +100,11 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event("reset_to_pending", _params, socket) do
+    {:noreply, assign(socket, :status, :pending)}
+  end
+
   @impl true
   def handle_info({:transcription_row, chunk_result}, socket) do
     # The processing sends a message as each chunk of text is coded. See here for some background and potential
@@ -89,7 +117,7 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
     # See this Fly article for the usage of Task.async to start `transcribe_and_tag_audio/2` and handle the end of the
     # task here: https://fly.io/phoenix-files/liveview-async-task/
     Process.demonitor(ref, [:flush])
-    {:noreply, assign(socket, :transcription_in_progress, false)}
+    {:noreply, assign(socket, :status, :success)}
   end
 
   defp transcribe_and_tag_audio(live_view_pid, audio_file_path) do

lib/medical_transcription_web/live/home_live/sample_results.ex

@@ -15,10 +15,26 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index.SampleResults do
             label: "Coronary artery anomaly",
             score: 0.892520010471344
           },
-          %TagResult{code: "412", label: "Old myocardial infarct", score: 0.8386646509170532},
-          %TagResult{code: "4111", label: "Intermed coronary synd", score: 0.8203237056732178},
-          %TagResult{code: "4475", label: "Necrosis of artery", score: 0.8200777173042297},
-          %TagResult{code: "E9424", label: "Adv eff coronary vasodil", score: 0.8076164722442627}
+          %TagResult{
+            code: "41412",
+            label: "Dissection of coronary artery",
+            score: 0.8386646509170532
+          },
+          %TagResult{
+            code: "V717",
+            label: "Observation for suspected cardiovascular disease",
+            score: 0.8203237056732178
+          },
+          %TagResult{
+            code: "41400",
+            label: "Coronary atherosclerosis of unspecified type of vessel, native or graft",
+            score: 0.8200777173042297
+          },
+          %TagResult{
+            code: "V812",
+            label: "Screening for other and unspecified cardiovascular conditions",
+            score: 0.8076164722442627
+          }
         ]
       },
       %{