Spaces:

stanno
/

capstone

Runtime error

App Files Files Community

stanley commited on May 10, 2023

Commit

e27bb44

1 Parent(s): 0589bd5

temp UI/UX update

Browse files

Files changed (2) hide show

app.py +5 -2
index.html +359 -63

app.py CHANGED Viewed

@@ -1233,9 +1233,12 @@ except:
     pass
 if RUN_IN_SPACE:
-    demo.launch(share=True)
 elif args.debug:
     launch_kwargs["server_name"] = "0.0.0.0"
     demo.queue().launch(**launch_kwargs)
 else:
-    demo.queue().launch(**launch_kwargs)

     pass
 if RUN_IN_SPACE:
+    demo.launch()
 elif args.debug:
     launch_kwargs["server_name"] = "0.0.0.0"
     demo.queue().launch(**launch_kwargs)
+    #  demo.queue().launch(share=True)
 else:
+    demo.queue().launch(**launch_kwargs)
+    #  demo.queue().launch(share=True)

index.html CHANGED Viewed

@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>Stablediffusion Infinity</title>
 <meta charset="utf-8">
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/lkwq007/stablediffusion-infinity@v0.1.2/css/w2ui.min.css">
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lkwq007/stablediffusion-infinity@v0.1.2/js/w2ui.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
-<script src="https://cdn.jsdelivr.net/gh/lkwq007/stablediffusion-infinity@v0.1.2/js/fabric.min.js"></script>
-<script defer src="https://cdn.jsdelivr.net/gh/lkwq007/stablediffusion-infinity@v0.1.2/js/toolbar.js"></script>
 <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
 <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
@@ -42,11 +45,12 @@ html, body {
 }
 .control {
   display: none;
 }
 #outer_container {
   width: 100%;
   height: 100vh;
-  overflow: auto;
 }
 #hamburger-menu {
@@ -135,11 +139,6 @@ html, body {
     background-position: 0% 50%;
   }
 }
