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...这样的行将不起作用。原因是您的云端硬盘文件位于执行代码的后端VM上。但是，使用<script>标签将由您的浏览器针对当前的基础原点colab.research.google.com进行解析，该基础原点不提供您的云端硬盘文件。

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

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

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

2 个答案: