Проблема с публикацией ноутбука Jupyter Online ⇐ Javascript

[Anonymous]

В настоящее время я работаю над интерактивным пользовательским интерфейсом в ноутбуке Jupyter, основанном в основном на IPY виджетах, чтобы оснащены 3D -интерактивными моделями, созданными и экспортируемыми ранее с использованием Blender. Я использовал 3D -модель HTML, чтобы показать 3D -модель (см. Код ниже), которая работает совершенно нормально, но когда я пытаюсь опубликовать ноутбук Jupyter, например. Используя Voíla, он покажет все, кроме 3D -модели (см. Прикрепленные изображения). Кто -нибудь еще столкнулся с этой проблемой или имеет представление о том, как ее решить? Код: < /p>
from IPython.display import HTML, Javascript, display

# Load the model-viewer script once
display(Javascript("""
if (!window.modelViewerLoaded) {
const script = document.createElement('script');
script.type = 'module';
script.src = 'https://unpkg.com/@google/model-viewer/ ... wer.min.js';
document.head.appendChild(script);
window.modelViewerLoaded = true;
}
"""))

# Define the model viewer display function
def display_model_waterdepth(glb_path):
return HTML(f"""





+
-
⟳
Neubacher Au
Ofenloch




(function() {{
const root = document.currentScript.previousElementSibling;
const viewer = root.querySelector('model-viewer');

root.querySelector('[data-zoomplus]').addEventListener('click', () => {{
const o = viewer.getCameraOrbit();
viewer.cameraOrbit = `${{o.theta}}rad ${{o.phi}}rad ${{o.radius * 0.9}}m`;
}});
root.querySelector('[data-zoomminus]').addEventListener('click', () => {{
const o = viewer.getCameraOrbit();
viewer.cameraOrbit = `${{o.theta}}rad ${{o.phi}}rad ${{o.radius * 1.1}}m`;
}});
root.querySelector('[data-reset]').addEventListener('click', () => {{
viewer.cameraOrbit = "0deg 0deg 7000m";
viewer.cameraTarget = "auto auto auto";
viewer.fieldOfView = "45deg";
viewer.jumpCameraToGoal();
}});
root.querySelectorAll('[data-focus]').forEach(btn => {{
btn.addEventListener('click', () => {{
const area = btn.getAttribute('data-focus');
if (area === "1") {{
viewer.cameraOrbit = "0deg 0deg 2300m";
viewer.cameraTarget = "-850m 0m -450m";
}} else {{
viewer.cameraOrbit = "55deg 0deg 1800m";
viewer.cameraTarget = "1000m 230m -250m";
}}
viewer.jumpCameraToGoal();
}});
}});
}})();

""")


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