import code in images (OCR)#837
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Deploying livecodes with
|
| Latest commit: |
b192195
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0f0a5dbf.livecodes.pages.dev |
| Branch Preview URL: | https://import-image.livecodes.pages.dev |
|
Hi Dr @hatemhosny That's a cool feature!
I think removing numbers from the start of each line and reformatting would be enough |
|
Thank you, @BassemHalim |
Line numbers are now removed.
However, formatting would be difficult! Biome is a formatter that is compatible with Prettier, but would format blocks with no errors and ignore those with errors. But it is still lagging behind in language support. |
|
Size Change: +12 kB (+1.19%) Total Size: 1.02 MB
ℹ️ View Unchanged
|
|
Hi @hatemhosny I tested it some more and now it works with most of images with line numbers but sometimes it still leaves the line number not sure why. I will double check the regex. I tested with this photo and it didn't remove the numbers.
That makes sense, I agree we can leave it as is and let the user fix it. We can't expect perfect results from OCR. |
|
Thank you, @BassemHalim
To check for line numbers, I look for numbers followed by a space. The problem was that OCR inserted empty lines, every other line. So that check failed. Please have a look now. |
The size check shows significant increase in the This is related to this issue: #840 |
|
Hi @hatemhosny, Thanks for the opportunity to review this PR - looks like another great feature! I have a few comments and questions:
|
| const lastLines = lines.slice(-2).join('\n'); | ||
|
|
||
| // detect images created by LiveCodes "Code to Image" with share URL | ||
| const shareUrlPattern = /\?x=(id\/\S{11,20})/g; |
There was a problem hiding this comment.
To make the detection more accurate, would it be beneficial to check for a base URL or similar prefix here?
There was a problem hiding this comment.
I'm not sure.
I want to support:
- hosted app: livecodes.io
- permanent URLs: v46.livecodes.io
- preview URLs: import-image.livecodes.pages.dev
- self-hosted instances: live-codes.github.io/livecodes (or any self-hosted URL)
- localhost:8080
- an app should be able to import images generated by another apps
Do you have a better suggestion?
There was a problem hiding this comment.
Anyway, this should be a lot less relevant after using png meta tags.
|
hey @zyf722
You are right. I added a loading notification.
This is the OCR quality of tesseract.js. I'm not sure we can improve that.
That's such a nice suggestion. I found meta-png which is a tiny library that reads and writes PNG meta data.
I looked for something similar for JPG. I only found exiftool-vendored which is a much larger library and I'm not even sure I'll be able to get it work in the browser. So you can now generate images using the "Code-to-Image" tool and then try importing them. Thanks again. P.S. Importing from CodePen now works again (only pens of PRO accounts): |
|
Hi @hatemhosny,
Got it. In that case, leaving it as is and letting users manually fix the text after importing sounds like a good plan for now.
Just tried it, and it is much better! Appreciate the fix.
Ah, I forgot there were three target formats for code-to-image. Then perhaps we can do the same for SVGs using the Also, what do you think about adding a clickable tooltip for PNG (and maybe SVG, if we go that route) to explain this embedding benefit to users? Thanks! |
|
I don't think we should deal with SVG as images in this sense. Also note, the text can be easily copied from SVG images (in case the user wants to copy the code from the SVG screenshot) I added a commit to handle importing SVG -> opens in html editor. |
i18n ActionsSource PR has been merged into the default branch. Maintainers can comment |
|
.i18n-update-push |
i18n Actions:
|
| Name | Description |
|---|---|
| New Branch for i18n | i18n/live-codes/import-image |
| Last Commit SHA | aef91c2 |
Maintainers can comment .i18n-update-pull after translation is done to trigger the i18n pull workflow and pull the changes back to Github.
|
.i18n-update-pull |
i18n Actions:
|
| Name | Description |
|---|---|
| i18n Branch | i18n/live-codes/import-image |
| Last Commit SHA | 60ae1cb |
| i18n PR | #844 |
3 participants
What type of PR is this? (check all applicable)
Description
This PR allows importing code in images (local or via URL).
Tesseract.js is used for client-side OCR.
Language detection is performed using highlight.js
Best results are obtained when the image is generated using LiveCodes "Code to Image" feature, with a share URL added to the image.
Added tests?
Added to documentations?
Demo
https://import-image.livecodes.pages.dev/?screen=import
I would appreciate opinion, suggestion and code review.
@BassemHalim @Seth0x41 @zyf722