Napkins.dev: 手書き風ワイヤーフレームからアプリを生成する革新的なツール

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モデルの連携を実践的に体験

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

基本セットアップ

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

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

前提条件

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

S3のセットアップ手順

1. Terraformディレクトリに移動:

   cd Terraform
   

2. Terraformの初期化:

   terraform init
   

3. 計画の確認:

   terraform plan
   

4. インフラの適用:

   terraform apply
   

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

   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"
   

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

   terraform output -json S3_UPLOAD_SECRET
   "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
   

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

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

8. 以下の情報が利用可能になります:

   • 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

🔧 使用方法

1. アプリを開き、手書きのワイヤーフレーム画像をアップロード
2. Llama 3.2 Visionが画像を解析し、Llama 3.1 405Bに解析結果を送信
3. LLMが画像の内容を解釈し、対応するアプリコードを生成
4. 生成されたコードは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によるインフラストラクチャのコード化や、包括的なモニタリング機能により、安定した運用が可能です。オープンソースであるため、コミュニティによる継続的な改善と発展が期待できます。

リポジトリ