Show HN: Math to Code – Interactive NumPy tutorial for engineers | Hacker News Reader

Show HN: Math to Code – Interactive NumPy tutorial for engineers

mathtocode.com

137 pointsvthommeret33 comments

Math to Code is an interactive Python tutorial (all client-side) to teach engineers how to implement math in papers.

I was inspired to create it while taking the Fast.ai course and seeing Jeremy Howard share [0] how a "complicated" Frobenius norm equation could be implemented in a single line of Python.

Math to Code uses the Skulpt library to interpret Python in JavaScript.

It's open source here: https://github.com/vthommeret/mathtocode

I would appreciate any and all feedback!

[0] https://youtu.be/4u8FxNEDUeg?t=1390

> It's time to start reading papers. And papers look something like this, which if you're anything like me, that's terrifying. And I'm not going to lie, it's still the case when I start looking at a new paper, every single time, I think, I'm not smart enough to understand this. I just can't get past that immediate reaction. So I just look at this stuff and I go, that's not something I understand. > But then I remember, this is the Adam paper and you've all seen Adam implemented in one cell of Microsoft Excel. > 1. Even familiar stuff looks complex in a paper! > 2. Papers are important for deep learning beyond the basics, but hard to read. > 3. Learn to pronounce Greek letters.

Nice work! Does Skulpt implement numpy, or did you write a shim to implement the necessary subset of numpy?

Thanks! Skulpt doesn't implement NumPy out of the box, but I'm using a library which is basically a shim / partial implementation of NumPy for Skulpt:

https://github.com/ebertmi/skulpt_numpy

It's fairly outdated (5-years old) and doesn't implement some of the functions I wanted to use (like equality), but otherwise works pretty well.

I got stumped at the Frobenius norm (11/13). Everything I typed in returned this:

NotImplementedError: the 'axis' parameter is currently not supported on line 7

I used variations of: np.sqrt(m.sum(m.prod())) np.sqrt(m.sum(m2))

It's been a long time since I've taken linear algebra, so I don't remember some of these operations.

That's close, but basically you need to take the square of each element first, e.g. `m * * 2` [0]. This keeps the shape of the matrix while `m.prod()` returns a single number (multiplying each element together).

So it should look something like this: `np.sqrt((m * * 2).sum())`

Re: The error message, it looks like it's occurring because `sum` doesn't normally take any parameters and interprets the argument as an "axis" parameter — https://numpy.org/doc/1.18/reference/generated/numpy.sum.htm...

Order of operations is tricky and I could do a better job breaking it down. Still plan to add the Show Solution button but need to get some sleep :-).

In the meantime you can see all the possible solutions in the repo! https://github.com/vthommeret/mathtocode/tree/master/questio...

[0] Remove the space between the asterisks / I had to add it since HN interprets them as italics.

>It's open source here: https://github.com/vthommeret/mathtocode

Any chance for a license like MIT?

Good idea! I just added it: https://github.com/vthommeret/mathtocode/blob/master/LICENSE

Neat! I know python and wanted a quick primer in NumPy syntax recently for a quick data analysis, this is perfect. Would be nice if the input box was automatically focused when advancing to the next question.

Thanks for the feedback! It now autofocuses when not on a mobile breakpoint. I originally had autofocus enabled, but on mobile it would cause the question to scroll off the screen before you had a change to read it which... wasn't ideal :-).

Nice. Here is another similar resource that was posted recently.

1. https://github.com/Jam3/math-as-code/blob/master/PYTHON-READ...

The HN thread:

https://news.ycombinator.com/item?id=23507764

Good work! I’m learning, thank you.

Feedback: Please autofocus to input box - it will be a smoother experience!

This is cool. Got a coding interview task recently, ended up doing the whole thing with numpy and pandas, it was quite fun, and it did not feel like "regular" coding at all. So all my data science research ended up no totally worthless.

I was expecting some math but there is only a norm, I would be more interested in how to transfer from advanced math to code. example : what would be a good code abstraction for a Borel Space

Thanks for the feedback. This is definitely oriented towards beginners but also love some more advanced examples.

Math to Code is open source, so if you can express a solution with NumPy you can easily add new questions / I'm happy to take pull requests — https://github.com/vthommeret/mathtocode/blob/master/questio...

@somethingsome If you want to turn arbitrary maths into code, you should take a look at interactive proof assistants. I'm a fan of https://leanprover-community.github.io/

It has Borel spaces: https://leanprover-community.github.io/mathlib_docs/measure_...

I had to access the solution for std because I missed the right position of 2, I put it after the parenthesis. And in Fnorm I had to check it in the comments because I didn't thought of the similarity with the m.prod() and the list.

Is a cool experiment, and it could be good to lose the fear in papers. Maybe you could add some exercises with formulas or different papers that are a must read.

amazing! i love interactive (and free) tutorials. I'm blogging every free resource I can in the data science roadmap. Will include yours as well. Anyone have any other tool like that for Numpy? I figured out one for SQL called sqlbolt.com, which is dope too!

