魚を描けば、仲間と一緒に泳ぎ出す！
引用元：https://news.ycombinator.com/item?id=44719222
このサイトは気分でコーディングしたりGCPの勉強がしたくて作ったんだ。Morning Brew（https://www.morningbrew.com/issues/business-buzzkill）とかMetaFilter（https://www.metafilter.com/209703/Draw-A-Fish）、boingboing.netとか、いろんなとこで話題になったみたい。可愛いよね！
ペニスとスワスティカを学習させたCNNを作って、信頼度が63%に達しないものは全部モデレーション待ちのキューに送られるんだ。まるでvibe-codedな魚Tinder（https://bsky.app/profile/bigass.bsky.social/post/3luvikxn3f2…）だよ。
1ヶ月くらいかけて、楽しい練習になったな。フロントエンドはHTML5でGitHub Pagesに置いてあって、バックエンドはGCPのNode.JSで動いてる。
リーダーボード、超面白いね。何人かは明らかにめちゃくちゃ時間かけてるけど、それ以外の俺たちはみんな、お前のCNNを騙して変な形を入れようとしてる（笑）。
1. https://drawafish.com/rank.html?userId=1753510318634_cdeh6a4…
俺、一生懸命魚を描いてるのに、魚である確率はたった30%って言われるんだ。ひどすぎる！
ごめん、スマイリーフェイス付きの俺のホットドッグが64%になっちゃった。
ちょっと関係あるかもなSilicon Valleyのクリップ（たぶんNSFW、言葉遣い注意）
https://www.youtube.com/watch?v=ACmydtFDTGs
みんな本当にブラウザで絵を描いてるの？それとも、Photoshopとかでスタイラス使って描いたものをキャンバスに読み込める拡張機能とかあるのかな？
俺が1ヶ月とか1年かけても、あんな絵は絶対描けないよ。本当にサイトのツール使ってるの？それとも、どこか別のとこで描いてインポートする裏技でもあるの？あれは本当にすごい！
じゃあヤツメウナギとホットドッグの違いって何なの？
OK、リーダーボードでなんかボット戦争が起きてるでしょ？パレスチナの魚が合計37万票（アップとダウン合わせて）って、多すぎない？Hacker Newsってそんなにトラフィックあるもんなの？
一番の問題は、俺が何度でもアップ投票とダウン投票ができること。レート制限はあるけどね（笑）。スクリプト書いたから知ってるんだ。D。
どうやら他の誰かも同じように、ダウン投票のためにスクリプトを書いてるみたいだ。
マジで直してほしい。
追記：これらのダウン投票、100単位で減ってるぞ。「RiverToSea」の魚をダウン投票しようと、誰かが本当に必死だな。皮肉なことに、「RiverToSea」の魚は「f**k palestine」って名乗るヤツが作ったんだぜ。
タブレットと絵の経験があれば、魚を描くのは全部できるよ。マウスだとすごく大変だけどね。
俺はマウスで描くの好きだよ。何でもそうだけど、練習あるのみさ。
iPadにApple Penを繋げてサイトを開くのもアリだね。
魚をめちゃくちゃ気に入ったら、ちょっと気に入るよりたくさん高評価できる方が民主的だよねってずっと思ってたんだ。
自分の60%のWangフィッシュにめちゃくちゃ満足してたんだけど、リーダーボード見たら気分悪くなっちゃったよ。
もし、そいつが本当の魚の画像をGoogleで検索してはサイトに忠実に描くようなものを作ったら、めちゃくちゃ面白いだろうね。
画像ソースからコピーするだけの”ロボット”は作れるって確信してるよ。
俺は60%超えのすごい絵を描いたんだけど、モデレーションキューが63%だって知って、また全部やり直すことになったんだ。
あと、キャンバスをちゃんと埋めるようにしてね — あんまり小さい絵は描いちゃダメだよ。
まあ、親指ボタンは何回でも押せるからねぇ…
経験則だと100×アップ票＋50って感じ。今600ポイントなら、だいたい6万回訪問くらいかな。この見積もりを真に受けすぎないでね、あくまで悪くない最初の見積もりだから。
OPは”平均評価でソートしない方法”を絶対読むべきだよ。URL: https://www.evanmiller.org/how-not-to-sort-by-average-rating…
お気に入りの絵なら、何回でもアップ投票できるよ！
これは画像をアップロードして、キャンバスに描画するJavaScriptのコードだよ。
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));
}
};
iPhoneでHacker News見てて、このリンククリックして、指で魚を描いたら、すぐ動いたよ。サイトがレスポンシブデザインじゃないからって、特に気にしなかったな。
マウスでも描けたよ。iPadでもいけるけどね。
このサイト最高！
CNNでペニスを検出するようにしたんだね。実際に見て、最初はみんな行儀がいいなって感心してたんだけど、ペニスが大量に浮いてるのを予想してたからね。今、納得したよ。よくやった！
実際、ほとんどの人は悪い魚を投稿しようとしてないよ！俺も驚いたけど、良質な投稿と悪い投稿の割合は95対5くらいだね。みんな平均的にルールを守ってるみたいだよ :)
うん、インターネットを定義する二つのルールがあるよね。
1. 95%の人はペニスを描こうとしない。
2. 5%のペニスでも、量としてはかなり多い。
体積ではそうだけど、質量で見れば結構妥当な量だね。
完璧に平均的って感じかな。
もっとコメントを表示（1）
あるいは、君のユーザー名が言うように「おおよそ平均」だね。:D
公平に言えば、悪い魚は投稿される前に止められてるんだよね。俺もまだ「グリーン」じゃない魚は一度も投稿したことないし。
Twiddlaをリリースした時も、よくあることで、図形ツールにそれを追加しようかって冗談を言ってたんだ。オンラインホワイトボードで最初に描くのは、ただの人間の本能だと思うよ。
ウナギ描こうとしたらさ、気づけばオレンジ色の歯つきペニスになってたんだよね。
これって新しいSouth Parkのエピソードのネタ？（ごめん！）
新しいSouth Parkのエピソードのネタかって？違うと思うよ、彼「長い」って言ってたもん（笑）。
スワスティカ柄の魚がいくつか泳いでるの見たよ。
ダビデの星もあるしね。
追記：人気順に並べたら、パレスチナの旗がいっぱいあったよ。
リーダーボードに「Chosen Fish」ってあったの、今気づいたよ。たまには、もうちょっと分かりにくい方がいいのにね。
頑張って魚の特徴を加えようとしたんだけど、何してるかバレバレだったみたい。
ペニスでできたスワスティカにも耐えられるのかな、これ。
あれはSlackのロゴの再デザインだったんだよね。
俺の意見だと、SlackのロゴはAlphabetの製品ロゴだね。色は完璧じゃないけど、Alphabetのロゴみたいに赤／黄／緑／青なんだ。ラインナップにぴったり収まるよ。特に（もう使われてないけど）Google PodcastsとかGoogle Photosのロゴに似てるんだ。俺の勝手な推測だけど（マジで信じてるわけじゃないよ）、Salesforceに買われる前にAlphabetに買収されるのをスムーズにするため、わざとそうしたんじゃないかなって。
＞俺の勝手な推測だけど（マジで信じてるわけじゃないけど）…
ハッキリ言うと、この組み合わせって色相環でテトラディックパレットなんだよ。色彩理論とかシンプルなロゴのトレンドを考えると、偶然の一致って可能性がずっと高いんだよね。それでも面白いけどさ。
もうこれ見ちゃったら、元には戻せないじゃん。
マジで、彼のコメントを読まなかったことにできたらよかったのに。
魚にN-wordが書かれてるの今見たばっかりだよ。だから、えーと…全然長続きしなかったってことだね。
https://imgur.com/a/Vtoxc7p
この傑作に35%だって？これって不正だよ。
俺の推測だと、あのCNNはすごく抽象的な、典型的な魚の絵で訓練されてて、実際の写真とか高画質の魚の絵じゃないんじゃないかな。俺、頑張って良い感じの魚を描いたのに（芸術家じゃないけどさ）、35%だったんだ。で、その後、基本的な一筆書きの魚を描いたら65%だったよ。
うちの9歳の子の話でちょっと面白いことがあってね。彼女は結構絵が上手で、いろんなキャラや物を描けるんだけど、今回はただの棒魚を描きたがったんだ。でも、左向きしか描けないって分かってね。左向きなら普通に見えるんだけど、右向きだと数字の8みたいになっちゃう。
それでコンピューターに6回くらい判定されて、イライラしてきたんだ。だから俺は『じゃあ、スマホを逆さまにして左向きで描いてもらったらどう？』って言ったんだけど、そしたら今度は左向きも描けなくなっちゃったんだよ！
機能リクエストなんだけど、モデルが魚を評価した後に、その鏡像も評価するようにしてくれないかな。それで一番高い値を向きとして選ぶんだ。何が問題になるかな？もしかしたら、鏡像にする前にユーザーに聞くべきかな？
テキストから棒魚を生成するモデルが絶対に必要だね
そうだね、それは確かに面白い。知識を一般化する前に、まず厳しい制約の下で学ぶ必要があるってことかな、たぶん
彼女は子供が星を描くのと同じ方法で魚を描くのを学んだんだと思う。それは彼らが覚える動きで、彼女もその単純な動きをしたかったんだろうね。彼女は作りたい形を認識して描くのは得意だけど、作りたいジェスチャーを認識するのは違うと思うんだ。
で、意識して反対向きに描こうとしたり、何度も判定されてから通常の描き方に戻ろうとしたりすると、その動きができなくなっちゃうんだね。でも、もし彼女がただ形を考えてその形を描こうとするだけなら、全く問題ないと思うよ
提案なんだけど、canvas.addEventListener(’dragstart’, (e) =\u003e { e.preventDefault(); } );を使ってごらんよ。少なくともFirefox／Macだと、ドラッグ中に画像を”掴んで”ドラッグしちゃうことがあるんだ。これでそれが防げるはずだよ
＞ vibe-codingの練習だって？コード見りゃわかるよ…君のエスケープ処理はまあOKだけど、生の文字列補間でHTMLやJSを構築するのは絶対ダメだよ！クライアントに送信内容のモデレーションを決めさせるのもダメ。
クライアントにモデレーション決めさせてないよ :)
バックエンドにちょっと違うモデルがあって、それがモデレーションキューに送ってるんだ。文字列もそこでサニタイズしてるしね。でもCopilotがそのロジックを全部フロントエンドにも入れたがって、それが面白かったんだ。
それでも、文字列補間でHTMLやJSを構築すべきじゃない。
全くその通り！HTMLとJSの文字列補間は全部削除したよ。(冗談)これはvibe-codingの明確な欠点だね。仕事ではTypeScriptとESLintをガッツリ使ってるから、こんな心配したことないんだ。バックエンドの文字列サニタイズでXSSの脆弱性は防げてると思ってたんだけど、文字列補間の危険性についてもっと勉強しないと。学ぶ機会をくれてありがとう… :)
＞ 全くその通り！HTMLとJSの文字列補間は全部削除したよ。
これ、memeになってきてるのウケるね、ハハ。笑いをありがとう。
もっとコメントを表示（2）
公平に言うと、クライアント上の全てが生の文字列補間だよ。サーバーに渡ってから全てを徹底的にチェックして初めて安全になるんだ。
それは絶対に違うね。クライアント側のサニタイズの方がずっと安全だよ。だってクライアントはHTMLをどう解析するか知ってるからね。サーバーはせいぜい推測する（そして仕様に従うことを願う）だけだ。element.textContent = someUserGeneratedContentって設定すれば、ブラウザはユーザー生成コンテンツがHTMLとして解析されないことを保証してくれる。でもresponse.write(”＜div＞” + sanitize(someUserGeneratedContent) + ”＜/div＞”)にはそんな保証はないんだ。
それはサニタイズじゃなくて、データと実行可能コードの分離だよ。可能ならより良い解決策だけど、上で提案された解決策も機能するよ。
もしそれだけを望むなら、’＜’と’&’をエンコードするだけだから、めちゃくちゃ簡単だよ。
日本に行った時にこれやったんだけど、どこだったか全く思い出せないんだ。どこかの博物館。妻と魚を描いて、それがアップロードされて、部屋に行ったら壁や天井を泳ぎ回るのを見たんだ。本当にクールな体験だったよ。
これ、たぶんチームラボの展示の一つだよね？
https://www.teamlab.art/e/
2013年の展示だよ。
https://futurepark.teamlab.art/en/places/ryubo/
他の場所でもやってるみたいだね。
うちの家族も最近、東京のteamLab Planetsでこれやったよ。気持ち悪い“スマイリー”顔の丸いテンプレートに描いたら、それが雨粒用だったみたいでさ。何百もの俺の化け物作品が部屋中に現れたとき、笑いが止まらなかったよ、めちゃくちゃ楽しかったな。
シンガポールのArtScience Museumにもこのコンセプトあるよ。ガイドがチェックしてからスキャンするテンプレート式の海の生き物の塗り絵で、自分の魚が暗い部屋の壁に他の魚と一緒に泳ぐんだ。超クールだった。別室では空飛ぶ機械のバージョンもあって、それはリモコンで自分の作品を操作できたよ。
https://dibulo.comってサイト見つけたんだけど、これなら家でも（大人も子供も）できるみたいだよ :)
teamLab Borderlessだね、俺も同じことやったよ : )
俺、50%以上いかなかったんだけど、“fish”って書いたら5点上がったよ
青い魚に黒いヒトラーのヒゲをつけたら、10点上がったよ
https://i.imgur.com/SADe8kn.png
6.3%だと？！？？？？
