74 lines
3.5 KiB
Python
74 lines
3.5 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"),
|
||
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 = "90%",
|
||
multiple=True,
|
||
accept={
|
||
"image/png": [".png"],
|
||
"image/jpeg": [".jpg", ".jpeg"],
|
||
"image/webp": [".webp"],
|
||
"image/tiff": [".tif", ".tiff"], },
|
||
max_files=5,
|
||
margin_top = "15px",
|
||
),
|
||
rx.hstack(rx.foreach(rx.selected_files, rx.text)),
|
||
rx.button( "Załaduj zdjęcie",
|
||
on_click=lambda: State.handle_upload(
|
||
rx.upload_files()),color = "rgba(47, 187, 74,255)"),width = "60%", margin_left = "50px"),), margin_bottom = "25px", style={"align-self": "center", "align-items": "flex-start"}, spacing="2em"),
|
||
|
||
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"), " Analizuj",
|
||
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",
|
||
|
||
),)
|
||
|