Skip to content
Snippets Groups Projects
Commit df2546da authored by s204159's avatar s204159 :sunglasses: Committed by fima
Browse files

Annotation tool update

parent ad8877b7
No related branches found
No related tags found
1 merge request!88Annotation tool update
...@@ -58,14 +58,17 @@ ...@@ -58,14 +58,17 @@
--font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif; --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
--font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace; --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
--body-background-fill: var(--background-fill-primary); --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-size: var(--text-md);
--body-text-weight: 400; --body-text-weight: 400;
--embed-radius: var(--radius-lg); --embed-radius: var(--radius-lg);
--color-accent: var(--primary-500); --color-accent: var(--primary-500);
--color-accent-soft: var(--primary-50); --color-accent-soft: var(--primary-50);
--background-fill-primary: var(--neutral-900); /*File explorer background*/ --background-fill-primary: var(--neutral-900);
--background-fill-secondary: var(--neutral-500); /*Dropdown hover*/ /*File explorer background*/
--background-fill-secondary: var(--neutral-500);
/*Dropdown hover*/
--border-color-accent: var(--primary-300); --border-color-accent: var(--primary-300);
--border-color-primary: var(--neutral-200); --border-color-primary: var(--neutral-200);
--link-text-color: var(--secondary-600); --link-text-color: var(--secondary-600);
...@@ -87,7 +90,8 @@ ...@@ -87,7 +90,8 @@
--block-label-border-color: var(--border-color-primary); --block-label-border-color: var(--border-color-primary);
--block-label-border-width: 1px; --block-label-border-width: 1px;
--block-label-shadow: var(--block-shadow); --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-margin: 0;
--block-label-padding: var(--spacing-sm) var(--spacing-lg); --block-label-padding: var(--spacing-sm) var(--spacing-lg);
--block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0; --block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
...@@ -125,8 +129,10 @@ ...@@ -125,8 +129,10 @@
--checkbox-border-color-selected: var(--secondary-600); --checkbox-border-color-selected: var(--secondary-600);
--checkbox-border-radius: var(--radius-sm); --checkbox-border-radius: var(--radius-sm);
--checkbox-border-width: var(--input-border-width); --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: var(--background-fill-primary);
--checkbox-label-background-fill-hover: var(--neutral-500);/*linear-gradient(to top, var(--neutral-100), white);*/ /*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-background-fill-selected: var(--checkbox-label-background-fill);
--checkbox-label-border-color: var(--border-color-primary); --checkbox-label-border-color: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--checkbox-label-border-color); --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
...@@ -626,15 +632,16 @@ div.svelte-1frtwj3 { ...@@ -626,15 +632,16 @@ div.svelte-1frtwj3 {
/* Annotation tool CSS */ /* Annotation tool CSS */
.annotation-tool .layer-wrap { .no-interpolation {
display: none !important; image-rendering: pixelated !important;
} }
.annotation-tool button[title="Image button"] { .annotation-tool {
display: none !important; image-rendering: pixelated !important;
} }
.annotation-tool:not(.no-img) button[title="Upload button"] {
.annotation-tool:not(.no-img) .source-wrap {
display: none !important; display: none !important;
} }
...@@ -642,27 +649,17 @@ div.svelte-1frtwj3 { ...@@ -642,27 +649,17 @@ div.svelte-1frtwj3 {
display: none !important; display: none !important;
} }
.annotation-tool button[title="Color button"] { /* For backward and forward buttons in Annotation tool CSS */
color: var(--block-label-text-color) !important; .annotation-tool .row-wrap {
margin-inline-end: 32px !important; justify-content: center !important;
}
.annotation-tool button[title="Color button"]::after {
content: "Select mask";
}
.annotation-tool button[title="Size button"] {
color: var(--block-label-text-color) !important;
} }
.annotation-tool .controls-wrap {
justify-content: center !important;
.annotation-tool button[title="Size button"]::after { top: -8px !important;
content: "Brush size"; left: 0px !important;
}
.annotation-tool .row-wrap {
justify-content: flex-start !important;
} }
.annotation-tool .controls-wrap .small { .annotation-tool .controls-wrap .small {
...@@ -670,34 +667,13 @@ div.svelte-1frtwj3 { ...@@ -670,34 +667,13 @@ div.svelte-1frtwj3 {
height: 20px !important; height: 20px !important;
} }
.annotation-tool .controls-wrap {
top: 0px !important;
left: 0px !important;
}
.annotation-tool .controls-wrap .padded { .annotation-tool .controls-wrap .padded {
padding: 8px !important; padding: 8px !important;
border: 0px !important; border: 0px !important;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
} }
.annotation-tool .stage-wrap { /*controls gr.File in Annotation tool CSS */
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;
}
.annotation-tool .download { .annotation-tool .download {
min-width: 4rem !important; min-width: 4rem !important;
width: 10%; width: 10%;
...@@ -706,10 +682,6 @@ div.svelte-1frtwj3 { ...@@ -706,10 +682,6 @@ div.svelte-1frtwj3 {
} }
.annotation-tool .stage-wrap canvas { .annotation-tool .stage-wrap canvas {
border: 0px !important; min-width: 512px !important;
max-width: 512px !important; max-height: 100% !important;
max-height: 512px !important;
height: 512px !important;
width: fit-content !important;
} }
\ No newline at end of file
...@@ -116,7 +116,6 @@ class Interface: ...@@ -116,7 +116,6 @@ class Interface:
with gr.Column(scale=6): with gr.Column(scale=6):
img_editor = gr.ImageEditor( img_editor = gr.ImageEditor(
# ! Temporary fix for drawing at wrong location https://github.com/gradio-app/gradio/pull/7959
value=( value=(
{ {
"background": img, "background": img,
...@@ -133,20 +132,16 @@ class Interface: ...@@ -133,20 +132,16 @@ class Interface:
interactive=True, interactive=True,
show_download_button=True, show_download_button=True,
container=False, container=False,
transforms=[""], transforms=["crop"],
elem_classes=custom_css, elem_classes=custom_css,
layers=False,
) )
with gr.Column(scale=1, min_width=256): 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(): with gr.Row():
overlay_img = gr.Image( 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(): with gr.Row():
masks_download = gr.File( masks_download = gr.File(
...@@ -159,10 +154,9 @@ class Interface: ...@@ -159,10 +154,9 @@ class Interface:
name_suffix = gr.Textbox(value=self.name_suffix, visible=False) name_suffix = gr.Textbox(value=self.name_suffix, visible=False)
session = gr.State([]) session = gr.State([])
inputs = [img_editor]
operations = Operations() operations = Operations()
# fmt: off # fmt: off
btn_update.click( img_editor.change(
fn=operations.start_session, inputs=[img_editor,temp_dir, name_suffix] , outputs=session).then( fn=operations.start_session, inputs=[img_editor,temp_dir, name_suffix] , outputs=session).then(
fn=operations.preview, inputs=session, outputs=overlay_img).then( fn=operations.preview, inputs=session, outputs=overlay_img).then(
fn=self.set_visible, inputs=None, outputs=overlay_img).then( fn=self.set_visible, inputs=None, outputs=overlay_img).then(
......
albumentations>=1.3.1, albumentations>=1.3.1,
gradio>=4.22.0, gradio>=4.27.0,
h5py>=3.9.0, h5py>=3.9.0,
localthickness>=0.1.2, localthickness>=0.1.2,
matplotlib>=3.8.0, matplotlib>=3.8.0,
......
...@@ -38,7 +38,7 @@ setup( ...@@ -38,7 +38,7 @@ setup(
python_requires=">=3.10", python_requires=">=3.10",
install_requires=[ install_requires=[
"albumentations>=1.3.1", "albumentations>=1.3.1",
"gradio>=4.22.0", "gradio>=4.27.0",
"h5py>=3.9.0", "h5py>=3.9.0",
"localthickness>=0.1.2", "localthickness>=0.1.2",
"matplotlib>=3.8.0", "matplotlib>=3.8.0",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment