🌈🦄 Bacalhau を使用して独自の AI 生成アート NFT DApp を構築する

FVM ハイパースペース テストネットで AI 生成アート NFT を作成するための独自の Text-to-Image スクリプトを使用して DApp を構築、実行、デプロイするための完全なガイドです。

目次

• 👩‍💻どうしよう…
• 🏛 アーキテクチャ図 (ちょっと)
• 🥞 DApp テクノロジースタック
• 🏗️ Python のテキストから画像へのスクリプトの作成
• ⚒️ Solidity NFT スクリプトのビルドとデプロイ
• 🎬 フロントエンド インタラクションの構築
  • 完全なフロー
  • バカリャウの相互作用
  • NFT.ストレージ
  • 契約の相互作用
• 🌟 最終的な考え: AI とブロックチェーンの可能性
• 🐠 バカリャウ ロードマップ
• ✍️ お気軽にお問い合わせください！

🦄クイックリンク:

• ビデオ版
• GitHub コード
• バカリャウ・ドックス
• SlideShare

👩‍💻どうしよう…

このブログでは、その方法について説明します

1. Tensorflow に基づいて、オープンソースの Python ベースのテキストから画像へのスクリプトを作成します (興味がない場合は、Bacalhau HTTP エンドポイントを使用することもできます)。

2. Bacalhau (オープンな p2p オフチェーン コンピューティング プラットフォーム) でこのスクリプトを実行します。

3. Solidity で NFT コントラクトを作成する (Open Zeppelin ERC721 コントラクトに基づく)

4. NFT コントラクトを Filecoin Virtual Machine (FVM) Hyperspace Testnet に Hardhat でデプロイする

5. フロントエンド インタラクション - React で Bacalhau のテキストから画像へのスクリプトと NFT コントラクトを操作する方法

6. NFT メタデータを NFT.Storage に保存する方法

7. フロントエンド DApp を Fleek にデプロイする方法

   
   

私は意図的に、このスタックで利用できるオープンソースと分散化された技術をできるだけ多く使用することを選択しました。

このブログはかなり長くなる予定です (すべての情報を提供し、初心者にやさしく包括的であることを確認したいと思います!) そのため、表の中で役立つ部分に進んでください。内容の <3

🏛 アーキテクチャ図 (ちょっと)

🥞 DApp テクノロジースタック

(わかります - パンケーキ スタック #sorrynotsorry です)

オープンソースと Web3 をゼロから評価:)

• スマートコントラクト[堅牢、オープンツェッペリン]
  • Solidityは、イーサリアム (EVM) 互換のブロックチェーン用の OO スマート コントラクト プログラミング言語です。
  • Open Zeppelinは、一般的なスマート コントラクト コンポーネントとコントラクトのセキュリティ監査済み実装ライブラリを提供します
• スマート コントラクト IDE [ハードハット]
  • Hardhatは、イーサリアム ソフトウェアを編集、コンパイル、デバッグ、デプロイするための開発環境です。
• ブロックチェーン テストネット [ Filecoin Virtual Machine Hyperspace]
  • FVM Hyperspaceは、Filecoin ブロックチェーン上に構築された EVM 互換のテストネットです。
• NFT メタデータ ストレージ[NFT.Storage]
  • NFT.Storageは、IPFS と Filecoin の上に構築された公共財であり、NFT メタデータを不変かつ永続的に保存し、NFT と JavaScript SDK 用の無料の分散型ストレージを提供します。
• フロントエンド[NextJS / React + NPM]
  • 私たちはおそらくこれらを知っています...そうですか？ :P
• クライアントからのスマート コントラクト インタラクション[Metamask、Ethers、Chainstack RPC ノード]
  • パブリック RPC ノードを使用する - ブロックチェーン コントラクトとの読み取り専用の対話を取得できます。
  • Metamaskプロバイダー (またはEIP-1193 で指定された Ethereum APIをブラウザーに挿入する同様のウォレット) を使用して、ブロックチェーン コントラクトへの書き込み呼び出しを有効にします。
  • Ethers js は、EVM 互換のスマート コントラクトを操作するためのライブラリです。
• AIテキストから画像への安定拡散スクリプト[Python、Tensorflow]
  • TensorFlowは、事前トレーニング済みのモデルやその他のデータおよび ML ツールを提供するオープンソースの機械学習プラットフォームおよびライブラリです。
• AI テキストから画像への生成のための分散型オフチェーン コンピューティング[Bacalhau]
  • Bacalhauは、パブリックで透過的で、オプションで検証可能な計算プロセスのプラットフォームを提供するピアツーピアのオープンな計算ネットワークです。これは、分散型のオフチェーン データ計算レイヤーです。
