Spaces:

georad
/

sbsmapper

Running

App Files Files Community

georad commited on May 8

Commit

a6d1588

verified ·

1 Parent(s): 57dfc0c

Update pages/type_text.py

Browse files

Files changed (1) hide show

pages/type_text.py +46 -203

pages/type_text.py CHANGED Viewed

@@ -12,210 +12,53 @@ os.getenv("HF_TOKEN")
 import time
 import base64
-# Create a solution using an iframe approach for truly sticky behavior
-#st.set_page_config(layout="wide")
-# Define the HTML content for an iframe with sticky header
-def get_iframe_html(iframe_height=100):
-    html = f"""
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <style>
-            body {{
-                margin: 0;
-                padding: 10px;
-                font-family: 'Source Sans Pro', sans-serif;
-                color: #31333F;
-                background: white;
-            }}
-            .status-container {{
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                background: white;
-                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-                padding: 10px;
-                z-index: 1000;
-            }}
-            .status-widget {{
-                padding: 15px;
-                border-radius: 4px;
-                margin-bottom: 5px;
-                display: flex;
-                align-items: center;
-            }}
-            .status-icon {{
-                width: 24px;
-                height: 24px;
-                margin-right: 15px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }}
-            .status-content {{
-                flex-grow: 1;
-            }}
-            .status-processing {{
-                background-color: #f0f2f6;
-                border-left: 4px solid #31333f;
-            }}
-            .status-complete {{
-                background-color: #e6f4ea;
-                border-left: 4px solid #0cce6b;
-            }}
-            .status-error {{
-                background-color: #fce8e6;
-                border-left: 4px solid #ff5252;
-            }}
-            .spinner {{
-                border: 3px solid rgba(0, 0, 0, 0.1);
-                border-radius: 50%;
-                border-top: 3px solid #31333f;
-                width: 20px;
-                height: 20px;
-                animation: spin 1s linear infinite;
-            }}
-            @keyframes spin {{
-                0% {{ transform: rotate(0deg); }}
-                100% {{ transform: rotate(360deg); }}
-            }}
-            .checkmark {{
-                color: #0cce6b;
-                font-size: 20px;
-                font-weight: bold;
-            }}
-        </style>
-    </head>
-    <body>
-        <div class="status-container">
-            <div id="status-widget" class="status-widget status-processing">
-                <div class="status-icon">
-                    <div class="spinner" id="spinner"></div>
-                    <div class="checkmark" id="checkmark" style="display:none;">✓</div>
-                </div>
-                <div class="status-content">
-                    <h3 id="status-title" style="margin: 0 0 5px 0;">Processing data...</h3>
-                    <p id="status-message" style="margin: 0;">Starting the operation...</p>
-                    <div id="progress-container" style="margin-top: 10px; background: #eee; border-radius: 5px;">
-                        <div id="progress-bar" style="height: 10px; width: 0%; background: #31333f; border-radius: 5px;"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <script>
-            // Function to receive messages from parent (Streamlit)
-            window.addEventListener('message', function(event) {{
-                try {{
-                    const data = JSON.parse(event.data);
-                    if (data.type === 'update_status') {{
-                        document.getElementById('status-title').innerText = data.title;
-                        document.getElementById('status-message').innerText = data.message;
-                        document.getElementById('progress-bar').style.width = data.progress + '%';
-                        if (data.state === 'complete') {{
-                            document.getElementById('status-widget').className = 'status-widget status-complete';
-                            document.getElementById('spinner').style.display = 'none';
-                            document.getElementById('checkmark').style.display = 'block';
-                        }}
-                    }}
-                }} catch (e) {{
-                    console.error('Error processing message:', e);
-                }}
-            }});
-        </script>
-    </body>
-    </html>
-    """
-    return f"data:text/html;base64,{base64.b64encode(html.encode()).decode()}"
-# Create two columns - one for the iframe and one for the content
-col1, col2 = st.columns([1, 3])
-# Create the iframe in col1 with the status widget
-with col1:
-    iframe_height = 150
-    iframe_src = get_iframe_html(iframe_height)
-    st.markdown(
-        f'<iframe src="{iframe_src}" height="{iframe_height}" width="100%" frameBorder="0"></iframe>',
-        unsafe_allow_html=True
-    )
-    # Create a hidden element that will contain our JavaScript
-    st.markdown(
-        """
-        <div id="iframe-connector"></div>
-        <script>
-        // Function to send messages to the iframe
-        function updateStatus(title, message, progress, state) {
-            const iframes = document.getElementsByTagName('iframe');
-            if (iframes.length > 0) {
-                const data = {
-                    type: 'update_status',
-                    title: title,
-                    message: message,
-                    progress: progress,
-                    state: state
-                };
-                iframes[0].contentWindow.postMessage(JSON.stringify(data), '*');
-            }
-        }
-        // Store the function in window object so Python can access it
-        window.updateStatus = updateStatus;
-        </script>
-        """,
-        unsafe_allow_html=True
-    )
-# Create main content in col2
-with col2:
-    st.title("Main Content Area")
-    st.write("Scroll down to see the sticky status widget in action")
-    # Button to start the process
-    if st.button("Start Process"):
-        # Simulate a process
-        for i in range(0, 101, 5):
-            # Update the message based on progress
-            if i < 30:
-                step = "Step 1: Loading data..."
-            elif i < 70:
-                step = "Step 2: Processing information..."
-            else:
-                step = "Step 3: Finalizing results..."
-            # Use JavaScript to update the iframe
-            js_code = f"""
-            <script>
-            if (window.updateStatus) {{
-                window.updateStatus(
-                    "Processing data... {i}%",
-                    "{step}",
-                    {i},
-                    "{('complete' if i == 100 else 'processing')}"
-                );
-            }}
-            </script>
-            """
-            st.markdown(js_code, unsafe_allow_html=True)
-            # Wait a bit to simulate work
-            time.sleep(0.2)
-    # Add content to make the page scrollable
-    for i in range(30):
-        st.write(f"Content row {i} - This is some sample text to make the page scrollable.")
-        if i % 5 == 0:
-            st.subheader(f"Section {i//5 + 1}")
-            st.write("This is a section with more content to demonstrate scrolling.")
 #hide_streamlit_style = """
 #        <style>

 import time
 import base64
+st.markdown("---")
+st.subheader("Alternative Approach Using Components")
+st.write("""
+If the iframe approach doesn't work for you, try this alternate solution:
+```python
+import streamlit as st
+# First, inject the CSS
+st.markdown('''
+<style>
+    /* Create a fixed container at the top */
+    .fixed-container {
+        position: fixed;
+        top: 3.8rem;  /* Position below Streamlit header */
+        left: 0;
+        right: 0;
+        background: white;
+        z-index: 999;
+        padding: 1rem;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+    /* Add padding to the main content to prevent overlap */
+    .main-content {
+        padding-top: 7rem;  /* Adjust this value based on your status height */
+    }
+</style>
+''', unsafe_allow_html=True)
+# Create a container for the fixed status
+st.markdown('<div class="fixed-container">', unsafe_allow_html=True)
+status = st.status("Processing data...")
+with status:
+    st.write("This status widget will remain fixed while scrolling")
+st.markdown('</div>', unsafe_allow_html=True)
+# Add padding to prevent content overlap
+st.markdown('<div class="main-content">', unsafe_allow_html=True)
+# Your main content
+st.title("Main Content")
+for i in range(30):
+    st.write(f"Content row {i}")
+st.markdown('</div>', unsafe_allow_html=True)
+```
 #hide_streamlit_style = """
 #        <style>