ハクソク

世界を動かす技術を、日本語で。

Show HN: 魚を描いて他の魚と一緒に泳ぐ様子を楽しもう

301日前原文(drawafish.com)

概要

  • GCP と vibe-coding の練習として開発されたウェブサイト
  • インターネット上で Morning Brew や MetaFilter など複数メディアに取り上げられた実績
  • CNN による画像判定機能を実装
  • 信頼度が基準値未満の場合は モデレーションキュー へ送信
  • フロントエンドは HTML5 と GitHub Pages、バックエンドは Node.JS と GCP を使用

ウェブサイト開発の概要

  • vibe-coding と Google Cloud Platform (GCP) のスキル向上を目的とした自主開発プロジェクト
  • サイトは Morning Brew、 MetaFilter、 boingboing.net などの有名サイトで紹介された実績
  • 自作の CNN（畳み込みニューラルネットワーク） を構築し、不適切な画像（ペニスやスワスティカ）検出を担当
  • 画像の判定スコアが 63%未満 の場合、 モデレーション用キュー （vibe-coded fish-tinder）に自動送信
  • 約1ヶ月間で開発を完了した短期プロジェクト

技術スタックと構成

  • フロントエンドは HTML5 で作成し、 GitHub Pages でホスティング
  • バックエンドは Node.JS を採用し、 GCP 上にデプロイ
  • サイト全体の設計と実装を一人で担当した経験

取り組みの感想

  • vibe-coding による自由な発想と実装を重視した開発体験
  • 機械学習 や クラウドインフラ の実践的な学習機会
  • サイトが可愛いという自己評価と、外部からの反響の大きさに満足
  • 実験的なプロジェクトとしての達成感

Hackerたちの意見

日本旅行の時にこれやったんだけど、どこだったか全然思い出せない。どっかの博物館で。妻と一緒に魚を描いて、それがアップロードされて、部屋に行って壁や天井を泳ぐのを見たんだ。めっちゃ楽しい体験だったよ。

└

チームラボのボーダレス、俺も同じことやったよ : )

└

おそらくチームラボの展示の一つだね。

└

https://dibulo.com - ここなら家で（子供も一緒に）できるよ :)

└

最近、家族で東京のチームラボプラネッツに行ったよ。すごく不気味な「スマイリー」顔で円形のテンプレートを埋めたんだけど、そのテンプレートは雨粒用だった。自分のモンスターみたいな作品が部屋を埋め尽くしたとき、笑いが止まらなかった。すごく楽しかったよ。

基本的なCNNをペニスと卍に対して訓練したんだ これって、あるレゴのMMOが死んだ理由じゃない？「モデレーション」にリソースを使いすぎて、実際のゲームにはほとんど使わなかった。もしそれをもっと目立つように投稿したら、夏休み中の子供たちがペニスをフィルターを通過させる方法を見つけるかもね…

ウェブサイトは素晴らしい！ > 基本的なCNNをペニスに対して訓練したんだ 実際に動いているのを見て、二つ目の感想（最初は魚を見てただけ）として、ユーザーの行動がすごく良かったことに驚いた。ペニスがたくさん浮いてると思ってたから。今は理解したよ。よくできてるね！

└

ペニスで作った卍に対して耐性があるのかな？

└

魚の特徴を加えようと頑張ったけど、何をしてるか分かってたみたい。

└

実際、ほとんどの人は悪い魚を提出しようとしてないよ！驚いたけど、提出物は本当に95%が良いもので、5%が悪いものだね。平均的にはみんなルールを守ってるみたい :)

└

どうやらお尻に対しては訓練されてなかったみたいで、「Ass」って魚に書けちゃった :P

└

ハーケンクロイツで飾られた魚が浮かんでるのを見かけたよ。

└

魚にNワードが書いてあるのを見ちゃったんだけど、まあ…あっという間だったね。

https://imgur.com/a/Vtoxc7p この傑作に35%？おかしくない？

└

ロボットにとって、コイキングは魚じゃないんだ。

50%を超えられなかったんだけど、「魚」って書いたら5ポイント上がった。

└

青い魚に黒いヒトラーの口ひげをつけたら、10ポイント上がった。

vibe-codingの練習だね。コードがそれを示してる…エスケープのルーチンは大丈夫そうだけど、生の文字列補間を使ってHTMLやJSを組み立てるのは本当にやめた方がいいよ！それに、クライアントに提出物のモデレーションが必要かどうかを決めさせるのもね。

└

クライアントに提出物のモデレーションが必要かどうかを決めさせることはないよ :) バックエンドには、モデレーションキューに送るためのちょっと違うモデルがあるんだ。文字列もそこでサニタイズされるし。でも、コパイロットはそのロジックをフロントエンドにも追加したがってて、面白かったよ。

└

確かに、クライアント側のすべては生の文字列補間なんだよね。サーバーに載せた後にすべてをしっかりチェックしないと、安全とは言えないよ。

SafariとFirefoxの両方でこのエラーが出続けてるんだけど：Uncaught (in promise) Error: Fish model not loaded verifyFishDoodle https://drawafish.com/src/js/app.js:514 https://drawafish.com/src/js/app.js:170 EventListener.handleEvent* https://drawafish.com/src/js/app.js:168 追記：気にしないで、モデルが読み込まれるのを待たなきゃいけなかった。ちょっと時間かかったけど、楽しいプロジェクトだね！

└

これ、みんなが見てる問題だよね。モデルの読み込み方や、読み込まないときの送信ロジックに関係してると思う。解決策は分かってるけど、今は仕事が忙しくて、夜まで直せないんだよね…。

リーダーボードが面白いね。明らかに多くの時間をかけてる人もいる一方で、他の私たちは君のCNNを通り抜けるような形をこっそり描こうとしてるよ。1. https://drawafish.com/rank.html?userId=1753510318634_cdeh6a4...

丁寧にライオンフィッシュを描いたんだけど、実際には魚である確率は37%しかなかったよ。https://en.wikipedia.org/wiki/Lionfish

数年前にセントルイス水族館に行ったんだけど、似たようなセットアップがあったよ。すごく楽しくて、子供たちにもいい感じ。単に「フィッシュドロー」って呼ばれてるよ。https://www.stlaquariumfoundation.org/education/conservation...