kunthawat/ALwrity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP - Streamlit UI, Porting CLI

Browse Source
This commit is contained in:
ajaysi
2024-06-03 20:08:47 +05:30
parent 850f3c80b7
commit 433643b9db
2 changed files with 61 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
alwrity.py
View File

@@ -20,7 +20,8 @@ from lib.utils.alwrity_streamlit_utils import (
css_file_path = os.path.join('lib', 'workspace', 'alwrity_ui_styling.css') css_file_path = os.path.join('lib', 'workspace', 'alwrity_ui_styling.css')
with open(css_file_path) as f: with open(css_file_path) as f:
custom_css = f.read() custom_css = f.read()
# Set the page configuration
st.set_page_config(page_title="Alwrity", layout="wide")
# Inject custom CSS into the Streamlit app # Inject custom CSS into the Streamlit app
st.markdown(f'<style>{custom_css}</style>', unsafe_allow_html=True) st.markdown(f'<style>{custom_css}</style>', unsafe_allow_html=True)

122
lib/workspace/alwrity_ui_styling.css
View File

@@ -10,7 +10,7 @@ body {
font-size: 2.5em; font-size: 2.5em;
font-weight: bold; font-weight: bold;
color: #1565C0; color: #1565C0;
margin-bottom: 10px; margin-bottom: 20px;
text-align: center; text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
} }
@@ -20,60 +20,22 @@ body {
font-size: 1.75em; font-size: 1.75em;
font-weight: bold; font-weight: bold;
color: #1976D2; color: #1976D2;
margin-top: 40px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
text-align: center; text-align: center;
} }
/* Styling for the application layout */ /* Navigation tabs styling */
.stApp {
margin-top: -80px;
}
/* Option box styling */
.option-box {
border: 2px solid #e0e0e0;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
background-color: #f5f5f5;
}
/* Custom button styling */
.custom-button {
background: #1976D2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
font-weight: bold;
}
.custom-button:hover {
background-color: #1565C0;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
/* Tabs styling */
.stTabs [role="tab"] { .stTabs [role="tab"] {
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
color: white; color: white;
background: #1565C0; background: #1565C0;
padding: 10px; padding: 12px 20px;
margin: 5px; margin: 5px;
border-radius: 5px; border-radius: 8px;
border: 2px solid #ddd; border: 2px solid #ddd;
transition: background 0.3s ease; transition: background 0.3s ease, padding 0.3s ease;
} }
.stTabs [role="tab"]:hover { .stTabs [role="tab"]:hover {
@@ -110,6 +72,59 @@ body {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
/* Input fields styling */
input[type="text"] {
width: 100%;
padding: 12px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ddd;
border-radius: 4px;
background-color: #f0f8ff;
}
/* Custom button styling */
button {
background: #1976D2;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
font-weight: bold;
}
button:hover {
background-color: #1565C0;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
/* Scrollbar styling */
::-webkit-scrollbar-track {
background: #e1ebf9;
}
::-webkit-scrollbar-thumb {
background-color: #90CAF9;
border-radius: 10px;
border: 3px solid #e1ebf9;
}
::-webkit-scrollbar-thumb:hover {
background: #64B5F6;
}
::-webkit-scrollbar {
width: 16px;
}
/* Radio button group styling */ /* Radio button group styling */
div.row-widget.stRadio > div { div.row-widget.stRadio > div {
flex-direction: row; flex-direction: row;
@@ -141,22 +156,3 @@ div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"] {
color: #333; color: #333;
} }
/* Scrollbar styling */
::-webkit-scrollbar-track {
background: #e1ebf9;
}
::-webkit-scrollbar-thumb {
background-color: #90CAF9;
border-radius: 10px;
border: 3px solid #e1ebf9;
}
::-webkit-scrollbar-thumb:hover {
background: #64B5F6;
}
::-webkit-scrollbar {
width: 16px;
}