Merge pull request #57 from fmops/feynman1/bt-841-provide-training-gu…

…idance Adds help modal to classifier show
fmops · Nov 18, 2024 · 7b92297 · 7b92297
2 parents 8a66909 + fd7c667
commit 7b92297
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 2 deletions.
diff --git a/lib/excision_web/live/classifier_live/help_modal.ex b/lib/excision_web/live/classifier_live/help_modal.ex
@@ -0,0 +1,89 @@
+defmodule ExcisionWeb.Live.ClassifierLive.HelpModal do
+  use Phoenix.Component
+
+  def component(assigns) do
+    ~H"""
+    <h2 class="text-2xl font-bold mb-4 text-gray-800">Interpreting Classifier Performance</h2>
+
+    <section>
+      <h3 class="text-lg font-semibold mb-2 text-gray-700">Accuracy Trends</h3>
+
+      <div class="space-y-4 text-gray-600">
+        <div>
+          <h4 class="font-medium">Rising Accuracy</h4>
+          <ul class="list-disc pl-5 space-y-1">
+            <li>Positive Sign: Model is learning effectively</li>
+            <li>
+              Watch for: Potential overfitting if validation accuracy decreases while training accuracy rises
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 class="font-medium">Plateauing Accuracy</h4>
+          <ul class="list-disc pl-5 space-y-1">
+            <li>If early: Learning rate may be too low</li>
+            <li>If late: Model may have reached optimal performance</li>
+            <li>Try increasing learning rate or model complexity</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h3 class="text-lg font-semibold mb-2 text-gray-700">Loss Patterns</h3>
+
+      <div class="space-y-4 text-gray-600">
+        <div>
+          <h4 class="font-medium">Rising Loss</h4>
+          <ul class="list-disc pl-5 space-y-1">
+            <li>Sudden spikes: Learning rate too high</li>
+            <li>Gradual increase: Possible overfitting</li>
+            <li>Action: Lower learning rate or add regularization</li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 class="font-medium">Flat Loss</h4>
+          <ul class="list-disc pl-5 space-y-1">
+            <li>From start: Learning rate too low</li>
+            <li>After progress: Model may have converged</li>
+            <li>Try increasing learning rate or adjusting architecture</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h3 class="text-lg font-semibold mb-2 text-gray-700">Common Issues</h3>
+
+      <div class="space-y-4 text-gray-600">
+        <div>
+          <h4 class="font-medium">Overfitting Signs</h4>
+          <ul class="list-disc pl-5 space-y-1">
+            <li>High training accuracy, low validation accuracy</li>
+            <li>Solutions: Add dropout, increase regularization, collect more data</li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 class="font-medium">Underfitting Signs</h4>
+          <ul class="list-disc pl-5 space-y-1">
+            <li>Both accuracies are low</li>
+            <li>Solutions: Increase model complexity, reduce regularization, train longer</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <div class="text-center mt-6">
+      <button
+        class="bg-slate-600 text-white px-4 py-2 rounded-lg hover:bg-slate-700"
+        phx-click={@handle_dismiss}
+      >
+        OK
+      </button>
+    </div>
+    """
+  end
+end
diff --git a/lib/excision_web/live/classifier_live/show.ex b/lib/excision_web/live/classifier_live/show.ex
@@ -86,6 +86,23 @@ defmodule ExcisionWeb.ClassifierLive.Show do
     end
   end
 
+  @impl true
+  def handle_event(
+        "toggle-help",
+        _params,
+        %{assigns: %{classifier: %{decision_site: decision_site} = classifier}} = socket
+      ) do
+    if socket.assigns.live_action == :help do
+      {:noreply,
+       push_patch(socket, to: ~p"/decision_sites/#{decision_site}/classifiers/#{classifier}")}
+    else
+      {:noreply,
+       push_patch(socket,
+         to: ~p"/decision_sites/#{decision_site}/classifiers/#{classifier}/show/help"
+       )}
+    end
+  end
+
   @impl true
   def handle_info({:status_updated, status}, socket) do
     {:noreply,
@@ -203,5 +220,6 @@ defmodule ExcisionWeb.ClassifierLive.Show do
   end
 
   defp page_title(:show, _), do: "Show Classifier"
+  defp page_title(:help, _), do: "Show Classifier"
   defp page_title(:edit, classifier), do: "Edit Classifier: #{classifier.name}"
 end
diff --git a/lib/excision_web/live/classifier_live/show.html.heex b/lib/excision_web/live/classifier_live/show.html.heex
@@ -1,6 +1,9 @@
 <.header>
   <%= @classifier.decision_site.name %> / <%= @classifier.name %>
   <:actions>
+    <.button phx-click="toggle-help">
+      <.icon name="hero-question-mark-circle" />
+    </.button>
     <.link
       patch={
         ~p"/decision_sites/#{@classifier.decision_site_id}/classifiers/#{@classifier}/show/edit"
@@ -133,3 +136,14 @@
     patch={~p"/decision_sites/#{@classifier.decision_site_id}/classifiers/#{@classifier}"}
   />
 </.modal>
+
+<.modal
+  :if={@live_action == :help}
+  id="classifier-modal"
+  show
+  on_cancel={
+    JS.patch(~p"/decision_sites/#{@classifier.decision_site_id}/classifiers/#{@classifier}")
+  }
+>
+  <ExcisionWeb.Live.ClassifierLive.HelpModal.component handle_dismiss={JS.push("toggle-help")} />
+</.modal>
diff --git a/lib/excision_web/live/decision_site_live/quickstart_modal.ex b/lib/excision_web/live/decision_site_live/quickstart_modal.ex
@@ -77,12 +77,12 @@ defmodule ExcisionWeb.Live.DecisionSiteLive.QuickstartModal do
     </p>
 
     <div class="text-center">
-      <a
+      <button
         class="bg-slate-600 text-white px-4 py-2 rounded-lg hover:bg-slate-700"
         phx-click={@handle_dismiss}
       >
         OK
-      </a>
+      </button>
     </div>
     """
   end

diff --git a/lib/excision_web/router.ex b/lib/excision_web/router.ex
@@ -40,6 +40,7 @@ defmodule ExcisionWeb.Router do
           live "/classifiers/:id/edit", ClassifierLive.Index, :edit
 
           live "/classifiers/:id", ClassifierLive.Show, :show
+          live "/classifiers/:id/show/help", ClassifierLive.Show, :help
           live "/classifiers/:id/show/edit", ClassifierLive.Show, :edit
 
           live "/classifiers/:classifier_id/decisions", DecisionLive.Index, :index

diff --git a/priv/static/assets/app.css b/priv/static/assets/app.css
@@ -1102,6 +1102,10 @@ select {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -1306,6 +1310,10 @@ select {
   cursor: not-allowed;
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1375,6 +1383,18 @@ select {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1676,6 +1696,10 @@ select {
   padding-right: 1.5rem;
 }
 
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
 .text-left {
   text-align: left;
 }