From 88d0f4b397cb03a007a87ef1459bc0b3ce89902a Mon Sep 17 00:00:00 2001
From: comfyanonymous <comfyanonymous@protonmail.com>
Date: Fri, 27 Jan 2023 22:24:37 -0500
Subject: [PATCH] Use a modal instead of an alert so the errors show up even on
 colab.

---
 webshit/index.html | 70 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)
diff --git a/webshit/index.html b/webshit/index.html
index 489a2c1a..55321322 100644
--- a/webshit/index.html
+++ b/webshit/index.html
@@ -4,6 +4,54 @@
 	<script type="text/javascript" src="litegraph.core.js"></script>
 </head>
 <body style='width:100%; height:100%'>
+<style>
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 50%; /* Center the modal horizontally */
+    top: 50%; /* Center the modal vertically */
+    transform: translate(-50%, -50%); /* Use this to center the modal */
+    width: 50%; /* Set a width for the modal */
+    height: auto; /* Set a height for the modal */
+    padding: 30px;
+    background-color: #ff0000; /* Modal background */
+    box-shadow: 0px 0px 20px #888888;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.close {
+    color: #aaaaaa;
+    font-size: 24px; /* Decreased font-size */
+    font-weight: bold;
+    position: absolute;
+    bottom: 10px; /* move the close button up a bit */
+    left: 50%; /* center the close button horizontally */
+    transform: translateX(-50%); /* use this to center the close button horizontally */
+    width: 100%;
+    text-align: center; /* center the text inside the button */
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+#modal-text {
+    white-space: pre-line; /* This will respect line breaks */
+    margin-bottom: 20px; /* Add some margin between the text and the close button*/
+}
+</style>
+<div id="myModal" class="modal">
+  <div class="modal-content">
+    <p id="modal-text"></p>
+    <span class="close">CLOSE</span>
+  </div>
+</div>
+
 <canvas id='mycanvas' width='1000' height='1000' style='width: 100%; height: 100%;'></canvas>
 <script>
 var graph = new LGraph();
@@ -266,11 +314,31 @@ function graphToPrompt() {
     return output;
 }
 
+function showModal(text) {
+    var modal = document.getElementById("myModal");
+    var modalText = document.getElementById("modal-text");
+    modalText.innerHTML = text;
+    modal.style.display = "block";
+}
+
+function closeModal() {
+    var modal = document.getElementById("myModal");
+    modal.style.display = "none";
+}
+
+var closeBtn = document.getElementsByClassName("close")[0];
+    closeBtn.onclick = closeModal;
+    window.onclick = function(event) {
+    if (event.target == modal) {
+        closeModal();
+    }
+}
+
 
 function promptPosted(data)
 {
     if (data.status == 400) {
-        data.text().then(dt => alert(dt));
+        data.text().then(dt => showModal(dt));
         return;
     }
 
