Streamlit Textarea с живым байтовым счетчиком ⇐ Html

[Anonymous]

У меня небольшая проблема в моем приложении. В настоящее время я работаю над приложением Streamlit, где я генерирую текст через OpenAI. Этот текст отображается в Textarea для пользователя, а Textarea имеет живой счетчик байтов.def html_text_area_with_live_byte_counter(label, default_value, key, height=150, max_bytes=2000):
html_code = f"""

{label}

{default_value}

Byte-Zähler: 0 Bytes von {max_bytes}



(function() {{
const textarea = document.getElementById("{key}");
const byteCountSpan = document.getElementById("{key}_byteCount");
const counterContainer = document.getElementById("{key}_counterContainer");
const maxBytes = {max_bytes};
function updateByteCount() {{
const encoder = new TextEncoder();
const byteCount = encoder.encode(textarea.value).length;
byteCountSpan.innerText = byteCount;
// Ändert die Farbe des gesamten Byte-Zähler-Textes, wenn der Wert überschritten wird
if (byteCount > maxBytes) {{
counterContainer.style.color = "red";
}} else {{
counterContainer.style.color = "inherit";
}}
}}
textarea.addEventListener("input", updateByteCount);
updateByteCount();
}})();

"""
components.html(html_code, height=height + 100, scrolling=False)
< /code>
С помощью этого подхода обновления счетчика байтов в прямом эфире, пока пользователи типы.
Проблема: У меня также есть кнопка загрузки, которая позволяет пользователю сохранять контент Textarea в виде файла .txt. Если я использую компонент HTML, я не могу получить обновленный текст, только исходное значение по умолчанию.def text_area_with_live_byte_counter(label: str, key: str, default: str = "",
height: int = 400, max_bytes: int | None = None) -> str:
# nur beim ersten Mal mit Default befüllen
if key not in st.session_state:
st.session_state[key] = default

st.text_area(label, key=key, height=height)

val = st.session_state[key]
count = len(val.encode("utf-8"))
over = max_bytes is not None and count > max_bytes
st.markdown(
f''
f'Byte-Zähler: {count} Bytes{f" von {max_bytes}" if max_bytes else ""}'
f'',
unsafe_allow_html=True
)
return val

< /code>
Здесь счетчики обновления только после того, как пользователь покидает Textarea.
Я знаю, что Textarea's Streamlit является статичной, но разве нет способа сделать обновление счетчика байтов в прямом эфире во время печати? /> Это мой первый вопрос, когда -либо заданный здесь, поэтому, если требуется дополнительная информация, я буду рад предоставить все необходимое, чтобы помочь найти решение. < /p>

Подробнее здесь: https://stackoverflow.com/questions/797 ... te-counter