Llama 3.2 VisionとTogether.aiを活用した、オープンソースのワイヤーフレーム to アプリジェネレーター

🎯 概要

Napkins.devは、手書き風のワイヤーフレームをアップロードするだけで、アプリのコードを自動生成するオープンソースのツールです。MetaのLlama 3.2 VisionとLlama 3.1 405Bという強力なLLMとVisionモデル、そしてTogether AIによるLLM推論を組み合わせることで、直感的なインターフェースと高度なコード生成能力を実現しています。Next.jsとTailwind CSSを用いたフロントエンドは、洗練されたユーザーエクスペリエンスを提供します。

「https://t.co/hOpDCOdDkH」起動して使ってみた！！
私の絵が壊滅的だからなのか、、、、思ってたのと少し違う感はある。。。 https://t.co/YiuEiPt7pf pic.twitter.com/l6xsylRwbp
— Maki@Sunwood AI Labs. (@hAru_mAki_ch) November 12, 2024

💻 技術スタック

AI・バックエンドインフラ

LLM: Meta Llama 3.1 405B
Visionモデル: Meta Llama 3.2 Vision
LLM推論: Together AI
画像ストレージ: AWS S3
インフラストラクチャ: Terraform

フロントエンド技術

フレームワーク: Next.js App Router
CSSフレームワーク: Tailwind CSS
コードサンドボックス: Sandpack
監視ツール: Helicone
分析ツール: Plausible

🚀 ユースケース

プロトタイピングの高速化: アイデアを素早くコード化し、検証できます
開発初期段階の効率化: 手書きスケッチからアプリの基本構造を迅速に構築
新しい技術の学習: LLMとVisionモデルの連携を実践的に体験

📦 インストールとセットアップ

基本セットアップ

リポジトリのクローン: git clone https://github.com/Nutlope/napkins
.envファイルの作成: Together AI APIキーを設定
依存関係のインストール: npm install
ローカル実行: npm run dev

インフラストラクチャのセットアップ（Terraform使用）

前提条件

AWS CLIのインストールと設定
Terraformのインストール

S3のセットアップ手順

Terraformディレクトリに移動:
```
cd Terraform
```
Terraformの初期化:
```
terraform init
```
計画の確認:
```
terraform plan
```
インフラの適用:
```
terraform apply
```

適用後、以下のような出力が表示されます:

Apply complete! Resources: 0 added, 0 changed, 0 destroyed.

Outputs:

S3_UPLOAD_BUCKET = "napkins-bucket"
S3_UPLOAD_KEY = "XXXXX"
S3_UPLOAD_REGION = "us-east-1"
S3_UPLOAD_SECRET = <sensitive>
bucket_arn = "arn:aws:s3:::napkins-bucket"
iam_user_arn = "arn:aws:iam::1111111111:user/next-s3-upload-user"

シークレットキーの値を取得するには以下のコマンドを実行:

terraform output -json S3_UPLOAD_SECRET
"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

取得した値を.envファイルに追加:

S3_UPLOAD_KEY="XXXXX"
S3_UPLOAD_SECRET="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
S3_UPLOAD_BUCKET="napkins-bucket"
S3_UPLOAD_REGION="us-east-1"

以下の情報が利用可能になります:
- S3_UPLOAD_BUCKET: S3バケット名
- S3_UPLOAD_KEY: AWS アクセスキー
- S3_UPLOAD_REGION: AWSリージョン
- S3_UPLOAD_SECRET: AWSシークレットキー
- bucket_arn: S3バケットのARN
- iam_user_arn: IAMユーザーのARN

🔧 使用方法

アプリを開き、手書きのワイヤーフレーム画像をアップロード
Llama 3.2 Visionが画像を解析し、Llama 3.1 405Bに解析結果を送信
LLMが画像の内容を解釈し、対応するアプリコードを生成
生成されたコードはSandpackで表示され、実行・編集が可能

🔜 今後の開発予定

モバイル表示の改善とUIの最適化
サイドバーでのVisionモデル出力の表示
Few-shotプロンプトによる精度向上
shadcnトグルの追加によるカスタマイズ機能
プロンプトによる生成アプリの編集機能
異なるテーマの選択オプション
アプリ編集時のバージョン履歴表示

📈 パフォーマンスと特徴

Llama 3.2 VisionとLlama 3.1 405Bの組み合わせによる高精度なコード生成
Sandpackによるリアルタイムなコード実行と編集機能
Next.jsとTailwind CSSによる高速でレスポンシブなUI
HeliconeとPlausibleによる包括的な監視と分析機能
Terraformを使用したインフラストラクチャのコード化

🌟 まとめ

Napkins.devは、AIの力を活用した革新的なアプリ開発ツールです。手書きスケッチからアプリコードを生成する手軽さと、Sandpackによる開発環境の柔軟性を兼ね備え、プロトタイピングから開発初期段階まで幅広く活用できます。Terraformによるインフラストラクチャのコード化や、包括的なモニタリング機能により、安定した運用が可能です。オープンソースであるため、コミュニティによる継続的な改善と発展が期待できます。

リポジトリ