BlurMe/blurme/pages/settings.py
2024-01-08 18:59:34 +01:00

73 lines
2.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:
return rx.vstack(
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"),
rx.upload(
rx.vstack(rx.text("Przeciągnij albo kliknij, aby wybrać pliki"),),
border=f"1px dotted {color}",
padding="5em",
multiple=True,
accept={
"image/png": [".png"],
"image/jpeg": [".jpg", ".jpeg"],
"image/webp": [".webp"],
"image/tiff": [".tif", ".tiff"], },
max_files=5,
),
rx.hstack(rx.foreach(rx.selected_files, rx.text)),
rx.button( "Załaduj zdjęcie",
on_click=lambda: State.handle_upload(
rx.upload_files()),),
rx.responsive_grid(
rx.foreach(
State.img,
lambda img: rx.vstack(
rx.image(src=f'/{img}'),
rx.text(img),
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"
),
),
),columns=[2],
spacing="5px",
#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",
),)