Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.3/flowbite.min.css" rel="stylesheet" /> | |
| </head> | |
| <!-- | |
| ---------------------------------------------------- | |
| Your custom static HTML goes in the body: | |
| --> | |
| <body> | |
| <div class="inline-flex rounded-md shadow-sm" role="group"> | |
| <button id="create" type="button" onclick="call(this)" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> | |
| <svg aria-hidden="true" class="w-4 h-4 mr-2 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd"></path> | |
| </svg> | |
| Create | |
| </button> | |
| <button id="delete" type="button" onclick="call(this)" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> | |
| <svg aria-hidden="true" class="w-4 h-4 mr-2 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M6.75 9.25a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"></path> | |
| </svg> | |
| Delete | |
| </button> | |
| <button id="save" type="button" onclick="call(this)" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> | |
| <svg aria-hidden="true" class="w-4 h-4 mr-2 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path> | |
| </svg> | |
| Save | |
| </button> | |
| </div> | |
| </body> | |
| <script type="text/javascript"> | |
| // ---------------------------------------------------- | |
| // Use these functions as is to perform required Streamlit | |
| // component lifecycle actions: | |
| // | |
| // 1. Signal Streamlit client that component is ready | |
| // 2. Signal Streamlit client to set visible height of the component | |
| // (this is optional, in case Streamlit doesn't correctly auto-set it) | |
| // 3. Pass values from component to Streamlit client | |
| // | |
| // Helper function to send type and data messages to Streamlit client | |
| const SET_COMPONENT_VALUE = "streamlit:setComponentValue" | |
| const RENDER = "streamlit:render" | |
| const COMPONENT_READY = "streamlit:componentReady" | |
| const SET_FRAME_HEIGHT = "streamlit:setFrameHeight" | |
| function _sendMessage(type, data) { | |
| // copy data into object | |
| var outboundData = Object.assign({ | |
| isStreamlitMessage: true, | |
| type: type, | |
| }, data) | |
| if (type == SET_COMPONENT_VALUE) { | |
| console.log("_sendMessage data: " + JSON.stringify(data)) | |
| console.log("_sendMessage outboundData: " + JSON.stringify(outboundData)) | |
| } | |
| window.parent.postMessage(outboundData, "*") | |
| } | |
| function initialize(pipeline) { | |
| // Hook Streamlit's message events into a simple dispatcher of pipeline handlers | |
| window.addEventListener("message", (event) => { | |
| if (event.data.type == RENDER) { | |
| // The event.data.args dict holds any JSON-serializable value | |
| // sent from the Streamlit client. It is already deserialized. | |
| pipeline.forEach(handler => { | |
| handler(event.data.args) | |
| }) | |
| } | |
| }) | |
| _sendMessage(COMPONENT_READY, { apiVersion: 1 }); | |
| // Component should be mounted by Streamlit in an iframe, so try to autoset the iframe height. | |
| window.addEventListener("load", () => { | |
| window.setTimeout(function () { | |
| setFrameHeight(document.documentElement.clientHeight) | |
| }, 0) | |
| }) | |
| // Optionally, if auto-height computation fails, you can manually set it | |
| // (uncomment below) | |
| //setFrameHeight(200) | |
| } | |
| function setFrameHeight(height) { | |
| _sendMessage(SET_FRAME_HEIGHT, { height: height }) | |
| } | |
| // The `data` argument can be any JSON-serializable value. | |
| function notifyHost(data) { | |
| _sendMessage(SET_COMPONENT_VALUE, data) | |
| } | |
| // ---------------------------------------------------- | |
| // Your custom functionality for the component goes here: | |
| function call(button) { | |
| timestamp = Date.now() | |
| action = { | |
| "action": button.id, | |
| "timestamp": timestamp | |
| } | |
| notifyHost({ | |
| value: action, | |
| dataType: "json", | |
| }) | |
| } | |
| // ---------------------------------------------------- | |
| // Here you can customize a pipeline of handlers for | |
| // inbound properties from the Streamlit client app | |
| // Set initial value sent from Streamlit! | |
| function initializeProps_Handler(props) { | |
| for (let key of Object.keys(props.buttons)) { | |
| btn = document.getElementById(key) | |
| btn.disabled = props.buttons[key] | |
| } | |
| // btn.disabled = props.initial_state.delete_disabled | |
| } | |
| // Access values sent from Streamlit! | |
| function dataUpdate_Handler(props) { | |
| // let msgLabel = document.getElementById("message_label") | |
| // msgLabel.innerText = `Update [${props.counter}] at ${props.datetime}` | |
| } | |
| // Simply log received data dictionary | |
| function log_Handler(props) { | |
| console.log("Received from Streamlit: " + JSON.stringify(props)) | |
| } | |
| let pipeline = [initializeProps_Handler, dataUpdate_Handler, log_Handler] | |
| // ---------------------------------------------------- | |
| // Finally, initialize component passing in pipeline | |
| initialize(pipeline) | |
| </script> | |
| </html> |