-#toolbar {
-  display: none;
-}
 .generate-button {
   background-color: #f1f1f1;
@@ -155,6 +154,104 @@ html, body {
   border-radius: 4px;
 }
@@ -162,55 +259,57 @@ html, body {
 </head>
 <body>
-<div>
-<button type="button" class="control" id="export">Export</button>
-<button type="button" class="control" id="undo">Undo</button>
-<button type="button" class="control" id="commit">Commit</button>
-<button type="button" class="control" id="transfer">Transfer</button>
-<button type="button" class="control" id="upload">Upload</button>
-<button type="button" class="control" id="draw">Draw</button>
-<input type="text" id="mode" value="selection" class="control">
-<input type="text" id="setup" value="0" class="control">
-<input type="text" id="upload_content" value="0" class="control">
-<textarea rows="1" id="selbuffer" name="selbuffer" class="control"></textarea>
-<fieldset class="control">
     <div>
-      <input type="radio" id="mode0" name="mode" value="0" checked>
-      <label for="mode0">SelBox</label>
     </div>
-    <div>
-      <input type="radio" id="mode1" name="mode" value="1">
-      <label for="mode1">Image</label>
     </div>
-    <div>
-      <input type="radio" id="mode2" name="mode" value="2">
-      <label for="mode2">Brush</label>
     </div>
-</fieldset>
-</div>
-<div id="hamburger-menu">
-    <i class="fa-solid fa-bars"></i>
-  </div>
-  <button type="button"id="outpaint">Outpaint</button>
-<div id = "outer_container">
-<div style="position: relative;">
     <div id="toolbar" style></div>
-</div>
-<div id = "container">
-  <canvas id = "canvas0"></canvas>
-  <canvas id = "canvas1"></canvas>
-  <canvas id = "canvas2"></canvas>
-  <canvas id = "canvas3"></canvas>
-  <canvas id = "canvas4"></canvas>
-  <div id="overlay_container" style="pointer-events: none">
-    <canvas id = "overlay_canvas" width="1" height="1"></canvas>
-  </div>
-</div>
-<input type="file" name="file" id="upload_file" accept="image/*" hidden>
-<input type="file" name="state" id="upload_state" accept=".sdinf" hidden>
-</div>
 </div>
@@ -218,7 +317,11 @@ html, body {
-    // alert("starting js");
         function toggleToolbar() {
         console.log("Hamburger menu button clicked");
@@ -288,7 +391,7 @@ html, body {
         const uploadTask = storageRef.put(blob);
-        alert("sucessful upload to firebase");
         // Replace the successful upload handler with this:
         uploadTask.on("state_changed", (snapshot) => {
             // Handle the progress of the upload
@@ -308,10 +411,187 @@ html, body {
         });
     });
 }
 document.getElementById("hamburger-menu").addEventListener("click", toggleToolbar);
-  // alert("js loaded");
 </script>
 <py-env>
@@ -355,11 +635,15 @@ from js import (
     uploadImageToFirebase,
     firebase,
     aws,
-    fetch
 )
 answer = aws("hello", 1, 2)
 console.log(answer)
 #addPhoto("demo")
 # async def get_latest_image_from_firebase():
@@ -444,7 +728,7 @@ history = History()
 base_lst = [None]
 async def draw_canvas() -> None:
-    #  alert("draw_canvas called")
     width=1024
     height=700
     canvas=InfCanvas(1024,700)
@@ -470,7 +754,7 @@ async def draw_canvas() -> None:
 async def draw_canvas_func(event):
-    # alert("draw_canvas gradio called")
     try:
         app=parent.document.querySelector("gradio-app")
         if app.shadowRoot:
@@ -526,7 +810,8 @@ async def draw_canvas_func(event):
     base_lst[0]=canvas
-    # alert("made it to end of draw_canvas gradio")
 import js
@@ -550,6 +835,7 @@ async def export_func(event):
     link.href = "data:image/png;base64," + base64_str
     link.click()
     console.log(f"Canvas saved to {filename}.png")
 img_candidate_lst=[None,0]
@@ -576,6 +862,9 @@ async def outpaint_func(event):
     arr=base.base64_to_numpy(lst[idx%len(lst)])
     base.fill_selection(arr)
     base.draw_selection_box()
 async def undo_func(event):
     base=base_lst[0]
@@ -603,6 +892,7 @@ async def commit_func(event):
     # Call the JavaScript function to upload the image to Firebase storage
     await js.uploadImageToFirebase(base64_str, time_str)
 async def history_undo_func(event):
     base=base_lst[0]
@@ -643,6 +933,7 @@ async def transfer_func(event):
         app=app.shadowRoot
     app.querySelector("#input textarea").value=sel_buffer_str
     app.querySelector("#proceed").click()
 async def upload_func(event):
     base=base_lst[0]
@@ -722,6 +1013,7 @@ async def zoom_in_func(event):
             base.update_scale(scale)
         scale=base.scale
         update_scale(f"{base.width}x{base.height} ({round(100/scale)}%)")
 async def zoom_out_func(event):
     base=base_lst[0]
@@ -735,11 +1027,14 @@ async def zoom_out_func(event):
             base.update_scale(scale)
         scale=base.scale
         update_scale(f"{base.width}x{base.height} ({round(100/scale)}%)")
 async def sync_func(event):
     base=base_lst[0]
     base.sync_to_buffer()
     base.canvas[2].clear()
 async def eraser_size_func(event):
     base=base_lst[0]
@@ -812,6 +1107,7 @@ async def message_func(event):
         await upload_func(event)
     elif event.data[0]=="outpaint":
         await outpaint_func(event)
     elif event.data[0]=="mode":
         if event.data[1]!="selection":
             await sync_func(event)

 <!DOCTYPE html>
 <html>
 <head>
+<title>stanley capstone</title>
 <meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/stanleywalker1/capstone-studio-2@main/css/w2ui.min.css">
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/stanleywalker1/capstone-studio-2@main/js/w2ui.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
+<script src="https://cdn.jsdelivr.net/gh/stanleywalker1/capstone-studio-2@main/js/fabric.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/gh/stanleywalker1/capstone-studio-2@latest/js/toolbar5.js"></script>
 <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
 <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
 }
 .control {
   display: none;
+  background-color: aliceblue;
 }
 #outer_container {
   width: 100%;
   height: 100vh;
 }
 #hamburger-menu {
     background-position: 0% 50%;
   }
 }
 .generate-button {
   background-color: #f1f1f1;
   border-radius: 4px;
 }
+#hamburger-menu {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  width: 50px;
+  height: 50px;
+  background-color: #f1f1f1;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 1000;
+  overflow: hidden;
+}
+#hamburger-menu::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background-image: radial-gradient(circle, #00ff00, #00ffff, #ff00ff, #ff0000, #ffff00, #00ff00);
+  background-size: 300% 300%;
+  animation: gradient-animation 6s linear infinite;
+  z-index: -1;
+}
+#hamburger-menu i {
+  font-size: 24px;
+  position: relative;
+  z-index: 1;
+}
+.fa-bars {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 2px;
+  background-color: currentColor;
+  transition: background-color 0.3s ease;
+}
+.fa-bars::before,
+.fa-bars::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: currentColor;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.fa-bars::before {
+  top: -6px;
+}
+.fa-bars::after {
+  bottom: -6px;
+}
+.open .fa-bars {
+  background-color: transparent;
+}
+.open .fa-bars::before {
+  transform: translateY(6px) rotate(45deg);
+}
+.open .fa-bars::after {
+  transform: translateY(-6px) rotate(-45deg);
+}
+@keyframes gradient-animation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+#toolbar {
+    display: block;
+    height: 200px;
+    background: #0C0F19;
+}
+.w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button-hover {
+    background-color: #713870; /* Change this to the desired hover background color */
+}
 </head>
 <body>
     <div>
+    <div id="hamburger-menu">
+        <i class="fa-solid fa-bars"></i>
     </div>
+    <button type="button" class="control" id="export">Export</button>
+    <button type="button" class="control" id="outpaint">Outpaint</button>
+    <button type="button" class="control" id="undo">Undo</button>
+    <button type="button" class="control" id="commit">Commit</button>
+    <button type="button" class="control" id="transfer">Transfer</button>
+    <button type="button" class="control" id="upload">Upload</button>
+    <button type="button" class="control" id="draw">Draw</button>
+    <input type="text" id="mode" value="selection" class="control">
+    <input type="text" id="setup" value="0" class="control">
+    <input type="text" id="upload_content" value="0" class="control">
+    <textarea rows="1" id="selbuffer" name="selbuffer" class="control"></textarea>
+    <fieldset class="control">
+        <div>
+            <input type="radio" id="mode0" name="mode" value="0" checked>
+            <label for="mode0">SelBox</label>
+        </div>
+        <div>
+            <input type="radio" id="mode1" name="mode" value="1">
+            <label for="mode1">Image</label>
+        </div>
+        <div>
+            <input type="radio" id="mode2" name="mode" value="2">
+            <label for="mode2">Brush</label>
+        </div>
+    </fieldset>
     </div>
+    <div id = "outer_container">
+    <div id = "container">
+        <canvas id = "canvas0"></canvas>
+        <canvas id = "canvas1"></canvas>
+        <canvas id = "canvas2"></canvas>
+        <canvas id = "canvas3"></canvas>
+        <canvas id = "canvas4"></canvas>
+        <div id="overlay_container" style="pointer-events: none">
+        <canvas id = "overlay_canvas" width="1" height="1"></canvas>
+        </div>
     </div>
