4 ms·

Show HN: Self-hosted service for creating random avatars

47 points by frncsdrk 5y ago

tomxor 5y ago
No offence but this seems overcomplicated to me. I know docker and nodejs etc are all the trend, or maybe I'm missing something that makes this necessary? If it's just a matter of generating a random sprite, this could be a simple front-end script that given a random seed outputs a deterministic avatar. That seed could be based on a user-email etc and now you have a "service" without a back-end. The images are simple enough that it should be very efficient to generate and faster than a http request (provided it's written considerately)... or if it _must_ be done in the backend, you could generate a http image response on the fly based on a seed passed in the request header, again in one simple script. [edit] Sorry I feel bad now, but I genuinely think there is a better approach. I'm hoping you might be open to it. Here's a proof of concept that add avatars to HN based on the username: (Just paste it in the console on this page and scroll to the top.) const avatar = (r=1, p=16) => { const c = document.createElement('canvas'); const x = c.getContext('2d'); c.width = 8*p; c.height = 8*p; for (let i=28; i--;) { // xorshift r ^= r << 13; r ^= r >>> 17; r ^= r << 5; // pixels const X=i&3, Y=i>>2; if (r>>>28 > X*X+Y) { x.fillRect( p*3.5 + p*X, p*0.5 + p*Y, p, p); x.fillRect( p*3.5 - p*X, p*0.5 + p*Y, p, p); } } return c; }; // Your HN avatar ! :) const seed = [...me.innerText] .map(c => c.charCodeAt(0)) .reduce((a, b) => a + b); const sprite = avatar(seed); document.body.prepend(sprite);
- frncsdrk 5y ago
  None taken. Thank you for your feedback and the time you put in to show a different approach to the problem!
  - tomxor 5y ago
    I'm glad :) and you're welcome.
  - tomxor 5y ago
    I'm glad. Also, thank you, I actually had some fun hacking on this problem a bit more. Following is a script to annotate HN comments with deterministic avatars :) feel free to do with it as you please. Fixed one silly oversight: the original example just summed the unicode points of the username, but this has trivial collisions with other names (even on this thread), ideally the string should be hashed, so i've done a very simple made up hash by adding a nonlinear operation to xorshift to combine each code point (if you really care about collisions, use a proper hash like SHA256). Also added some colour and tweaked the sprite probability distribution. If you want a more sophisticated pattern, the part to play with is `if (r>>>29 > X**X/3+Y/2)`, the left hand side is the high 3 bits of the PRNG state (i.e random integer between 0 and 8), the right hand side is an arbitrary probability distribution, the current one just biases it towards the top center (squared on the horizontal). If you want a unit interval (a float between 0 and 1) rather than a 31bit uint for the random variable, you can get one with `(r>>>0)*2**-32`, but with a bit more computational cost. for (const u of document.querySelectorAll('.hnuser')) { const p=2; // seed state let s=u.innerText, r=1; for (let i=s.length; i--;) { // xorshift32 r^=r<<13, r^=r>>>17, r^=r<<5; // seed r+=s.charCodeAt(i); } // init canvas const c=document.createElement('canvas'); c.width=p*8, c.height=p*8; u.parentElement.prepend(c); const x=c.getContext('2d'); x.fillStyle='#'+(r>>8&0xFFFFFF) .toString(16).padStart(0, 6) // draw pixels for (let i=28; i--;) { // xorshift32 r^=r<<13, r^=r>>>17, r^=r<<5; // pixels const X=i&3, Y=i>>2; if (r>>>29 > X*X/3+Y/2) x.fillRect(p*3.5+p*X, p*0.5+p*Y, p, p), x.fillRect(p*3.5-p*X, p*0.5+p*Y, p, p); } } If you paste above in the console of any HN page you will get annotated usernames.
    - vohu43 5y ago
      Nice job!
- remram 5y ago
  I take your point about complexity, however generating avatars client-side does not degrade gracefully.
  - tomxor 5y ago
    As I said, it can be done front or back end, you can use the same script I wrote if you want to stick to javascript, or can implement the same in any other language, and then just return the generated image. In fact the algorithm is so simple you can write the raw bytes out as a bitmap without depending on any image libraries if you wanted. The difference is that it's stateless because it's deterministic. and therefore requires no more than a single small script.
motyar 5y ago
I am working on something very related, not avatars but images with any design. https://bruzu.com https://bruzu.com
phoboslab 5y ago
Sorry to rain on your parade, but this looks seriously over-engineered. There are 71 files in this github repo (6914 after `npm install`) for something that requires ~100 lines of code. Related: here's some PHP code I wrote 14 years ago that does something similar, but tries to generate aesthetically pleasing avatars: https://phoboslab.org/log/2008/12/instant-avatars https://phoboslab.org/log/2008/12/instant-avatars
remram 5y ago
This one is way cuter, generating cats: https://www.davidrevoy.com/article591/cat-avatar-generator https://www.davidrevoy.com/article591/cat-avatar-generator
- ytjohn 5y ago
  One of these I really like that has been around forever is https://robohash.org/ https://robohash.org/ You can generate different variations of robots, cats, and humans. The source is available as well, and it's also a python module, which is great if you're writing python apps. I found it rather simple to integrate inside of just about any flask/fastapi/django application. https://github.com/e1ven/Robohash https://github.com/e1ven/Robohash
  - remram 5y ago
    Those are the exact same cats! Seems like a strict superset, thanks a lot for the link.
  - busymom0 5y ago
    I use robohash in my hacker news client's user profile page as well as the leaders page: https://apps.apple.com/us/app/id1464477788 https://apps.apple.com/us/app/id1464477788 https://play.google.com/store/apps/details?id=com.pranapps.hack https://play.google.com/store/apps/details?id=com.pranapps.h... Example: https://play-lh.googleusercontent.com/RYxCwU-dV9hdzmewDKYmlU1T2YO8tc0a-wQ4sn5Npl4PZnMEjHlcNt2WTTFUKGKjMWE=w2504-h1335 https://play-lh.googleusercontent.com/RYxCwU-dV9hdzmewDKYmlU...
sgoto 5y ago
I wrote something somewhat similar here: https://code.sgo.to/2021/06/14/avatars.html https://code.sgo.to/2021/06/14/avatars.html

47 points by frncsdrk 5y ago

No offence but this seems overcomplicated to me. I know docker and nodejs etc are all the trend, or maybe I'm missing something that makes this necessary? If it's just a matter of generating a random sprite, this could be a simple front-end script that given a random seed outputs a deterministic avatar. That seed could be based on a user-email etc and now you have a "service" without a back-end. The images are simple enough that it should be very efficient to generate and faster than a http request (provided it's written considerately)... or if it _must_ be done in the backend, you could generate a http image response on the fly based on a seed passed in the request header, again in one simple script. [edit] Sorry I feel bad now, but I genuinely think there is a better approach. I'm hoping you might be open to it. Here's a proof of concept that add avatars to HN based on the username: (Just paste it in the console on this page and scroll to the top.) const avatar = (r=1, p=16) => { const c = document.createElement('canvas'); const x = c.getContext('2d'); c.width = 8*p; c.height = 8*p; for (let i=28; i--;) { // xorshift r ^= r << 13; r ^= r >>> 17; r ^= r << 5; // pixels const X=i&3, Y=i>>2; if (r>>>28 > X*X+Y) { x.fillRect( p*3.5 + p*X, p*0.5 + p*Y, p, p); x.fillRect( p*3.5 - p*X, p*0.5 + p*Y, p, p); } } return c; }; // Your HN avatar ! :) const seed = [...me.innerText] .map(c => c.charCodeAt(0)) .reduce((a, b) => a + b); const sprite = avatar(seed); document.body.prepend(sprite);

frncsdrk 5y ago
None taken. Thank you for your feedback and the time you put in to show a different approach to the problem!
- tomxor 5y ago
  I'm glad :) and you're welcome.
- tomxor 5y ago
  I'm glad. Also, thank you, I actually had some fun hacking on this problem a bit more. Following is a script to annotate HN comments with deterministic avatars :) feel free to do with it as you please. Fixed one silly oversight: the original example just summed the unicode points of the username, but this has trivial collisions with other names (even on this thread), ideally the string should be hashed, so i've done a very simple made up hash by adding a nonlinear operation to xorshift to combine each code point (if you really care about collisions, use a proper hash like SHA256). Also added some colour and tweaked the sprite probability distribution. If you want a more sophisticated pattern, the part to play with is `if (r>>>29 > X**X/3+Y/2)`, the left hand side is the high 3 bits of the PRNG state (i.e random integer between 0 and 8), the right hand side is an arbitrary probability distribution, the current one just biases it towards the top center (squared on the horizontal). If you want a unit interval (a float between 0 and 1) rather than a 31bit uint for the random variable, you can get one with `(r>>>0)*2**-32`, but with a bit more computational cost. for (const u of document.querySelectorAll('.hnuser')) { const p=2; // seed state let s=u.innerText, r=1; for (let i=s.length; i--;) { // xorshift32 r^=r<<13, r^=r>>>17, r^=r<<5; // seed r+=s.charCodeAt(i); } // init canvas const c=document.createElement('canvas'); c.width=p*8, c.height=p*8; u.parentElement.prepend(c); const x=c.getContext('2d'); x.fillStyle='#'+(r>>8&0xFFFFFF) .toString(16).padStart(0, 6) // draw pixels for (let i=28; i--;) { // xorshift32 r^=r<<13, r^=r>>>17, r^=r<<5; // pixels const X=i&3, Y=i>>2; if (r>>>29 > X*X/3+Y/2) x.fillRect(p*3.5+p*X, p*0.5+p*Y, p, p), x.fillRect(p*3.5-p*X, p*0.5+p*Y, p, p); } } If you paste above in the console of any HN page you will get annotated usernames.
  - vohu43 5y ago
    Nice job!
remram 5y ago
I take your point about complexity, however generating avatars client-side does not degrade gracefully.
- tomxor 5y ago
  As I said, it can be done front or back end, you can use the same script I wrote if you want to stick to javascript, or can implement the same in any other language, and then just return the generated image. In fact the algorithm is so simple you can write the raw bytes out as a bitmap without depending on any image libraries if you wanted. The difference is that it's stateless because it's deterministic. and therefore requires no more than a single small script.

motyar 5y ago

I am working on something very related, not avatars but images with any design. https://bruzu.com https://bruzu.com

phoboslab 5y ago

Sorry to rain on your parade, but this looks seriously over-engineered. There are 71 files in this github repo (6914 after `npm install`) for something that requires ~100 lines of code. Related: here's some PHP code I wrote 14 years ago that does something similar, but tries to generate aesthetically pleasing avatars: https://phoboslab.org/log/2008/12/instant-avatars https://phoboslab.org/log/2008/12/instant-avatars

remram 5y ago

This one is way cuter, generating cats: https://www.davidrevoy.com/article591/cat-avatar-generator https://www.davidrevoy.com/article591/cat-avatar-generator

ytjohn 5y ago
One of these I really like that has been around forever is https://robohash.org/ https://robohash.org/ You can generate different variations of robots, cats, and humans. The source is available as well, and it's also a python module, which is great if you're writing python apps. I found it rather simple to integrate inside of just about any flask/fastapi/django application. https://github.com/e1ven/Robohash https://github.com/e1ven/Robohash
- remram 5y ago
  Those are the exact same cats! Seems like a strict superset, thanks a lot for the link.
- busymom0 5y ago
  I use robohash in my hacker news client's user profile page as well as the leaders page: https://apps.apple.com/us/app/id1464477788 https://apps.apple.com/us/app/id1464477788 https://play.google.com/store/apps/details?id=com.pranapps.hack https://play.google.com/store/apps/details?id=com.pranapps.h... Example: https://play-lh.googleusercontent.com/RYxCwU-dV9hdzmewDKYmlU1T2YO8tc0a-wQ4sn5Npl4PZnMEjHlcNt2WTTFUKGKjMWE=w2504-h1335 https://play-lh.googleusercontent.com/RYxCwU-dV9hdzmewDKYmlU...

sgoto 5y ago

I wrote something somewhat similar here: https://code.sgo.to/2021/06/14/avatars.html https://code.sgo.to/2021/06/14/avatars.html