Fix wheel

app.py

@@ -109,15 +109,7 @@ except Exception as e:
 PAINT_SELECTION = "✥"
 IMAGE_SELECTION = "🖼️"
 BRUSH_SELECTION = "🖌️"
-blocks = gr.Blocks(
-    title="StableDiffusion-Infinity",
-    css="""
-.tabs {
-margin-top: 0rem;
-margin-bottom: 0rem;
-}
-""",
-)
+
 model = {}
 
 
@@ -508,13 +500,24 @@ function (x)
 proceed_button_js = load_js("proceed")
 setup_button_js = load_js("setup")
 
+blocks = gr.Blocks(
+    title="StableDiffusion-Infinity",
+    css="""
+.tabs {
+margin-top: 0rem;
+margin-bottom: 0rem;
+}
+#markdown {
+min-height: 0rem;
+}
+""",
+)
 with blocks as demo:
     # title
     title = gr.Markdown(
         """
     **stablediffusion-infinity**: Outpainting with Stable Diffusion on an infinite canvas: [https://github.com/lkwq007/stablediffusion-infinity](https://github.com/lkwq007/stablediffusion-infinity)
-    """
-    )
+    """, elem_id="markdown")
     # frame
     frame = gr.HTML(test(2), visible=RUN_IN_SPACE)
     # setup

canvas.py

@@ -293,6 +293,7 @@ class InfCanvas:
             self.mouse_pos[0] = x
             self.mouse_pos[1] = y
             console.log(to_js(self.mouse_pos))
+            event.preventDefault()
             if event.deltaY>10:
                 window.postMessage(to_js(["click","zoom_out", self.mouse_pos[0], self.mouse_pos[1]]),"*")
             elif event.deltaY<-10:

index.html

@@ -279,7 +279,7 @@ async def zoom_in_func(event):
         else:
             base.update_scale(scale)
         scale=base.scale
-        update_scale(round(100/scale))
+        update_scale(f"{base.width}x{base.height} ({round(100/scale)}%)")
 
 async def zoom_out_func(event):
     base=base_lst[0]
@@ -292,7 +292,7 @@ async def zoom_out_func(event):
         else:
             base.update_scale(scale)
         scale=base.scale
-        update_scale(round(100/scale))
+        update_scale(f"{base.width}x{base.height} ({round(100/scale)}%)")
 
 async def sync_func(event):
     base=base_lst[0]

js/toolbar.js

@@ -276,7 +276,7 @@ window.update_eraser=function(val,max_val){
   w2ui.toolbar.refresh();
 }
 window.update_scale=function(val){
-  w2ui.toolbar.scale_value=`${val}%`;
+  w2ui.toolbar.scale_value=`${val}`;
   w2ui.toolbar.refresh();
 }
 window.enable_result_lst=function(){
@@ -314,11 +314,17 @@ window.setup_overlay=function(width,height)
     if(window.overlay)
     {
         window.overlay.setDimensions({width:width,height:height});
+        let app=parent.document.querySelector("gradio-app");
+        app=app.shadowRoot??app;
+        app.querySelector("#sdinfframe").style.height=39+Number(height)+"px";
     }
     else
     {
         canvas=new fabric.Canvas("overlay_canvas");
         canvas.setDimensions({width:width,height:height});
+        let app=parent.document.querySelector("gradio-app");
+        app=app.shadowRoot??app;
+        app.querySelector("#sdinfframe").style.height=39+Number(height)+"px";
         canvas.freeDrawingBrush = new fabric.EraserBrush(canvas);
         canvas.on("object:scaling", onObjectScaled);
         canvas.on("object:moving", onObjectMoved);