Spaces:
Runtime error
Runtime error
File size: 3,744 Bytes
c19ca42 |
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
// this would not be needed if automatic run gradio with loop enabled
const refresh_interval = 2000
const data_length = 120
let loaded = false;
let interval_sys;
let interval_bench;
const memoData = []
const loadData = []
const colorRangeMap = $.range_map({
'0:5': '#fffafa',
'6:10': '#fff7ed',
'11:20': '#fed7aa',
'21:30': '#fdba74',
'31:40': '#fb923c',
'41:50': '#f97316',
'51:60': '#ea580c',
'61:70': '#c2410c',
'71:80': '#9a3412',
'81:90': '#7c2d12',
'91:100': '#6c2e12',
})
const sparklineConfig = { type: 'bar', height: '100px', barWidth: '3px', barSpacing: '1px', disableInteraction: true, chartRangeMin: 0, chartRangeMax: 100, disableHiddenCheck: true, colorMap: colorRangeMap, fillColor: false };
function refresh_info() {
const btn = gradioApp().getElementById('system_info_tab_refresh_btn'); // we could cache this dom element
if (btn) btn.click(); // but ui may get destroyed, actual refresh is done from python code we just trigger it but simulating button click
}
function refresh_info_full() {
const btn = gradioApp().getElementById('system_info_tab_refresh_full_btn'); // we could cache this dom element
if (btn) btn.click(); // but ui may get destroyed, actual refresh is done from python code we just trigger it but simulating button click
}
function refresh_bench() {
const btn = gradioApp().getElementById('system_info_tab_refresh_bench_btn'); // we could cache this dom element
if (btn) btn.click(); // but ui may get destroyed, actual refresh is done from python code we just trigger it but simulating button click
}
function receive_system_info(data) {
// https://omnipotent.net/jquery.sparkline/#s-docs
if (loadData.length > data_length) loadData.shift();
loadData.push(data?.memory?.utilization || 0);
const tab = gradioApp().getElementById('tab_system') || gradioApp().getElementById('tabs');
if (!tab) return;
sparklineConfig.barWidth = Math.floor(tab.clientWidth - 20) / data_length / 2;
$('#si-sparkline-load').sparkline(loadData, sparklineConfig);
if (memoData.length > data_length) memoData.shift();
memoData.push(100 * (data?.memory?.gpu?.used || 0) / (data?.memory?.gpu?.total || 1));
$('#si-sparkline-memo').sparkline(memoData, sparklineConfig);
}
function onHidden() { // stop refresh interval when tab is not visible
if (interval_sys) {
clearInterval(interval_sys);
interval_sys = undefined;
}
if (interval_bench) {
clearInterval(interval_bench);
interval_bench = undefined;
}
}
function onVisible() { // start refresh interval tab is when visible
if (!interval_sys) {
setTimeout(refresh_info_full, 50); // do full refresh on first show
refresh_info_full(); // do full refresh on first show
interval_sys = setInterval(refresh_info, refresh_interval); // check interval already started so dont start it again
}
if (!interval_bench) interval_bench = setInterval(refresh_bench, 1000); // check interval already started so dont start it again
}
function initLoading() { // triggered on gradio change to monitor when ui gets sufficiently constructed
if (loaded) return;
const block = gradioApp().getElementById('si-sparkline-load');
if (!block) return;
intersectionObserver = new IntersectionObserver((entries) => {
if (entries[0].intersectionRatio <= 0) onHidden();
if (entries[0].intersectionRatio > 0) onVisible();
});
intersectionObserver.observe(block); // monitor visibility of tab
}
function initInitial() { // just setup monitor for gradio events
const mutationObserver = new MutationObserver(initLoading);
mutationObserver.observe(gradioApp(), { childList: true, subtree: true }); // monitor changes to gradio
}
document.addEventListener('DOMContentLoaded', initInitial);
|