+    <input type="file" name="file" id="upload_file" accept="image/*" hidden>
+    <input type="file" name="state" id="upload_state" accept=".sdinf" hidden>
+    <div style="position: relative;">
     <div id="toolbar" style></div>
+<!--
+    <div id="toolbar_container">
+        <div id="toolbar" style></div>
+      </div> -->
+    </div>
 </div>
+    alert("starting js");
         function toggleToolbar() {
         console.log("Hamburger menu button clicked");
         const uploadTask = storageRef.put(blob);
+        alert("sucessful upload to firebae");
         // Replace the successful upload handler with this:
         uploadTask.on("state_changed", (snapshot) => {
             // Handle the progress of the upload
         });
     });
 }
+function overrideW2uiStyles() {
+        const toolbar = document.querySelector(".w2ui-toolbar");
+        if (!toolbar) {
+        setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
+        return;
+        }
+        toolbar.style.backgroundColor = "#0C0F19";
+        const toolbarButtons = document.querySelectorAll(".w2ui-toolbar .w2ui-scroll-wrapper .w2ui-tb-button");
+        toolbarButtons.forEach(button => {
+        button.style.border = "4px solid rgb(67, 55, 201)";
+        button.style.backgroundColor = "#1F2937";
+        button.style.color = "#ffffff";
+        button.style.fontSize = "16px";
+        button.style.fontWeight = 600;
+        const nestedText = button.querySelector("div.w2ui-tb-text:nth-child(1)");
+            if (nestedText) {
+                nestedText.style.color = "rgb(255, 255, 255)";
+            }
+        // Add event listeners for mouseover and mouseout events
+        button.addEventListener("mouseenter", () => {
+            button.style.backgroundColor = "#4B5563";
+        });
+        button.addEventListener("mouseleave", () => {
+            button.style.backgroundColor = "#1F2937";
+        });
+        });
+        const outpaintElement = document.getElementById("tb_toolbar_item_outpaint");
+        if (!outpaintElement) {
+            setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
+            return;
+        }
+        const nestedDiv1 = outpaintElement.querySelector("#tb_toolbar_item_outpaint > div:nth-child(2)");
+        const nestedDiv2 = outpaintElement.querySelector("div.w2ui-tb-icon span.fa-solid.fa-wand-magic-sparkles");
+        if (nestedDiv1) {
+        nestedDiv1.style.color = "white";
+        }
+        if (nestedDiv2) {
+        nestedDiv2.style.fontSize = "30px";
+        }
+        outpaintElement.style.height = "70px";
+        outpaintElement.style.border = "4px solid rgb(67, 55, 201)";
+        outpaintElement.style.backgroundColor = "rgb(31, 41, 55)";
+        outpaintElement.style.color = "rgb(255, 255, 255)";
+        outpaintElement.style.fontSize = "16px";
+        outpaintElement.style.fontWeight = "600";
+        outpaintElement.style.width = "200px";
+        outpaintElement.style.lineHeight = "50px";
+        outpaintElement.style.textAlign = "center";
+        outpaintElement.style.borderRadius = "40px";
+        outpaintElement.style.display = "flex";
+        outpaintElement.style.alignItems = "center";
+        outpaintElement.style.justifyContent = "center";
+        const devButtonElement = document.getElementById("tb_toolbar_item_developer_options");
+        if (!devButtonElement) {
+            setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
+            return;
+        }
+        devButtonElement.style.height = "40px";
+        devButtonElement.style.backgroundColor = "rgb(31, 41, 55)";
+        devButtonElement.style.color = "rgb(255, 255, 255)";
+        devButtonElement.style.fontSize = "16px";
+        devButtonElement.style.fontWeight = "600";
+        devButtonElement.style.width = "200px";
+        devButtonElement.style.lineHeight = "50px";
+        devButtonElement.style.textAlign = "center";
+        devButtonElement.style.borderRadius = "40px";
+        devButtonElement.style.display = "flex";
+        devButtonElement.style.alignItems = "center";
+        devButtonElement.style.justifyContent = "center";
+        const zoomOutButtonElement = document.getElementById("tb_toolbar_item_zoom_out");
+        if (!zoomOutButtonElement) {
+            setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
+            return;
+        }
+        zoomOutButtonElement.style.height = "45px";
+        zoomOutButtonElement.style.width = "45px";
+        zoomOutButtonElement.style.backgroundColor = "rgb(31, 41, 55)";
+        zoomOutButtonElement.style.color = "rgb(255, 255, 255)";
+        zoomOutButtonElement.style.fontSize = "16px";
+        zoomOutButtonElement.style.fontWeight = "600";
+        zoomOutButtonElement.style.lineHeight = "50px";
+        zoomOutButtonElement.style.textAlign = "center";
+        zoomOutButtonElement.style.borderRadius = "40px";
+        zoomOutButtonElement.style.display = "flex";
+        zoomOutButtonElement.style.alignItems = "center";
+        zoomOutButtonElement.style.justifyContent = "center";
+        const zoomInButtonElement = document.getElementById("tb_toolbar_item_zoom_in");
+        if (!zoomInButtonElement) {
+            setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
+            return;
+        }
+        zoomInButtonElement.style.height = "45px";
+        zoomInButtonElement.style.width = "45px";
+        zoomInButtonElement.style.backgroundColor = "rgb(31, 41, 55)";
+        zoomInButtonElement.style.color = "rgb(255, 255, 255)";
+        zoomInButtonElement.style.fontSize = "16px";
+        zoomInButtonElement.style.fontWeight = "600";
+        zoomInButtonElement.style.lineHeight = "50px";
+        zoomInButtonElement.style.textAlign = "center";
+        zoomInButtonElement.style.borderRadius = "40px";
+        zoomInButtonElement.style.display = "flex";
+        zoomInButtonElement.style.alignItems = "center";
+        zoomInButtonElement.style.justifyContent = "center";
+       // html body div#outer_container div div#toolbar.w2ui-reset.w2ui-toolbar div.w2ui-tb-line div.w2ui-scroll-wrapper.w2ui-eaction div#tb_toolbar_item_accept.w2ui-tb-button
+        // html body div#outer_container div div#toolbar.w2ui-reset.w2ui-toolbar div.w2ui-tb-line div.w2ui-scroll-wrapper.w2ui-eaction div#tb_toolbar_item_accept.w2ui-tb-button.disabled.hidden
+        const acceptButtonElement = document.getElementById("tb_toolbar_item_accept");
+        if (!acceptButtonElement) {
+            setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
+            return;
+        }
+        acceptButtonElement.style.height = "45px";
+        acceptButtonElement.style.width = "100px";
+        acceptButtonElement.style.backgroundColor = "rgb(31, 41, 55)";
+        acceptButtonElement.style.color = "rgb(255, 255, 255)";
+        acceptButtonElement.style.fontSize = "16px";
+        acceptButtonElement.style.fontWeight = "600";
+        acceptButtonElement.style.lineHeight = "50px";
+        acceptButtonElement.style.textAlign = "center";
+        acceptButtonElement.style.borderRadius = "40px";
+        acceptButtonElement.style.display = "flex";
+        acceptButtonElement.style.alignItems = "center";
+        acceptButtonElement.style.justifyContent = "center";
+        //html body div#outer_container div div#toolbar.w2ui-reset.w2ui-toolbar div.w2ui-tb-line div.w2ui-scroll-wrapper.w2ui-eaction div#tb_toolbar_item_cancel.w2ui-tb-button
+        //html body div#outer_container div div#toolbar.w2ui-reset.w2ui-toolbar div.w2ui-tb-line div.w2ui-scroll-wrapper.w2ui-eaction div#tb_toolbar_item_cancel.w2ui-tb-button.hidden
+        // #tb_toolbar_item_cancel
+        // html body div#outer_container div div#toolbar.w2ui-reset.w2ui-toolbar div.w2ui-tb-line div.w2ui-scroll-wrapper.w2ui-eaction div#tb_toolbar_item_cancel.w2ui-tb-button
+        const cancelButtonElement = document.getElementById("tb_toolbar_item_cancel");
+        if (!cancelButtonElement) {
+            setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
+            return;
+        }
+        cancelButtonElement.style.height = "45px";
+        cancelButtonElement.style.width = "100px";
+        cancelButtonElement.style.backgroundColor = "rgb(31, 41, 55)";
+        cancelButtonElement.style.color = "rgb(255, 255, 255)";
+        cancelButtonElement.style.fontSize = "16px";
+        cancelButtonElement.style.fontWeight = "600";
+        cancelButtonElement.style.lineHeight = "50px";
+        cancelButtonElement.style.textAlign = "center";
+        cancelButtonElement.style.borderRadius = "40px";
+        cancelButtonElement.style.display = "flex";
+        cancelButtonElement.style.alignItems = "center";
+        cancelButtonElement.style.justifyContent = "center";
+    }
+        // Execute style function to start checking
+        overrideW2uiStyles();
+//window.addEventListener("applyCustomStyles", overrideW2uiStyles);
 document.getElementById("hamburger-menu").addEventListener("click", toggleToolbar);
