Skip to content

Commit

Permalink
Update demo app pages with latest content.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hreikin
hreikin committed Mar 12, 2023
1 parent c8b537a commit c64080b
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 82 deletions.
22 changes: 12 additions & 10 deletions Home.py
View file
Expand Up @@ -18,7 +18,14 @@
"""
},
)
install_instructions = """

with st.sidebar:
st.info("Welcome to the `streamlit-uploads-library` example app.")
default_uploader = UploadFiles(save_location="assets")

st.header("Streamlit Uploads Library")
st.markdown(
"""
> Under development, coming soon.
This package provides a simple wrapper around `st.file_uploader` with a save function included and
Expand All @@ -34,7 +41,9 @@
Multiple options are able to be configured with more info available on the relevant pages. Here
is a code example that shows how to create the default library, gallery and file uploader views.
"""
example_usage_code = """
)
st.code(
"""
from streamlit_uploads_library.gallery import Gallery
from streamlit_uploads_library.uploads import UploadFiles
from streamlit_uploads_library.library import Library
Expand All @@ -43,13 +52,6 @@
default_gallery = Gallery(directory="assets") # Displays a simple gallery to show images in a grid
default_uploader = UploadFiles(save_location="assets") # Wraps st.file_uploader and provides save functionality
"""

with st.sidebar:
st.info("Welcome to the `streamlit-uploads-library` example app.")
default_uploader = UploadFiles(save_location="assets")

st.header("Streamlit Uploads Library")
st.markdown(body=install_instructions)
st.code(body=example_usage_code)
)
default_library = Library(directory="assets")
default_gallery = Gallery(directory="assets")
19 changes: 10 additions & 9 deletions pages/Caching.py
View file
Expand Up @@ -17,17 +17,18 @@
"""
},
)
cache_usage = """
Streamlit Uploads Library makes use of the `st.cache_resource` decorator so the library and gallery
on this page will load from the cache instead of reloading the images each time the app is run. You
will probably want to clear your cache after uploading new files to your app, to do this you can use
the `st.cache_resource.clear()` function provided by Streamlit.
"""

with st.sidebar:
st.info("Welcome to the `streamlit-uploads-library` example app.")

st.header("Caching")
st.markdown(body=cache_usage)
default_gallery = Gallery(directory="assets")
default_library = Library(directory="assets")
st.markdown(
"""
Streamlit Uploads Library makes use of the `st.cache_resource` decorator so the library and gallery
on this page will load from the cache instead of reloading the images each time the app is run. You
will probably want to clear your cache after uploading new files to your app, to do this you can use
the `st.cache_resource.clear()` function provided by Streamlit.
"""
)
default_library = Library(directory="assets")
default_gallery = Gallery(directory="assets")
35 changes: 18 additions & 17 deletions pages/Gallery.py
View file
Expand Up @@ -22,8 +22,10 @@
from streamlit_uploads_library.library import Library
class Gallery(Library):
def __init__(self, directory, file_extensions=(".png", ".jpg", ".jpeg"), number_of_columns=5):
super(Gallery, self).__init__(directory, file_extensions, number_of_columns)
def __init__(self, directory, file_extensions=(".png", ".jpg", ".jpeg"), number_of_columns=5, uid="gallery"):
image_alignment = "center"
show_details=False
super(Gallery, self).__init__(directory, file_extensions, image_alignment, number_of_columns, show_details, uid)
def fetch_files(self):
return super().fetch_files()
Expand All @@ -32,35 +34,34 @@ def fetch_files(self):
def create_gallery(_self):
return super().create_library(_self.number_of_columns, _self.show_details)
"""
example_usage = """

with st.sidebar:
st.info("Welcome to the `streamlit-uploads-library` example app.")

