streamlit-debug/streamlit_app.py at main · TomJohnH/streamlit-debug · GitHub

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
import streamlit as st
import streamlit.components.v1 as components
import st_debug as d
import numpy as np
import random


# ---------------- CSS ----------------


def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)


local_css("debug.css")

# --------------- EXAMPLE -----------------


st.title("This is an app")
st.write(
    "This is an example how you can debug your code and view variables directely in sticky bottom debug div:"
)

st.write("1. Create a matrix")
st.code(
    """a = np.matrix("1 2; 3 4")
d.debug("this presents state of the matrix " + str(a))"""
)
a = np.matrix("1 2; 3 4")
d.debug("this presents state of the matrix " + str(a))

st.write("2. Create a counter in session state")

st.code(
    """if "counter" not in st.session_state:
    st.session_state["counter"] = 1

d.debug("counter " + str(st.session_state["counter"]))

st.session_state["counter"] += 1"""
)


if "counter" not in st.session_state:
    st.session_state["counter"] = 1

d.debug("counter " + str(st.session_state["counter"]))

st.session_state["counter"] += 1

st.write("At the bottom of the app you should see a debug div.")
st.write(
    "Debug div contains info about: time of calculation, line from which debug command was executed and saved debug info."
)

st.button("Hit R to recalculate the app or click me")
st.write("Hit CTRL + Q to hide the div.")

# ----- [DEBUG DIV] initize debug elements -----

if "debug_string" in st.session_state:
    st.markdown(
        f'<div class="debug" id="debug">{ st.session_state["debug_string"]}</div>',
        unsafe_allow_html=True,
    )

components.html(
    d.js_code(),
    height=0,
    width=0,
)