changed effect of uncertainty

Gradio_app.ipynb

@@ -2,14 +2,14 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 64,
+   "execution_count": 66,
    "metadata": {},
    "outputs": [
     {
      "name": "stdout",
      "output_type": "stream",
      "text": [
-      "Running on local URL:  http://127.0.0.1:7904\n",
+      "Running on local URL:  http://127.0.0.1:7906\n",
       "\n",
       "To create a public link, set `share=True` in `launch()`.\n"
      ]
@@ -17,7 +17,7 @@
     {
      "data": {
       "text/html": [
-       "<div><iframe src=\"http://127.0.0.1:7904/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
+       "<div><iframe src=\"http://127.0.0.1:7906/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
       ],
       "text/plain": [
        "<IPython.core.display.HTML object>"
@@ -30,7 +30,7 @@
      "data": {
       "text/plain": []
      },
-     "execution_count": 64,
+     "execution_count": 66,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -375,23 +375,13 @@
     "\n",
     "with gr.Blocks() as demo:\n",
     "    gr.HTML(\"\"\"<h1>PhaseHunter</h1>\n",
-    "<p>This app allows one to detect <mark style=\"background-color: red; color: white;\">P</mark> and <mark style=\"background-color: blue; color: white;\">S</mark> seismic phases along with \n",
-    "\n",
-    "<span style=\"font-size: 24px; font-weight: bold;\">\n",
-    "  <span style=\"color: #4c4c4c; text-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc;\">u</span>\n",
-    "  <span style=\"color: #808080; text-shadow: 1px 1px 0 #bbb, -1px -1px 0 #bbb, 1px -1px 0 #bbb, -1px 1px 0 #bbb;\">n</span>\n",
-    "  <span style=\"color: #b3b3b3; text-shadow: 1px 1px 0 #aaa, -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa;\">c</span>\n",
-    "  <span style=\"color: #d9d9d9; text-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc;\">e</span>\n",
-    "  <span style=\"color: #f2f2f2; text-shadow: 1px 1px 0 #eee, -1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee;\">r</span>\n",
-    "  <span style=\"color: #d9d9d9; text-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc;\">t</span>\n",
-    "  <span style=\"color: #b3b3b3; text-shadow: 1px 1px 0 #aaa, -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa;\">a</span>\n",
-    "  <span style=\"color: #808080; text-shadow: 1px 1px 0 #bbb, -1px -1px 0 #bbb, 1px -1px 0 #bbb, -1px 1px 0 #bbb;\">i</span>\n",
-    "  <span style=\"color: #4c4c4c; text-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc;\">n</span>\n",
-    "  <span style=\"color: #808080; text-shadow: 1px 1px 0 #bbb, -1px -1px 0 #bbb, 1px -1px 0 #bbb, -1px 1px 0 #bbb;\">t</span>\n",
-    "  <span style=\"color: #b3b3b3; text-shadow: 1px 1px 0 #aaa, -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa;\">y</span>\n",
-    "  \n",
-    "</span>\n",
-    " of the detection.</p>\n",
+    "<p>This app allows one to detect <mark style=\"background-color: red; color: white;\">P</mark> and <mark style=\"background-color: blue; color: white;\">S</mark> seismic phases along with <span style=\"background-image: linear-gradient(to right, #f12711, #f5af19); \n",
+    "               -webkit-background-clip: text;\n",
+    "               -webkit-text-fill-color: transparent;\n",
+    "               background-clip: text;\n",
+    "               font-size: 24px;\">\n",
+    "     uncertainty\n",
+    "  </span> of the detection.</p>\n",
     "<ol>\n",
     "  <li>By selecting one of the sample waveforms.</li>\n",
     "  <li>By uploading your own waveform.</li>\n",

app.py

@@ -22,6 +22,7 @@ from obspy.clients.fdsn.header import URL_MAPPINGS
 
 import matplotlib.pyplot as plt
 import matplotlib.dates as mdates
+from matplotlib.colors import LightSource
 
 from glob import glob
 
@@ -336,23 +337,13 @@ model.eval()
 
 with gr.Blocks() as demo:
     gr.HTML("""<h1>PhaseHunter</h1>
-<p>This app allows one to detect <mark style="background-color: red; color: white;">P</mark> and <mark style="background-color: blue; color: white;">S</mark> seismic phases along with 
-
-<span style="font-size: 24px; font-weight: bold;">
-  <span style="color: #4c4c4c; text-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc;">u</span>
-  <span style="color: #808080; text-shadow: 1px 1px 0 #bbb, -1px -1px 0 #bbb, 1px -1px 0 #bbb, -1px 1px 0 #bbb;">n</span>
-  <span style="color: #b3b3b3; text-shadow: 1px 1px 0 #aaa, -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa;">c</span>
-  <span style="color: #d9d9d9; text-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc;">e</span>
-  <span style="color: #f2f2f2; text-shadow: 1px 1px 0 #eee, -1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee;">r</span>
-  <span style="color: #d9d9d9; text-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc;">t</span>
-  <span style="color: #b3b3b3; text-shadow: 1px 1px 0 #aaa, -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa;">a</span>
-  <span style="color: #808080; text-shadow: 1px 1px 0 #bbb, -1px -1px 0 #bbb, 1px -1px 0 #bbb, -1px 1px 0 #bbb;">i</span>
-  <span style="color: #4c4c4c; text-shadow: 1px 1px 0 #ccc, -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc;">n</span>
-  <span style="color: #808080; text-shadow: 1px 1px 0 #bbb, -1px -1px 0 #bbb, 1px -1px 0 #bbb, -1px 1px 0 #bbb;">t</span>
-  <span style="color: #b3b3b3; text-shadow: 1px 1px 0 #aaa, -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa;">y</span>
-  
-</span>
- of the detection.</p>
+<p>This app allows one to detect <mark style="background-color: red; color: white;">P</mark> and <mark style="background-color: blue; color: white;">S</mark> seismic phases along with <span style="background-image: linear-gradient(to right, #f12711, #f5af19); 
+               -webkit-background-clip: text;
+               -webkit-text-fill-color: transparent;
+               background-clip: text;
+               font-size: 24px;">
+     uncertainty
+  </span> of the detection.</p>
 <ol>
   <li>By selecting one of the sample waveforms.</li>
   <li>By uploading your own waveform.</li>