Tutorial 3: Content Enhancements

Tutorial 3: Content Enhancements#

Week 1, Day 1: Instructions

By Neuromatch

Content creators: Viviana Greco

Content reviewers: Konstantine Tsafatinos

Production editors: Konstantine Tsafatinos

Acknowledgments: [Ella Batty, Spiros Chavlis and neuromatch]

Tutorial Objectives#

Estimated timing of tutorial: [15 mins]

In this tutorial, we’ll dive into enhancing your content by integrating various media and interactive elements.

By the end of this tutorial, you will:

learn how to add Airtable links
learn how to embed videos
learn how to integrate Kaggle/Collab Buttons
learn how to upload data to OSF and access it from Jupyter Books

Section 1: How to add Airtable links#

Airtable links should be added at the end of the OUTRO page of each tutorial.

Steps:

Request the Airtable Link
Add Image button
Embed and test the button

Request the Airtable Link

Reach Out to Neuromatch Staff: Request the specific Airtable link for the day. You will receive a link that resembles: https://portal.neuromatchacademy.org/api/redirect/to/48f385bc-3cd4-4516-96bb-46bdbdccbe9a

Add the Image Button

The button image is stored in the “static” folder within “tutorials” and is named “button.png”. You can access it on GitHub using this URL:

https://github.com/neuromatch/course-content-template/blob/main/tutorials/static/button.png?raw=1

Note: Please refrain from altering this image.

Embed the image button into your markdown cells

Insert the following HTML code to add the image button:

<a href="YOUR_AIRTABLE_LINK_HERE">
    <img src="https://github.com/your_org_name/your_repo_name/blob/main/tutorials/static/button.png?raw=1" alt="button link to survey" style="width:410px">
</a>

Replace YOUR_AIRTABLE_LINK_HERE with the link provided by Neuromatch staff.

Ex:

<a href="https://portal.neuromatchacademy.org/api/redirect/to/48f385bc-3cd4-4516-96bb-46bdbdccbe9a">
    <img src="https://github.com/your_org_name/your_repo_name/blob/main/tutorials/static/button.png?raw=1" alt="button link to survey" style="width:410px">
</a>

After embedding the button click on it to ensure it redirects correctly to the Airtable survey.

Section 2: How to embed videos#

When adding videos to your content, please follow the guidelines outlined below:

Utilize the Provided Code: Use the code template provided below. A few important notes about the code:

PlayVideo Class & display_videos Function: Avoid making modifications to the PlayVideo class or the display_videos function.

Update the video_ids List: Your main focus should be on modifying the video_ids list. Here, you specify the video platform and the corresponding video ID:

Youtube Videos: Adopt the format (‘Youtube’, ‘<video_id>’). The <video_id> can be found in the video’s Youtube URL. For example, in the URL https://www.youtube.com/watch?v=KUdKlJxtjQw, the video ID is KUdKlJxtjQw.
Bilibili Videos: Use the format (‘Bilibili’, ‘<bvid>’). The <bvid> represents Bilibili’s unique ID for that video.
OSF Videos: The format is (‘Osf’, ‘<osf_video_id>’).

Run the Code: After updating the video_ids list, execute the entire code block to display the videos within your notebook.
Instructions on how to upload video to these platform can be found here

Section 2.1: Tag at the top of the video code cell#

In the W#D#_Intro.ipynb and W#D#_Outro.ipynb, use # @markdown at the top of the video code cell.

In the W#D#_Tutorial# use # @title Video <number of the video in the current tutorial>: Title of the video

Section 2.2: Add video links in the material.yml file#

When you add or modify videos in the Jupyter Notebook, it’s also essential to keep the materials.yml file up-to-date. Here’s how to do it: Remember that the main structure for this File has been already explaineed in W1D1_Tutorial2, Section 4.

- day: W1D1
  category: Course Content Template Instructions 
  
  # Replace with the Youtube video link from W#D#_Intro.ipynb. Example:
  intro: https://www.youtube.com/watch?v=KxldhMR5PxA 
  
  # Replace with the Bilibili video link from W#D#_Intro.ipynb. Example:
  intro_bilibili: https://www.bilibili.com/video/BV1HT4y1E7U4/
  
  name: Instructions           
  
  # Replace with the Youtube video link from W#D#_Outro.ipynb. Example:
  outro:  https://www.youtube.com/watch?v=KZQXfQL1SH4
  
  # Replace with the Bilibili video link from W#D#_Outro.ipynb. Example:
  outro_bilibili: https://www.bilibili.com/video/BV1vv411i7SG/
  
  # Replace with the Youtube playlist link. Example:
  playlist: https://www.youtube.com/playlist?list=PLkBQOLLbi18ObAiSOZ42YBwOQIKNvspeI

## Section 2.3: Video embedding example

# @markdown
from ipywidgets import widgets
from IPython.display import YouTubeVideo
from IPython.display import IFrame
from IPython.display import display


class PlayVideo(IFrame):
  def __init__(self, id, source, page=1, width=400, height=300, **kwargs):
    self.id = id
    if source == 'Bilibili':
      src = f'https://player.bilibili.com/player.html?bvid={id}&page={page}'
    elif source == 'Osf':
      src = f'https://mfr.ca-1.osf.io/render?url=https://osf.io/download/{id}/?direct%26mode=render'
    super(PlayVideo, self).__init__(src, width, height, **kwargs)


