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

💻 技術スタック

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

リポジトリ

GitHub - Sunwood-ai-labs/napkins: napkins.dev – from screenshot to app
napkins.dev – from screenshot to app. Contribute to Sunwood-ai-labs/napkins development by creating an account on GitHub.
GitHub - Nutlope/napkins: napkins.dev – from screenshot to app
napkins.dev – from screenshot to app. Contribute to Nutlope/napkins development by creating an account on GitHub.

コメント

タイトルとURLをコピーしました