• 分散型DApp の展開[Fleek]
  • Fleekは、IPFS および Filecoin での Web サイトの展開を提供します。これは Vercel または Netlify の web3 バージョンです。実際に分散型アプリがあり、それを web2 に展開するとは言えません。 :D

🏗️ Python のテキストから画像へのスクリプトの作成

💡TLDRのヒント💡

このスクリプトは、CLI および HTTP エンドポイントを介して Bacalhau で使用できるようになっているため、この部分は省略してかまいません。

安定拡散の簡単な紹介

Stable Diffusion は現在、テキストから画像への処理を行う主要な機械学習モデルです (& は Dall-E が使用するモデルと同じです)。これはディープ ラーニングの一種で、特定のタスクを実行することを学習する機械学習のサブセットです。この場合、テキスト入力を画像出力に変換します。

この例では、トランスフォーマーを使用してテキストから画像を生成する拡散確率モデルを使用しています。

ただし、心配しないでください。このために機械学習モデルをトレーニングする必要はありません (ただし、それがあなたの好みであれば、まったく可能です!)。

代わりに、ML の重みが事前に計算されているため、Google の TensorFlow オープンソース Machine Learning ライブラリの事前トレーニング済みモデルを Python スクリプトで使用します。

より正確には、元の ML モデルの最適化されたKeras/TensorFlow 実装フォークを使用しています。

Python スクリプト

🦄 このテキストから画像へのスクリプトをビルドして Docker 化し、Bacalhau で実行する方法の完全なウォークスルーは、 Bacalhau ドキュメントとこの@BacalhauProject YouTube ビデオの両方で見つけることができます🦄 また、このGoogle Collabs Notebookでも実行できます。

