Use a modal instead of an alert so the errors show up even on colab.

88d0f4b3 · comfyanonymous · d8af790f · 88d0f4b3
Commit 88d0f4b3 authored Jan 27, 2023 by comfyanonymous
Show whitespace changes
Inline Side-by-side

Showing with 69 additions and 1 deletion

webshit/index.html webshit/index.html +69 -1

No files found.
--- 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;
    }