I built a basic CNN trained against penises and swastikas, and then anything that doesn't hit the 63% confidence score gets sent to a mod queue, a [vibe-coded fish-tinder](https://bsky.app/profile/bigass.bsky.social/post/3luvikxn3f2...).
Was a fun exercise, spent about a month on it. Frontend is HTML5 hosted on github pages, backend is Node.JS on GCP.
I did just about spit out of coffee reading the words vibe coded fish tinder though. But a smart thing to implement.
I did manage to finally get one in there, but it looked more like a plane than a fish.
They have it in several other places.
Now, make a man and we will make him adventure in the forest?
EDIT: Tried again and now I see there is a highlight, but it's pretty hard to see a in a busy tank, the color contrast is not very high
6.3%??????
From the description
Isn't this how some Lego MMO died? They spent too many resources on "moderation" and too few on the actual game.
If you post that more proeminently, maybe you'll get a bunch of kids on summer holidays finding ways to make penises pass your filter...
Fish or no fish
> I built a basic CNN trained against penises
After seeing it in action, my second thought (first was just watching my fish) was that I was amazed at the good behavior of the users because I would have expected a lot of penises floating around. Now I understand. Nicely done!
1. 95% of people will not be trying to draw penises
2. 5% penises by volume is a lot of penises
Edit: And a lot of Palestinian flags when sorting by popular.
(sorry)
I don't think so, he said "long" lol
Small changes if make: - Change the background colour of the drawing canvas to match the water background - Add fill tool? So folks can color this fish white? Bonus points if you automatically color the inside part of the fish white - Fix the discontinuity of how the fish swim by stretching the pixels of the fish that you draw
35% for this masterpiece? Rigged
Also: When you release something like this to the public, I'm amazed at how quickly humans race to the bottom. That bit can be awful to watch.
The code shows it... Your escaping routine seems OK, but you really __should not__ be building HTML and JS(!) using raw string interpolation. Or letting the client decide whether the submission needs moderation.
There's a very slightly different model in the backend that sends things to the mod queue. Strings are also sanitized there. But copilot really wanted to add all that logic to the frontend too and I thought it was funny
(jk)
This is definitely a drawback with with vibe-coding. I never really write like HTML5 style code - at work I always use typescript with heavy ESLint, so never have to worry about this.
I figured the string sanitization in the backend would take care of any XSS vulns, which was my main concern. But I will have to read into the dangers of string interpolation which I admit I do not remember too much about (outside of the XSS stuff I tried to mitigate).
Thanks for giving the opportunity to learn... :)
I love that this is becoming a meme, haha. Thanks for the laugh.
When you set element.textContent = someUserGeneratedContent, the browser guarantees that the user-generated content will never be parsed as HTML.
response.write("<div>" + sanitize(someUserGeneratedContent) + "</div>") has no such guarantee.
EDIT: Nevermind! Now there's a problem uploading a fish, and the local aquarium is broken, so I can't view the previous one, either. It's a nice idea, but I really wish it worked better with Firefox (being on the web and all).
Uncaught (in promise) Error: Fish model not loaded verifyFishDoodle https://drawafish.com/src/js/app.js:514 <anonymous> https://drawafish.com/src/js/app.js:170 EventListener.handleEvent* https://drawafish.com/src/js/app.js:168
Edit: Never mind, I had to wait till the model loaded. Took some time though. Fun project nevertheless!
1. https://drawafish.com/rank.html?userId=1753510318634_cdeh6a4...
const input = document.createElement("input");
document.body.append(input);
input.type = "file";
input.accept = "image/*";
input.onchange = e => {
if (input.files && input.files[0]) {
const canvas = document.getElementById("draw-canvas");
const ctx = canvas.getContext("2d");
createImageBitmap(input.files[0]).then(img => ctx.drawImage(img, 0, 0));
}
};Worked out the box didn't think twice of it
Good point though as the site doesnt follow responsive design patterns
https://drawafish.com/tank.html?capacity=55&sort=popular also don't sleep on that one
Semi relevant Silicon Valley clip (maybe nsfw, language)
Any en_GB speaker will probably do one of two things here:
"an 'ot" - where the h is dropped and "an" and "'ot" sound like a bit like "annot"
"a hot" - here the a becomes ay (rhymes with hay)
When you trot out a phrase like:
"Well what's the difference between a lamprey and an hot dog?"
I can't help but notice a lack of a comma post "well"!
A lamprey is a fish and a hot dog is a sausage. The first is a living organism and the other is a processed food.
Cheers mate
Really nice toy!
https://www.evanmiller.org/how-not-to-sort-by-average-rating...
Fun idea, fun site!
At least on Firefox/Mac, sometimes while dragging it "picks up" the image to drag it. This should prevent that.
So this means it's doing CORS? Why not just have GCP serve everything?
https://www.theguardian.com/world/2023/oct/31/from-the-river...
All other submissions have score approximately equal to number of likes.
Is the first submission legit or the result of hackers?
With this she clearly just wanted to do the standard stick fish shape, but it turns out she only knows how to do it facing left. Facing left, looks typical, facing right, almost a figure 8. So after like 6 attempts being judged by the computer she's getting frustrated, and I'm like how about this, turn the phone upside down to have her draw facing left. But now she can't do it left either!
And then I think when she consciously thinks about it - trying to do it the opposite way, or later the normal way after being judged repeatedly - she can't make the motion that way. But I bet if she was just thinking of the shape and trying to draw that shape it would be zero issue.
This is my feeling of vibe coding this kind of stuff so far. It's never really good, it's just kind of acceptable because it was vibe codeded.
The way the fish are stretched where they gets sliced into bands is not something I think most humans would generally choose to do. With a few characters of code change you could at least stretch each column so it scales to the next column.
I know vibe coding will continue to get better. There's a bunch of people at my work that have a vibe-coding chat where they show off their latest creation. Most of them they'd done in Gemini Canvas. The prompts are usually 1 or 2 paragraphs like "Make a 3d tower defense game with joypad input where you move a character using the joypad and can place towers by pressing the button. ....." And it spits out a working game but it's only interesting because it was vibe coded, not because the game is actually in any-way-shape-or-form interesting, good, pretty.
Also, I appreciate that this game had a fish recognizer but I also found it super scary. I tried to make to make a sunfish and it was like "not a fish". I don't want bad AI judging what is and isn't acceptable.
[1] https://www.youtube.com/watch?v=tWwCK95X6go&ab_channel=Felix
Love the simplicity of this.
https://drawafish.com/rank.html?userId=1754072603630_i0f8iw6...
Also inspired by that: https://drawdeadfish.com/
For example, if a fill tool was available I bet we would see far far fewer hollow fish.
edit - my beautiful Esox Pinilis was culled from the UGC ocean by whoever is manually moderating this :D
Inundate me with penises and swastikas!
Now to share with my grandkids.
whoamii•3d ago
parpfish•14h ago