これが完全な python スクリプトです。

 import argparse from stable_diffusion_tf.stable_diffusion import Text2Image from PIL import Image import os parser = argparse.ArgumentParser(description="Stable Diffusion") parser.add_argument("--h",dest="height", type=int,help="height of the image",default=512) parser.add_argument("--w",dest="width", type=int,help="width of the image",default=512) parser.add_argument("--p",dest="prompt", type=str,help="Description of the image you want to generate",default="cat") parser.add_argument("--n",dest="numSteps", type=int,help="Number of Steps",default=50) parser.add_argument("--u",dest="unconditionalGuidanceScale", type=float,help="Number of Steps",default=7.5) parser.add_argument("--t",dest="temperature", type=int,help="Number of Steps",default=1) parser.add_argument("--b",dest="batchSize", type=int,help="Number of Images",default=1) parser.add_argument("--o",dest="output", type=str,help="Output Folder where to store the Image",default="./") args=parser.parse_args() height=args.height width=args.width prompt=args.prompt numSteps=args.numSteps unconditionalGuidanceScale=args.unconditionalGuidanceScale temperature=args.temperature batchSize=args.batchSize output=args.output generator = Text2Image( img_height=height, img_width=width, jit_compile=False, # You can try True as well (different performance profile) ) img = generator.generate( prompt, num_steps=numSteps, unconditional_guidance_scale=unconditionalGuidanceScale, temperature=temperature, batch_size=batchSize, ) for i in range(0,batchSize): pil_img = Image.fromarray(img[i]) image = pil_img.save(f"{output}/image{i}.png")

上記のスクリプトは、単純にテキスト プロンプトの入力引数とその他のオプション パラメータを受け取り、フォークされた TensorFlow ライブラリを呼び出して画像を生成し、それらを出力ファイルに保存します。

ここで行われる面倒な作業はすべて、以下のセクションで行われます。ここで、機械学習モデルが魔法のように機能します。 🪄

 generator = Text2Image( img_height=height, img_width=width, jit_compile=False, ) img = generator.generate( prompt, num_steps=numSteps, unconditional_guidance_scale=unconditionalGuidanceScale, temperature=temperature, batch_size=batchSize, )

テキスト プロンプトから画像を生成できますが、この GPU が必要なスクリプトをどこで実行するか..... 🤔🤔

ブロックチェーン技術が本質的にうまくいかないことが 1 つあるとすれば、それは大規模なデータ処理です。これは、トラストレス性や検閲耐性などの他の強力な特性を提供するために、分散システムを介して計算するコストが原因です。

ローカル マシンを小さな例に使用することは可能です。実際、この特定の例を私の (非常に不満な) Mac M1 で動作させることができましたが、結果を待つのに非常に長い時間がかかりました (卓球のゲームはありますか?)そのため、より大きなデータ処理を開始すると、より多くのガスが必要になります (しゃれが意図されています)。家の周りに専用サーバーがない場合は、仮想マシンを使用する必要があります。クラウド コンピューティング プラットフォーム。

これは集中化されているだけでなく、非効率的でもあります。データが計算マシンから未知の距離にあるため、コストがかかり、高速になる可能性があります。このための GPU 処理を提供する無料層のクラウド コンピューティング サービスを見つけることができず (誰かが仮想通貨のマイニングを禁止すると言いましたか?.

バカルハウ！

幸いなことに、これらの問題は Bacalhau が解決しようとしている問題の一部です。 Bacalhau では、データ処理と計算をオープンにして誰でも利用できるようにし、処理時間を高速化することができます。まず、複数のノード間でバッチ処理を使用し、次にデータが存在する場所に処理ノードを配置することによって!

Bacalhau は、IPFS、Filecoin、Web3 に固有の分散化の価値をより広く放棄することなく、データのオフチェーン計算を可能にすることで、データ処理の未来を民主化することを目指しています。

Bacalhauは、パブリックで透明性があり、オプションで検証可能な計算プロセスのプラットフォームを提供するピアツーピアのオープンな計算ネットワークです。ユーザーは、Docker コンテナーまたは Web Assembly イメージを、IPFS (およびまもなく Filecoin) に格納されたデータを含む任意のデータに対してタスクとして実行できます。 GPU ジョブもサポートしており、400 米ドル以上ではありません!

イントロ |バカリャウ・ドックス

バカリャウでスクリプトを実行する

このスクリプトを実行するには、Bacalhau で使用できるように Docker 化します。その方法を学びたい場合は、こちらのチュートリアルに従ってください。その後、Bacalhau CLI で 1 行のコードだけで実行できます ( Bacalhau を別のワンライナーでインストールした後)。

 bacalhau docker run --gpu 1 ghcr.io/bacalhau-project/examples/stable-diffusion-gpu:0.0.1 -- python main.py --o ./outputs --p "Rainbow Unicorn" 

ただし、この例では、この Docker 化された安定した拡散スクリプトに接続する HTTP エンドポイントを使用します。これについては、統合セクションで説明します。

ただし、これはデータ計算プロセスを実行するための強力で柔軟な方法であり、web3 にも適していることに注意してください。この 1 つの小さなモデルに限定されるわけではありません。

それでは、NFT スクリプトに移りましょう。 :)

⚒️ Solidity NFT スクリプトのビルドとデプロイ

スマートコントラクト

NFT スマート コントラクトは、 Open Zeppelin の ERC721 の実装に基づいていますが、メタデータ標準拡張機能を含む ERC721URIStorage バージョンを使用します (そのため、IPFS アドレスのメタデータを渡すことができます。これを NFT.Storage に保存します)。 .

このベース コントラクトは、mint() や transfer() などの関数が既に実装されている NFT コントラクトの一般的な機能も提供します。

フロントエンドのデータをフェッチするためのゲッター関数と、新しい NFT が作成されるたびにオンチェーンで発行されるイベントも追加したことに気付くでしょう。これにより、DApp からオンチェーン イベントをリッスンできるようになります。

💡 リミックスで試してみて、このリンクをクリックして利用可能なすべての機能を確認してください! 💡

BacalhauFRC721.sol

 // SPDX-License-Identifier: MIT pragma solidity ^0.8.4; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol"; import "@openzeppelin/contracts/utils/Counters.sol"; import "@hardhat/console.sol"; contract BacalhauFRC721 is ERC721URIStorage { /** @notice Counter keeps track of the token ID number for each unique NFT minted in the NFT collection */ using Counters for Counters.Counter; Counters.Counter private _tokenIds; /** @notice This struct stores information about each NFT minted */ struct bacalhauFRC721NFT { address owner; string tokenURI; uint256 tokenId; } /** @notice Keeping an array for each of the NFT's minted on this contract allows me to get information on them all with a read-only front end call */ bacalhauFRC721NFT[] public nftCollection; /** @notice The mapping allows me to find NFT's owned by a particular wallet address. I'm only handling the case where an NFT is minted to an owner in this contract - but you'd need to handle others in a mainnet contract like sending to other wallets */ mapping(address => bacalhauFRC721NFT[]) public nftCollectionByOwner; /** @notice This event will be triggered (emitted) each time a new NFT is minted - which I will watch for on my front end in order to load new information that comes in about the collection as it happens */ event NewBacalhauFRC721NFTMinted( address indexed sender, uint256 indexed tokenId, string tokenURI ); /** @notice Creates the NFT Collection Contract with a Name and Symbol */ constructor() ERC721("Bacalhau NFTs", "BAC") { console.log("Hello Fil-ders! Now creating Bacalhau FRC721 NFT contract!"); } /** @notice The main function which will mint each NFT. The ipfsURI is a link to the ipfs content identifier hash of the NFT metadata stored on NFT.Storage. This data minimally includes name, description and the image in a JSON. */ function mintBacalhauNFT(address owner, string memory ipfsURI) public returns (uint256) { // get the tokenID for this new NFT uint256 newItemId = _tokenIds.current(); // Format info for saving to our array bacalhauFRC721NFT memory newNFT = bacalhauFRC721NFT({ owner: msg.sender, tokenURI: ipfsURI, tokenId: newItemId }); //mint the NFT to the chain _mint(owner, newItemId); //Set the NFT Metadata for this NFT _setTokenURI(newItemId, ipfsURI); _tokenIds.increment(); //Add it to our collection array & owner mapping nftCollection.push(newNFT); nftCollectionByOwner[owner].push(newNFT); // Emit an event on-chain to say we've minted an NFT emit NewBacalhauFRC721NFTMinted( msg.sender, newItemId, ipfsURI ); return newItemId; } /** * @notice helper function to display NFTs for frontends */ function getNFTCollection() public view returns (bacalhauFRC721NFT[] memory) { return nftCollection; } /** * @notice helper function to fetch NFT's by owner */ function getNFTCollectionByOwner(address owner) public view returns (bacalhauFRC721NFT[] memory){ return nftCollectionByOwner[owner]; }

要件

このコントラクトをFilecoin Virtual Machine Hyperspace Testnetに展開しますが、このコントラクトは、Polygon、BSC、Optimism、Arbitrum、Avalanche などを含む EVM 互換チェーンに展開できます。フロントエンドを微調整して、マルチチェーン NFT を作成することもできます (ヒント:このリポジトリ)!

Hyperspace Testnet にデプロイするには、以下が必要です

1. Metamask Wallet をセットアップして Hyperspace Testnet に接続する
2. 蛇口からいくつかのテスト tFIL 資金を取得します ( YogaまたはZondax )

Hardhat を使用したスマート コントラクトのデプロイ

このコントラクトを Hyperspace テストネットにデプロイするために hardhat を使用しています。

🛸 Hyperspace RPC & BlockExplorer オプション:

パブリック RPC エンドポイント

ブロックエクスプローラーの

https://filecoin-hyperspace.chainstacklabs.com/rpc/v0

https://beryx.zondax.ch/

https://hyperspace.filfox.info/rpc/v0

https://fvm.starboard.ventures/contracts/

https://rpc.ankr.com/filecoin_testnet

https://explorer.glif.io/?network=hyperspacenet

オープン API : beryx.zondax.ch

https://hyperspace.filfox.info/ja

構成のセットアップでは、利用可能なパブリック RPC エンドポイントのいずれかから選択できます。

hardhat.config.ts

 import '@nomicfoundation/hardhat-toolbox'; import { config as dotenvConfig } from 'dotenv'; import { HardhatUserConfig } from 'hardhat/config'; import { resolve } from 'path'; //Import our customised tasks // import './pages/api/hardhat/tasks'; const dotenvConfigPath: string = process.env.DOTENV_CONFIG_PATH || './.env'; dotenvConfig({ path: resolve(__dirname, dotenvConfigPath) }); // Ensure that we have all the environment variables we need. const walletPrivateKey: string | undefined = process.env.WALLET_PRIVATE_KEY; if (!walletPrivateKey) { throw new Error('Please set your Wallet private key in a .env file'); } const config: HardhatUserConfig = { solidity: '0.8.17', defaultNetwork: 'filecoinHyperspace', networks: { hardhat: {}, filecoinHyperspace: { url: 'https://api.hyperspace.node.glif.io/rpc/v1', chainId: 3141, accounts: [process.env.WALLET_PRIVATE_KEY ?? 'undefined'], }, // bleeding edge often-reset FVM testnet filecoinWallaby: { url: 'https://wallaby.node.glif.io/rpc/v0', chainId: 31415, accounts: [process.env.WALLET_PRIVATE_KEY ?? 'undefined'], //explorer: https://wallaby.filscan.io/ and starboard }, }, // I am using the path mapping so I can keep my hardhat deployment within the /pages folder of my DApp and therefore access the contract ABI for use on my frontend paths: { root: './pages/api/hardhat', tests: './pages/api/hardhat/tests', //who names a directory in the singular?!!! Grammarly would not be happy cache: './pages/api/hardhat/cache', }, }; export default config;

そして、スマート コントラクトをデプロイするために、デプロイ スクリプトを作成します。ここでは署名者 (所有者) としてウォレット アドレスを具体的に設定していることに注意してください。いくつかの奇妙な動作。

deploy/deployBacalhauFRC721.ts

 import hre from 'hardhat'; import type { BacalhauFRC721 } from '../typechain-types/contracts/BacalhauFRC721'; import type { BacalhauFRC721__factory } from '../typechain-types/factories/contracts/BacalhauFRC721__factory'; async function main() { console.log('Bacalhau721 deploying....'); // !!!needed as hardhat's default does not map correctly to the FEVM const owner = new hre.ethers.Wallet( process.env.WALLET_PRIVATE_KEY || 'undefined', hre.ethers.provider ); const bacalhauFRC721Factory: BacalhauFRC721__factory = < BacalhauFRC721__factory > await hre.ethers.getContractFactory('BacalhauFRC721', owner); const bacalhauFRC721: BacalhauFRC721 = <BacalhauFRC721>( await bacalhauFRC721Factory.deploy() ); await bacalhauFRC721.deployed(); console.log('bacalhauFRC721 deployed to ', bacalhauFRC721.address); // optionally log to a file here } main().catch((error) => { console.error(error); process.exitCode = 1; });

展開するには、次のコードを使用してターミナルで上記のスクリプトを実行します (注意: 構成でデフォルトのネットワークを filecoinHyperspace に設定したため、ネットワークのフラグを渡す必要はありませんが、これは以下に示されています)。

> cd ./pages/hardhat/deploy/

 npx hardhat run ./deployBacalhauFRC721.ts --network filecoinHyperspace

祝う！ Filecoin ハイパースペース テストネットに NFT コントラクトをデプロイしました。

🎬 フロントエンド インタラクションの構築

かわいい部分にうっとり...そして、ここですべてをまとめる接着剤も:)

フロントエンドを構築するために、NextJS と Typescript を使用しています。正直なところ、私は NextJS の SSR (サーバー側レンダリング) 機能を利用しておらず、ページ ルーティングも使用していません (単一ページの Dapp であるため)。バニラの React セットアップ (またはもちろん、任意のフレームワーク!) を使用します。

タイプスクリプトに関しては...まあ、私はこれを少し急いで構築したので、これがタイプスクリプトのあまり良い例ではないことを認めなければなりません-変数は満足しているようですが... ;)

