Garbled image output

[bbelderbos]

    Other weirdness, not related to this PR but unfortunate:

Seems an open issue: https://github.com/carbon-app/carbon/issues/743

_Originally posted by @bbelderbos in https://github.com/PyBites-Open-Source/pybites-carbon/pull/8#discussion_r1032999823_

[bbelderbos]

Not happening in browser, only when Selenium downloads the image. Wonder if Chrome related, so could try with another driver or swap Selenium for Playwright.

[bbelderbos]

This issue is becoming increasingly hampering :(

I run the tool like this: carbon -c -b \#A0D6B4 -w bw -d $HOME/Downloads

Result:

[bbelderbos]

Ok this might be driver version related, just tried same code on CodeImag.es and it works fine there:

$ python -m tips.post_snippet  # git clone https://github.com/bbelderbos/codeimag.es
Add a title: Swap variables
Paste your code snippet, enter <enter>+qq to finish:
>>> a = 1
>>> b = 2
>>> a, b = b, a
>>> a
2
>>> b
1
qq
Add an optional description, enter <enter>+qq to finish:
Tuple unpacking 😍 - swapping variables does not require an intermediate variable :)
qq
Posting tip ...
Code snippet posted to CodeImag.es: https://pybites-codeimages.herokuapp.com

API response:
{'added': '2022-11-29T09:12:04.572983+00:00',
 'background': '#ABB8C3',
 'code': '>>> a = 1\n>>> b = 2\n>>> a, b = b, a\n>>> a\n2\n>>> b\n1',
 'description': 'Tuple unpacking 😍 - swapping variables does not require an '
                'intermediate variable :)',
 'id': 70,
 'language': 'python',
 'public': True,
 'theme': 'seti',
 'title': 'Swap variables',
 'url': 'https://pybites-carbon.s3.us-east-2.amazonaws.com/YmJlbGRlcmJvc19Td2FwIHZhcmlhYmxlcw==.png',
 'user_id': 1,
 'wt': 'sharp'}
Press enter to post another tip, 'q' to exit: q
Bye

Going to https://pybites-codeimages.herokuapp.com it renders like this:

[greywidget]

I forked the project and installed it locally. At the moment I can't reproduce the error. I do like the idea of moving to Playwright instead.

[bbelderbos]

Thanks @greywidget for trying it out. What chromedriver are you using? And did you try with the exact code example above?

[greywidget]

My local version is on Windows 10, Python3.11.0 Chromedriver version 107.0.5304.62

I ran the tuple-swap example via first running it in the REPL and then copying to my clipboard and finally running carbon -c.

My generated png looked OK:

[bbelderbos]

Thanks, will try it again with different versions.

I wonder if Playwright gets us around this annoying issue I am facing now no Heroku atm.

[greywidget]

I think it does get around the problem of version differences between (for example) Google Chrome and the Chromedriver. This exerpt from talkpython

In Selenium, it's the full browser. Whatever you've got, you can do things from a command line to kind of like play with certain things like what user profile, use what user data directly and all that. But essentially, the browser that's installed on your machine is what Selenium web driver would use. But in Playwright, it doesn't use those quote unquote stop browsers. Playwright uses browser projects. So with Playwright, you are not testing Google Chrome. You are literally testing the Chromium project. You're not testing Mozilla Firefox, you're testing the Open Source Firefox project. You're not testing Apple Safari. You're testing the WebKit project. And so when you go to set up and install Playwright, part of the Playwright install command is it will download the latest versions of these browser projects and install them on your machine. And so when Playwright runs, it's running against those, in a sense, it's a more pure strip down, just the essence of the rendering engine. Javascript.

That episode is worth a listen if you haven't already.

Also I'd recommend Andys Playwright Tutorial if you haven't already done it. Short and concise, I found it helpful

[bbelderbos]

Awesome, thanks!

[bbelderbos]

Need to try to reproduce now we're using Playwright (>= 0.7).

I know it can even happen using carbon.now.sh in the browser, so worst case we need to add one or two spaces after the longest line of the code snippet.

But let's see if it happens again (I am using the tool daily again ...)

[greywidget]

Nice - give me a shout if you'd like me to check anything out under Windows.