I’ve been searching through different forums and trying different custom components to find out how to remove the unrecognized feature.
These warnings is showing when i use custom components. i really need to know if it is possible to remove or disable these features even though I don’t even use them in the code.
my code is based on: https://appcreatecomponent-ngm4rrw7ryvtzb6nigbbmw.streamlit.app/
but i tried the nav bar custom component as well and warnings still pop up. please help!
The code in the screenshot:
import streamlit as st
import os
import tempfile
import streamlit.components.v1 as components
def gensimplecomponent(name, template="", script=""):
def html():
return f"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{name}</title>
<script>
if ('ambient-light-sensor' in window) {{
// Initialize ambient-light-sensor features
}}
function sendMessageToStreamlitClient(type, data) {{
const outData = Object.assign({{
isStreamlitMessage: true,
type: type,
}}, data);
window.parent.postMessage(outData, "*");
}}
const Streamlit = {{
setComponentReady: function() {{
sendMessageToStreamlitClient("streamlit:componentReady", {{apiVersion: 1}});
}},
setFrameHeight: function(height) {{
sendMessageToStreamlitClient("streamlit:setFrameHeight", {{height: height}});
}},
setComponentValue: function(value) {{
sendMessageToStreamlitClient("streamlit:setComponentValue", {{value: value}});
}},
RENDER_EVENT: "streamlit:render",
events: {{
addEventListener: function(type, callback) {{
window.addEventListener("message", function(event) {{
if (event.data.type === type) {{
event.detail = event.data
callback(event);
}}
}});
}}
}}
}}
</script>
</head>
<body>
{template}
</body>
<script>
{script}
</script>
</html>
"""
dir = f"{tempfile.gettempdir()}/{name}"
if not os.path.isdir(dir): os.mkdir(dir)
fname = f'{dir}/index.html'
f = open(fname, 'w')
f.write(html())
f.close()
func = components.declare_component(name, path=str(dir))
def f(**params):
component_value = func(**params)
return component_value
return f
template = """
<div id="root">
<p> This is an example </p>
<input type="text" name="text_input" id="input_box" />
</div>
"""
script = """
(function() {
const originalConsoleWarn = console.warn;
console.warn = function() {
if (arguments[0] && arguments[0].includes("Unrecognized feature: 'ambient-light-sensor'")) {
return;
}
originalConsoleWarn.apply(console, arguments);
};
})();
function onRender(event) {
if (!window.rendered) {
const {value} = event.detail.args;
const input = document.getElementById("input_box");
if (value) {
input.value = value
}
input.onkeyup = event => Streamlit.setComponentValue(event.target.value)
Streamlit.setFrameHeight(80)
window.rendered = true
}
}
Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
Streamlit.setComponentReady()
"""
simplecomponent = gensimplecomponent('mysimplecomponent', template=template, script=script)
value1 = simplecomponent(key="bbb")
st.write(value1)
value2 = simplecomponent(key="ccc")
st.write(value2)
st.write("hi")