pMAGI-2024-02-06
nishio who knows what they want to do (design skills are not up to par).
nishio
nishio You'll notice discrepancies in details when you make them and then put them side by side... nishio I guess this is how it goes.
nishio Well, I'll eventually make a Canvas implementation, so that's about it for now...
nishio "I need to generate an OGP image?" I asked him and he answered "Well, make a sample of step 1" and I got the sample code and ran it and it worked fine.
nishio something like this?
nishio I've made it this far.
nishio I took my wife's information design consulting
nishio I see.
nishio I'll compare it to my own design, I knew it was better now.
nishio I was able to get the text poured in.
nishio SVG to PNG is done, but text laid out with foreignObject is not displayed?
nishio difficult, more to come.
nishio I'm in trouble, I exported SVG from Adobe XD and pasted it into React as JSX I pasted the SVG exported from Adobe XD as JSX to React so that data can be poured in, but word wrap is not done automatically, so I used divs with foreignObjects. But when I render it with Sharp on the server side, the text is not displayed. to be continued nishio So I asked GPT4 if there is any good library to dump foreignObject and carve it into tspan, and they said "no, use this function" or something like that. I tried to use it anyway, but document.createElement doesn't work on the server side. The solution is jsdom. seriously? Are you sure you're not running in the wrong direction? nishio I've been going along without worrying because AI is accelerating so fast, but isn't this the path humans should be on? Are you sure about that? I think there was a fork in the road between SVG and Canvas, and a fork between Sharp and Pupettier, but I've been trusting them to come up with a solution with full confidence, so I've been going forward, but is this really the path to take? nishio
nishio No! That's a trap, isn't it?
nishio Wait, in the first place, in this view, I think the appearance of the text in a monospace font and line breaks without considering word breaks or hyphenation is sufficient. I guess... then there is no need to get the width. In the end, which technology choice is better depends on the unspoken requirement specification of "how you expect it to look like. nishio Until 5 minutes ago, I was thinking "I can't get the width, so it's impossible to make my own line breaks, Sharp was the wrong choice and I'll choose Puppeteer"
- Maybe the AI assistants are misleading you in a big way.
- Rendering SVG on the server side is a thorny issue.
- I can't copy and paste if it's made into an image.
- Since the image seems to be a fixed size, I would put a div with position:absolute or something to overlay the image.
- No, what I'm making now is an OGP Image for SNS, so it's a prerequisite to make it an image.
- I can embed a div in the SVG itself with a foreignObject, but when I try to render it on the server side, it doesn't show up, and I'm wondering if that's not good enough.
- Ah, OGP.
- I made my own tool to insert text into images for OGP generation...
- I wonder what everyone else is doing.
- Simple things can be done with ImageMagick, but if you start thinking about folding Japanese characters, you will have to make your own.
- It would be nice to be able to generate PNGs or something from SVG without having to think about it.
- I believed the AI when it said it could do that, and I was hooked.
- ricapitolareはsvg生成のみ
wrote code to convert svg to png in rust.
- It's interesting that talking to GPT4 clarifies a wide variety of misconceptions on this subject.
- I'd like to sort this out after a break as an interesting story of human cognition.
This page is auto-translated from /nishio/pMAGI-2024-02-06 using DeepL. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at @nishio_en. I'm very happy to spread my thought to non-Japanese readers.