Spaces:
Sleeping
Sleeping
File size: 3,515 Bytes
57d91e6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
import streamlit as st
def apply_custom_css():
"""Apply custom CSS to fix UI issues on Huggingface Spaces"""
st.markdown("""
<style>
/* Fix for stacking UI issues */
.element-container {
overflow-anchor: none !important;
}
/* Fix for main content area */
.stApp {
min-height: 100vh;
overflow-y: auto;
}
/* Improve sidebar styling */
.css-1d391kg {
padding-top: 2rem;
}
/* Fix for scrolling issues */
.main .block-container {
max-width: 100%;
padding: 1rem;
}
/* Hide empty elements */
.element-container:empty {
display: none;
}
/* Custom tabs styling */
.stTabs [data-baseweb="tab-list"] {
gap: 2px;
}
.stTabs [data-baseweb="tab"] {
height: 50px;
white-space: pre-wrap;
background-color: #F0F2F6;
border-radius: 4px 4px 0 0;
gap: 1px;
padding-top: 10px;
padding-bottom: 10px;
}
.stTabs [aria-selected="true"] {
background-color: #FFFFFF !important;
border-bottom: 2px solid #4CAF50;
}
/* Chat container styling */
[data-testid="stChatMessageContent"] {
background-color: #F0F2F6;
border-radius: 10px;
padding: 8px 12px;
}
[data-testid="stChatMessage"] [data-testid="stChatMessageContent"] code {
background-color: rgba(0,0,0,0.1);
}
/* Hide duplicate header after page switches */
.duplicated-header {
display: none;
}
/* Fix for any layout issues specific to Huggingface */
@media screen and (max-width: 1200px) {
.row-widget.stButton {
width: 100%;
}
}
</style>
""", unsafe_allow_html=True)
def apply_custom_js():
"""Apply custom JavaScript to fix UI issues on Huggingface Spaces"""
st.markdown("""
<script>
// Function to clean up UI by removing duplicated elements
function cleanupUI() {
// Wait for the page to fully load
setTimeout(function() {
// Find headers that might be duplicated
const headers = document.querySelectorAll('h1, h2');
const seen = new Set();
headers.forEach((header, index) => {
const text = header.innerText;
if (seen.has(text) && index > 0) {
// Mark duplicates
header.classList.add('duplicated-header');
header.style.display = 'none';
}
seen.add(text);
});
// Fix any scrolling issues
document.querySelector('.stApp').scrollTop = 0;
}, 1000);
}
// Run cleanup when DOM is ready
document.addEventListener('DOMContentLoaded', cleanupUI);
// Also run cleanup when Streamlit's internal events happen
const observer = new MutationObserver((mutations) => {
cleanupUI();
});
// Start observing changes in the main container
window.addEventListener('load', () => {
const mainContainer = document.querySelector('.main');
if (mainContainer) {
observer.observe(mainContainer, {
childList: true,
subtree: true
});
}
});
</script>
""", unsafe_allow_html=True)
def init():
"""Initialize custom CSS and JS"""
apply_custom_css()
apply_custom_js() |