def display_videos(video_ids, W=400, H=300, fs=1):
  tab_contents = []
  for i, video_id in enumerate(video_ids):
    out = widgets.Output()
    with out:
      if video_ids[i][0] == 'Youtube':
        video = YouTubeVideo(id=video_ids[i][1], width=W,
                             height=H, fs=fs, rel=0)
        print(f'Video available at https://youtube.com/watch?v={video.id}')
      else:
        video = PlayVideo(id=video_ids[i][1], source=video_ids[i][0], width=W,
                          height=H, fs=fs, autoplay=False)
        if video_ids[i][0] == 'Bilibili':
          print(f'Video available at https://www.bilibili.com/video/{video.id}')
        elif video_ids[i][0] == 'Osf':
          print(f'Video available at https://osf.io/{video.id}')
      display(video)
    tab_contents.append(out)
  return tab_contents


video_ids = [('Youtube', 'W5o_HTsef0I'), ('Bilibili', 'BV1ho4y1C7Eo')]
tab_contents = display_videos(video_ids, W=730, H=410)
tabs = widgets.Tab()
tabs.children = tab_contents
for i in range(len(tab_contents)):
  tabs.set_title(i, video_ids[i][0])
display(tabs)

Section 3: Add and test buttons for Kaggle/Colab#

COLAB

STEP 1: The URL structure for Google Colab links that point to GitHub repositories is: https://colab.research.google.com/github/[USERNAME]/[REPOSITORY]/blob/[BRANCH]/[PATH_TO_NOTEBOOK].ipynb

Replace:

[USERNAME] with the GitHub organization name ⟶ ask Konstantine if in the future this will be Neuromatch or Neuromatch Academy.
[REPOSITORY] with the name of the GitHub repository.
[BRANCH] with the name of the branch - usually this will be main
[PATH_TO_NOTEBOOK].ipynb with the relative path to the notebook in the repository.

STEP 2: Embed the Button in Jupyter Book Use the following HTML to add the Google Colab button:

<a href="YOUR_GENERATED_LINK_HERE" target="_parent">     <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/></a>

Replace YOUR_GENERATED_LINK_HERE with the link you generated in step 1.

For example:

KAGGLE

STEP 1: The URL structure to open notebooks in Kaggle from a GitHub repository is: https://kaggle.com/kernels/welcome?src=https://raw.githubusercontent.com/[USERNAME]/[REPOSITORY]/[BRANCH]/[PATH_TO_NOTEBOOK].ipynb

Replace:

[USERNAME] with the GitHub organization name.
[REPOSITORY] with the name of the GitHub repository.
[BRANCH] with the name of the branch - - usually this will be main
[PATH_TO_NOTEBOOK].ipynb with the relative path to the notebook in your repository.

STEP 2: Embed the Button in Jupyter Book

Use the following HTML to add the Kaggle button:

<a href="YOUR_GENERATED_LINK_HERE" target="_parent">     <img src="https://kaggle.com/static/images/open-in-kaggle.svg" alt="Open in Kaggle"/></a>

Replace YOUR_GENERATED_LINK_HERE with the link you generated in step 1.

For example:

<a href="https://kaggle.com/kernels/welcome?src=https://raw.githubusercontent.com/neuromatch/course-content-template/main/tutorials/W1D1_Instructions/W1D1_Tutorial3.ipynb" target="_parent"><img src="https://kaggle.com/static/images/open-in-kaggle.svg" alt="Open in Kaggle"/></a>

Test the Button for both Colab and Kaggle:

After embedding the button in your Jupyter book and publishing the changes:
Click on the “Open In Colab” button or “Open In Kaggle” button.

This should open a new tab, and the notebook should be loaded into Google Colab / Kaggle directly from the GitHub repository.

Section 4: Uploade data to OSF and access it from Jupyter#

Uploading Data to OSF:

Navigate to the OSF Neuromatch Academy page. If you already have an account, log in using your credentials. If not, create a new account.
Upload Data: Choose or create the appropriate project/folder in which you want to upload the data. Click on Files, then Upload (+) to add your data files.
Grab the Link ID: Once the data or file is uploaded, each file or folder will have a unique link ID. This ID can be found in the URL of the uploaded file. Example URL: https://osf.io/6dxwe/ - Here, 6dxwe is the unique link ID.

When uploading materials to OSF, please maintain the following structure:

For New Courses: Use the structure adopted by the “Climatematch” course as a template (e.g., Climatematch/2023/Projects)

For Existing Courses: If you’re adding materials to a course that already has content on OSF, follow the established structure.

@markdown#

from IPython.display import IFrame from ipywidgets import widgets out = widgets.Output() with out: print(f”If you want to download the slides: https://osf.io/download//”) display(IFrame(src=f”https://mfr.ca-1.osf.io/render?url=https://osf.io//?direct%26mode=render%26action=download%26mode=render”, width=730, height=410)) display(out)

To check storage limits imposed by OSF please visit the (website) [https://help.osf.io/article/386-project-storage#:~:text=OSF%20will%20limit%20the%20capacity,for%20storage%20management%20wherever%20possible.]

Here’s what you need to know about storage Limits:

Private Projects: Limited to 5 GB using OSF Storage.
Public Projects: Can utilize up to 50 GB with OSF Storage.