+  alert("js loaded");
 </script>
 <py-env>
     uploadImageToFirebase,
     firebase,
     aws,
+    fetch,
+    overrideW2uiStyles
 )
 answer = aws("hello", 1, 2)
 console.log(answer)
 #addPhoto("demo")
 # async def get_latest_image_from_firebase():
 base_lst = [None]
 async def draw_canvas() -> None:
+    alert("draw_canvas called")
     width=1024
     height=700
     canvas=InfCanvas(1024,700)
 async def draw_canvas_func(event):
+    alert("draw_canvas gradio called")
     try:
         app=parent.document.querySelector("gradio-app")
         if app.shadowRoot:
     base_lst[0]=canvas
+    alert("made it to end of draw_canvas gradio")
 import js
     link.href = "data:image/png;base64," + base64_str
     link.click()
     console.log(f"Canvas saved to {filename}.png")
 img_candidate_lst=[None,0]
     arr=base.base64_to_numpy(lst[idx%len(lst)])
     base.fill_selection(arr)
     base.draw_selection_box()
+    js.overrideW2uiStyles()
 async def undo_func(event):
     base=base_lst[0]
     # Call the JavaScript function to upload the image to Firebase storage
     await js.uploadImageToFirebase(base64_str, time_str)
 async def history_undo_func(event):
     base=base_lst[0]
         app=app.shadowRoot
     app.querySelector("#input textarea").value=sel_buffer_str
     app.querySelector("#proceed").click()
 async def upload_func(event):
     base=base_lst[0]
             base.update_scale(scale)
         scale=base.scale
         update_scale(f"{base.width}x{base.height} ({round(100/scale)}%)")
+        js.overrideW2uiStyles()
 async def zoom_out_func(event):
     base=base_lst[0]
             base.update_scale(scale)
         scale=base.scale
         update_scale(f"{base.width}x{base.height} ({round(100/scale)}%)")
+        js.overrideW2uiStyles()
 async def sync_func(event):
     base=base_lst[0]
     base.sync_to_buffer()
     base.canvas[2].clear()
+    js.overrideW2uiStyles()
 async def eraser_size_func(event):
     base=base_lst[0]
         await upload_func(event)
     elif event.data[0]=="outpaint":
         await outpaint_func(event)
+        js.overrideW2uiStyles()
     elif event.data[0]=="mode":
         if event.data[1]!="selection":
             await sync_func(event)