updated UI/UX

app.py

@@ -47,20 +47,8 @@ if os.path.exists(".env"):
             os.environ[name] = value
 
 
-access_token = os.environ.get("HF_ACCESS_TOKEN")
-print("access_token from HF 1:", access_token)
-
-
-
-def query(payload, model_id, api_token):
-	headers = {"Authorization": f"Bearer {api_token}"}
-	API_URL = f"https://api-inference.huggingface.co/models/{model_id}"
-	response = requests.post(API_URL, headers=headers, json=payload)
-	return response.json()
-
-model_id = "stabilityai/stable-diffusion-2-inpainting"
-api_token = "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" # get yours at hf.co/settings/tokens
-data = query("The goal of life is [MASK].", model_id, api_token)
+# access_token = os.environ.get("HF_ACCESS_TOKEN")
+# print("access_token from HF 1:", access_token)
 
 try:
     abspath = os.path.abspath(__file__)
@@ -215,13 +203,21 @@ if args.auth is not None:
 
 model = {}
 
+# HF function for token
+# def get_token():
+#     token = "{access_token}"
+#     if os.path.exists(".token"):
+#         with open(".token", "r") as f:
+#             token = f.read()
+#             print("get_token called", token)
+#     token = os.environ.get("hftoken", token)
+#     return token
 
 def get_token():
-    token = "{access_token}"
+    token = ""
     if os.path.exists(".token"):
         with open(".token", "r") as f:
             token = f.read()
-            print("get_token called", token)
     token = os.environ.get("hftoken", token)
     return token
 
@@ -347,9 +343,9 @@ class StableDiffusionInpaint:
                 )
             else:
                 inpaint = StableDiffusionInpaintPipeline.from_pretrained(
-                    model_name, use_auth_token=access_token, vae=vae
+                    model_name, use_auth_token=token, vae=vae
                 )
-                print(f"access_token from HF:", access_token)
+                # print(f"access_token from HF:", access_token)
         if os.path.exists("./embeddings"):
             print("Note that StableDiffusionInpaintPipeline + embeddings is untested")
             for item in os.listdir("./embeddings"):
@@ -463,6 +459,10 @@ class StableDiffusionInpaint:
             init_image = Image.fromarray(img)
             mask_image = Image.fromarray(mask)
             # mask_image=mask_image.filter(ImageFilter.GaussianBlur(radius = 8))
