Hi @s204159 ,
sorry for the late reply, haven’t found the time yet to test it. For me it works.
Let me summarize what I did.
- I cloned the repo
- changed exactly (and only) the same two lines as you did.
- built and started LS within a docker container ( but I think that does not make any difference compared to your way of starting it)
- Registered a task in LS via a json file that I uploaded, here is my task definition.
{
"website": "<iframe src='/data/local-files/?d=abc/circles.html' height='550' width='1050'></iframe>"
}
Note, the html file itself resides on my local hard drive, I mounted it during docker startup, see here: Label Studio Documentation — Start commands for Label Studio . The content of the html file is this one, it is taken from an example from the bokeh homepage, nothing fancy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bokeh Plot</title>
<style>
html, body {
box-sizing: border-box;
display: flow-root;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.6.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.6.1.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
</head>
<body>
<div id="c1dea33c-8167-450e-9cd1-6fd431f75b29" data-root-id="p1055" style="display: contents;"></div>
<script type="application/json" id="bdf830e7-f3dc-4709-9a07-375d39d10326">
{"e8d564d6-8f55-4d5d-8d7d-1bfa15122e77":{"version":"3.6.1","title":"Bokeh Application","roots":[{"type":"object","name":"Column","id":"p1055","attributes":{"children":[{"type":"object","name":"Row","id":"p1052","attributes":{"children":[{"type":"object","name":"Div","id":"p1045","attributes":{"width":200,"height":30,"text":"\n <p>Select the circle's size using this control element:</p>\n "}},{"type":"object","name":"Spinner","id":"p1047","attributes":{"js_property_callbacks":{"type":"map","entries":[["change:value",[{"type":"object","name":"CustomJS","id":"p1048","attributes":{"args":{"type":"map","entries":[["other",{"type":"object","name":"Scatter","id":"p1039","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"size":{"type":"value","value":30},"line_color":{"type":"value","value":"#1f77b4"},"fill_color":{"type":"value","value":"#21a7df"}}}]]},"code":"other.size = this.value"}}]]]},"width":200,"title":"Circle size","value":30,"low":0,"high":60,"step":5}}]}},{"type":"object","name":"Row","id":"p1053","attributes":{"children":[{"type":"object","name":"RangeSlider","id":"p1049","attributes":{"js_property_callbacks":{"type":"map","entries":[["change:value",[{"type":"object","name":"CustomJS","id":"p1050","attributes":{"args":{"type":"map","entries":[["other",{"type":"object","name":"Range1d","id":"p1010","attributes":{"start":1,"end":9}}]]},"code":"other.start = this.value[0]"}},{"type":"object","name":"CustomJS","id":"p1051","attributes":{"args":{"type":"map","entries":[["other",{"id":"p1010"}]]},"code":"other.end = this.value[1]"}}]]]},"title":"Adjust x-axis range","value":[1,9],"start":0,"end":10}}]}},{"type":"object","name":"Row","id":"p1054","attributes":{"children":[{"type":"object","name":"Figure","id":"p1001","attributes":{"width":1000,"height":400,"x_range":{"id":"p1010"},"y_range":{"type":"object","name":"DataRange1d","id":"p1003"},"x_scale":{"type":"object","name":"LinearScale","id":"p1011"},"y_scale":{"type":"object","name":"LinearScale","id":"p1012"},"title":{"type":"object","name":"Title","id":"p1008"},"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1042","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1036","attributes":{"selected":{"type":"object","name":"Selection","id":"p1037","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1038"},"data":{"type":"map","entries":[["x",[1,2,3,4,5,6,7,8,9,10]],["y",[4,5,5,7,2,6,4,9,1,3]]]}}},"view":{"type":"object","name":"CDSView","id":"p1043","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1044"}}},"glyph":{"id":"p1039"},"nonselection_glyph":{"type":"object","name":"Scatter","id":"p1040","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"size":{"type":"value","value":30},"line_color":{"type":"value","value":"#1f77b4"},"line_alpha":{"type":"value","value":0.1},"fill_color":{"type":"value","value":"#21a7df"},"fill_alpha":{"type":"value","value":0.1},"hatch_alpha":{"type":"value","value":0.1}}},"muted_glyph":{"type":"object","name":"Scatter","id":"p1041","attributes":{"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"size":{"type":"value","value":30},"line_color":{"type":"value","value":"#1f77b4"},"line_alpha":{"type":"value","value":0.2},"fill_color":{"type":"value","value":"#21a7df"},"fill_alpha":{"type":"value","value":0.2},"hatch_alpha":{"type":"value","value":0.2}}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1009","attributes":{"tools":[{"type":"object","name":"PanTool","id":"p1023"},{"type":"object","name":"WheelZoomTool","id":"p1024","attributes":{"renderers":"auto"}},{"type":"object","name":"BoxZoomTool","id":"p1025","attributes":{"overlay":{"type":"object","name":"BoxAnnotation","id":"p1026","attributes":{"syncable":false,"line_color":"black","line_alpha":1.0,"line_width":2,"line_dash":[4,4],"fill_color":"lightgrey","fill_alpha":0.5,"level":"overlay","visible":false,"left":{"type":"number","value":"nan"},"right":{"type":"number","value":"nan"},"top":{"type":"number","value":"nan"},"bottom":{"type":"number","value":"nan"},"left_units":"canvas","right_units":"canvas","top_units":"canvas","bottom_units":"canvas","handles":{"type":"object","name":"BoxInteractionHandles","id":"p1032","attributes":{"all":{"type":"object","name":"AreaVisuals","id":"p1031","attributes":{"fill_color":"white","hover_fill_color":"lightgray"}}}}}}}},{"type":"object","name":"SaveTool","id":"p1033"},{"type":"object","name":"ResetTool","id":"p1034"},{"type":"object","name":"HelpTool","id":"p1035"},{"type":"object","name":"HoverTool","id":"p1046","attributes":{"renderers":"auto","tooltips":[["x","@x"],["y","@y"]]}}]}},"left":[{"type":"object","name":"LinearAxis","id":"p1018","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1019","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1020"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1021"}}}],"below":[{"type":"object","name":"LinearAxis","id":"p1013","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1014","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1015"},"major_label_policy":{"type":"object","name":"AllLabels","id":"p1016"}}}],"center":[{"type":"object","name":"Grid","id":"p1017","attributes":{"axis":{"id":"p1013"}}},{"type":"object","name":"Grid","id":"p1022","attributes":{"dimension":1,"axis":{"id":"p1018"}}}]}}]}}]}}]}}
</script>
<script type="text/javascript">
(function() {
const fn = function() {
Bokeh.safely(function() {
(function(root) {
function embed_document(root) {
const docs_json = document.getElementById('bdf830e7-f3dc-4709-9a07-375d39d10326').textContent;
const render_items = [{"docid":"e8d564d6-8f55-4d5d-8d7d-1bfa15122e77","roots":{"p1055":"c1dea33c-8167-450e-9cd1-6fd431f75b29"},"root_ids":["p1055"]}];
root.Bokeh.embed.embed_items(docs_json, render_items);
}
if (root.Bokeh !== undefined) {
embed_document(root);
} else {
let attempts = 0;
const timer = setInterval(function(root) {
if (root.Bokeh !== undefined) {
clearInterval(timer);
embed_document(root);
} else {
attempts++;
if (attempts > 100) {
clearInterval(timer);
console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
}
}
}, 10, root)
}
})(window);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
})();
</script>
</body>
</html>
Here is the resulting labelling interface, the html plot in there is interactive (zooming, slider, etc …)
Just reading through your answer above, maybe your problem might be more related to a CORS issue? You try to load the wiki page of Denmark, which is for sure not hosted in your domain. See here:
