feat: generate alt-text with ai

[Shinigami92]

This feature adds a Copilot-AI to the image-alt-text editor so it is possible to click a button that just generates an example text for the image.

Aufzeichnung.2024-05-27.211052.mp4

Open TODOs:

• Style the button so it is inside the textarea in the upper right corner and looks like in VSCode commit title field
• Add a warning to inform the user that this feature will download ~250 MiB into the browsers cache
  The download will only be done when the user confirms
• Display error messages if something went wrong
• props.attachment.url might not be usable due to cors error?!

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	7c26cec
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/665618557bb4a400084cd59c

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	7c26cec
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/66561855b07a38000869e101
😎 Deploy Preview	https://deploy-preview-2875--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher

View full report↗︎

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

[Shinigami92]

I run out of ideas how to get the image (either as dataUrl or blob) as every attempt results in cors issues 🙁

... trying out: https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome

[Shinigami92]

It looks like the cors error is only on https://media.universeodon.com, but when I use my own account from mas.to I dont get a cors error on https://media.mas.to and it works 👀

[userquin]

how about using fetch with mode: 'no-cors' + blob response + RawImage.fromBlob? (I guess you only need to provide the image to the transformer)

[Shinigami92]

how about using fetch with mode: 'no-cors' + blob response + RawImage.fromBlob? (I guess you only need to provide the image to the transformer)

Will try later, need some sleep 😴
I have jetlag 😅

[userquin]

NOTE: maybe we can store the image temporarily in cache storage (similar to the model) instead of directly uploading the image to the server (we would also use the image from the cache in the preview and the dialog), this way, CORS problem will disappear (we'll need to change the publish logic)

m.webtoo.ls also failing:

[Shinigami92]

Just as a note for FFR: I still have the idea in my head, however I observe the evolution of window.ai that is currently in experimental in chrome (e.g. https://syntackle.com/blog/window-ai-in-chrome/)
However, this is only for text and does not allow image as input... at least now...