Anyhoo - このセクションの主なポイントは、フロント エンドのコーディング方法を示すことではなく、スマート コントラクト、Bacalhau (安定した拡散 ML モデルを使用)、そしてもちろん NFT.Storage とやり取りする方法を示すことです。 NotOnIPFSNotYourNFT。

完全なフロー

[todo: フローチャート図を作成する]

• ユーザーが入力フィールドにテキスト プロンプトを入力する ->
• [画像を生成] ボタンをクリック -> Bacalhau ジョブを呼び出して画像を生成
• Bacalhau ジョブが完了 -> フォーマットが NFT メタデータ JSON オブジェクトに返される
• ユーザーが Mint NFT ボタンをクリック -> NFT.Storage が呼び出されて NFT メタデータが保存され、フォルダーの IPFS CID が返されます -> この IPFS_URI を使用してスマート コントラクトの mint NFT 関数が呼び出され、このメタデータを使用して NFT が作成されます ->
• !! [FEVM の落とし穴] -> ここでは通常、この結果の TX (トランザクション ハッシュ) が返されるのを待ちますが、現在は機能していないため、代わりにコントラクト イベント リスナーを使用して、これがいつ完了するかを確認しています。
• 終わり！ -> 表示データを再取得し、ユーザー ステータスの成功のフィードバックをミントに与えることができるようになりました。

