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

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

目次

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

🦄クイックリンク:

👩‍💻どうしよう…

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

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 をゼロから評価:)

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

Python スクリプト

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

これが根本な 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 に确定性の细化化の価値をより広く放棄することなく、データのオフチェーン計算を或者にすることで、データ処理の以后を民主化化することを目指しています。

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

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

このスクリプトを実行するには、Bacalhau で应用できるように Docker 化します。その策略を学びたい場合は、に従ってください。その後、Bacalhau CLI で 1 行のコードだけで実行できます ( した後)。

 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 スマート コントラクトは、 に基づいていますが、メタデータ標準拡張機能を含む 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]; }

要件

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

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

1. Metamask Wallet を
2. 蛇口からいくつかのテスト tFIL 資金を取得します ( または )

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

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

🛸 Hyperspace RPC & BlockExplorer オプション:

パブリック RPC エンドポイントブロックエクスプローラーの

オープン API :

構成のセットアップでは、借助机会なパブリック 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: '//api.hyperspace.node.glif.io/rpc/v1', chainId: 3141, accounts: [process.env.WALLET_PRIVATE_KEY ?? 'undefined'], }, // bleeding edge often-reset FVM testnet filecoinWallaby: { url: '//wallaby.node.glif.io/rpc/v0', chainId: 31415, accounts: [process.env.WALLET_PRIVATE_KEY ?? 'undefined'], //explorer: //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 エンドポイントの制作については、エンジニアのによるに記載されています。

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

>run/test in terminal

 curl -XPOST -d '{"prompt": "rainbow unicorn"}' '//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 = '//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 を開き、このを (.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 //[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 などの他のや、CID の IPFS ピンニングと Filecoin ストレージ取引を返すstatus() 関数も提供します -> これは、 NFT のステータスをチェックするための FEVM DApp (または FEVM がメインネット リリースになった後の FEVM での NFT 実装)。

契約の相互作用

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

• 変更せずにチェーンからデータを完成するための読み取り専用呼び出し
• 落款してガスを支払うためにウォレットを需要とする呼び出しを書き込みます。 NFT の鋳造のように、チェーンの状態を変更する関数!
• イベント リスナー - コントラクトから発行されたイベントをリッスンする

  
  

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

パブリック 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 = '//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: [ '//hyperspace.filfox.info/rpc/v0', '//filecoin-hyperspace.chainstacklabs.com/rpc/v0', ], chainName: 'Filecoin Hyperspace', nativeCurrency: { name: 'tFIL', symbol: 'tFIL', decimals: 18, }, blockExplorerUrls: [ '//fvm.starboard.ventures/contracts/', '//hyperspace.filscan.io/', '//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 は 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

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

• ツイッター
• YouTube
• Filecoin Project Slack #bacalhau
• フォーラム

♥ と

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

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