st.header("Gallery")
st.markdown(
"""
A simple gallery for use in Streamlit projects. Using the gallery is simple, import `streamlit_uploads_library` and then instantiate the class with the
required `directory` variable. Other options can be configured by passing in different variables
when instantiating the class.
"""
# Needs updating with latest changes
configuration = """
- `directory` (required): A `str()` of the path to the folder containing the gallery images, for example, `"assets"`.
- `file_extensions` (optional): A `tuple()` containing strings of the file extensions to include in the gallery, default is `(".png", ".jpg", ".jpeg")`.
- `number_of_columns` (optional): An `int()` defining the number of required columns, default is `5`.
"""
example_usage_code = """
)
st.code(
"""
import streamlit as st
from streamlit_uploads_library.gallery import Gallery
st.set_page_config(page_title="Streamlit Uploads Library")
default_gallery = Gallery(directory="assets")
gallery_with_columns = Gallery(directory="assets", label="**Gallery - Columns**", number_of_columns=3)
columns_gallery = Gallery(directory="assets", number_of_columns=4, uid="columns")
"""

with st.sidebar:
st.info("Welcome to the `streamlit-uploads-library` example app.")

st.header("Gallery")
st.markdown(body=example_usage)
st.markdown(body=configuration)
st.code(body=example_usage_code)
)
default_gallery = Gallery(directory="assets")
gallery_with_columns = Gallery(directory="assets", number_of_columns=4)
columns_gallery = Gallery(directory="assets", number_of_columns=4, uid="columns")

with st.expander(label="**Source Code**", expanded=True):
st.code(body=source_code)
61 changes: 27 additions & 34 deletions pages/Library.py
View file
Expand Up @@ -20,6 +20,7 @@
source_code = '''
import streamlit as st
import get_image_size
import logging
from pathlib import Path
from math import ceil
Expand All @@ -46,12 +47,13 @@ class Library():
number_of_columns (int): An int() defining the number of required columns, default is 5.
show_details (bool): A bool() to show or hide the file and edit details, False hides them, default is True to show them.
"""
def __init__(self, directory, expanded_details=True, file_extensions=(".png", ".jpg", ".jpeg"), number_of_columns=5, show_details=True):
def __init__(self, directory, file_extensions=(".png", ".jpg", ".jpeg"), image_alignment="end", number_of_columns=5, show_details=True, uid="library"):
self.directory = Path(directory).resolve()
self.expanded_details = expanded_details
self.file_extensions = file_extensions
self.image_alignment = image_alignment
self.number_of_columns = number_of_columns
self.show_details = show_details
self.uid = uid
self.library = self.create_library(self.number_of_columns, self.show_details)
def fetch_files(self):
Expand Down Expand Up @@ -119,48 +121,40 @@ def create_library(_self, number_of_columns, show_details):
# and rows (st.expander) for details and buttons to keep them in the correct columns.
for idx in range(_self.num_of_rows_req):
with _self.library_rows[_self.library_rows_idx]:
_self.imgs_row = st.container()
if show_details == True:
_self.details_row = st.expander(label="Details", expanded=_self.expanded_details)
with _self.imgs_row:
_self.imgs_columns = list(st.columns(number_of_columns))
if show_details == True:
with _self.details_row:
_self.details_columns = list(st.columns(number_of_columns))
# Since we are keeping track of the column and filename indexes we can use
# those to slice the `library_files` list at the correct points for each row
# and then increase or reset the indexes as required.
for img in _self.library_files[_self.filename_idx:(_self.filename_idx + number_of_columns)]:
with _self.imgs_columns[_self.col_idx]:
st.image(img, use_column_width="auto")
st.write(
"""<style>
[data-testid="stHorizontalBlock"] {
align-items: center;
}
f"""<style>
[data-testid="stHorizontalBlock"] {{
align-items: {_self.image_alignment};
}}
</style>
""",
unsafe_allow_html=True
)
if show_details == True:
with _self.details_columns[_self.col_idx]:
# with st.expander(label="Details", expanded=_self.expanded_details):
with st.form(key=f"details_form_{_self.filename_idx}"):
try:
img_meta = get_image_size.get_image_metadata(img)
img_path = Path(img).resolve()
new_name = st.text_input(label="Name:", key=f"{img_path.stem}_name_{_self.filename_idx}", value=f"{img_path.stem}")
st.text_input(label="Type:", key=f"{img_path.stem}_type_{_self.filename_idx}", value=f"{img_path.suffix.strip('.').upper()}", disabled=True)
details_col1, details_col2 = st.columns(2)
del_check = st.checkbox(label="Delete file ?", help="Permanently delete a file from the library.")
if st.form_submit_button(label="Update", type="primary", use_container_width=True):
_self.update_file(img_path, new_name, del_check)
with details_col1:
st.text_input(label="Width:", key=f"{img_path.stem}_width_{_self.filename_idx}", value=f"{img_meta.width}", disabled=True)
with details_col2:
st.text_input(label="Height:", key=f"{img_path.stem}_height_{_self.filename_idx}", value=f"{img_meta.height}", disabled=True)
except get_image_size.UnknownImageFormat:
width, height = -1, -1
if show_details == True:
try:
img_meta = get_image_size.get_image_metadata(img)
img_path = Path(img).resolve()
new_name = st.text_input(label="Name:", key=f"{img_path.stem}_{_self.uid}_name_{_self.filename_idx}", value=f"{img_path.stem}")
st.text_input(label="Type:", key=f"{img_path.stem}_{_self.uid}_type_{_self.filename_idx}", value=f"{img_path.suffix.strip('.').upper()}", disabled=True)
details_col1, details_col2 = st.columns(2)
del_check = st.checkbox(label="Delete ?", key=f"{img_path.stem}_{_self.uid}_del_check_{_self.filename_idx}", help="Permanently delete a file from the library.")
if del_check:
st.button(label="Delete", key=f"{img_path.stem}_{_self.uid}_delete_button_{_self.filename_idx}", type="secondary", use_container_width=True, on_click=_self.update_file, args=(img_path, new_name, del_check))
else:
st.button(label="Update", key=f"{img_path.stem}_{_self.uid}_submit_button_{_self.filename_idx}", type="primary", use_container_width=True, on_click=_self.update_file, args=(img_path, new_name, del_check))
with details_col1:
st.text_input(label="Width:", key=f"{img_path.stem}_{_self.uid}_width_{_self.filename_idx}", value=f"{img_meta.width}", disabled=True)
with details_col2:
st.text_input(label="Height:", key=f"{img_path.stem}_{_self.uid}_height_{_self.filename_idx}", value=f"{img_meta.height}", disabled=True)
except get_image_size.UnknownImageFormat:
width, height = -1, -1
# Keeps track of the current column, if we reach the `max_idx` we reset it
# to 0 and increase the row index. This combined with the slicing should
# ensure all images, details and buttons are in the correct columns.
Expand All @@ -174,8 +168,7 @@ def create_library(_self, number_of_columns, show_details):
'''

library = Library(directory="assets")
library_details = Library(directory="assets", expanded_details=False)
library_with_columns = Library(directory="assets", number_of_columns=4)
library_columns = Library(directory="assets", number_of_columns=4, uid="columns")

with st.expander(label="**Source Code**", expanded=True):
st.code(body=source_code)
24 changes: 12 additions & 12 deletions pages/Uploads.py
View file
Expand Up @@ -65,30 +65,30 @@ def save_uploaded_files(self, files_to_upload, destination):
f.save(self.full_path)
st.cache_resource.clear()
"""
example_usage = """

with st.sidebar:
st.info("Welcome to the `streamlit-uploads-library` example app.")

st.header("Uploads")
st.markdown(
"""
A file uploader is provided with multiple options able to be configured including 2 different view
types. It is not required to use this and you can easily replace it with your own, it is provided
as a convenience so you dont need to create the code yourself or replicate it across multiple
projects.
"""
configuration = """
- `save_location` (required): A `str()` of the path to the folder you want to save files in, for example, `"assets"`.
"""
example_usage_code = """
)
st.code(
"""
import streamlit as st
from streamlit_uploads_library.uploads import UploadFiles
st.set_page_config(page_title="Streamlit Uploads Library")
default_uploader = UploadFiles(save_location="assets")
"""

with st.sidebar:
st.info("Welcome to the `streamlit-uploads-library` example app.")

st.header("Uploads")
st.markdown(body=example_usage)
st.markdown(body=configuration)
st.code(body=example_usage_code)
)
default_uploader = UploadFiles(save_location="assets")

with st.expander(label="**Source Code**", expanded=True):
Expand Down

0 comments on commit c64080b

Please sign in to comment.