diff --git a/qim3d/css/gradio.css b/qim3d/css/gradio.css
index 86b7b761f99a2a642267a55a3a48ce7283cd5065..9c4243299f44cf7fa0aa87d31244375b5e1810c7 100644
--- a/qim3d/css/gradio.css
+++ b/qim3d/css/gradio.css
@@ -58,14 +58,17 @@
--font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
--font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
--body-background-fill: var(--background-fill-primary);
- --body-text-color: var(--neutral-300); /*Headers*/
+ --body-text-color: var(--neutral-300);
+ /*Headers*/
--body-text-size: var(--text-md);
--body-text-weight: 400;
--embed-radius: var(--radius-lg);
--color-accent: var(--primary-500);
--color-accent-soft: var(--primary-50);
- --background-fill-primary: var(--neutral-900); /*File explorer background*/
- --background-fill-secondary: var(--neutral-500); /*Dropdown hover*/
+ --background-fill-primary: var(--neutral-900);
+ /*File explorer background*/
+ --background-fill-secondary: var(--neutral-500);
+ /*Dropdown hover*/
--border-color-accent: var(--primary-300);
--border-color-primary: var(--neutral-200);
--link-text-color: var(--secondary-600);
@@ -87,7 +90,8 @@
--block-label-border-color: var(--border-color-primary);
--block-label-border-width: 1px;
--block-label-shadow: var(--block-shadow);
- --block-label-text-color: var(--neutral-50); /*the small labels in corners*/
+ --block-label-text-color: var(--neutral-50);
+ /*the small labels in corners*/
--block-label-margin: 0;
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
--block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
@@ -125,8 +129,10 @@
--checkbox-border-color-selected: var(--secondary-600);
--checkbox-border-radius: var(--radius-sm);
--checkbox-border-width: var(--input-border-width);
- --checkbox-label-background-fill: var(--background-fill-primary);/*linear-gradient(to top, var(--neutral-50), white);*/
- --checkbox-label-background-fill-hover: var(--neutral-500);/*linear-gradient(to top, var(--neutral-100), white);*/
+ --checkbox-label-background-fill: var(--background-fill-primary);
+ /*linear-gradient(to top, var(--neutral-50), white);*/
+ --checkbox-label-background-fill-hover: var(--neutral-500);
+ /*linear-gradient(to top, var(--neutral-100), white);*/
--checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
--checkbox-label-border-color: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--checkbox-label-border-color);
@@ -626,15 +632,16 @@ div.svelte-1frtwj3 {
/* Annotation tool CSS */
-.annotation-tool .layer-wrap {
- display: none !important;
+.no-interpolation {
+ image-rendering: pixelated !important;
}
-.annotation-tool button[title="Image button"] {
- display: none !important;
+.annotation-tool {
+ image-rendering: pixelated !important;
}
-.annotation-tool:not(.no-img) button[title="Upload button"] {
+
+.annotation-tool:not(.no-img) .source-wrap {
display: none !important;
}
@@ -642,27 +649,17 @@ div.svelte-1frtwj3 {
display: none !important;
}
-.annotation-tool button[title="Color button"] {
- color: var(--block-label-text-color) !important;
- margin-inline-end: 32px !important;
-}
-
-.annotation-tool button[title="Color button"]::after {
- content: "Select mask";
-}
-
-.annotation-tool button[title="Size button"] {
- color: var(--block-label-text-color) !important;
+/* For backward and forward buttons in Annotation tool CSS */
+.annotation-tool .row-wrap {
+ justify-content: center !important;
}
+.annotation-tool .controls-wrap {
+ justify-content: center !important;
-.annotation-tool button[title="Size button"]::after {
- content: "Brush size";
-}
-
+ top: -8px !important;
+ left: 0px !important;
-.annotation-tool .row-wrap {
- justify-content: flex-start !important;
}
.annotation-tool .controls-wrap .small {
@@ -670,34 +667,13 @@ div.svelte-1frtwj3 {
height: 20px !important;
}
-.annotation-tool .controls-wrap {
- top: 0px !important;
- left: 0px !important;
-}
-
.annotation-tool .controls-wrap .padded {
padding: 8px !important;
border: 0px !important;
background-color: rgba(255, 255, 255, 0.8);
}
-.annotation-tool .stage-wrap {
- margin-top: 0px !important;
- margin-bottom: 16px !important;
-}
-
-.annotation-tool .svelte-b3dw9m {
- display: flex !important;
- visibility: visible !important;
- opacity: 1 !important;
-}
-
-.annotation-tool .bottom {
- bottom: 8px !important;
- left: 0px !important;
- position: absolute !important;
-}
-
+/*controls gr.File in Annotation tool CSS */
.annotation-tool .download {
min-width: 4rem !important;
width: 10%;
@@ -706,10 +682,6 @@ div.svelte-1frtwj3 {
}
.annotation-tool .stage-wrap canvas {
- border: 0px !important;
- max-width: 512px !important;
- max-height: 512px !important;
- height: 512px !important;
- width: fit-content !important;
-
-}
+ min-width: 512px !important;
+ max-height: 100% !important;
+}
\ No newline at end of file
diff --git a/qim3d/gui/annotation_tool.py b/qim3d/gui/annotation_tool.py
index b39e06a2c583d0de6712108afece78c6a5db4258..571f53cce62630d280935f4086f210fe972af7ca 100644
--- a/qim3d/gui/annotation_tool.py
+++ b/qim3d/gui/annotation_tool.py
@@ -116,7 +116,6 @@ class Interface:
with gr.Column(scale=6):
img_editor = gr.ImageEditor(
- # ! Temporary fix for drawing at wrong location https://github.com/gradio-app/gradio/pull/7959
value=(
{
"background": img,
@@ -133,20 +132,16 @@ class Interface:
interactive=True,
show_download_button=True,
container=False,
- transforms=[""],
+ transforms=["crop"],
elem_classes=custom_css,
+ layers=False,
)
with gr.Column(scale=1, min_width=256):
- with gr.Row():
- btn_update = gr.Button(
- value="Update", elem_classes="btn btn-html btn-run"
- )
-
with gr.Row():
overlay_img = gr.Image(
- show_download_button=False, show_label=False, visible=False
+ show_download_button=False, show_label=False, visible=False, elem_classes="no-interpolation"
)
with gr.Row():
masks_download = gr.File(
@@ -159,10 +154,9 @@ class Interface:
name_suffix = gr.Textbox(value=self.name_suffix, visible=False)
session = gr.State([])
- inputs = [img_editor]
operations = Operations()
# fmt: off
- btn_update.click(
+ img_editor.change(
fn=operations.start_session, inputs=[img_editor,temp_dir, name_suffix] , outputs=session).then(
fn=operations.preview, inputs=session, outputs=overlay_img).then(
fn=self.set_visible, inputs=None, outputs=overlay_img).then(
diff --git a/requirements.txt b/requirements.txt
index 30211e80501de6ae6e74d878cebaf520b2acdd41..b7508e720f85eb6623bcefa9cd20bae3ad451acf 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,5 +1,5 @@
albumentations>=1.3.1,
-gradio>=4.22.0,
+gradio>=4.27.0,
h5py>=3.9.0,
localthickness>=0.1.2,
matplotlib>=3.8.0,
diff --git a/setup.py b/setup.py
index 6beab77a07fa3e4eef59a066abab765c4ddcd830..34fa87fbd4c4f7d71f7c8406b604136300740c04 100644
--- a/setup.py
+++ b/setup.py
@@ -38,7 +38,7 @@ setup(
python_requires=">=3.10",
install_requires=[
"albumentations>=1.3.1",
- "gradio>=4.22.0",
+ "gradio>=4.27.0",
"h5py>=3.9.0",
"localthickness>=0.1.2",
"matplotlib>=3.8.0",