在 Google Colab html 中导入外部 JS 脚本

Question

我很难将我的自定义外部 JS 文件导入到 Google Colab。 我使用 html + js，遵循以下工作流程：

1 / 进口

from IPython.display import HTML, SVG
from IPython.core.magic import register_cell_magic

2 / 挂载驱动

from google.colab import drive
drive.mount('/content/drive')

3 / html

@register_cell_magic
def dojs(line, src):
  return HTML(f"""
  <canvas id="renderCanvas" touch-action="none" width="1280px" height="720px"></canvas> 
  <script src="content/drive/My Drive/Colab Notebooks/files/testJavascript.js"></script>
  <script>
  {src} 
  </script>
  """)

4 / js

%%dojs
//...trying to use functions from testJavascript.js

也许如何做到这一点真的很简单，但我是 Colab 的新手。 我收到“加载资源失败：服务器响应状态为 500 ()”。

Answer 1

你需要把你的JS文件放在这里：

/usr/local/share/jupyter/nbextensions/google.colab/

然后就可以通过路径访问了

/nbextensions/google.colab/

在你的情况下，你需要在那里复制你的 js 文件：

!cp /content/drive/My\ Drive/Colab\ Notebooks/files/testJavascript.js \
    /usr/local/share/jupyter/nbextensions/google.colab/

然后将dojs()改为

@register_cell_magic
def dojs(line, src):
  return HTML(f"""
  <canvas id="renderCanvas" touch-action="none" width="1280px" height="720px"></canvas> 
  <script src="/nbextensions/google.colab/testJavascript.js"></script>
  <script>
  {src} 
  </script>
  """)

Answer 2

像script src="content/drive...这样的行不起作用。原因是您的 Drive 文件存在于执行代码的后端 VM 上。但是，使用<script>标签将由您的浏览器解决针对当前的基本来源，即colab.research.google.com ，它不提供您的云端硬盘文件。

在此处的高级输出示例中有一些用于提供本地文件的方法：

https://colab.research.google.com/notebooks/snippets/advanced_outputs.ipynb#scrollTo=R8ZvCXC5A0wT