Text recognition

[adubovskoy]

We need to go deeper. I propose to introduce a text recognition nodejs plugin. Imagine how would be cool to put a layout drawn on a napkin.

[sylvainpolletvillard]

It goes well beyond the scope of this small project but it would be super fun 😄

I think this kind of OCR tools already exist in Node, maybe you can try to chain them ? Time to experiment 👍

[TryHardNinja]

This plugin is very incredible. I look forward to the support of all properties

[sylvainpolletvillard]

It is a deliberate choice to not support some of the grid properties such as gaps or implicit zones. See the associated comments in the section. I do not plan to support more properties for now.

Note that you can always set these properties manually next to grid-kiss declaration if you feel the need to.

[sylvainpolletvillard]

@adubovskoy I've done a few experiments with Tesseract.js today:

As you can see, there is still work to do with OCR 😄 I think the Tesseract configuration needs some tweaking to identify zones, corners, column alignment etc.. It goes beyond my skills and I need some help to progress on this feature.

If you want to test it by yourself, check out the ocr branch here : https://github.com/sylvainpolletvillard/grid-kiss-playground/tree/ocr ; and look at the OCR button in the playground header.

[kartikadur]

Would restricting letters to capitals/uppercase or specific keywords prevent OCR read errors?

Creating a second pass to adjust row widths and column addons (e.g. - between rows, etc.) might help adjust any errors/mistakes in the OCR image.

this is something really interesting, wish my PC was up to the challenge.

[sylvainpolletvillard]

Yes, I tried a specific alphabet but the results have been disappointing so far. I think it would require a high-def camera, image pre-processing and a specific tesseract config to handle this kind of layout.

[kartikadur]

Since you have an automated process and your code can figure out areas, would using an automated naming convention work? At least for the current version. These automated names can be variablized like in sass (or the next version of css) and listed at the top, giving the user the ability to manually change the names should they want to.

[sylvainpolletvillard]

@kartikadur are we still talking about OCR ? could you give an example ?

[kartikadur]

I'd like to borrow the image you have attached above to work on something that I think might be promising.

Instead of using the OCR reader/ program, I was thinking of using simple edge detection to figure where the section boundaries are located. this should then allow for automatic detection of areas and thus by extension the automated naming.

Sorry if this sounds a little fuzzy, but its something that I am exploring right now. I should hopefully have an example for you in a day or two.

[kartikadur]

As a preliminary example, at least for the first step, I used the code from this codepen to create the example I have posted below. It still needs work, but hopefully it should give you a basic idea.

[sylvainpolletvillard]

Feel free to try everything you want, and have fun 😉
This image is pretty bad quality, it is hand drawn and the picture is from a cheap webcam with low lighting and indirect angle. Do not hesitate to make your own in high definition

[corysimmons]

This is by far the most interesting/exciting css-related issue I've stumbled upon. GitHub needs more creativity like this. 😍

[stephanschubert]

If only every GitHub repository had open issues like this one. 😄