Show HN: I made a tool to convert recipes to an easy reading graphical notation
gobsmacked.ioHi HN,
I have been working on a project which can automatically convert a recipe to the tree/graph/tabular style notation that pops up on HN every now and then. It's still early days but I am keen to hear about improvements I can make to the recipe presentation.
For reference, the earliest example I have seen of this style of notation is from 'Cooking For Engineers' (https://news.ycombinator.com/item?id=30797907) but I have seen other, similar notations from time to time.
This is my take on the notation, as well as the ability to convert recipes automatically. In the future, I would like to see it become my own personal kitchen/recipe management system but I would first like to improve the recipe display options.
It uses ChatGPT to format the recipe into a JSON tree structure, which is then rendered with CSS grid. So far it works well enough but there is definitely some recipes that are impossible to render, and of course ChatGPT will occasionally spit out less-than-useful trees. I have been using AppWrite for the backend.
Curious to hear everyone's thoughts and what people might like to see! Really neat tool! I’ve always grouped ingredients vertically and instructions horizontally, so I love how your tool automates this and makes it aesthetically pleasing. UX feedback: Make the sample recipe graphs larger, especially at "tablet" size. Tablets are often used in the kitchen, and laptop screens are sometimes set to half-width for multitasking. Consider stacking the sidebar at a larger breakpoint. Minor note: The border-radius on cards causes a small gap at the top-right for cards with simultaneous instructions. Also, my recipe didn’t save after I entered my email and used the link.
Great work overall! Thank you for the note! I appreciate the feedback and will test out some bigger sizing, as well as check out the recipe saving. RE other similar notations: https://news.ycombinator.com/item?id=42066358