Zenn
🔥

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

2024/11/12に公開
Next.js
llama31
llama32vision
togetherai
tech

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を用いたフロントエンドは、洗練されたユーザーエクスペリエンスを提供します。

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">「<a href="https://t.co/hOpDCOdDkH">https://t.co/hOpDCOdDkH</a>」起動して使ってみた！！
私の絵が壊滅的だからなのか、、、、思ってたのと少し違う感はある。。。 <a href="https://t.co/YiuEiPt7pf">https://t.co/YiuEiPt7pf</a> <a href="https://t.co/l6xsylRwbp">pic.twitter.com/l6xsylRwbp</a></p>— Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1856332829346672782?ref_src=twsrc^tfw">November 12, 2024</a></blockquote>

💻 技術スタック

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

リポジトリ

https://github.com/Sunwood-ai-labs/napkins

https://github.com/Nutlope/napkins

Discussion