DAVID MALAN: All right.
So our first session this morning is going
to be with me, with Rongxin, and with Carter.
And the goal is to talk really about all things technological to give you
a sense of what we, CS50, provide in the way of technology,
but also to give you a sense of how you can use or not use our own tools.
If you'd like more customization than we ourselves provide,
you can actually reinvent some of the wheels we have worked on over time
but use it for your more specific scenario.
So we'll focus then on providing first the standardized cloud-based
programming environments, which I alluded to yesterday when I gave you
a history of our non-cloud-based predecessors thereof.
So the goals will be for me to first give you
an introduction to Codespaces specifically, which
is the most recent incarnation of this vision of web-based programming
environments.
Rongxin will then kindly take over and focus on some of the lower-level
implementation details.
And if you're among those less comfortable teachers,
realize that you don't need to do everything we will cover in step 2.
That's the advanced, more customized version of what's available to you.
So if not this year, maybe in the future, maybe never.
But we wanted to at least give you a sense of a taste of what
you can do without us per se.
Carter will then focus on readying Codespaces for your own class,
setting up your own classroom, so to speak,
so that you can collect your students, work more directly
using other tools as well.
And then last but not least, certainly nowadays, Rongxin
will focus on all things AI and some of the tools we've alluded to a few times
and how Rongxin and our team this summer have really
brought CS50'S rubber duck to life.
So where do we begin?
So Visual Studio Code, a.k.a.
VS Code, is a very popular, free, open-source text editor, so to speak.
It's written by Microsoft, but it's sort of
taken over a lot of industry in that you can use it
not only for Windows environments or Windows programming,
but Linux, macOS, Android, iOS, although less so on the last
since Apple has its own thing.
But VS Code itself is completely free.
It's downloadable on Macs and PCs.
But there's still, as I mentioned yesterday, these pain
points for students and definitely for teachers.
If you have to have 10 students, 20 students, 200 students installing
Python or something like C, or really any programming
environment on their own Macs and PCs, we
tend to find that it detracts from getting started early in the term.
So what we have focused on over the past couple of years
is using a web-based version thereof so that we, CS50, can preinstall all
of the software, all of the programming language
support that you and your students might need.
And that is what lives at now cs50.dev, formerly known as code.cs50.io.
This is a shorter name, therefore, but it's
the exact same web-based environment.
It's based on this tool, which is a third-party product from GitHub that
kindly supports not only our educational use but yours and other
teachers' as well.
If you're curious to read more about what's going on, you can go to this URL
here.
But essentially, they are hosting what they
call Codespaces but more technically are really just Docker containers,
and more on those in just a bit.
But you can think of containers as being lightweight virtual machines,
the illusion in the cloud of a real, physical server
but completely implemented in software.
And unlike virtual machines, which might take several seconds, several minutes
to start up, containers tend to be characterized
by being able to start like this, at least once they've
been downloaded to the server or to one's own local computer.
So many thanks to our friends at GitHub Education in particular.
And that last URL I mentioned on the slide
is that same group to whom you could apply as a teacher
if you want to go beyond the scope of CS50's tools and do things yourself
on your own for your class or classes.
So here's a screenshot of what the landing page for cs50.dev
looks like today, minus some screenshots down here.
And just to give you a sense of the range of possibilities,
this doesn't technically just support CS50.
We've preinstalled not just support for C and Python and SQLite and HTML,
JavaScript, and CSS, which we ourselves use in CS50, but other things as well--
if you want to teach C++, at least within a command-line environment,
JavaScript via runtime called Node.js if you're teaching a Java class, Ruby,
or a few other environments as well.
The only thing to keep in mind, especially
if you're teaching other classes for which you
might want to use these same tools, is anything
that's graphical, like a Java program that
might have a GUI using Swing, a library, or other tools,
is that just have to keep in mind, you are on the internet,
or your students are on the internet.
So anything that might work very smoothly on a local Mac
or PC, maybe a ball bouncing back and forth,
might not work as well over the internet just because of that latency.
But there is support thanks to Rongxin and team for graphical things,
including all of these tools and more.
So that just gives you a sense of the lay of the land.
This, if you haven't seen it before, is a screenshot
of what the experience looks like, at least here in light mode.
In general, there's four regions of the screen for students.
One in black here is just the menu of options.
And among the menus, dot, dot, dot, is CS50's duck or AI.
More on that in a bit.
Two is a graphical File Explorer that, like a Mac or PC,
just shows students graphically what is in their account, files and folders.
There's a tabbed code editor-- and this is the norm
nowadays for writing not just one but maybe two or more files at a time.
And then per yesterday, a lower-level, more powerful terminal window, and that
is the textual interface to the underlying Codespace or Docker
container-- really, Linux, the operating system
that's running behind the scenes for students--
and making all of this possible for them.
Now, we won't walk through all of these kinds of tools,
but we wanted to at least give you a sense of the lay of the land
so that if you're curious to kind of veer off on your own
to explore other things, you at least have a cheat sheet with which to begin.
And I've put a thumbs up next to tools that we ourselves either
use for some purpose or have used in the past.
But when it comes to client-side programming environments
for students' own Macs and PCs, these are among the most popular options
nowadays.
And we, of course, per the thumbs up here,
are using nowadays Visual Studio Code, really for two reasons--
one, because there's now this cloud-based version thereof,
it's sort of turnkey.
We can get kids up and running quite quickly.
But also, per yesterday, because it's downloadable, too,
at the end of our class, we encourage students to install it on their own,
suffer through any headaches of getting Python or something else to work,
but once they already have had three or more months of programming
under their belt. So for us, narratively, I think that works well.
But you might recognize some of your own familiar tools there.
Client side too, there's other more technical solutions too.
You can actually run this software-- more on it in a bit-- called Docker.
So you can run or have your students run their own containers.
I wouldn't recommend this for an introductory course,
but maybe a second- or third-level class,
like particularly in systems, where you want your students
to have a specific version of Linux or more specialized tools
available to them.
But I think this is a very narrow use case for most faculty,
so I wouldn't spend too much time contemplating that, most likely.
And then you can do what we did in years past, which
is give your students a full-fledged virtual machine image.
That might be a gigabyte or more typically,
and that would allow them to virtualize the entire operating system.
But again, that's probably a solution for a lower-level systems
class for faculty interested in that.
But we've done all of this and more.
On the server side, meanwhile, like if you don't want students installing
anything-- you want something entirely server- or cloud-based-- the list is
longer and growing, I'm sure, over time.
We've categorized these into paid-only tools and free-tier tools.
So these are some popular tools out there nowadays.
We ourselves at Harvard, thanks to a site license that the university has,
uses a question and answer tool called Ed.
Happy to introduce you to that or to the team there.
They're pretty generous with term-long trials.
But typically, that is a paid upgrade eventually
for asynchronous questions and answers.
And Gradescope is a tool that came out of UC Berkeley a few years ago.
It was acquired by a company called Turnitin.
But that's a tool that makes it easier to grade,
not only paper-based assessments, but also electronically submitted ones too.
We use that with our undergraduates.
But again, we use tools, the free tools we
discussed yesterday, for our much larger audience online
simply because of licensing costs.
But then there's a lot of free tiers too, either through educational plans
or just available to anyone.
We, of course, are using Codespaces.
We have experimented with Colab, and that's
a popular implementation of Jupyter Notebook, essentially,
if you have Google Classroom at your school already.
And then Replit's a very popular option too,
which gives you turnkey cloud-based programming environments as well
that we've experimented with over time.
And dot, dot, dot-- there's many, many more.
And feel free to discuss later today in one of our birds of a feather.
So just to give you a sense of what is happening underneath the hood
when you or students go to cs50.dev, there
are a few configuration files that are making all of the magic happen.
We have one file here called a Dockerfile
in our own cs50-specific CLI, Command-Line Interface image.
And then we layer on top of that image, so to speak,
another Dockerfile that's specifically for our Codespaces.
And what this file contains, as you'll soon see,
is a bunch of commands that says, install x, install y, change this file,
add this configuration.
So it sort of automates at a low level all of the underlying Linux commands
that we want to run in advance for students,
so they don't have to futz with it themselves.
So then, when they go to cs50.dev, hit Enter,
sometimes it might take a minute or more to start up for the first time.
And what's happening is all of the commands in these files
are essentially being run.
It's a bit of a white lie.
Technically, they've been run in advance.
And so what's really happening is the results
of those commands are being downloaded to their own individual codespace.
So we'll give you a glimpse of this.
Again, this is not a prerequisite to teach any of CS50's courses.
We're really trying to go one level deeper for yo, so you know-- one,
understand what it is we're doing, but two, how you can do it
yourselves if you so choose.
There's one other file in the mix in this world of Codespaces now
in the cloud, which is a .devcontainer.json file.
And this is a pretty common, popular standard
nowadays, largely among the Microsoft ecosystem and beyond,
for configuring other details about a codespace or a container.
So it's in this file that you mention what
Dockerfile or files you want to use.
And it's in this file that you do things like preinstall VS Code extensions,
things like support for Python, support for C, support for CS50's duck
and so forth.
And if you're familiar with VS Code already
and maybe there are extensions you yourself
like to use that you want your students to use,
you could add those to a file that looks like this one here
to just preinstall all of that too.
So you don't have to have in your homework a list of, like, 10 steps
that your kids have to go through just to get up and running.
It's all automatable as a result.
And this URL here--
I just wanted to point out--
to draw your attention to how we get students off of Codespaces,
off of cs50.dev if they so choose at the end of the course.
Our students are welcome to keep using our setup in the cloud.
But on our own documentation page here, we
have instructions for how students can either install VS Code on their Mac
and PC and just connect to their codespace in the cloud,
so they still don't have to install anything except VS Code.
Or two, if they're feeling more comfortable, more advanced,
they can alternatively install Docker themselves,
run everything locally if they have no internet connection whatsoever,
or perhaps they're in an area or a home that just doesn't
have constant internet-- there is a solution to that problem too,
but for those more comfortable in general.
And then there's this tool, which we ourselves
don't use so much with students but we do use ourselves quite a bit,
cli50, Command-Line Interface 50, which is a headless version
of all of this graphical stuff.
So if in your own Mac or PC, you want to have with a quick command, cli50,
Enter, the exact same programming environment with all
of the same tools on your own Mac or PC, just because it's faster for you
as a more technical person to do that than open a web browser, log in,
and so forth.
This is a headless version, so to speak, that has no graphical interface
but has all of the same commands in a black-and-white terminal window
environment that might look a little something like this, if familiar.
If not, if intimidating, this is not something you need to know either.
It's just something that's available to you.
Let me pause here and see if there's any questions on really
just this high-level lay of the land.
Yeah, Peter.
AUDIENCE: When we are in our Codespaces, all of that is stored on GitHub.
Do we have the--
I'm trying to think of the correct wording for this--
where we could-- since it's all stored in a file system within a Docker
container on Codespaces, can we share those files
publicly as well as if we were sharing a software that we wrote?
DAVID MALAN: A good question.
Can you share the files that are inside of a codespace?
Sort of.
There's a couple of solutions to this problem.
We preinstall a VS Code extension called Live Share, which
allows you or anyone to click a button and share their codespace with someone
else, so long as they too are logged in and it's up and running still.
So this would be like Google Docs-style collaboration.
That does not lend itself to asynchronous collaboration.
So if you ask your students to do it, they
would essentially have to keep Live Share
running while you're poking around.
And if it goes to sleep, if they go to sleep,
then you might lose that connection.
That, though, is the simplest way to achieve things
unless you have the students submit their files to you via something
like submit50 or some other mechanism.
Other questions on these high-level features?
AUDIENCE: Here.
DAVID MALAN: Oh, yes, sorry.
AUDIENCE: So I think you guys disabled, I think, intentionally,
IntelliSense for--
DAVID MALAN: Correct.
AUDIENCE: --completion of variable names, that sort of stuff.
If I were to make a different decision, is that easy to turn off that blocking
and turn that on for my kids?
Is that simple?
Or is that down in the weeds, kind of complicated?
DAVID MALAN: No.
So to repeat for camera, if we have disabled certain settings that you
disagree with and want to override, yes, there are ways to override that.
In our documentation at cs50.readthedocs.io,
there are explanations of how you can change settings.
There's three types of settings in VS Code,
and here's where it gets a little specific.
But there's user settings, there are remote settings,
and there are workspace settings.
And in our documentation, you'll see which of those
takes priority over the others.
So the simplest way to have your students override certain settings
would be to literally just tell them, go to this menu option, click this button.
Or you could give them the key-value pairs in JSON format.
Or we're also thinking about ways where we
could make it easier to-- you tell them to put it in a specific file,
and we'll make sure the settings are applied, but that does not exist yet.
And the fourth and final option would be don't use cs50.dev.
Use what Rongxin is about to demonstrate,
and then you can change any and all settings yourself.
All right, well, with that said, let me turn things
over to Rongxin for a deeper dive.
And again, to emphasize, if you are feeling less comfortable, that's OK.
You do not need to do this.
This is meant to just show you what's underneath the hood.
So maybe in a year or more, if you want to go to this level, you can.
And, Andrew, was there one question from the chat?
Andrew Holmes, was that a question from the chat?
ANDREW HOLMES: Yeah, I think we had one question from the chat.
The question was, "What about sharing the other action, us as teachers,
pushing out to students?
What's the best way of doing that?"
DAVID MALAN: Yeah, what's the best way for you
as teachers to share content out with students?
There, you have a few options.
If the code is available on the internet somewhere, like a ZIP file or the like,
you can literally just have your students
download that ZIP from your own LMS, Google Classroom, or anything
like that, and then just drag and drop it into their codespace.
If it's at a public URL, you could instead
have them run a terminal window command, like curl or wget,
that we ourselves use in our own homework assignments.
Or, as Carter will introduce us, you can use another tool
called GitHub Classroom that makes it a little easier to distribute files
to students.
All right, Rongxin, the clicker is yours.
RONGXIN LIU: Thank you.
Thank you, David.
All right, so in the following section, I'm
just going to walk you through how you can create your own codespace.
Before we start this-- so just to give you a high-level idea,
so each codespace is based off a GitHub repository.
So a GitHub repository has to exist first in order for you
to create your own codespace.
So there's no repository, there's no codespace.
That's why the first step is to create a private repository.
I'm just going to do the live demo here on my laptop.
So let's say I am a student of a particular course in a given GitHub
organization, and we have Codespace enabled.
So the first thing is if I'm going to create a brand-new repository,
I'm just going to click this New button.
It's a green button.
So I'm just going to give it a name, right?
So I can just say "demo."
And we can just leave everything as it is.
And then I can just click Create repository.
So now there's empty in this repository, right?
So as David mentioned earlier, we need a Dockerfile.
We need a .devcontainer.json file.
These two files basically shaped what your codespace would look like.
So first, I'm going to create a Dockerfile.
I'm going to name it Dockerfile.
And if you are looking at our Google slide on your laptop,
you will see a more detailed step.
You can follow it there as well.
I'm just going to go back to my slide.
So here is what a typical Dockerfile would look like.
This is a very simple Dockerfile.
It usually started with a base image.
If you can look at the first line, it says, "FROM Ubuntu:latest,"
meaning the codespace we are going to create--
the underlying system will be Ubuntu, which is a Linux distro, distribution.
We're going to create a codespace of the Ubuntu base image.
And then we want to customize this Linux system, right?
So the following command basically means get the Ubuntu base image,
run update on it, and then install Java runtime,
Python runtime, and install another Python package called
Pillow, which is the image library.
So that's simple.
So this image will give you a codespace that
has Python runtime and Java runtime.
So I'm just going to copy/paste all of this here.
And I'm going to click Commit changes.
Now I have the Dockerfile.
Now, to create a codespace, you also need a .devcontainer.json file.
So in that configuration file, we're going
to reference this Dockerfile so that when the codespace launch,
it will build a Docker image based off this Dockerfile.
So to do that, I'm just going to add a new file.
And be careful, the file name is .devcontainer.json,
so it start with a period.
"JSON."
And let me show you what a typical .devcontainer.json file looks like.
So for this part, if we are going to use the Dockerfile as the base image,
this is very simple.
The .devcontainer.json file literally just looks like this.
It means when you launch a codespace, please
build an image based on the Dockerfile specified inside the repository.
Since we name the Dockerfile "Dockerfile" with a capital D,
so it reference that particular Dockerfile when launching a codespace.
So I'm just going to grab this key-value pair,
just put it here, click on Make changes.
Now you can see my repository have two file.
So if I go back to the very top level of my repository,
you should see a green Code button.
That's because GitHub detected, OK, your repository has a .devcontainer.json
file.
You probably want to run Codespace on top of the repository.
So you just click the Code button, click the Codespaces tab,
and then just click Create codespace on main.
Since this Codespace building the Docker image at the time it launched,
so it will take some time to build this image because just--
because what's happening underneath the hood
right now, if I click View logs, what it does
is it's trying to pull the Ubuntu image, run all those commands
I specified in the Docker image.
You can think of it as installing an operating
system for your PC or any laptop.
It is just this is provisioning a virtual machine
on the cloud on Microsoft Azure, cloud infrastructure.
So usually, this would take about two minutes.
So any question right now regarding Dockerfile?
Because this is going to take two minutes anyway,
so I can answer any question if you have.
AUDIENCE: So these Dockerfiles exist within the cs50?
RONGXIN LIU: Yes.
AUDIENCE: So you need to have a cs50 codespace.
RONGXIN LIU: Not necessarily.
The thing I'm demoing here is nothing related to CS50 at all.
It's standalone.
But what-- this is essentially what we did behind the scenes.
We also have a Dockerfile.
We also have a very lengthy .devcontainer.json file.
But we prebuild the image, so the image already exists.
So when student launches CS50 Codespaces,
it doesn't need to build the image.
It will just pull the image, and that's it.
The system already exists.
Question somewhere?
I saw a hand.
OK.
AUDIENCE: I have a question.
RONGXIN LIU: Yes.
AUDIENCE: Is this free to us as educators,
or would this be free to anybody?
I mean, obviously, some operating systems, you pay for, but Linux,
you wouldn't.
But all of this, even if we weren't educators, would be free to do?
RONGXIN LIU: I believe educator has free access to Codespace--
AUDIENCE: Oh, OK.
RONGXIN LIU: --through GitHub.
So, yes.
AUDIENCE: That's good.
RONGXIN LIU: You have to request and verify your teacher,
and then you should get a free Codespace,
and your student should get a free Codespace.
Although there is a quota limit per month, like some amount of hours,
like uptime hours, but, yeah.
But, yeah, as you can imagine, you can make the Dockerfile very complicated
and then further customize your codespace.
Yeah.
Yeah, the Dockerfile approach I demoed here--
you wouldn't want to do that because, as you can imagine,
it just takes longer time.
But to give you a sense of how this-- all things work together,
it's better for you to know you have this option.
AUDIENCE: Rongxin, is Clang now standard with Ubuntu?
Is it--
RONGXIN LIU: Yeah, it is built into the Ubuntu, yeah.
Yes.
AUDIENCE: Is this container-- is it only up when you're logged in
and you open the codespace?
[INAUDIBLE] because it [INAUDIBLE].
RONGXIN LIU: So the question is, is the container only up
when you are running the codespace?
So once the container is built, it is stored on AWS infrastructure.
So when you close your codespace and once you--
I mean, from Microsoft end, your codespace is idle
for, like, 30 minutes or something, it will just stop the container.
It won't delete the container.
It will stop the container.
But if you don't use your container for, like, 30 days--
right now, that's the highest retention period
you can set-- your container will just get deleted.
But the file there should be automatically pushed back
to the repository.
So the idea of a codespace is you want to experiment
something with your repository but with a operating system.
You get a Linux operating system on top of your repository.
You work on something.
The container is meant to be discarded.
But the way we use it, just to turn it into a full-blown IDE desktop.
So, yeah.
AUDIENCE: Sorry.
If you had something-- if you had a program running in there,
and you would close the window, would it continue to run?
RONGXIN LIU: It will continue to run.
AUDIENCE: For 30 minutes?
Or just it will continue to run?
RONGXIN LIU: About 30 minutes, I think, because once you close the browser,
like GitHub Codespace detected the client disconnected,
it will just stop it after 30 minutes or an hour.
You can also set the idle time limit.
I think it's 4-hour maximum.
All right, so our codespace launched right now.
As David also mentioned, you get a classic VS Code interface.
But I just want to show you that the Python environment,
Java runtime is all there.
So if I run python3, you can see we have Python 3 already installed.
If I run Java, run java --version, you have Java runtime enabled as well.
So to create a new file in the VS Code, there is a multiple way to do it.
But one way is through the GUI interface,
just to create a new file called hello.py.
And I can just type, "hello world!", right?
And by the way, sometimes, since this codespace is very simple,
VS Code detected that, oh, you are working with Python,
but you don't have any Python extension installed.
So it will just-- typically, it will recommend
some useful extension for you.
So you can install if you want.
But later on, we can just prespecify all these extensions
so that you don't need student to install it
when they're running their codespace.
So I'm just going to ignore it for now.
And just to demonstrate, we can run a Python program.
Any questions so far?
Yes.
AUDIENCE: Can you run [INAUDIBLE] [? VM ?] on this?
RONGXIN LIU: So you mean the graphical thing?
Yes, we actually-- so I will demo that in our cs50 codespace.
So in cs50 codespace, we added a GUI feature, like a virtual display feature
to it.
So, yes, you could run that as well.
But the virtual display will be open on a separate tab.
That becomes your virtual display.
OK.
All right, so to install extension, just to demo,
we can just click this extension icon here.
There's just tens of thousands extension you can install
to further customize your codespace.
So for the demo, I'm just going to install Python extension.
What it does is it gives you Python IntelliSense feature.
So you can get access to all the methods and all that
and code completion, but not necessarily Copilot style,
but typical code completion.
So let's say-- because remember, in the Dockerfile,
I also preinstalled a Python package called Pillow.
So if I do, from Pillow, you already see the dropdown IntelliSense saying, OK,
here are the method you can use on this.
Import Image-- here are all the available libraries or packages
through this Pillow package.
That's just the extension that enabling this feature.
So you can imagine you can customize more extension
or even build your own extension and then install in Codespace
and then customize for your student.
Yeah.
Any questions?
Just one?
OK.
Now, I'm going to--
we can just ignore this codespace for now.
I'm going to just edit my .devcontainer.json file now,
because right now, it's using the Dockerfile we wrote, but that's slow.
We don't want that.
So we want to edit it to have it reference a prebuilt
image available on the internet.
So this is the new .devcontainer.json file that we are going to use to launch
another new codespace.
So now it looks a little bit more complicated,
but let me walk you through.
This is the four major key in this .devcontainer.json file you want to pay
attention to.
Usually, it's the image property.
Image basically means what Docker image do you
want to use to launch this codespace.
There are many, many prebuilt Docker image available on the internet.
There's a Python image, meaning if you run your codespace on this Python
image, you will have a Python-friendly runtime environment.
So you can imagine you can switch to Java,
and then you have a Java runtime environment.
And extension field basically means, what extension do
you want this codespace to preinstall?
It's an array of strings.
So those are the extension identifier.
You can find them on the marketplace.
If you are shopping on the VS Code extension marketplace,
if you find some extension you think is interesting or think
is useful for your student, just take a note down of those extension ID
and then put it here.
And once you launch your codespace, you will already
have those extension installed.
Features is just features, very self-explanatory.
So you want to also install some other Codespace features.
So in this example, I'm just going to install the GitHub
command-line program.
This is optional.
You don't need that.
Extensions is also optional.
Settings-- so some teacher mentioned, could we also
enable IntelliSense or disable IntelliSense?
This is how we achieve [INAUDIBLE] via Settings.
Settings is to further customize the settings within VS Code.
Here is just a simple setting, like basically set the default theme
to use Solarized Light.
And you can imagine you can add hundreds of settings
to customize your VS Code further.
I'm just going to grab all this value here.
So I'm just going to update my .devcontainer.json file to the value I
just introduced, commit changes.
Now, since the .devcontainer.json file is now using an image from the remote
Docker repository, the Dockerfile is no longer being used.
So in theory, your repository can be as simple as just a one single
.devcontainer.json file if you are not using the Dockerfile approach.
I'm going to launch a new Codespace again here.
This time, it should take shorter time to build and to launch the codespace
because the Python image is only under 100 megabytes size in size, I think.
Yeah.
Any questions?
AUDIENCE: Does any of the Codespace run in the local browser?
Like, does any of the processing, any of the work behind when a student runs
a command in the terminal window happen on the local disk
or happen on the local processor?
Is that all cloud?
RONGXIN LIU: All cloud.
Anything running on this-- so this terminal,
as also David mentioned-- that if you're running
a VS Code offline on your desktop, your programming environment is your laptop.
AUDIENCE: OK.
RONGXIN LIU: Now, you're running this Codespace from GitHub remote compute
infrastructure.
So your underlying infrastructure is their VM machine.
So this terminal is the VM machine.
It's the virtual machine on the cloud right now.
So anything that you run in the terminal is executed remotely somewhere
in the data center.
OK.
But now, so as you can see, this codespace
will only take, what, 20 seconds to launch,
compared to 2 minutes from the Docker approach.
You already see the theme change a little bit.
It's not the default light theme.
This is a Solarized Light theme.
And since this is based on a Python image,
we can check that it has the Python runtime, right?
But if I do Java--
I want to check if Java is installed-- it shouldn't, because this image is
meant to be for Python users.
So it doesn't come with the Java runtime.
And also, if you go under Extensions, you
will see the Python extension already being
preinstalled because we specified that in the extensions field.
Yes.
AUDIENCE: When you do things with check50 and submit50,
is it sensitive to the Docker that the student is using?
Or does it automatically assume CS50'S environment?
RONGXIN LIU: So the question-- is check50/submit50
sensitive to the underlying programming environment?
I would say, yes and no.
So right now, in this programming environment,
there won't be any check50 and submit50 because we didn't install those.
But you could install for the demo, right?
I can install check50 using pip command because we also
published check50 as a standalone Python package on the website.
So you could install check50 right now.
So if you run check50, the problem is we need
to push your code to students' private repositories.
So you will be prompted to Enter a username and personal access
token, all the authentication.
So if you don't use the cs50 codespace, your student
will need to go through that process or setup, like SSH key configuration
to do that.
But it's insensitive in the sense that if you do that, you could still
use check50 and submit50.
Yeah.
Now, you might wonder, OK, if I want to further customize
my .devcontainer.json--
I want to iterate my .devcontainer.json file--
it would be tedious to always go to the repository,
edit that, launch a codespace, right?
So actually, Codespace allows you to rebuild your codespace based
on the latest .devcontainer.json file.
So I'm just going to demonstrate that.
So we want a Java runtime this time, right?
So to do that, I'm just going to update my .devcontainer.json file to use
the Java runtime.
So what's changing is I just need to change the image I'm referencing to,
change the extension I want to install.
Of course, you could install the Python extension.
But since you are working with Java, why would you install that, right?
Now I'm just going to change a setting to use the dark theme just
to make it more visually different.
So here, in my .devcontainer.json file--
this is the one in the repository.
I can just replace it with the new value.
And again, since the .devcontainer.json file defined our codespace,
so you can think of any changes to this .devcontainer.json file--
Codespace will think, OK, you made some changes,
so you perhaps want a new container with the latest setting.
So Codespace will just prompt you, do you want to rebuild your codespace?
And, yes, we want to rebuild our codespace.
AUDIENCE: When you guys do updates, is this how you do it?
You push a new JSON file out, and that's when
it says "rebuild your codespace" to us?
RONGXIN LIU: Yes.
So we also have an extension that basically checking-- each time
student launch a codespace, we just check
if the data is-- if we check the hashes of our image
matches the latest hashes that we pushed.
If it doesn't match, meaning there's a new update,
so we just prompt the student to do a rebuild and then go through the whole
rebuild process and pull the new image, install the new,
apply the new .devcontainer.json settings.
And as you can see, the theme changed because it applied the latest settings
to use Solarized Dark settings.
And right now, it shouldn't have the Python runtime anymore.
It should have the Java runtime, and I can quickly show that.
If I run python3, this command not found because this is not Python environment
anymore.
If I run java, just to check the version, we have the Java runtime.
So this is how you perform a codespace rebuild if you have new
.devcontainer.json settings.
Yeah, and that's it for the customization part on Codespace.
Any questions before we move on?
AUDIENCE: How do I give this to students?
RONGXIN LIU: Good question.
So Carter will introduce how you would do it.
CARTER ZENKE: So a great question.
The question is, how do we actually give this to students?
So we've seen so far some of the motivation
behind Codespaces, like why do we have these environments.
Well, it's so students can program in the cloud
and not on their own computer, where they
might get bogged down in installing things over and over again.
We instead have Codespaces to help students
have those things preinstalled, right?
And Rongxin kindly showed us how we can customize that environment
to install certain things and not others, which is optional for you all.
You can get that deep if you'd like to, but you don't ultimately have to.
And so today, I also want to show you how you can give Codespaces
to students using a tool called GitHub Classroom that you could use
or you could not use.
But the goal is to show you and help you make
an informed decision of whether you want to use this or not, all right?
So Codespaces is a GitHub tool.
GitHub is a software company.
They make the tool behind Codespaces.
They also made GitHub Classroom to help teachers like us actually
use it in their own classrooms.
And there are really two pieces of prior knowledge
you need to understand how Classroom works.
So the first piece of prior knowledge is a GitHub organization.
What is a GitHub organization?
And the second piece is, what is a GitHub repository?
So take maybe 30 seconds here.
And if you think you know what is a GitHub organization,
could I actually ask you to help share that out with the room?
Anyone know what a GitHub organization is?
AUDIENCE: It's a bunch of people sharing a repository.
CARTER ZENKE: Yeah.
Can I actually have you say it in the microphone, if I could?
AUDIENCE: [INAUDIBLE]
CARTER ZENKE: Thank you.
AUDIENCE: It's a bunch of people sharing a repository.
CARTER ZENKE: Bunch of people sharing a repository.
That's a good definition of it.
Any other ones, too, for those who are familiar with a GitHub organization?
OK.
So I think this idea of a collection of repositories is a good idea.
But then what is a repository on GitHub?
If an organization is a collection of repositories, what is a repository?
Anyone have an idea that they want to share out for that?
Definition?
It's OK.
If not, I can give you some idea here too.
So a repository is simply a place to put code--
oh, a hand over there?
AUDIENCE: That's what I was going to say.
CARTER ZENKE: OK, a place to put code.
Good idea.
So GitHub is an organization-- it's a software company,
and they kind of host code a little bit like Google Drive hosts files.
If I'm a programmer and I put my code somewhere,
I could put it on GitHub in this container called a repository.
Now, if I have many repositories, I might
put those in a GitHub organization and put them all under one umbrella.
And we'll see some examples of this a bit later on.
But the reason these are important is because, in GitHub Classroom,
your Classroom is a GitHub organization.
And every assignment you make is a GitHub repository.
So the entire thing is in the GitHub ecosystem.
It just uses GitHub's underlying tools, so they already
have organizations and repositories.
So if you want to use a tool like GitHub Classroom,
you only need to take a few steps here.
Among them are these.
So first, you create your own GitHub organization, which is your Classroom.
We'll walk you through this in a minute.
You will then add some distribution code--
that is, the code you want students to start
with-- to a repository in that organization.
You will then make that repository what we
call a template, letting students take it and modify it then submit
their work in that repository itself.
And then you can use GitHub Classroom to kind of formalize that
within the Classroom interface to make it more cleanly done for you here.
And as a student, all students will have to do is simply accept the assignment
and work on the assignment with Codespaces.
And I'll actually show you what this looks like in the Classroom
environment in just a bit.
But any clarifying questions on this so far on repositories or organizations?
Yeah.
AUDIENCE: For an organization, if we have multiple classes,
can there be groups within the organization?
Or would we create different organizations for each separate class?
CARTER ZENKE: Yeah, a great question.
So the question was, if I have maybe different-- can you say it again
so I can make sure I got it?
AUDIENCE: Yeah, just if you have different classes,
would that be different organizations, or can you
create groups within an organization?
CARTER ZENKE: Yeah, so let's say you teach more than one class, right?
Do I need to make, then, multiple organizations?
Or can I put it all under one organization?
The answer to that is you have to make multiple organizations.
So if you have more than one class, you should make more than one GitHub
organization, ultimately.
Other clarifying questions before we move on on either organizations
or repositories?
OK, so let's actually see what these look like actually on github.com.
So what we'll do here is actually create your very own free GitHub organization.
And you can do this-- if you want to follow along,
you can go to this URL right here, which is also in the slides for reference,
github.com/organizations/.
And if you go to that URL--
I'll put it back up in a minute-- you should see something like this--
"Pick a plan for your organization."
Well, because we're teachers, you should probably just use the free option.
This gives you everything you need.
You don't need to pay for your organization.
You click that free option there to make your very own GitHub organization,
again, by going to this URL right here, github.com/organizations/plan.
And to our point earlier, this creates for you
a space, a name, on github.com to put your many repositories,
places you want to store your code files that are ultimately going to be
your assignments for your Classrooms.
So feel free to keep working here.
I'll keep moving, and we'll keep going here, but let me--
feel free to raise your hand if you get stuck or want some help here.
Now, the next step is to create a repository in that organization.
So remember, an organization is a collection of repositories,
and repositories hold code.
So our goal here is to first add a repository to our organization, which
is kind of the same thing as adding an assignment to our Classroom
for students to complete.
So you could create a new repository at this URL right here, github.com/new.
And you should see a page a bit like this
that asks you some details about how you want
to make this repository, this place to store code
that a student will eventually work on.
Now, the main thing to tweak here is this Owner section.
At first, it should be blank, but you can
change it to be the name of your organization--
that is, of course, your Classroom.
So here, I called mine cs50-educator-workshop-23.
That is my organization name, also my Classroom name.
And therefore, I'm going to make this repository
inside this organization, all right?
Now, this will eventually hold the code I
want to give to students as part of this assignment.
And I'll do that using GitHub Classroom in a minute.
But clarifying questions here before we keep going?
All right, so all we've done is made our own organization.
We're going to add a repository that will hold
some code we want to give to students.
So now we're going to actually add some code to this repository,
and we can do that using github.com's interface.
I could go to the code editor, which is linked in the slide notes
if you'd like.
Or you can find it by going to your repository and clicking Edit.
We can go in more depth later if you'd like,
but the goal is to save some time for AI.
So we'll also add some code to our repository here.
And we'll then say, this becomes the code a student would
receive when they accept the assignment, when they actually
work on this assignment.
Let's say I'm going to give students now an empty main() function in Python,
and I want them to write "Hello, world," for instance.
But for now, I'm just leaving it blank for the student to work on.
So here, we can see I have my distribution code now
in this repository.
My repository was called "hello."
My assignment is called "hello."
I'm now going to put in hello.py, which is blank, a hello.java file,
which is blank, and what Rongxin talked about,
which is the Codespace customization if I want to include that.
So now as a whole, we have this assignment,
the code to give to students.
This assignment is inside our organization,
this place that keeps track of all of our repositories
and thus all of our assignments.
So now, to work with GitHub Classroom, I need
to turn this repository into a template, letting students actually take
it and put it in their own GitHub account
and change it as they'd like to.
So very simple here--
I could go to Settings in my repository, click this checkbox
that says Template repository.
And now students could take it, they could modify it,
and they could submit something, as we'll see a little bit later on.
Just one more necessary step here.
And then I can go ahead and sign into GitHub Classroom.
I've set everything up that I need to on github.com.
I can now use GitHub Classroom.
So to sign in, I can go to classroom.github.com.
You will see something a bit like this.
You could sign in with your GitHub username
and get started with actually turning your organization into a Classroom
and your repositories into assignments, if that makes sense.
So it'll first ask you to connect.
You'll see something like this.
You can click Accept if you'd like.
And you'll then see the UI to create your own Classroom from that
organization you created earlier.
So you click here-- say, New Classroom.
And once you're there, you could choose the organization you created.
So here, I had originally created cs50-educator-workshop-23.
I can choose this now and decide to make that into a GitHub Classroom of my own.
Once I do that, I can give it an official name.
Here, I'll call it the same thing or slightly different,
educator-workshop-classroom, and I can create it.
So I'll now be able to add people as teachers
who also have GitHub usernames.
I'll skip that for now.
I could also add students manually if I wanted to,
but I'll also skip that for now.
So now I have my very own GitHub Classroom
that I created from my organization.
And then I can add an assignment.
I can say, let me go ahead and create an assignment in this Classroom.
Well, as we said before, what is an assignment?
It is a repository in our organization.
So I'll say Create an assignment down here.
And I'll then be able to choose some settings here.
I'll give it a title, give it a deadline if I'd like, set the visibility,
which you often keep to Private, and we don't
tend to grant students admin access to their repository.
We can then, most importantly, set the template repository.
So here, the repository I created earlier
was called "hello" inside my own organization.
I want this repository to be the base of my assignment, the code
to actually give to students as part of this assignment.
So this is where I configure that now here.
I could also, if I wanted to, choose to use Codespaces
as the editor of this assignment right here.
And once I do that, I can also choose ways to give feedback to students.
But for now, let me pause and ask for questions on any of this.
Any clarifying questions so far.
OK.
Yeah, question from the chat, Andrew.
ANDREW HOLMES: Yeah, I have one.
So the question is, "Can you reuse the organization next year
for a new [? cluster, ?] like organization
is the template of the Classroom with a group of students?"
CARTER ZENKE: Good question.
So can you reuse your Classroom year over year over time?
You can.
I think our suggestion is tending to recreate it for every new class
you have because, as you'll see, you'll have students
who submit work in your current class--
their work will still show up if it's in a future year.
So best to recreate your organization and your Classroom year over year,
semester over semester, whatever you'd like.
Go ahead.
OK.
So here, you can see we have now created the assignment.
If you were following along--
although this is going very fast, you could see something a bit like this.
And now the main part is the magic that happens
is you can use this invitation link to give to students,
and they'll be able to see your assignment, see it in Codespaces,
and be able to work on it in Codespaces as well.
So the reason we did those steps was to get this link right down here
we can give to students.
And they'll then be able to see your code that you added to your repository
as part of an assignment and work on that assignment in Codespaces.
So now, as a student, let's say you have this invitation
link your teacher gave you.
You could simply copy and paste it into your URL bar,
and you then see something like this, accept the assignment
that we had called "hello," right?
We could then say, OK, as a student, I want to accept this assignment.
I want to work on it in Codespaces in GitHub Classroom.
Now, it'll take a minute to configure.
I can then refresh the page, and I'll see I'm ready to go.
Now I have my very own GitHub repository that I will be working on,
my own personal one as a student.
And in more technical terms, I've cloned this repository.
I've taken the code inside of it and put it into my own repository
to work on as a student, again, on my own.
So now if I go to this link, I can then see
I have the very same code that me as a teacher
originally put in that repository.
But now as a student, I could click up top.
I could say Code.
Let me actually work on this in Codespaces.
So let me say Code, Create codespace on main.
I'll go through that same step Rongxin showed us earlier,
building up my codespace.
And finally, I'll see that code in Codespaces itself.
As a student now, I can work on it, modify it, say, I
want to print "Hello, world," and then push those changes.
I'll then see them in my repository.
And as a teacher, I'll be able to actually see, at first,
Carter submitted nothing.
But as soon as he pushed to that template repository,
I now see that he submitted some work.
So again, this is kind of one way of using Codespaces to manage
your Classroom to see student progress.
But it's not the only way.
It's only one tool in your toolkit.
So let me pause here and ask again--
questions on this, this process, how it works,
or how anything that we've done with it ourselves?
Yeah.
AUDIENCE: I tried GitHub Classroom this year,
but testing submitted work takes a lot of time, actually.
CARTER ZENKE: Yeah.
AUDIENCE: Are you familiar with this problem?
CARTER ZENKE: Yeah, and can I ask you-- so the question for the microphone here
was, it takes a lot of time to test submitted work.
Like, let's say, for example, I want to see,
did Carter submit the assignment correctly, right?
Was the code correct or was it not?
And it can be kind of tough to configure that.
Can I ask you what you tried first before I share what we've done?
AUDIENCE: No, I just made the project and sent the link.
And if there is more than 10 tests, it takes a minute or two or even three
to test that it works.
CARTER ZENKE: And I think that's kind of the thing with the microphone here.
So the reality is if you have maybe 10 or more tests,
it can take a long time for those tests to run
to ensure that student code is correct.
I think sometimes the reality here is like we're
on some virtual machine that is in the cloud somewhere,
and that's just how long it takes.
If you've done some own custom configuration with check50
that if you want to use--
I'll have Rongxin probably talk more about that.
But I don't know if we have much of a solution to that problem,
unfortunately.
A good question, though.
Yeah.
Yeah, Bruce.
BRUCE: There's a tool that GitHub offers,
GitHub Classroom client, where you can download all the repositories down
to your instructor machine to go over and review them as well.
CARTER ZENKE: Interesting.
Yeah, so again for the microphone, there is currently
a supported version of a GitHub Classroom desktop application that
will let you take all of your students' submissions to an assignment
and download them so you can see them on your own local machine,
perhaps run tests there if you'd like to.
I believe, based on what I've heard from GitHub, that is being deprecated soon.
But they are making a new command-line interface that'll be the same thing.
So they are improving it over time.
Yeah.
AUDIENCE: [INAUDIBLE]
CARTER ZENKE: OK.
So I believe this is about it for GitHub Classroom.
Please feel free to let me know if you have any more questions,
but I'll turn it back over to Rongxin and to David
to talk about our new tools that go along with many of these
we've discussed before.
DAVID MALAN: Thank you, Carter.
So goal here is a high-level overview and then a low-level overview,
and so here is what the team has wonderfully been working on thus far.
For the past two-plus years, we've had a rubber duck debugger in virtual form.
You might recall your own rubber ducks that you got the other day that you
might even already have had back home.
And the goal of those rubber ducks, if unfamiliar,
is to have this inanimate object on a student's desk with whom
or to whom they can talk, the idea being that as they explain some bug
they're having, some confusion they're having, that proverbial light bulb goes
off because they hear in their own words exactly what kind of confusion
they're experiencing.
And so we implemented this some time ago in the form
of a chat window that looks a little something like this
in VS Code, where students can message this duck debugger.
It's a pun on the GNU DeBugger, GDB.
We have DDB.
However, for multiple years, all the duck
would do when a student asked a question like this--
"I'm hoping you can help me solve a problem"--
the duck would only quack once, twice, or three times.
So it, too, was fairly inanimate.
However, as of 2023, I'm happy to say that Rongxin and team have
been bringing this duck to life in the context of GPT,
in the context of large language models, and in the context specifically
of the ChatGPT, this is now possible, it would so seem.
This, of course, over the past six-plus months
has created quite a few concerns among academics in terms of academic honesty.
What do tools like ChatGPT, GitHub, Copilot,
the new Bing, the experimental version of Google
actually mean for academic honesty, or, conversely, plagiarism?
And I would offer, as we discussed or as I proposed yesterday,
that we actually view this as quite potentially positive for education.
There's absolutely those downsides of students
being able to just ask a bot to do their homework for them.
But again, I dare say that that's always been possible
where a student could just ask a friend to do that,
even though it's a little easier now to do it anonymously
with the computer and not an actual human.
But with that said, I just wanted to give you
a sense of how we're thinking about the implication for these tools
for the fall and how we are trying to respond to them also through software
solutions.
So as of now, we suspect that this will be in our syllabus this fall.
And indeed, it is in CS50's syllabus this summer
with the 70 or so students who are taking CS50 over these next few weeks.
"Using AI-based software, such as ChatGPT, GitHub Copilot, the new Bing,
and others, that suggests or completes answers to questions or lines of code"
is considered not reasonable.
So essentially, by policy, we will aspire to prohibit use of these tools.
Practically speaking, that doesn't stop anyone from using them, of course.
But we've had a long history in the class of certainly
having this ingrained in our policy, and we do aspire to detect plagiarism.
And therefore, we write up students administratively
for disciplinary processes if they seem to have crossed those lines.
But this is where we're landing right now, quite simply because these tools
are just too helpful right now.
Like, ChatGPT is more than happy to try to give you
the answer to all of your questions, and that's not
ideal in an educational context.
It would be like an overzealous tutor just telling the students
how to do their homework.
So this is language we suspect we will have in our syllabus this fall
and we do currently have this summer.
"Using CS50's own AI-based software that suggests or completes answers
to questions or line of code" will be considered reasonable.
And so I dare say, we're in this fortunate position of being computer
scientists that we can kind of build layers on top of these tools.
And that's not a capability available to teachers, for instance,
in other fields.
So you and I are sort of in this unique ecosystem
to try to be at the forefront of finding a happy medium here.
Of course, you all are welcome, whether you're
teaching CS50 specifically or even your own classes,
to use the tools that you're about to see.
They're definitely attenuated for CS50 specifically.
But in general, what we're trying to do is put downward pressure
on just how helpful ChatGPT is.
So in the context of LLMs, for instance, and using
these kinds of interactive bots, it's very common
to provide what are called prompts.
And you and I, if you've used ChatGPT, have already typed prompts.
It's essentially the ChatGPT version of your "Google search query,"
but generally writing it in English or some longer form sentence.
What you can do with a lot of these models,
though, at least if you're writing software that interacts with them,
is you can feed it a few English sentences in advance.
Like, pretend you are a teacher of introductory computer science.
Do not provide more than two or three lines of code in your answer.
So students don't have to type that.
You don't have to ask them to type that.
We're sort of feeding sentences like that into the model before we then
append students own questions.
And so what this means for us concretely is
that we're trying to employ AI along a few different lines here.
And I'll give you a quick pedagogical overview
and turn things over to Rongxin for an actual discussion thereof.
But 1-- and this exists for already explained highlighted lines of code.
Students can now in cs50.dev highlight one or more lines of code,
right-click it, choose an option that's called Explain Highlighted Code.
And then using ChatGPT-generated English,
we aspire to explain what that line or those lines of code do,
so that if students will receive some distribution code from you, if they
found something online in a reasonable way
and just want to understand it better, they can
ask questions of the bot in this way.
2, advising students on how and why to improve their code style.
If you've used CS50's tools, like style50, before, we
had a terminal version window of this that
tried to show them visually where they should or should not
put whitespace and other characters.
We now have, thanks to the team, a graphical version of that
that not only shows the student, left and right,
here's what your code looks like.
Here's what it should look like.
There's now a button that says "Explain why" that similarly tries
to help them see what you and I might take for granted
once we're more comfortable with code that they might not be noticing
is awry.
We use that tool for Q&A called Ed that happens to be used in Harvard courses
as well.
And we've integrated the same technology there
to try to answer students' questions automatically.
4, a work in progress, explaining arcane--
that is, cryptic-- error messages and providing hints on how to solve.
So if you've ever seen the output of Clang,
if you've ever seen the output of even Python and tracebacks,
it's fairly nonobvious, certainly to a new student, what some of those words
even mean.
So explaining those, translating them, really, into layperson's terms
is the goal.
Helping students eventually find bugs in their code via TF
or teaching assistant-like rhetorical questions-- so not just saying,
it looks like you're doing x on line 13.
Do this instead-- to instead draw their attention to it.
It looks like you're doing something incorrect on line 13.
Have you considered, dot, dot, dot, like any good teacher might.
And then longer term, we're hoping to integrate assessment into these tools,
so actually grading with software, not just correctness with check50,
style with style50, but design with, shall
we say, design50, a tool that provides human-like qualitative
feedback on the quality of code.
So just because their code looks aesthetically good,
just because their code works according to the specification--
maybe they have a nested, nested, nested, nested for loop,
and that's probably not the right design.
There's better ways, more efficient ways, to solve the same problem.
We hope to point those out to students.
And then longer term still, my own hope is
that we can perhaps leverage AI to actually assess students
at the end of the course, throughout the course,
in a virtual version of yesteryear's oral exams,
where we actually have a bot eventually-- not now-- having
a sort of conversation with students, initially textually, maybe eventually
verbally, so that we can do the equivalent
of that one-to-one teacher-student ratio that has and will always escape us
as long as there's only one of me, one of you,
and 20 students, 30 students, 300 students instead.
So allow me to turn things over to Rongxin
here with one final thought on grades philosophically.
Right now, we ourselves for our fall class
for undergrads-- we're actually wrestling with,
what do these tools mean for grades, not just how we assess, but the numbers
that we've traditionally come up with for their grades,
whether they're an A, a B, a C, or whatnot?
Because what we have seen empirically with CS50
is that once we release check50, once we release style50,
grades numerically started going up and up and up.
And this was actually a good thing, I think,
because students were getting iterative feedback.
They were getting feedback before they submitted
their code that it's not yet right.
It's not yet right.
So, of course, if they're putting in the time, by the time they submit,
it should be right because they have these tools.
And so our conjecture, if not worry-- but I do think, again,
this is a good thing-- if we eventually provide them with a design50-like tool,
where they're getting qualitative feedback like, oh, you can do better,
or, yes, it works, but you should improve this still,
much like iterating on an English essay--
by the time they submit that work, it kind of
should be "perfect," at least for those students
who are engaging to that extent.
And so I think this is going to call into question exactly what it
is we're assessing and how we're assessing
but hence our idea about more conversational assessment
down the line.
Is this is a question here?
No?
No, all right.
Well, allow us to turn things over to Rongxin and the real-world demos.
RONGXIN LIU: All right.
Thank you, David.
All right, so to give you all a preview of the tool we've been building,
so I'm just going to give you the actual demo of what this tool is actually
doing right now.
If you all go to cs50.ai right now, you can actually
try the tool we've been building.
I'm just going to try here on my end as well.
So I'm just going to cs50.ai.
As David previously mentioned, we used to have a rubber duck
debugger built within the VS Code, but it can only say, quack, quack, quack,
to you.
But here, we bring the duck to the browser,
and learner, whoever has a GitHub account,
can actually chat with this duck right now.
And just to quickly demo, what you can do with this duck--
you can ask basically all CS50 questions and computer science-related question.
And it is built on top of ChatGPT, but we have our own system message.
We have our own user prompt to wrap each user message into our own prompt
to prevent prompt injection attack and all
that to basically customize a experience as
if you are talking to a tutor for CS50, something like that.
So I can ask, "What is Flask," right?
It's a Python framework, and let's see how the duck respond.
So this shows you can ask informational question to the duck,
and the duck will just give you some definition of a certain framework.
But some of you might ask, what if our student trying
to get solution out of the duck, like want the duck to complete
a homework for you.
So if I ask, "Can you implement the finance pset for me?
I'm really stressed out right now.
Please, please!!!"
[LAUGHTER]
Just begging, right?
So, all right.
Let's see how the duck says.
Yeah, the duck is sorry.
But, yeah, the duck actually adhering academic honesty right now
because every answer the duck generated--
it adhering academic honesty, so it won't provide solution.
But it will try to guide the student to implement the finance pset instead.
Like, basically, instead of showing the code to student,
it will be more beneficial for the student--
what if the duck just guide you step by step?
So I will just say, "Alright, show me a high level of how I can approach this."
So, yeah, now the duck is responding by showing some high-level steps how
you can implement finance psets.
By the way, any audience here want to ask an arcane question to the duck?
So, yeah, this is basically what the cs50.ai does right now.
It actually also offer like some API endpoint
that power all our other-- like, Explain Highlighted
Code, Explain style50 Changes to student through these cs50.ai services.
So now I'm going to show you what if the student are actually within the VS Code
and if they want to use this duck debugger.
So, yeah, again, the duck debugger is also
now available within our CS50 codespace.
It is on the left-hand side.
If you click on the duck icon, the duck is available there.
I can ask the same question, right?
So, "What is Flask?"
It will also give you an answer right there.
But now the cool thing about this duck built into the VS Code
is that student could also easily interact with the duck
while working on their homework assignment.
For example, if I'm working on the finance pset,
I don't quite understand what this line means.
What I can do is I can use the plugin we wrote called Explain Highlighted Code.
Just let the duck explain, OK, what does this code do for me?
So it will just explain in plain English what
this code is doing so that you can get your question answered right
within VS Code.
You don't need to post on a forum or something
and then get answer after a few hours later.
And sometimes, maybe you are working 2:00 AM in the morning,
and there's no TA available to you, but you can still
get answer right within your IDE.
There's another tool called style50.
Basically, as I also mentioned yesterday, it offers style feedback.
For example, if I have a code looks like this--
it works, but it looks pretty bad.
So I can just run style50.
So style50 will give you visual feedback on how
you can improve your style of the code.
But sometimes, it might be confusing.
Like, what does that actually mean?
So you can just click Explain Changes and have the duck
explain what changes had made to you.
So if you click that--
does it work?
[? AUDIENCE: ?] No.
RONGXIN LIU: Live demo.
[LAUGHTER]
All right, let me try again.
[SIDE CONVERSATIONS]
Yeah, so the duck will basically explain what's happening to you,
so as if it's a human TA sitting next to you telling, oh,
this is what you should make your changes.
This is what the change means, so that kind of thing.
So we're still in the progress of iterating how we can further
incorporating the Explain Highlighted Code via the duck
so that everything is integrated within the duck debugger.
DAVID MALAN: And, Rongxin, I see that there's an Apply Changes button.
Do we have any statistics on the frequency
with which the students manually fix the code on the left
versus just click a button?
RONGXIN LIU: Oh, yeah.
So what Apply Changes means-- so style50 gives you the feedback.
You can manually work on to improve your code
to match the suggested feedback, right?
But if I'm lazy, I can just click Apply Changes, and my code is well formatted.
Statistically, we've been seeing that about 75% of students
just click Apply Changes, but there's still 25% of students
out there manually fixing their code, which
is still encouraging, so given that there's an easier way to do it,
but yeah.
Anything else?
Any questions so far with the two?
Any questions about how these things works?
Yes.
AUDIENCE: As teachers, do we get any access
to what the students-- what questions the students
have asked the duck debugger?
RONGXIN LIU: That's a good question.
Right now, no.
AUDIENCE: Right now.
RONGXIN LIU: I would say this is more of a privacy issue because--
AUDIENCE: [INAUDIBLE]
RONGXIN LIU: But yeah, no.
OK.
Actually, I think that's the demo so far.
so, yeah, we have--
goes through all these plugins.
So, yeah, that concludes the AI demo.
So we eventually bring the ducks to life.
[LAUGHTER]
We hope to keep iterating and keep improving our tool [INAUDIBLE]..
And it's an exciting time right now, for sure, so yeah.
DAVID MALAN: It is.
And I would offer a thank you to Rongxin and our team
for spending so much time on this this summer.
And I would offer, too, really, the silver lining
of all of this, or the opportunity, is that, especially if you've
been teaching smaller classes or large classes but just by yourself,
the corollary of having a one-to-one teacher student ratio
is that you're about to have as many TAs, in some sense, as you need.
And it's not going to be perfect initially,
but I think even from the interactions you hopefully saw from Rongxin,
I do think it's pretty darn encouraging how we can help students now,
even when you're the only human teacher in the room.