entropiav2

VIDEODANZA GENERATIVA - NFTプラットフォーム

🎨 概要

ブロックチェーンを基盤とするビデオダンスのインタラクティブ体験プラットフォームです。NFTをミントするたびに、動画、音楽、ナラティブのユニークな組み合わせが生成されます。

Usuario selecciona preferencias
    ↓
Sistema generativo crea composición única (determinística)
    ↓
Usuario ve video en vivo desde IPFS
    ↓
Usuario mintea NFT en Base blockchain
    ↓
NFT con metadata inmutable en IPFS

---

🚀 クイックスタート

前提条件

• Node.js 18+
• npm または yarn
• Base ウォレット（MetaMask、Rainbow Kit など）
• Pinata Cloud APIキー

インストール

# Clonar repositorio
git clone https://github.com/videodanza/nft-platform.git
cd videodanza-nft

# Instalar dependencias
npm install

# Configurar variables de entorno
cp .env.example .env.local
# Editar .env.local con tus credenciales

# Iniciar desarrollo
npm run dev
# Visitar http://localhost:3000

---

📁 プロジェクト構成

videodanza-nft/
├── docs/
│   ├── ARQUITECTURA.md              # Diagrama técnico completo
│   ├── ALGORITMO_GENERATIVO.md      # Lógica de combinaciones
│   ├── CONTRATOS.md                 # ERC-721 specification
│   ├── API.md                       # Endpoints detallados
│   ├── WIREFRAMES.md                # UI mockups
│   └── FASE0_RESUMEN.md            # Completitud de Fase 0
│
├── smart-contracts/                 # FASE 1
│   ├── contracts/
│   │   └── VideoDanzaNFT.sol        # Contrato ERC-721
│   ├── scripts/
│   │   └── deploy.js                # Deployment script
│   ├── test/
│   │   └── VideoDanzaNFT.test.js    # Test suite
│   ├── hardhat.config.js
│   └── package.json
│
├── backend/                         # FASE 2 (Next.js API)
│   ├── api/
│   │   ├── generate.ts              # POST /api/generate
│   │   ├── composition/
│   │   │   └── [seed].ts            # GET /api/composition/:seed
│   │   ├── ipfs/
│   │   │   ├── upload.ts            # POST /api/ipfs/upload
│   │   │   └── metadata/
│   │   │       └── [cid].ts         # GET /api/ipfs/metadata/:cid
│   │   ├── mint/
│   │   │   └── prepare.ts           # POST /api/mint/prepare
│   │   ├── nfts/
│   │   │   ├── [walletAddress].ts   # GET /api/nfts/:walletAddress
│   │   │   └── [tokenId].ts         # GET /api/nft/:tokenId
│   │   └── health.ts                # GET /api/health
│   │
│   ├── services/
│   │   ├── generativeEngine.ts      # Lógica de generación
│   │   ├── pinataService.ts         # Integración Pinata
│   │   ├── blockchainService.ts     # Queries a blockchain
│   │   └── videoComposer.ts         # Composición de videos
│   │
│   ├── utils/
│   │   ├── seedGenerator.ts         # Hash + seed
│   │   ├── ipfsGateway.ts           # URLs de IPFS
│   │   ├── contractABI.ts           # ABI ERC-721
│   │   └── validators.ts            # Validaciones
│   │
│   └── config/
│       ├── constants.ts             # Constantes
│       └── networks.ts              # Config redes
│
├── frontend/                        # FASE 3 (React)
│   ├── pages/
│   │   ├── _app.tsx                 # Provider global
│   │   ├── index.tsx                # Landing
│   │   ├── app.tsx                  # Selector de preferencias
│   │   ├── watch.tsx                # Video player
│   │   ├── nft-gallery.tsx          # Galería de NFTs
│   │   └── about.tsx                # Información
│   │
│   ├── components/
│   │   ├── PreferenceSelector/
│   │   │   ├── GenderPicker.tsx
│   │   │   ├── PerspectivePicker.tsx
│   │   │   └── MusicTonePicker.tsx
│   │   │
│   │   ├── VideoPlayer/
│   │   │   ├── Player.tsx
│   │   │   ├── VideoLoader.tsx
│   │   │   └── MusicSync.tsx
│   │   │
│   │   ├── MintFlow/
│   │   │   ├── MintButton.tsx
│   │   │   ├── MintModal.tsx
│   │   │   └── SuccessScreen.tsx
│   │   │
│   │   ├── NFTGallery/
│   │   │   ├── GalleryGrid.tsx
│   │   │   ├── NFTCard.tsx
│   │   │   └── DetailModal.tsx
│   │   │
│   │   └── Common/
│   │       ├── Header.tsx
│   │       ├── Footer.tsx
│   │       └── LoadingSpinner.tsx
│   │
│   ├── hooks/
│   │   ├── useGenerativeEngine.ts
│   │   ├── useVideoPlayer.ts
│   │   ├── usePinataGateway.ts
│   │   ├── useWeb3Auth.ts
│   │   ├── useNFTMint.ts
│   │   └── useSeeding.ts
│   │
│   ├── styles/
│   │   ├── globals.css
│   │   └── theme.ts
│   │
│   └── public/
│       └── logo.svg
│
└── .env.example                     # Variables de entorno (template)

