前言
公司的AI Pass平台能够在前端页面通过选择不同的配置和镜像，去启动不同的服务，jupyter也是这些服务之一，以供算法团队在线开发训练。
思路
用户选择完相应配置并点击启动服务后，在前端页面异步等待jupyterlab服务启动完可以新打开一个浏览器窗口，通过iframe嵌入的方式去操作jupyter。
代码实现
<script setup>
import axios from 'axios'
// config.client_jupyter为nginx反向代理前缀
const url = `${config.client_jupyter}/${state.value.serviceDetail.nameEn}/lab?token=${token}`
const iframeRef = ref()
onMounted(() => {
getJupyterlab(iframeRef.value, url)
})
function getJupyterlab(iframe, url) {
axios
.get(url, {
headers: {
Authorization: 'Bearer ' + storage.local.get('token')
}
})
.then(res => {
//防止k8s容器中的jupyter服务启动后资源没完全加载好,会出现部分静态资源404问题,需要加个定时器延迟去加载这个html文档
setTimeout(() => {
const doc = iframe.contentDocument || iframe.contentWindow.document
doc.open()
doc.write(res.data)
doc.close()
}, 2000)
})
.catch(() => {
//防止jupyter服务加载慢获取不到html文档问题
//这里报错就会一直重复请求直到成功请求到jupyterlab的html文档
setTimeout(() => {
getJupyterlab(iframe, url)
}, 1000)
})
}
</script>
<template>
<div>
<iframe ref="iframeRef"/>
</div>
</template>
效果如下
