112 lines
5.6 KiB
Python
112 lines
5.6 KiB
Python
"""The settings page."""
|
||
import asyncio
|
||
from blurme.templates import template
|
||
from blurme.state import State
|
||
import reflex as rx
|
||
|
||
|
||
color = "rgb(107,99,246)"
|
||
|
||
@template(route="/settings", title="Zdjęcie", image = "/image-icon.png")
|
||
def settings() -> rx.Component:
|
||
icon_style = {"width": "20px", "height": "30px", "margin-right": "10px"}
|
||
|
||
return rx.vstack(
|
||
rx.wrap(
|
||
rx.hstack(
|
||
rx.vstack(
|
||
rx.image(src="/brush-logo.png", height="5.2em", margin_bottom="15px"),
|
||
rx.heading("Anonimizuj już teraz!", font_size="2em", margin_bottom="15px",
|
||
background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)",
|
||
background_clip="text", padding="5px"),
|
||
rx.text("Dodaj zdjęcie, wybierz obszar i ukryj tożsamość: Anonimizacja zdjęć w mgnieniu oka – szybko, łatwo, bezpłatnie!",
|
||
font_size="1.2em", text_align="center"), width="50%", margin_left="50px", margin_right="30px"),
|
||
rx.vstack(
|
||
rx.upload(
|
||
rx.vstack(
|
||
rx.image(src="/upload-icon.png", height="5em"),
|
||
rx.text("Przeciągnij, aby wybrać pliki", font_size="1em"),
|
||
rx.text("albo", font_size="0.8em"),
|
||
rx.button("Kliknij", font_size="1em", color="rgba(117,102,254,255)"),
|
||
rx.text(" "),
|
||
rx.text("Dostępne rozszerzenia plików: png, jpg, webp, tiff", font_size="0.8em"),
|
||
),
|
||
border=f"1px dotted {color}",
|
||
padding="1em",
|
||
width="120%",
|
||
max_width = "120%",
|
||
multiple=True,
|
||
#accept={
|
||
# "image/png": [".png"],
|
||
# "image/jpeg": [".jpg", ".jpeg"],
|
||
# "image/webp": [".webp"],
|
||
# "image/tiff": [".tif", ".tiff"],
|
||
#},
|
||
margin_top="50px",
|
||
style={"align-self": "center"},
|
||
spacing="2em",
|
||
),
|
||
rx.foreach(rx.selected_files, rx.text),
|
||
rx.box(
|
||
rx.button("Załaduj zdjęcie",
|
||
on_click=lambda: State.handle_upload(rx.upload_files()),
|
||
color="rgba(47, 187, 74,255)"),
|
||
rx.alert_dialog(
|
||
rx.alert_dialog_overlay(
|
||
rx.alert_dialog_content(
|
||
rx.alert_dialog_header("Przekroczono limit plików"),
|
||
rx.alert_dialog_body("Nie można przesłać więcej niż 5 plików."),
|
||
rx.alert_dialog_footer(
|
||
rx.button("Zamknij", color="rgba(255, 75, 42,255)",
|
||
on_click=State.toggle_show(),
|
||
)
|
||
),
|
||
),
|
||
),
|
||
is_open=State.show,
|
||
),
|
||
rx.alert_dialog(
|
||
rx.alert_dialog_overlay(
|
||
rx.alert_dialog_content(
|
||
rx.alert_dialog_header("Nieprawidłowe rozszerzenie pliku"),
|
||
rx.alert_dialog_body("Dozwolone rozszerzenia plików to: png, jpg, webp, tiff."),
|
||
rx.alert_dialog_footer(
|
||
rx.button("Zamknij", color="rgba(255, 75, 42,255)",
|
||
on_click=State.toggle_extension_alert(),
|
||
)
|
||
),
|
||
),
|
||
),
|
||
is_open=State.show_extension_alert,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
rx.responsive_grid(
|
||
rx.foreach(
|
||
State.img,
|
||
lambda img: rx.vstack(
|
||
rx.image(src=f'/{img}', max_height="450px"),
|
||
rx.text(img, font_size="15px"),
|
||
rx.hstack(
|
||
rx.button(rx.icon(tag="delete", margin_right="8px"), " Usuń",
|
||
on_click=lambda img_name=img: State.delete_image(img_name),
|
||
color="rgba(255, 75, 42,255)", width="100px"),
|
||
rx.button(rx.icon(tag="check", margin_right="8px"), " Wykrywaj",
|
||
on_click=lambda img_name=img: State.image_analysis(img_name),
|
||
width="130px"),
|
||
rx.button(rx.icon(tag="edit", margin_right="8px"), " Anonimizuj",
|
||
on_click=lambda img_name=img: State.image_anonymization(img_name),
|
||
width="130px"),
|
||
rx.button(rx.icon(tag="download", margin_right="8px"), " Pobierz",
|
||
on_click=lambda img_name=img: State.download_image(img_name),
|
||
width="100px"),
|
||
padding="1em"
|
||
),
|
||
),
|
||
),
|
||
columns=[1],
|
||
spacing="5px",
|
||
),
|
||
) |