+
+             # Cast input image and mask to float32
+        # init_image = init_image.convert("RGB").to(torch.float32)
+        # mask_image = mask_image.convert("L").to(torch.float32)
             if True:
                 images = inpaint_func(
                     prompt=prompt,
@@ -1012,7 +1012,7 @@ with blocks as demo:
         sd_prompt = gr.Textbox(
             label="Prompt", placeholder="input your prompt here!", lines=2
         )
-        with gr.Accordion("developer tools", open=False):
+        with gr.Accordion("machine learning tools", open=False):
             with gr.Row(elem_id="setup_row"):
                 with gr.Column(scale=4, min_width=350):
                     token = gr.Textbox(

index.html

@@ -8,7 +8,7 @@
 <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>
+<script defer src="https://cdn.jsdelivr.net/gh/stanleywalker1/capstone-studio-2@latest/js/toolbar6.js"></script>
 
 
 
@@ -52,108 +52,6 @@ html, body {
   height: 100vh;
   
 }
-
-#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%;
-  }
-}
-
-.generate-button {
-  background-color: #f1f1f1;
-  border: none;
-  color: #333;
-  padding: 10px 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
 #hamburger-menu {
   position: fixed;
   top: 10px;
@@ -190,44 +88,33 @@ html, body {
   z-index: 1;
 }
 
-.fa-bars {
+.eye-icon {
   position: relative;
   display: inline-block;
   width: 24px;
-  height: 2px;
-  background-color: currentColor;
-  transition: background-color 0.3s ease;
+  height: 12px;
+  background-color: transparent;
 }
 
-.fa-bars::before,
-.fa-bars::after {
+.eye-icon::before,
+.eye-icon::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 {
+  width: 8px;
+  height: 8px;
   background-color: transparent;
+  border: 2px solid black;
+  border-radius: 50%;
 }
 
-.open .fa-bars::before {
-  transform: translateY(6px) rotate(45deg);
+.eye-icon::before {
+  left: 4px;
+  top: 2px;
 }
 
-.open .fa-bars::after {
-  transform: translateY(-6px) rotate(-45deg);
+.eye-icon::after {
+  right: 4px;
+  top: 2px;
 }
 
 @keyframes gradient-animation {
@@ -261,7 +148,7 @@ html, body {
 <body>
     <div>
     <div id="hamburger-menu">
-        <i class="fa-solid fa-bars"></i>
+        <i class="fa fa-eye" aria-hidden="true"></i>
     </div>
     <button type="button" class="control" id="export">Export</button>
     <button type="button" class="control" id="outpaint">Outpaint</button>
@@ -317,19 +204,6 @@ html, body {
 
     // alert("starting js");
 
-    function toggleToolbar() {
-    console.log("Hamburger menu button clicked");
-    const toolbar = document.getElementById("toolbar");
-    const hamburgerMenu = document.getElementById("hamburger-menu");
-    if (toolbar.style.display === "none" || toolbar.style.display === "") {
-        toolbar.style.display = "block";
-        hamburgerMenu.classList.add("open");
-    } else {
-        toolbar.style.display = "none";
-        hamburgerMenu.classList.remove("open");
-    }
-    }
-
     function aws(name, x, y) {
         return `coming from javascript ${name} ${x} ${y}`;
     }
@@ -352,7 +226,7 @@ html, body {
     const fireapp = initializeApp(firebaseConfig);
     function uploadImageToFirebase(base64_str, time_str) {
     return new Promise((resolve, reject) => {
-        alert("starting to upload");
+        //alert("starting to upload");
         const atob = (str) => {
             return window.atob(str);
         };
@@ -370,7 +244,7 @@ html, body {
         const storageRef = firebase.storage().ref(`images/${time_str}.png`);
         const uploadTask = storageRef.put(blob);
 
-        alert("sucessful upload to firebae");
+        alert("saved to cloud");
         // Replace the successful upload handler with this:
         uploadTask.on("state_changed", (snapshot) => {
             // Handle the progress of the upload
@@ -391,6 +265,7 @@ html, body {
     });
 }
 
+// UI patch, aim to remove this and replace all elements with pure Gradio
 function overrideW2uiStyles() {
         const toolbar = document.querySelector(".w2ui-toolbar");
 
@@ -399,7 +274,9 @@ function overrideW2uiStyles() {
         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";
@@ -407,10 +284,13 @@ function overrideW2uiStyles() {
         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";
@@ -425,7 +305,7 @@ function overrideW2uiStyles() {
             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");
         
@@ -508,14 +388,19 @@ function overrideW2uiStyles() {
         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");
+
+        const acceptNestedText = acceptButtonElement.querySelector(".w2ui-tb-button.disabled.hidden div.w2ui-tb-text");
+        
         if (!acceptButtonElement) {
             setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
             return;
         }
+
+        if (!acceptNestedText) {
+            setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
+            return;
+        }
         acceptButtonElement.style.height = "45px";
         acceptButtonElement.style.width = "100px";
         acceptButtonElement.style.backgroundColor = "rgb(31, 41, 55)";
@@ -528,16 +413,23 @@ function overrideW2uiStyles() {
         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
+
+
+
+        acceptNestedText.style.color = "rgb(255, 255, 255)";
+        acceptNestedText.style.marginLeft = "0";
         const cancelButtonElement = document.getElementById("tb_toolbar_item_cancel");
         if (!cancelButtonElement) {
             setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
             return;
         }
+
+        const cancelNestedText = cancelButtonElement.querySelector("div.w2ui-tb-text");
+        
+        if (!cancelNestedText) {
+            setTimeout(overrideW2uiStyles, 200); // Check again after 200ms
+            return;
+        }
         cancelButtonElement.style.height = "45px";
         cancelButtonElement.style.width = "100px";
         cancelButtonElement.style.backgroundColor = "rgb(31, 41, 55)";
@@ -550,14 +442,17 @@ function overrideW2uiStyles() {
         cancelButtonElement.style.display = "flex";
         cancelButtonElement.style.alignItems = "center";
         cancelButtonElement.style.justifyContent = "center";
+
+        cancelNestedText.style.color = "rgb(255, 255, 255)";
+        cancelNestedText.style.marginLeft = "0";
+
     }
 
         // Execute style function to start checking
         overrideW2uiStyles();
     
 //window.addEventListener("applyCustomStyles", overrideW2uiStyles);
-document.getElementById("hamburger-menu").addEventListener("click", toggleToolbar);
-  alert("js loaded");
+  // alert("js loaded");
 </script>
 
 <py-env>
@@ -694,7 +589,7 @@ history = History()
 
 base_lst = [None]
 async def draw_canvas() -> None:
-    alert("draw_canvas called")
+    # alert("draw_canvas called")
     width=1024
     height=700
     canvas=InfCanvas(1024,700)
@@ -725,7 +620,7 @@ async def draw_canvas() -> None:
 from PIL import ImageOps
 
 async def draw_canvas_func(event):
-    alert("draw_canvas gradio called")
+    # alert("draw_canvas gradio called")
 
     database_url = "https://nyucapstone-7c22c-default-rtdb.firebaseio.com"
     image_data, latest_image_name = await fetch_latest_image_url(database_url)
@@ -750,7 +645,8 @@ async def draw_canvas_func(event):
     # Set the canvas dimensions to match the desired display dimensions
     width = display_width
     height = display_height
-    selection_size = min(width, height) // 2
+    # selection_size = min(width, height) // 2
+    selection_size = int(min(img_width, img_height) * 0.25)
 
     document.querySelector("#container").style.width = f"{width}px"
     document.querySelector("#container").style.height = f"{height}px"
@@ -776,13 +672,13 @@ async def draw_canvas_func(event):
 
     base_lst[0] = canvas
 
-    alert("made it to end of draw_canvas gradio")
+    # alert("made it to end of draw_canvas gradio")
 
 
 
 # original draw_canvas
 async def test_canvas_func(event):
-    alert("draw_canvas gradio called")
+    # alert("draw_canvas gradio called")
     try:
         app=parent.document.querySelector("gradio-app")
         if app.shadowRoot:
@@ -836,7 +732,7 @@ async def test_canvas_func(event):
 
     base_lst[0]=canvas
 
-    alert("made it to end of draw_canvas gradio")
+    # alert("made it to end of draw_canvas gradio")
     
 
 
@@ -1125,6 +1021,7 @@ async def message_func(event):
             await history_undo_func(event)
         elif event.data[1]=="history":
             await history_setup_func(event)
+        js.overrideW2uiStyles()
     elif event.data[0]=="sync":
         await sync_func(event)
     elif event.data[0]=="load":