Skip to content

Commit 1e0182d

Browse files
FlorianJactaFlorianJacta
committed
Fix CSS
1 parent 86f81be commit 1e0182d

6 files changed

+3041
-39
lines changed

‎src/main_markdown.py

+25-11
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@
99
image = None
1010
fixed_image = None
1111
fixed = False
12-
advanced_properties = {"alpha_matting_foreground_threshold":240,
13-
"alpha_matting_background_threshold":10,
14-
"alpha_matting_erode_size":10}
12+
advanced_properties = {
13+
"alpha_matting_foreground_threshold": 240,
14+
"alpha_matting_background_threshold": 10,
15+
"alpha_matting_erode_size": 10,
16+
}
1517

1618

1719
page = """<|toggle|theme|>
@@ -69,29 +71,41 @@ def convert_image(img):
6971
byte_im = buf.getvalue()
7072
return byte_im
7173

74+
7275
def upload_image(state):
7376
state.image = Image.open(state.path_upload)
7477
state.original_image = convert_image(state.image)
7578
state.fixed = False
7679
fix_image(state)
7780

81+
7882
def fix_image(state, id=None, action=None):
7983
state.fixed = False
80-
notify(state, 'info', 'Removing the background...')
81-
fixed_image = remove(state.image,
82-
alpha_matting=True if action is not None else False, # Apply options when the button is clicked
83-
alpha_matting_foreground_threshold=int(state.advanced_properties['alpha_matting_foreground_threshold']),
84-
alpha_matting_background_threshold=int(state.advanced_properties['alpha_matting_background_threshold']),
85-
alpha_matting_erode_size=int(state.advanced_properties['alpha_matting_erode_size']))
84+
notify(state, "info", "Removing the background...")
85+
fixed_image = remove(
86+
state.image,
87+
alpha_matting=(
88+
True if action is not None else False
89+
), # Apply options when the button is clicked
90+
alpha_matting_foreground_threshold=int(
91+
state.advanced_properties["alpha_matting_foreground_threshold"]
92+
),
93+
alpha_matting_background_threshold=int(
94+
state.advanced_properties["alpha_matting_background_threshold"]
95+
),
96+
alpha_matting_erode_size=int(
97+
state.advanced_properties["alpha_matting_erode_size"]
98+
),
99+
)
86100

87101
state.fixed_image = convert_image(fixed_image)
88102
state.fixed = True
89-
notify(state, 'success', 'Background removed successfully!')
103+
notify(state, "success", "Background removed successfully!")
90104

91105

92106
def download_image(state):
93107
download(state, content=state.fixed_image, name="fixed_img.png")
94108

95109

96110
if __name__ == "__main__":
97-
Gui(page=page).run(margin="0px", title='Background Remover')
111+
Gui(page=page).run(margin="0px", title="Background Remover")

‎src/main_tgb.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
strong, b {
2+
font-weight: bold; /* This is equivalent to 700 */
3+
color: #ff6049;
4+
}
5+
6+
.css-75cauk .sidebar{
7+
height: auto;
8+
}

‎src/main_tgb.py

+73-27
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@
1010
image = None
1111
fixed_image = None
1212
fixed = False
13-
advanced_properties = {"alpha_matting_foreground_threshold":240,
14-
"alpha_matting_background_threshold":10,
15-
"alpha_matting_erode_size":10}
16-
13+
advanced_properties = {
14+
"alpha_matting_foreground_threshold": 240,
15+
"alpha_matting_background_threshold": 10,
16+
"alpha_matting_erode_size": 10,
17+
}
1718

1819

1920
def convert_image(img):
@@ -22,59 +23,104 @@ def convert_image(img):
2223
byte_im = buf.getvalue()
2324
return byte_im
2425

26+
2527
def upload_image(state):
2628
state.image = Image.open(state.path_upload)
2729
state.original_image = convert_image(state.image)
2830
state.fixed = False
2931
fix_image(state)
3032

33+
3134
def fix_image(state, id=None, action=None):
3235
state.fixed = False
33-
notify(state, 'info', 'Removing the background...')
34-
fixed_image = remove(state.image,
35-
alpha_matting=True if action is not None else False, # Apply options when the button is clicked
36-
alpha_matting_foreground_threshold=int(state.advanced_properties['alpha_matting_foreground_threshold']),
37-
alpha_matting_background_threshold=int(state.advanced_properties['alpha_matting_background_threshold']),
38-
alpha_matting_erode_size=int(state.advanced_properties['alpha_matting_erode_size']))
36+
notify(state, "info", "Removing the background...")
37+
fixed_image = remove(
38+
state.image,
39+
alpha_matting=(
40+
True if action is not None else False
41+
), # Apply options when the button is clicked
42+
alpha_matting_foreground_threshold=int(
43+
state.advanced_properties["alpha_matting_foreground_threshold"]
44+
),
45+
alpha_matting_background_threshold=int(
46+
state.advanced_properties["alpha_matting_background_threshold"]
47+
),
48+
alpha_matting_erode_size=int(
49+
state.advanced_properties["alpha_matting_erode_size"]
50+
),
51+
)
3952

4053
state.fixed_image = convert_image(fixed_image)
4154
state.fixed = True
42-
notify(state, 'success', 'Background removed successfully!')
55+
notify(state, "success", "Background removed successfully!")
4356

4457

4558
def download_image(state):
4659
download(state, content=state.fixed_image, name="fixed_img.png")
4760

4861

49-
5062
with tgb.Page() as page:
5163
tgb.toggle(theme=True)
5264

53-
with tgb.layout("265px 1fr", columns__mobile="30 70"):
65+
with tgb.layout("20 80", columns__mobile="1"):
5466
with tgb.part("sidebar"):
55-
tgb.text("### Removing Background from image", mode="md")
56-
tgb.file_selector("{path_upload}", extensions=".png,.jpg", label="Upload your image", on_action=upload_image, class_name="fullwidth")
67+
tgb.text("### Removing **Background** from image", mode="md")
68+
tgb.file_selector(
69+
"{path_upload}",
70+
extensions=".png,.jpg",
71+
label="Upload image",
72+
on_action=upload_image,
73+
class_name="fullwidth",
74+
)
5775

5876
with tgb.expandable(title="More options", expanded=False):
5977
tgb.text("**Foreground threshold**", mode="md")
60-
tgb.slider("{advanced_properties.alpha_matting_foreground_threshold}", max=500, label="Foreground threshold")
78+
tgb.slider(
79+
"{advanced_properties.alpha_matting_foreground_threshold}",
80+
max=500,
81+
label="Foreground threshold",
82+
width="100%",
83+
)
6184
tgb.text("**Background threshold**", mode="md")
62-
tgb.slider("{advanced_properties.alpha_matting_background_threshold}", max=50, label="Background threshold")
85+
tgb.slider(
86+
"{advanced_properties.alpha_matting_background_threshold}",
87+
max=50,
88+
label="Background threshold",
89+
width="100%",
90+
)
6391
tgb.text("**Erosion size**", mode="md")
64-
tgb.slider("{advanced_properties.alpha_matting_erode_size}", max=50, label="Erosion size")
65-
66-
tgb.button("Run with options", on_action=fix_image, class_name="plain fullwidth", active="{original_image}")
67-
68-
tgb.file_download("{None}", label="Download result", on_action=download_image, active="{fixed}")
92+
tgb.slider(
93+
"{advanced_properties.alpha_matting_erode_size}",
94+
max=50,
95+
label="Erosion size",
96+
width="100%",
97+
)
98+
99+
tgb.button(
100+
"Run with options",
101+
on_action=fix_image,
102+
class_name="plain fullwidth",
103+
active="{original_image}",
104+
)
105+
106+
tgb.file_download(
107+
"{None}",
108+
label="Download result",
109+
on_action=download_image,
110+
active="{fixed}",
111+
class_name="fullwidth",
112+
)
69113

70114
with tgb.part("container"):
71-
tgb.text("# Background Remover", mode="md")
115+
tgb.text("# Background **Remover**", mode="md")
72116

73-
tgb.text("""
117+
tgb.text(
118+
"""
74119
Give it a try by uploading an image to witness the seamless removal of the background. You can download images in full quality from the sidebar.
75120
This code is open source and accessible on [GitHub](https://github.com/Avaiga/demo-remove-background).
76-
""", mode="md")
77-
121+
""",
122+
mode="md",
123+
)
78124

79125
with tgb.layout("1 1"):
80126
with tgb.part("card text-center", render="{original_image}"):
@@ -86,4 +132,4 @@ def download_image(state):
86132

87133

88134
if __name__ == "__main__":
89-
Gui(page=page).run(margin="0px", title='Background Remover')
135+
Gui(page=page).run(margin="0px", title="Background Remover")

0 commit comments

Comments
 (0)