PyTutor

https://py-tutor.web.app/

Overview

PyTutor is a learning tool designed to help novice CS students make the transition from writing small to large programs.

Programs are complex. Successful software engineers are able to reduce cognitive load and focus on the task at hand rather than trying to keep track of the implementation of every part of the program at once. PyTutor helps students develop the skill of reducing context-switching and cognitive load. Instead of creating a program bottom-up (implementing every little function when it is needed), PyTutor encourages students to create programs top-down (focussing on general structure first, then going back and implementing everything later).

Explanation of the system (basic flow)

• As the student writes a program, they identify a specific task that needs to be completed (i.e. sorting a list of numbers).
• Instead of implementing the function immediately, the student uses the "Create Function" feature of PyTutor to generate a function, by giving a text explanation of the desired function.
• The AI model creates the function, and exposes just the function signature to the student (Not the generated implementation), but retains the AI implementation.
• The student is free to use the function within the program. The program will use the AI implementation when the student runs the program.
• Before submitting the assignment, the student will implement each of the functions in use (still only seeing function signatures).
• Once implemented, the Program will run using the student implementation rather than the AI implementation.
• After implementing each function, the student can submit the assignment.

Considerations

• What if the AI model fails to correctly generate a function?

  • Once a function is generated, the student is encouraged to write a simple test to test the function. If the function fails the test, the student can edit their text explanation and provide examples to help the AI model generate the desired function.

• What if the student wants to use a function that is not generated by the AI model?

  • The student is free to create other functions, but if they aren't going to use the software for its intended purpose, they might as well just use a normal IDE.

• The tests created by the students can also be used to help the student test their own implementation of their functions.

• Students can remove, reorder, and rename functions as they see fit.

How To Run

1. Clone the repository

2. Run the backend server

• This uses firebase, and uses the firebase CLI to run the server locally
• create a .env file with the variables specified in the .env.example file
• within the functions directory, install dependencies and run the server using the npm run serve command

3. Run the frontend server

• create a .env file with the variables specified in the .env.example file
• install dependencies and run the server using the npm start command

4. The frontend server should be running on localhost:3000

Technologies/Libraries:

• ReactJs: https://react.dev/
• JoyUI: https://mui.com/joy-ui/getting-started/
• Code Mirror editor: https://www.npmjs.com/package/codemirror
• Python interpreter: https://www.npmjs.com/package/client-side-python-runner
• ExpressJs: https://expressjs.com/
• OpenAI: https://platform.openai.com/docs/libraries/node-js-library

UI/UX

Layout

Prompt AI to create a function

Create a test for the function generated by AI to ensure that it works as expected

Implement the function