振り返り等

コンテキスト等

プロダクト紹介ページ

GitHub

AWSは無償で提供されました

Architecture

全体

自分の主なタスクは「複数リクエストを並列でAIを使って画像生成をさせる」

だったが、それが手間を要しすぎたので「1リクエストで画像1レスポンス」のみになってしまった。

以下のドキュメントを参照して開発した

すべてを自分の力 + Googleと資料のアシスタントAIで実装したのでかなり時間がかかった。

まじめにこれだけで4時間くらいかかってる。AIのありがたみを実感していたハッカソンであった。

手羽先さんが強すぎて安心感があったため時間にもタスクにも余裕があった。そのために、AIを使わずに開発できた感じもある。

ちなみにAWSのGUI上でやっていたのでGitHubのcontributeは0という悲劇が起きている

完成コード

import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { randomUUID } from "crypto";

const bedrockClient = new BedrockRuntimeClient({ region: "us-west-2" });
const s3Client = new S3Client({ region: "us-west-2" });

const BUCKET_NAME = "geni-stability";
const MODEL_ID = "stability.sd3-5-large-v1:0";

export const handler = async (event) => {

  const body = JSON.parse(event.body);
  const prompt = body.prompt;
  const roomId = body.roomId;

  const invokecommand = new InvokeModelCommand({
    modelId: MODEL_ID,
    body: JSON.stringify({
      prompt: prompt,
      aspect_ratio: "16:9",
    })
  })

  const bedrockResponse = await bedrockClient.send(invokecommand);
  const responseBody = JSON.parse(new TextDecoder().decode(bedrockResponse.body));

  console.log("できたぜ！")

  const base64ImageData = responseBody.images[0];
  const imageBuffer = Buffer.from(base64ImageData, "base64");

  const uniqueFileName = `${randomUUID()}.png`;
  const s3Key = `${roomId}/${uniqueFileName}`;

  console.log("=== UPLOADING TO S3 ===");
  console.log("Bucket:", BUCKET_NAME);
  console.log("Key:", s3Key);

  const putObjectCOmmand = new PutObjectCommand({
    Bucket: BUCKET_NAME,
    Key: s3Key,
    Body: imageBuffer,
    ContentType: "image/png",
    Metadata: {
      "generated-by": "stability",
      "prompt": prompt,
      "room-id": roomId,
    
  });

  await s3Client.send(putObjectCOmmand);

  console.log("s3あげ終わったよ")

  const imageUrl = `https://${BUCKET_NAME}.s3.amazonaws.com/${s3Key}`;
  return {
    statusCode: 200,
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
    },
    body: JSON.stringify({ imageUrl }),
  };
};

1. S3との連携

S3とBedrockのruntime系のリージョンは統一しないとまずいかもしれない ← 原因を探りたい

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const s3Client = new S3Client({ region: "us-west-2" });

const BUCKET_NAME = "geni-stability";

const uniqueFileName = `${randomUUID()}.png`;
const s3Key = `${roomId}/${uniqueFileName}`;

const putObjectCOmmand = new PutObjectCommand({
    Bucket: BUCKET_NAME,
    Key: s3Key,
    Body: imageBuffer,
    ContentType: "image/png",
    Metadata: {
      "generated-by": "stability",
      "prompt": prompt,
      "room-id": roomId,
    }
  });

  await s3Client.send(putObjectCOmmand);

このような感じでS3を構成する。

S3はBucketとKeyの概念があり、Bucketはグローバルに一意なバケット名である。また、Keyはその中のディレクトリ構成のようなものである。

2. Stability.ai Stable Diffiusion

今回 Amazon Bedrock上で “stability.sd3-5-large” というモデルを使って画像生成をしてもらっている。

やっぱり手書きだら結構難しい。リファレンスに乗ってない指定方法などもある。

今回アスペクト比を16:9にしたくてワンちゃんこのプロパティあるかな、と思って

width: 1920px,
height: 1080px,

適当に書いてみたらそりゃそうなんだけど通らず、、、。

Notion AI君に聞いたら

aspect_ratio: "16:9",

こう指定すればいいんだよとかえってきた。

たしかに書いてあった！ｗ

ということでドキュメントはしっかり読もうと思った

3. Architectureについてのいざこざ

二つのアーキテクチャでめちゃくちゃ悩んだ。

左が手羽先さんで右がzatunohitoである

S3の状況を追跡するDynamoDBをいれてステータス管理したほうがいいよ！と、S3のディレクトリ構造をポーリングのようにして監視すればいいじゃん！にzatunohitoと手羽先の意見が分かれた。

こう分析できれば議論が円滑に進んでいったんだと思うが、それが議論を急いでしまったためにできなかった。

だから、次はどういう主張なのかなどの前提部分をしっかり図表に直したり紙に書いたりしていきたい。

4. やりたかったこと

(Lambdaの)HTTP streaming
AIをコーディングに絶対使わずにもっとコントリビュートしたかった

5. いろいろ

今回、このプロダクトで最優秀賞をとることができた。しかしながら、Github上での自分のコントリビュートは0というすさまじくひどい功績を残した。

自分が、チームメンバーの強さに頼ってAI使わない縛りというゴミみたいなことをしてしまっているのが原因だが、同時に自分のエンジニアとしての能力(実装力などを指す)が極めて低いことが分かったハッカソンであった。

いい成長の機会にしたい。

今回のチームメンバーの方は以下です。迷惑かけてもなお一緒に開発してくれてありがとうございました！

Mizuki さん
手羽先さん https://x.com/Tebasaki_lab
わりすのさん https://x.com/warisuno
ホルスさん