2023-11-17 14:22:28 +01:00
|
|
|
"""The settings page."""
|
2023-12-12 21:27:48 +01:00
|
|
|
import asyncio
|
2023-11-17 14:22:28 +01:00
|
|
|
from blurme.templates import template
|
2023-12-12 21:27:48 +01:00
|
|
|
from blurme.state import State
|
2023-11-17 14:22:28 +01:00
|
|
|
import reflex as rx
|
|
|
|
|
2023-12-12 21:27:48 +01:00
|
|
|
|
|
|
|
color = "rgb(107,99,246)"
|
|
|
|
|
2023-11-22 15:54:26 +01:00
|
|
|
@template(route="/settings", title="Zdjęcie", image = "/image-icon.png")
|
2023-11-17 14:22:28 +01:00
|
|
|
def settings() -> rx.Component:
|
2024-01-09 02:15:41 +01:00
|
|
|
|
2023-12-19 13:39:26 +01:00
|
|
|
return rx.vstack(
|
2023-11-17 20:25:22 +01:00
|
|
|
rx.heading("BlurMe", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),
|
|
|
|
rx.text("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"),
|
2023-12-12 21:27:48 +01:00
|
|
|
rx.upload(
|
2023-12-19 13:39:26 +01:00
|
|
|
rx.vstack(rx.text("Przeciągnij albo kliknij, aby wybrać pliki"),),
|
2023-12-12 21:27:48 +01:00
|
|
|
border=f"1px dotted {color}",
|
2024-01-08 18:59:34 +01:00
|
|
|
padding="5em",
|
|
|
|
multiple=True,
|
|
|
|
accept={
|
|
|
|
"image/png": [".png"],
|
|
|
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
|
|
"image/webp": [".webp"],
|
|
|
|
"image/tiff": [".tif", ".tiff"], },
|
|
|
|
max_files=5,
|
|
|
|
),
|
2023-12-12 21:27:48 +01:00
|
|
|
rx.hstack(rx.foreach(rx.selected_files, rx.text)),
|
2023-12-19 13:39:26 +01:00
|
|
|
rx.button( "Załaduj zdjęcie",
|
2023-12-12 21:27:48 +01:00
|
|
|
on_click=lambda: State.handle_upload(
|
2024-01-08 22:08:23 +01:00
|
|
|
rx.upload_files()),color = "rgba(47, 187, 74,255)"),
|
2024-01-08 18:59:34 +01:00
|
|
|
|
|
|
|
rx.responsive_grid(
|
|
|
|
rx.foreach(
|
|
|
|
State.img,
|
|
|
|
lambda img: rx.vstack(
|
2024-01-08 22:08:23 +01:00
|
|
|
rx.image(src=f'/{img}', height = "200px"),
|
2024-01-08 18:59:34 +01:00
|
|
|
rx.text(img),
|
2024-01-08 22:08:23 +01:00
|
|
|
|
2024-01-08 18:59:34 +01:00
|
|
|
|
2023-12-19 13:39:26 +01:00
|
|
|
rx.hstack(rx.button("Usuń",
|
2024-01-08 22:08:23 +01:00
|
|
|
on_click=lambda img_name=img: State.delete_image(img_name), color="rgba(255, 75, 42,255)",
|
2023-12-19 13:39:26 +01:00
|
|
|
width = "125px"),
|
|
|
|
rx.button("Anonimizuj",
|
2024-01-09 02:15:41 +01:00
|
|
|
on_click=lambda img_name=img: State.image_anonymization(img_name),
|
2023-12-19 13:39:26 +01:00
|
|
|
width = "125px"),
|
|
|
|
rx.button("Pobierz",
|
2023-12-19 16:13:56 +01:00
|
|
|
on_click=lambda img_name=img: State.download_image(img_name),
|
2023-12-19 13:39:26 +01:00
|
|
|
width = "125px"),
|
|
|
|
padding="1em"
|
|
|
|
),
|
2024-01-08 18:59:34 +01:00
|
|
|
),
|
|
|
|
|
|
|
|
),columns=[2],
|
|
|
|
spacing="5px",
|
2024-01-08 22:08:23 +01:00
|
|
|
|
2024-01-08 18:59:34 +01:00
|
|
|
|
|
|
|
|
|
|
|
#rx.foreach(
|
|
|
|
# State.img,
|
|
|
|
# lambda img: rx.vstack(
|
|
|
|
# rx.image(src=f'/{img}', max_width = "800px"),
|
|
|
|
# rx.hstack(rx.button("Usuń",
|
|
|
|
# on_click=lambda img_name=img: State.delete_image(img_name),
|
|
|
|
# width = "125px"),
|
|
|
|
# rx.button("Anonimizuj",
|
|
|
|
# width = "125px"),
|
|
|
|
# rx.button("Pobierz",
|
|
|
|
# on_click=lambda img_name=img: State.download_image(img_name),
|
|
|
|
# width = "125px"),
|
|
|
|
# padding="1em"
|
|
|
|
# ),
|
|
|
|
# padding="3em",
|
|
|
|
|
|
|
|
),)
|
|
|
|
|