これをコードに実装する方法を見てみましょう。

バカリャウの相互作用

Bacalhau のフロントエンド API エンドポイントの作成については、エンジニアのLuke Marsdenによるこのプロジェクト レポートに記載されています。

API は現在、このブログに記載されている安定した拡散スクリプトに直接ヒットするだけですが、チームはそれをより一般的な API に拡張して、任意の例を呼び出すことができるようにしています。残りの API。ここまたはFilecoinProject slack の #bacalhau チャンネルでこれに注目してください。

>run/test in terminal

 curl -XPOST -d '{"prompt": "rainbow unicorn"}' 'http://dashboard.bacalhau.org:1000/api/v1/stablediffusion';

>react / typescript code

 import { CID } from 'multiformats/cid'; export const callBacalhauJob = async (promptInput: string) => { //Bacalahau HTTP Stable Diffusion Endpoint const url = 'http://dashboard.bacalhau.org:1000/api/v1/stablediffusion'; const headers = { 'Content-Type': 'application/x-www-form-urlencoded', }; const data = { prompt: promptInput, //The user text prompt! }; /* FETCH FROM BACALHAU ENDPOINT */ const cid = await fetch(url, { method: 'POST', body: JSON.stringify(data), headers: headers, }) .then(async (res) => { let body = await res.json(); if (body.cid) { /* Bacalhau returns a V0 CID which we want to convert to a V1 CID for easier usage with http gateways (ie. displaying the image on web), so I'm using the IPFS multiformats package to convert it here */ return CID.parse(body.cid).toV1().toString(); } }) .catch((err) => { console.log('error in bac job', err); }); return cid; };

この関数は、以下のようなフォルダー構造を持つ IPFS CID (コンテンツ識別子) を返します。画像は/outputs/image0.pngの下にあります。

💡 ここをクリックして自分の目で確かめてください ! 💡

ああ、虹色のユニコーン…好きではないものは何ですか!

NFT.ストレージ

NFT.Storage は、javascript または HTTP SDK を使用して IPFS および Filecoin に NFT メタデータを永続的に保存することを容易にする公共財 (別名無料) です。

NFT メタデータは、以下の例のような JSON ドキュメントです。これは、Open Zeppelin ドキュメントから直接取得したものです。

NFT を作成するときは、メタデータをオンチェーンに保存しない限り (大きなファイルでは非常に高価になる可能性があります)、トークンの「非代替性」に準拠するために、次のようなストレージが必要であることに注意することが重要です。永続的で、信頼性が高く、不変です。

あなたの NFT が上記の例のようにロケーションベースのアドレスを持っている場合、販売後にこのロケーション パスを切り替えるのはかなり簡単です。以下は、NFTの作成者がアート画像をラグの写真に切り替えた場所です.

Open Zeppelin でさえ警告していることがあります。

NFT.Storage を使用すると、IPFS にピン留めされるだけでなく、永続化のために Filecoin にも保存されるメタデータの不変の IPFS ファイル CID (コンテンツ- 場所ではなく - IDエンティティ) を取得することを意味します。サインアップするだけで済みます。 NFT.Storage を開き、このAPI キーを (.env ファイルに保存するため) 取得します。

.env example

 NEXT_PUBLIC_NFT_STORAGE_API_KEY=xxx

また、適切な形式のメタデータ JSON を作成したことを確認する必要もあります。FVM には (まだ!) NFT マーケットプレイスがありませんが、採用されたときに NFT が標準に準拠していることを確認したいからです。 .

 import { NFTStorage } from 'nft.storage'; //connect to NFT.Storage Client const NFTStorageClient = new NFTStorage({ token: process.env.NEXT_PUBLIC_NFT_STORAGE_API_KEY, }); const createNFTMetadata = async ( promptInput: string, imageIPFSOrigin: string, //the ipfs path eg. ipfs://[CID] imageHTTPURL: string //an ipfs address fetchable through http for the front end to use (ie. including an ipfs http gateway on it like https://[CID].ipfs.nftstorage.link) ) => { console.log('Creating NFT Metadata...'); let nftJSON; // let's get the image data Blob from the IPFS CID that was returned from Bacalhau earlier... await getImageBlob(status, setStatus, imageHTTPURL).then( async (imageData) => { // Now let's create a unique CID for that image data - since we don't really want the rest of the data returned from the Bacalhau job.. await NFTStorageClient.storeBlob(imageData) .then((imageIPFS) => { console.log(imageIPFS); //Here's the JSON construction - only name, description and image are required fields- but I also want to save some other properties like the ipfs link and perhaps you have other properties that give your NFT's rarity to add as well nftJSON = { name: 'Bacalhau Hyperspace NFTs 2023', description: promptInput, image: imageIPFSOrigin, properties: { prompt: promptInput, type: 'stable-diffusion-image', origins: { ipfs: `ipfs://${imageIPFS}`, bacalhauipfs: imageIPFSOrigin, }, innovation: 100, content: { 'text/markdown': promptInput, }, }, }; }) .catch((err) => console.log('error creating blob cid', err)); } ); return nftJSON; };

それでは、このメタデータを NFT.Storage に保存しましょう!

 await NFTStorageClient.store(nftJson) .then((metadata) => { // DONE! - do something with this returned metadata! console.log('NFT Data pinned to IPFS & stored on Filecoin!'); console.log('Metadata URI: ', metadata.url); // once saved we can use it to mint the NFT // mintNFT(metadata); }) .catch((err) => { console.log('error uploading to nft.storage'); });

Woot - Bacalhau からのイメージがあり、NFT.Strorage を使用してメタデータを不変かつ永続的に保存しました。NFT を作成しましょう!

💡クイック ヒント💡NFT.Storage は、storeCar や storeDirectory などの他のAPI 呼び出しや、CID の IPFS ピンニングと Filecoin ストレージ取引を返すstatus() 関数も提供します -> これは、 NFT のステータスをチェックするための FEVM DApp (または FEVM がメインネット リリースになった後の FEVM での NFT 実装)。

契約の相互作用

ここには 3 種類のインタラクションがあります (そして、いくつかの FEVM の落とし穴があります - ベータ技術には常にいくつかの風変わりなバグ機能があります!)

• 変更せずにチェーンからデータを取得するための読み取り専用呼び出し

• 署名してガスを支払うためにウォレットを必要とする呼び出しを書き込みます。 NFT の鋳造のように、チェーンの状態を変更する関数!

• イベント リスナー - コントラクトから発行されたイベントをリッスンする

  
  

これらすべての関数について、Ethereum API の軽量ラッパーであるethers.js ライブラリを使用して、コントラクトに接続し、その呼び出しを実行します。

パブリック RPC を使用して読み取りモードでコントラクトに接続する:

 //The compiled contract found in pages/api/hardhat/artifacts/contracts import BacalhauCompiledContract from '@Contracts/BacalhauFRC721.sol/BacalhauFRC721.json'; //On-chain address of the contract const contractAddressHyperspace = '0x773d8856dd7F78857490e5Eea65111D8d466A646'; //A public RPC Endpoint (see table from contract section) const rpc = 'https://api.hyperspace.node.glif.io/rpc/v1'; const provider = new ethers.providers.JsonRpcProvider(rpc); const connectedReadBacalhauContract = new ethers.Contract( contractAddressHyperspace, BacalhauCompiledContract.abi, provider );

コントラクトのイベントをリッスンします。これは読み取り専用 (get) イベントであるため、パブリック RPC を使用してチェーン上のイベントの発行をリッスンできます。

 //use the read-only connected Bacalhau Contract connectedReadBacalhauContract.on( // Listen for the specific event we made in our contract 'NewBacalhauFRC721NFTMinted', (sender: string, tokenId: number, tokenURI: string) => { //DO STUFF WHEN AN EVENT COMES IN // eg. re-fetch NFT's, store in state and change page status } );

書き込みモードでのコントラクトへの接続 - これには、ユーザーがトランザクションに署名してガス代を支払うことができるように、Ethereum オブジェクトがウォレットによって Web ブラウザに挿入されている必要があります - これが、window.ethereum をチェックしている理由です。物体。

 //Typescript needs to know window is an object with potentially and ethereum value. There might be a better way to do this? Open to tips! declare let window: any; //The compiled contract found in pages/api/hardhat/artifacts/contracts import BacalhauCompiledContract from '@Contracts/BacalhauFRC721.sol/BacalhauFRC721.json'; //On-chain address of the contract const contractAddressHyperspace = '0x773d8856dd7F78857490e5Eea65111D8d466A646'; //check for the ethereum object if (!window.ethereum) { //ask user to install a wallet or connect //abort this } // else there's a wallet provider else { // same function - different provider - this one has a signer - the user's connected wallet address const provider = new ethers.providers.Web3Provider(window.ethereum); const contract = new ethers.Contract( contractAddressHyperspace, BacalhauCompiledContract.abi, provider ); const signer = provider.getSigner(); const connectedWriteBacalhauContract = contract.connect(signer); }

write connected contract を使用して mint Function を呼び出します。

まず、ユーザーからのウォレット アドレスを取得し、FVM ハイパースペース チェーン上にいることを確認します。 chainId を確認する方法や、Hyperspace ネットワークをプログラムで Metamask / wallet に追加する方法など、便利なウォレット関数をいくつか紹介します。Ethereum オブジェクトを直接使用するか、ethers.js を使用してウォレットと対話できます。

 declare let window: any; const fetchWalletAccounts = async () => { console.log('Fetching wallet accounts...'); await window.ethereum //use ethers? .request({ method: 'eth_requestAccounts' }) .then((accounts: string[]) => { return accounts; }) .catch((error: any) => { if (error.code === 4001) { // EIP-1193 userRejectedRequest error console.log('Please connect to MetaMask.'); } else { console.error(error); } }); }; const fetchChainId = async () => { console.log('Fetching chainId...'); await window.ethereum .request({ method: 'eth_chainId' }) .then((chainId: string[]) => { return chainId; }) .catch((error: any) => { if (error.code === 4001) { // EIP-1193 userRejectedRequest error console.log('Please connect to MetaMask.'); } else { console.error(error); } }); }; //!! This function checks for a wallet connection WITHOUT being intrusive to to the user or opening their wallet export const checkForWalletConnection = async () => { if (window.ethereum) { console.log('Checking for Wallet Connection...'); await window.ethereum .request({ method: 'eth_accounts' }) .then(async (accounts: String[]) => { console.log('Connected to wallet...'); // Found a user wallet return true; }) .catch((err: Error) => { console.log('Error fetching wallet', err); return false; }); } else { //Handle no wallet connection return false; } }; //Subscribe to changes on a user's wallet export const setWalletListeners = () => { console.log('Setting up wallet event listeners...'); if (window.ethereum) { // subscribe to provider events compatible with EIP-1193 standard. window.ethereum.on('accountsChanged', (accounts: any) => { //logic to check if disconnected accounts[] is empty if (accounts.length < 1) { //handle the locked wallet case } if (userWallet.accounts[0] !== accounts[0]) { //user has changed address } }); // Subscribe to chainId change window.ethereum.on('chainChanged', () => { // handle changed chain case }); } else { //handle the no wallet case } }; export const changeWalletChain = async (newChainId: string) => { console.log('Changing wallet chain...'); const provider = window.ethereum; try { await provider.request({ method: 'wallet_switchEthereumChain', params: [{ chainId: newChainId }], //newChainId }); } catch (error: any) { alert(error.message); } }; //AddHyperspaceChain export const addHyperspaceNetwork = async () => { console.log('Adding the Hyperspace Network to Wallet...'); if (window.ethereum) { window.ethereum .request({ method: 'wallet_addEthereumChain', params: [ { chainId: '0xc45', rpcUrls: [ 'https://hyperspace.filfox.info/rpc/v0', 'https://filecoin-hyperspace.chainstacklabs.com/rpc/v0', ], chainName: 'Filecoin Hyperspace', nativeCurrency: { name: 'tFIL', symbol: 'tFIL', decimals: 18, }, blockExplorerUrls: [ 'https://fvm.starboard.ventures/contracts/', 'https://hyperspace.filscan.io/', 'https://beryx.zondax.chfor', ], }, ], }) .then((res: XMLHttpRequestResponseType) => { console.log('added hyperspace successfully', res); }) .catch((err: ErrorEvent) => { console.log('Error adding hyperspace network', err); }); } };

コントラクト mint 関数を書き込みモードで呼び出す....

 // Pass in the metadata return from saving to NFT.Storage const mintNFT = async (metadata: any) => { await connectedWriteBacalhauContract // The name of our function in our smart contract .mintBacalhauNFT( userWallet.accounts[0], //users account to use metadata.url //test ipfs address ) .then(async (data: any) => { console.log('CALLED CONTRACT MINT FUNCTION', data); await data .wait() .then(async (tx: any) => { console.log('tx', tx); //CURRENTLY NOT RETURNING TX - (I use event triggering to know when this function is complete) let tokenId = tx.events[1].args.tokenId.toString(); console.log('tokenId args', tokenId); setStatus({ ...INITIAL_TRANSACTION_STATE, success: successMintingNFTmsg(data), }); }) .catch((err: any) => { console.log('ERROR', err); setStatus({ ...status, loading: '', error: errorMsg(err.message, 'Error minting NFT'), }); }); }) .catch((err: any) => { console.log('ERROR1', err); setStatus({ ...status, loading: '', error: errorMsg( err && err.message ? err.message : null, 'Error minting NFT' ), }); }); }

Wooo - NFT Minted!!ユニコーンダンスモードタイム！

🌟 最終的な考え: AI とブロックチェーンの可能性

Bacalhau は、データに対して反復的で決定論的な処理ジョブを実行するのに適しています。

• ETL プロセス

• 機械学習と AI

• IOT データの統合

• を含むバッチ処理

  • 財務および市場データ

• ビデオと画像の処理 - クリエイティブに最適

  
  

上記のいくつかを達成する方法についても、 Bacalhau のドキュメントに複数の例があります。

Bacalhau は FEVM スマート コントラクトから Bacalhau を直接呼び出すための統合の構築に忙殺されていますが、Bacalhau x FVM コラボレーションに関するいくつかの考えを以下に示します。

• 将来の Filecoin データのオンボーディングとオフボーディングの支援
• ディールやストレージ プロバイダーに関してチェーン上で取得したデータを処理することで、Filecoin の評判とサービス レイヤーの構築を支援します。
• Bacalhau は、市場と決済データの計算を提供できます
• Bacalhau は、DAO および DataDAO からのデータの処理を支援できます
• Bacalhau は、ビデオや画像処理などのクリエイティブな取り組みの自動化を促進するのに役立つ可能性があります
• Bacalhau は、VR と AR を含むゲームとメタバースのデータ処理を可能にします。
• バカリャウ、IOT、シミュレーションが可能
• AI & ML アプリケーション

🐠 バカリャウ ロードマップ

現在、スマート コントラクトから直接 Bacalhau を実行する方法を構築中です!!!!このプロジェクトは Project Frog / Project Lilypad と呼ばれ、FEVM スマート コントラクトから Bacalhau ジョブを呼び出すことを可能にする統合レイヤーになります。

ニュースレターにサインアップするか、以下のソーシャルに参加して、この進捗状況に注目してください。

✍️ お気軽にお問い合わせください！

最後まで読んでくれたらおめでとう！！！

これが役に立った場合は、いいね、コメント、フォロー、または共有していただければ幸いです。 <3

バカリャウと連絡を取り合いましょう！

• ツイッター@BacalhauProject
• YouTube @BacalhauProject
• Filecoin Project Slack #bacalhau @filecoinproject
• Github@bacalhau.org
• フォーラムgithub.com/filecoin-project/bacalhau/discussions

♥ ️DeveloperAllyと

この記事は価値がありましたか？

スポンサーになってアリソン・ヘアーをサポートしましょう。いくらでも大歓迎です！

Hashnode スポンサーの詳細