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

<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>」起動して使ってみた！！<br>私の絵が壊滅的だからなのか、、、、思ってたのと少し違う感はある。。。 <a href="https://t.co/YiuEiPt7pf">https://t.co/YiuEiPt7pf</a> <a href="https://t.co/l6xsylRwbp">pic.twitter.com/l6xsylRwbp</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1856332829346672782?ref_src=twsrc%5Etfw">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ディレクトリに移動:
   ```bash
   cd Terraform
   ```

2. Terraformの初期化:
   ```bash
   terraform init
   ```

3. 計画の確認:
   ```bash
   terraform plan
   ```

4. インフラの適用:
   ```bash
   terraform apply
   ```

5. 適用後、以下のような出力が表示されます:
   ```bash
   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. シークレットキーの値を取得するには以下のコマンドを実行:
   ```bash
   terraform output -json S3_UPLOAD_SECRET
   "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
   ```

7. 取得した値を`.env`ファイルに追加:
   ```bash
   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

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>