---

🔧 設定

環境変数（.env.local）

# BLOCKCHAIN
NEXT_PUBLIC_CONTRACT_ADDRESS=0x...
NEXT_PUBLIC_CHAIN_ID=8453
NEXT_PUBLIC_RPC_URL=https://mainnet.base.org

# PINATA (IPFS)
PINATA_API_KEY=...
PINATA_API_SECRET=...
PINATA_GATEWAY_URL=https://gateway.pinata.cloud

# BASE TESTNET (Desarrollo)
BASE_TESTNET_RPC=https://sepolia.base.org
BASE_TESTNET_CHAIN_ID=84532

# API
NEXT_PUBLIC_API_URL=http://localhost:3000/api
API_SECRET=...

# JWT
JWT_SECRET=...

---

📚 ドキュメント

各フェーズの完全なドキュメントを用意しています。

フェーズ 0 - アーキテクチャ ✅

• ARQUITECTURA.md - 技術図
• ALGORITMO_GENERATIVO.md - ロジック
• CONTRATOS.md - ERC-721
• API.md - エンドポイント
• WIREFRAMES.md - UI

フェーズ 1 - ブロックチェーンとIPFS（次回）

• スマートコントラクトのデプロイ
• IPFSアセットの設定
• 動画のピン留め

フェーズ 2 - バックエンド

• ジェネレーティブエンジン
• APIの実装
• データベースの設定

フェーズ 3 - フロントエンド

• Reactコンポーネント
• Web3の統合
• UI/UX

フェーズ 4 - インタラクティビティ

• ウェブカメラの統合
• ML5.jsによるポーズ検出
• インタラクティブエフェクト

フェーズ 5 - ミント

• ウォレット接続
• ミントのフロー
• NFTギャラリー

フェーズ 6 - デプロイ

• 最適化
• テスト
• Vercelへのデプロイ

---

🎬 利用フロー

1. LANDING PAGE
   └─> Usuario aprende sobre el proyecto
   └─> Botón "Explorar Ahora"

2. PREFERENCE SELECTOR
   └─> Elige género (he, she, hybrid, avatar)
   └─> Elige perspectiva (dancer POV, spectator, multiple)
   └─> Elige música (melancholic, joyful, abstract, ambient)
   └─> Clic [GENERATE]

3. VIDEO PLAYER
   └─> Sistema genera composición única (seed)
   └─> Videos se cargan desde IPFS
   └─> Música sincronizada
   └─> Metadata visible
   └─> Clic [MINT NFT]

4. MINT FLOW
   └─> Conectar wallet (Web3)
   └─> Confirmación de transacción (0.001 ETH)
   └─> Blockchain: acuña token ERC-721
   └─> Metadata guardada en IPFS

5. SUCCESS
   └─> NFT acuñado exitosamente
   └─> Links a Etherscan, OpenSea
   └─> Ver en galería personal

