DEEBug
A Python debugging platform built with a course team: five locked sections of Keras code, run on a server, scored against a known-good file.
DEEBug is a Python debugging platform built with a course team, and my share was the editor the student works in. You bring a Keras script, it is split into five sections, and you fix it one section at a time. The backend runs the script for you, diffs the output against a known-good copy of the same file, and hands back a number. Issue resolution time fell 25%.
My part was that editor: data preparation, model definition, training configuration, evaluation and visualization, in a Monaco editor with next and previous navigation and a sticky header above them. Each section opens from a template, and each template carries a marker line; everything below that marker becomes a read-only range. The harness the server appends to the script calls load_data, build_model, train_model and evaluate_model by name. A student who renames one of them breaks the run for reasons that have nothing to do with the bug being chased, and the read-only ranges are what stop that.
The repository holds 340 commits; 26 of those are mine, between 2025-01-27 and 2025-04-03. The locking is also the weakest thing about it: the editable ranges are anchored to fixed line numbers, and the code admits that in a comment. Pyodide sits in package.json with nothing importing it, the only test is the Create React App placeholder, and /train_with_logging unpacks three values from a function that returns one.
- 1 Five sections CodeEditorPage.js: data-preparation, model-definition, training-configuration, evaluation, visualization.
- 2 Locked ranges CodeTemplates.jsx finds each marker line and hands Monaco a read-only range below it.
- 3 run_code app.py appends a fixed harness to the student's script, then runs it with subprocess.
- 4 Diff accuracy calculate_accuracy counts unified_diff lines against the matching file named _correct.py.
Overview
What I built
- +The five-section editor, with next and previous navigation between sections and a sticky header over them.
- +Templates for both supervised and unsupervised mode, each section opening on the same starter Keras code.
- +Template locking: a marker line per section, and Monaco read-only ranges below it, so the harness cannot be edited away.
- +Per-section saving with a validity check, so an edit that drops a required call is refused instead of overwriting the section.
What I rebuilt
- ~Fixed the supervised data preparation step on 2025-03-27, after templating it stopped running.
- ~Fixed the model definition step in unsupervised mode on 2025-03-27, where the required Dense layers did not match the harness.
- ~Kept the last valid text per section rather than resetting the whole section, added 2025-03-04 when an invalid edit wiped a stage.
- ~Rebuilt the editor page around the desktop wireframe, with a sticky header, on 2025-01-30.
Known limitations
- !The editable ranges are anchored to fixed line numbers, and a comment in CodeTemplates.jsx says so: add an import line and every boundary shifts.
- !app.py unpacks model, X, Y from generateModel(), which returns a single log filename, so /train_with_logging cannot run as written.
- !The only test in the repository is the Create React App placeholder in src/App.test.js; none of the Flask routes have one.
Decisions
- 1. Lock the harness, not the student I chose marker lines in each template, and Monaco read-only ranges below them, Instead of a free editor the student can rename anything in, Because /api/run_code appends a fixed harness that calls load_data, build_model, train_model and evaluate_model, so renaming one breaks the run for reasons that have nothing to do with the bug under study..
- 2. Run the Python on the server I chose writing the student's script to disk and running it with subprocess from Flask, Instead of running the student's Python in the browser, Because the script imports TensorFlow, pandas and scikit-learn, trains for a few epochs and writes training_plot.png, and the frontend fetches that image back from /api/get_plot..
Timeline
| Version | Date | Description |
|---|---|---|
| v0.1.0 | 2024-09 | Course repository opens: the Flask API and the Create React App shell, September 2024. |
| v0.2.0 | 2024-10 | Accuracy against the matching correct file reaches the frontend, and the Docker dev and production setups arrive. |
| v0.3.0 | 2024-11 | The feedback box: the student sends the current code plus a note, and Gemini returns a second pass. |
| v0.4.0 | 2025-02 | Monaco landed on all five stage pages, with one layout across them and next and previous buttons. |
| v0.5.0 | 2025-03 | Templates for both modes, the locked ranges, and per-section saving that survives an invalid edit. |
| v0.6.0 | 2025-04 | Last editor pass on 2025-04-03, fixing supervised data preparation and unsupervised model definition. |