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 =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バケットのARNiam_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によるインフラストラクチャのコード化や、包括的なモニタリング機能により、安定した運用が可能です。オープンソースであるため、コミュニティによる継続的な改善と発展が期待できます。
コメント