6. NFT GALLERY
   └─> Ver todos los NFTs acuñados
   └─> Ver metadata de cada uno
   └─> Compartir en redes

---

🏗️ 技術スタック

フロントエンド

• フレームワーク： Next.js 14（React 18）
• 言語： TypeScript
• スタイル： Tailwind CSS + Framer Motion
• Web3： Wagmi + Viem
• ウォレット： RainbowKit
• 動画： IPFSからストリーミング
• 音声： Web Audio API

バックエンド

• ランタイム： Node.js
• フレームワーク： Next.js API Routes
• ブロックチェーン： ethers.js + Base RPC
• IPFS： Pinata SDK
• データベース： SQLite（開発） / PostgreSQL（本番）

スマートコントラクト

• 言語： Solidity 0.8.20
• 規格： ERC-721 + ERC-2981
• ライブラリ： OpenZeppelin
• ネットワーク： Base（8453） + Base Sepolia（84532）

IPFS

• サービス： Pinata Cloud
• ストレージ： 動画 + 音楽 + メタデータ
• ゲートウェイ： PinataのCDN

---

🧪 テスト

# Smart contracts
cd smart-contracts
npm run test

# Frontend
npm run test

# API integration
npm run test:api

---

🚀 デプロイ

Baseテストネット（開発）

npm run deploy:testnet

Baseメインネット（本番）

npm run deploy:mainnet

Vercel（フロントエンド）

vercel deploy --prod

---

📊 統計

• ユニークな組み合わせ： 2,048万通り
• IPFS上の動画： 121クリップ
• 音楽トラック： 16（4つの音調 × 4トラック）
• ミント費用： 0.001 ETH（Baseで約3.50ドル）
• ロイヤリティ： 二次販売で7.5%
• 平均再生時間： 1作品あたり7～8分

---

🤝 貢献

このプロジェクトはジェネレーティブで、貢献を歓迎しています。

1. ダンス動画を追加する
2. 新しい音楽トラックを作成する
3. 新しい視覚効果を実装する
4. ジェネレーティブアルゴリズムを改善する
5. インタラクティビティを追加する

詳細はCONTRIBUTING.mdをご覧ください。

---

📜 ライセンス

MIT License - LICENSEをご覧ください。

---

📞 お問い合わせ

• ウェブサイト： videodanza.art
• Twitter： @videodanzanft
• Discord： コミュニティ
• メール： [email protected]

---

🎯 ロードマップ

• 2025年第1四半期： フェーズ0～2（アーキテクチャ + スマートコントラクト + バックエンド）
• 2025年第2四半期： フェーズ3～4（フロントエンド + インタラクティビティ）
• 2025年第3四半期： フェーズ5～6（ミント + デプロイ）
• 2025年第4四半期： メインネットでV1.0を公開、マーケティング、コミュニティ

---

📝 開発者向けメモ

開発原則

1. 決定性： 同じシードなら、常に同じ作品が生成されます
2. 再現性： ブロックチェーン上で検証可能です
3. スケーラビリティ： 分散化のためにIPFSを使用します
4. セキュリティ： スマートコントラクトは監査済みです
5. UX： IPFSから遅延なくストリーミングします
6. 収益化： ERC-2981による自動ロイヤリティ

重要なポイント

⚠️ IPFS 上の動画は CORS の問題なくアクセスできる必要があります
⚠️ 生成アルゴリズムは決定論的である必要があります（再現可能）
⚠️ 動画と音声の同期は知覚できないほど正確である必要があります
⚠️ ミントはアトミックである必要があります（すべて成功するか、すべて失敗するか）
⚠️ ブロックチェーン上での重複を防ぐため、seed を検証してください

---

🎓 学習リソース

• ERC-721 標準
• IPFS ドキュメント
• Base ブロックチェーン
• 例で学ぶ Solidity
• Web3.js ドキュメント

---

プロジェクト開始日： 2025年2月24日 ステータス： 🟢 フェーズ 0 完了 次のステップ： フェーズ 1 - スマートコントラクトと IPFS