This was useful, although too basic for me. I would love to see you add many more exercises.

For slide 12 the correct answer[0] threw an error the first time but couldn't reproduce it.

[0] https://pastebin.com/raw/AivpKE3u

Hmm interesting, thanks for the report! I'll see if I can set up some kind of client-side error tracker so I can investigate more easily in the future.

It's possible that it timed out when computing the result — it evaluates the answer in a web worker with a 2.5s timeout and execution is slower on mobile. I used to get timeouts more regularly, but it's fairly optimized now — it checks all of the test inputs and evaluates both the expected solution and user-provided solution in a single Python function.

Got stuck would be nice to get right answer like a help button

Thanks for the feedback! I plan to add this shortly! Where did you get stuck?

I get stuck at page 9 - no explanation of the prod syntax

Got it! I'm working to add a "Show solution" button, but I just published another hint for that question. Specifically, the syntax is the same as for summations "m.sum()" but with "prod" instead. Additionally, you need to to multiply each element of "m" by 3 and use parentheses appropriately — (3*m).

I also got stuck here with no way forward. (until reading here)

The explanatory text "Note that the matrix first element-wise multiplied by 3." is very unclear.

Also, looking at it from a Python novice, it is not clear we were supposed to know that the .prod() operator can act on something that is not purely a named variable, but can work on an already manipulated quantity within parentheses.

Also, and this is not your fault but of Python's, but it is not clear (or merits some explanation) why some operators take the form "operator(x)" while others behave like "x.operator" or even "x.operator()" with no argument.

Thanks for the feedback. I think I was being overly clever by trying to make the product example more complicated than just `m.prod()` similar to the `m.sum()` example, but as you mentioned I was fitting two concepts in one question — operating on an already manipulated variable in addition to the new operator.

I've simplified question 9 to just `m.prod()` from the previous solution of `(m * 3).prod()` for now.

Re: Methods vs. functions — I completely agree! I actually originally implemented Math to Code using Tensorflow.js (which was simpler than using a Python interpreter) where the syntax was:

  m.pow(2).sum().sqrt()

Vs.

  np.sqrt((m ** 2).sum())

I decided to go with NumPy + Python because I felt it would be more immediately applicable vs. just learning the Tensorflow.js syntax. Also Python allows operator overloading so you can just do `2 * m` vs. `m.mul(2)`.

PyTorch has a similarly clean syntax to Tensorflow.js and includes operator overloading, but there doesn't seem to be a PyTorch shim for Skulpt, but that would be a fun project.

also, there are functions which need to be prefixed with np - the module name, but this isn't described. So for someone who isn't quite familiar with python, this doesn't make sense.

Yeah, I had the same issue as the fellow above. I think it would be helpful if the ui displayed the result of the calculation. Debugging the std-dev example was annoying. I ended up opening a python shell so that I could see results of intermediate steps.

Also, my difficulty with numpy isn't applying functions to arrays, it's seeing __repr__ of a multi-dimensional arrays and grokking what it's showing me.

Site worked well on both my iphone and pc btw.

Agreed. Particularly because NumPy has a mix of functions and methods where you need to balance parentheses.

I'd like to more clearly show the answers / I originally didn't show what the test inputs (e.g. if square root is tested with 25, 9, and 4) so you couldn't just return 5 if 25, 3 if 9, etc... but I could display some of the test inputs and not all of them.

It definitely would be great to show the intermediate results of the calculations and for things like matrix multiplication `a.dot(b)` isn't very complicated, but it doesn't give you intuition on what's happening under the hood.

Thanks for the iPhone feedback — I tried my best to make sure it worked well on mobile. The few examples I could find of interactive Python tutorials usually involved spinning up a VM with multi-second lag for each question and textareas which were not at all mobile-optimized so I wanted to try and do something better :-).

Based on the feedback, Math to Code now includes a Show solution button which lets you toggle a solution on and off if you get stuck!

Useless, since based on Python 2.* interpreter (and this is not indicated anywhere) : "Skulpt is a Javascript implementation of Python 2.x." Nearly nothing of this runs on Python 3.

Useless, since based on Python 2. (and this is nowhere indicated) - the user string is interpreted with Sculpt https://github.com/skulpt/skulpt: Skulpt is a Javascript implementation of Python 2.x. Nothing of this runs on current Python 3.*, providing this kind of tutorials is confucing learners.

Skulpt does support the Python 3.7.3 grammar [0], but it's a work in progress. I have it enabled here:
https://github.com/vthommeret/mathtocode/blob/0d5f780be4f218...
Is there something specific that did work for you? I tried all the examples on Python 3.7.3 and they worked for me. One notable thing that's missing is that the @ operator for matrix multiplication, but I hope to add that in the future.
[0] http://skulpt.org Python 3 Grammar. The master branch is now building and running using the grammar for Python 3.7.3. There are still lots of things to implement under the hood, but we have made a huge leap forward in Python 3 compatibility. We will still support Python 2 as an option going forward for projects that rely on it.

Reply on news.ycombinator.com