Author(s): Stavros Theocharis Originally published on Towards AI. Image created by DALL·E 2 Introduction In the dynamic parts of web application development and AI, the Streamlit Python library stands out as an important resource, known for its promptness and effectiveness in the application, especially in software prototype development. One of the most important aspects of Streamlit is its ability to craft specialized components that elevate its functionality. Through this, the community is able to develop and contribute custom components that can broaden the possible use cases for which Streamlit can be used. My new contribution is the ‘streamlit-token-craft’ component, a brand new custom component I made. It is intended to manage and display token keys within the user interface. This component represents a key segment of token key management solutions integral to enhancing the Streamlit experience. Such a component (custom or not) was missing from the Streamlit library, and I had to enhance an existing Streamlit app to manage the user’s keys. So, after a bit of research, I saw that I had to build something from scratch. I hope that this component will help developers in the future to build such apps and that some of them will want to contribute to it and step in further. What is the Streamlit Token Key Management Component? This specific component is tailored for incorporation into Streamlit applications. It mainly focuses on the administration and visualization of existing token keys within Streamlit applications. If you have used services across the Internet to create your keys, you may remember tables displaying your created keys and the ability to create a new key, rename existing keys, or delete one. With these keys, you are actually able to get access to APIs and various other protected resources. This feature is often a standard one in numerous products that distribute API access tokens to their users. For example, given the current hype of Large Language Models and their popular quick prototype apps within the Streamlit Community, the “streamlit-craft-token” component is going to be a valuable enhancement in such apps (for their user management dashboards). Image created by the author For more information, you can access the GitHub repo. A demo app showcasing the functionality of the component is also deployed in Streamlit community cloud! Features U+1F389 This part comes directly from the documentation of the component. Inline Editing: Edit tokens directly in the table like a ninja! U+1F977 Dynamic Column Visibility: Play hide and seek with your columns! U+1F648 Action Handling: Manage token deletion with style. It’s like having a mini-command center. U+1F3AE Responsive Design: Looks great on screens of all sizes, even on your grandma’s old monitor! U+1F475U+1F4BB Use Cases This component finds its application in a specific use case, from small-scale projects to larger ones. Whether it’s for accessing third-party APIs, cloud services, or internal authentication systems, it offers a robust solution for managing access credentials. Getting Started U+1F680 In order to get started you only need to install the "streamlit-token-craft" library into your project! This library is alraedy uploaded in pypi! pip install streamlit-token-craft Usage Guide Here’s a very simple example of how to unleash the power of the Token Craft in your app: import streamlit as stfrom token_craft import st_token_tablemock_tokens = [ { "id": "token98a1c077", "key": "token98-e316-49d9", "display_key": "token98a...e5437d75", "name": "Token 1", "dateCreated": "2023-12-20", "lastUsed": "Never", "is_active": True, },]rendered_tokens = st_token_table( tokens=mock_tokens, key="token_table",) Through this basic code, you will be able to visualize the Tokens table in your app. Of course, more complex functionality is needed to use the component in combination with your own token key creation and handling service. Hands-On Examples Example 1: Usage Scenario with token generation simulator In this example, I am going to showcase how the component can be used in combination with a token-handling service. Additional functionality, such as visualizing success after creating a new key, displaying warning messages, and adding interactive buttons, will demonstrate an almost ‘real’ use case. The token handling service, simulated through a set of functions, allows for creating, deleting, and renaming tokens within a database (represented as a list of dictionaries in this case). This simulated service can easily be substituted with real API calls for an actual token-handling service. So first, let’s create our token handling service: import uuidfrom datetime import date# Simulated database (in-memory for this example)_token_db = [] uuid will be used to generate random unique "token keys". The temporary db will actually be the _token_db list. We need to define the essential functions of our service, including retrieving, adding, removing, and renaming tokens in the database. Additionally, a function will be used to format the token keys. This function will modify the display of a token after its initial viewing. For instance, a token is initially shown as ‘dc22ac88-aab4–4109-bf03-d27fbaaed7a8’ will subsequently be displayed in a shortened form like ‘dc22xxxxxxxd7a8’ for enhanced security. def get_tokens(): """Retrieve all active tokens from the mock database, replacing 'key' with 'display_key'.""" return [ {**token, "key": token["display_key"]} # Replace 'key' with 'display_key' for token in _token_db if token["is_active"] ]def format_text(text): if len(text) <= 8: return "xxxx" + text[-4:] return text[:4] + "xxxxxxx" + text[-4:]def add_token(name="New Token"): """Add a new token to the mock database.""" full_key = str(uuid.uuid4()) # Create a simple hash of the key to display in the table, for example, take the first 8 characters. formated_key = format_text(full_key) new_token = { "id": "token" + str(uuid.uuid4()), "key": full_key, # Store the full key "display_key": formated_key, # Store the formated version for display "name": name, "dateCreated": str(date.today()), "lastUsed": "Never", "is_active": True, } _token_db.append(new_token) return new_token # Return the full new_token to show the full key oncedef remove_token(token_key): """Deactivate a token in the mock database by its key.""" token = next((token for token in _token_db if token["key"] == token_key), None) if token: token["is_active"] = Falsedef update_token_name(token_key, new_name): """Update the name of a specific token in the mock database.""" token = next((token for token in _token_db if token["key"] == token_key), None) if token: token["name"] = new_name Now, our token management service is ready to […]
↧