6 ms·

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

137 points by vthommeret 6y ago

vthommeret 6y ago
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 https://github.com/vthommeret/mathtocode I would appreciate any and all feedback! [0] https://youtu.be/4u8FxNEDUeg?t=1390 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.
- paulgb 6y ago
  Nice work! Does Skulpt implement numpy, or did you write a shim to implement the necessary subset of numpy?
  - vthommeret 6y ago
    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 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.
- aceperry 6y ago
  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.
  - vthommeret 6y ago
    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.html 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/questions 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.
- asicsp 6y ago
  >It's open source here: https://github.com/vthommeret/mathtocode https://github.com/vthommeret/mathtocode Any chance for a license like MIT?
  - vthommeret 6y ago
    Good idea! I just added it: https://github.com/vthommeret/mathtocode/blob/master/LICENSE https://github.com/vthommeret/mathtocode/blob/master/LICENSE
sharemywin 6y ago
Got stuck would be nice to get right answer like a help button
- vthommeret 6y ago
  Thanks for the feedback! I plan to add this shortly! Where did you get stuck?
  - _ph_ 6y ago
    I get stuck at page 9 - no explanation of the prod syntax
    - vthommeret 6y ago
      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).
      - supernova87a 6y ago
        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.
        vthommeret 6y ago
        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.
somethingsome 6y ago
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
- vthommeret 6y ago
  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/questions/011-frobenius-norm.md https://github.com/vthommeret/mathtocode/blob/master/questio...
- _ouml_ 6y ago
  @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/ https://leanprover-community.github.io/ It has Borel spaces: https://leanprover-community.github.io/mathlib_docs/measure_theory/borel_space.html https://leanprover-community.github.io/mathlib_docs/measure_...
rayraegah 6y ago
For slide 12 the correct answer[0] threw an error the first time but couldn't reproduce it. [0] https://pastebin.com/raw/AivpKE3u https://pastebin.com/raw/AivpKE3u
- vthommeret 6y ago
  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.
rmelhem 6y ago
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!
deleted 6y ago
[deleted]
neil_s 6y ago
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.
- vthommeret 6y ago
  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 :-).
set92 6y ago
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.
Donckele 6y ago
Good work! I’m learning, thank you. Feedback: Please autofocus to input box - it will be a smoother experience!
nromiun 6y ago
Nice. Here is another similar resource that was posted recently. 1. https://github.com/Jam3/math-as-code/blob/master/PYTHON-README.md https://github.com/Jam3/math-as-code/blob/master/PYTHON-READ... The HN thread: https://news.ycombinator.com/item?id=23507764 https://news.ycombinator.com/item?id=23507764
barrenko 6y ago
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.
jackge 6y ago
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.
jackge 6y ago
Useless, since based on Python 2. (and this is nowhere indicated) - the user string is interpreted with Sculpt https://github.com/skulpt/skulpt 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.
- vthommeret 6y ago
  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/0d5f780be4f2187b16faee22d7e6aaa364a75d2d/lib/python.js#L27 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 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.
tchaffee 6y ago
This was useful, although too basic for me. I would love to see you add many more exercises.
vthommeret 6y ago
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!

137 points by vthommeret 6y ago

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 https://github.com/vthommeret/mathtocode I would appreciate any and all feedback! [0] https://youtu.be/4u8FxNEDUeg?t=1390 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.

paulgb 6y ago
Nice work! Does Skulpt implement numpy, or did you write a shim to implement the necessary subset of numpy?
- vthommeret 6y ago
  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 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.
aceperry 6y ago
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.
- vthommeret 6y ago
  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.html 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/questions 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.
asicsp 6y ago
>It's open source here: https://github.com/vthommeret/mathtocode https://github.com/vthommeret/mathtocode Any chance for a license like MIT?
- vthommeret 6y ago
  Good idea! I just added it: https://github.com/vthommeret/mathtocode/blob/master/LICENSE https://github.com/vthommeret/mathtocode/blob/master/LICENSE

sharemywin 6y ago

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

vthommeret 6y ago
Thanks for the feedback! I plan to add this shortly! Where did you get stuck?
- _ph_ 6y ago
  I get stuck at page 9 - no explanation of the prod syntax
  - vthommeret 6y ago
    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).
    - supernova87a 6y ago
      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.
      - vthommeret 6y ago
        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.

somethingsome 6y ago

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

vthommeret 6y ago
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/questions/011-frobenius-norm.md https://github.com/vthommeret/mathtocode/blob/master/questio...
_ouml_ 6y ago
@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/ https://leanprover-community.github.io/ It has Borel spaces: https://leanprover-community.github.io/mathlib_docs/measure_theory/borel_space.html https://leanprover-community.github.io/mathlib_docs/measure_...

rayraegah 6y ago

For slide 12 the correct answer[0] threw an error the first time but couldn't reproduce it. [0] https://pastebin.com/raw/AivpKE3u https://pastebin.com/raw/AivpKE3u

vthommeret 6y ago
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.

rmelhem 6y ago

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!

deleted 6y ago

[deleted]

neil_s 6y ago

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.

vthommeret 6y ago
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 :-).

set92 6y ago

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.

Donckele 6y ago

Good work! I’m learning, thank you. Feedback: Please autofocus to input box - it will be a smoother experience!

nromiun 6y ago

Nice. Here is another similar resource that was posted recently. 1. https://github.com/Jam3/math-as-code/blob/master/PYTHON-README.md https://github.com/Jam3/math-as-code/blob/master/PYTHON-READ... The HN thread: https://news.ycombinator.com/item?id=23507764 https://news.ycombinator.com/item?id=23507764

barrenko 6y ago

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.

jackge 6y ago

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.

jackge 6y ago

Useless, since based on Python 2. (and this is nowhere indicated) - the user string is interpreted with Sculpt https://github.com/skulpt/skulpt 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.

vthommeret 6y ago
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/0d5f780be4f2187b16faee22d7e6aaa364a75d2d/lib/python.js#L27 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 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.

tchaffee 6y ago

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

vthommeret 6y ago

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!