🌈🦄 Bacalhau를 사용하여 나만의 AI 생성 예술 NFT DApp 구축

FVM Hyperspace Testnet에서 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. Hardhat을 사용하여 FVM(Filecoin Virtual Machine) 하이퍼스페이스 테스트넷에 NFT 계약 배포
5. 프런트 엔드 상호 작용 - Bacalhau 텍스트-이미지 스크립트 및 React에서 NFT 계약과 상호 작용하는 방법
6. NFT 메타데이터를 NFT.Storage에 저장하는 방법
7. Fleek에 프런트엔드 DApp을 배포하는 방법

   
   

저는 의도적으로 이 스택에서 사용할 수 있는 오픈 소스 및 분산 기술을 최대한 많이 사용하기로 선택했습니다.

이 블로그는 꽤 길어질 것입니다. (모든 정보를 제공하고 초보자 친화적이고 포괄적인지 확인하고 싶습니다!) - 표에서 유용한 부분으로 건너뛰셔도 됩니다. 내용 <3

🏛 아키텍처 다이어그램(다소)

🥞 DApp 기술 스택

(알겠습니다 - 팬케이크 더미입니다 #미안해요죄송합니다)

오픈 소스 및 Web3의 가치는 처음부터 끝까지 :)

• 스마트 컨트랙트 [Solidity, Open Zeppelin]
  • 는 Ethereum(EVM) 호환 블록체인을 위한 OO 스마트 계약 프로그래밍 언어입니다.
  • 일반적인 스마트 계약 구성 요소 및 계약의 보안 감사 구현 라이브러리를 제공합니다.
• 스마트 계약 IDE [Hardhat]
  • 은 Ethereum 소프트웨어를 편집, 컴파일, 디버깅 및 배포하기 위한 개발 환경입니다.
• 블록체인 테스트넷 [파일코인 가상머신 하이퍼스페이스]
  • 는 Filecoin 블록체인을 기반으로 구축된 EVM 호환 테스트넷입니다.
• NFT 메타데이터 저장소 [NFT.Storage]
  • NFT 메타데이터를 불변적이고 지속적으로 저장하기 위해 IPFS 및 Filecoin 위에 구축된 공공재이며 NFT 및 자바스크립트 SDK를 위한 무료 분산형 저장소를 제공합니다.
• 프론트엔드 [NextJS / React + NPM]
  • 우리 모두는 이것을 알고 있을 것입니다... 그렇죠? :피
• 클라이언트의 스마트 계약 상호 작용 [Metamask, Ethers, Chainstack RPC Node]
  • 사용 - 블록체인 계약과 읽기 전용 상호 작용을 할 수 있습니다.
  • 공급자(또는 에서 지정한 유사한 지갑)를 사용하여 블록체인 계약에 대한 쓰기 호출을 활성화합니다.
  • js는 EVM 호환 스마트 계약과 상호 작용하기 위한 라이브러리입니다.
• AI Text-To-Image 안정 확산 스크립트 [Python, Tensorflow]
  • 는 사전 학습된 모델과 기타 데이터 및 ML 도구를 제공하는 오픈 소스 기계 학습 플랫폼이자 라이브러리입니다.
• AI 텍스트-이미지 생성을 위한 분산형 오프체인 컴퓨팅 [Bacalhau]
  • 는 공개적이고 투명하며 선택적으로 검증 가능한 계산 프로세스를 위한 플랫폼을 제공하는 P2P 개방형 계산 네트워크입니다. 이는 분산된 오프체인 데이터 계산 계층입니다.
• 분산형 DApp 배포 [Fleek]
  • IPFS 및 Filecoin에 웹사이트 배포를 제공합니다. Vercel 또는 Netlify의 web3 버전입니다. 실제로 분산형 앱이 있고 이를 web2에 배포한다고 말할 수는 없습니다! :디

🏗️ Python 텍스트-이미지 스크립트 작성

💡TLDR 팁 💡

이 스크립트는 이미 CLI 및 HTTP 엔드포인트를 통해 Bacalhau를 통해 사용할 수 있으므로 이 부분을 건너뛰어도 됩니다.

안정 확산에 대한 빠른 소개

Stable Diffusion은 현재 텍스트-이미지 처리를 위한 최고의 기계 학습 모델입니다(&는 Dall-E가 사용하는 것과 동일한 모델입니다). 이는 일종의 딥 러닝입니다. 특정 작업을 수행하도록 자체적으로 학습하는 머신 러닝의 하위 집합입니다. 이 경우에는 텍스트 입력을 이미지 출력으로 변환합니다.

이 예에서는 변환기를 사용하여 텍스트에서 이미지를 생성하는 확산 확률 모델을 사용하고 있습니다.

하지만 걱정하지 마십시오. 이를 위해 기계 학습 모델을 교육할 필요는 없습니다. (하지만, 그게 당신의 일이라면 전적으로 가능합니다!)

대신 ML 가중치가 미리 계산되었기 때문에 Python 스크립트에서 Google의 TensorFlow 오픈 소스 기계 학습 라이브러리의 사전 훈련된 모델을 사용할 것입니다.

더 정확하게는 원래 ML 모델의 최적화된 사용하고 있습니다.

파이썬 스크립트

🦄 와 이 에서 이 텍스트-이미지 스크립트를 빌드하고 Dockerise하고 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 필수 스크립트를 실행할 위치는..... 🤔🤔

블록체인 기술이 본질적으로 잘 하지 못하는 것이 있다면 바로 대용량 데이터 처리입니다. 이는 무신뢰 및 검열 저항과 같은 다른 강력한 속성을 제공하기 위해 분산 시스템을 통한 컴퓨팅 비용 때문입니다.

작은 예제를 위해 로컬 컴퓨터를 사용하는 것이 가능합니다. 사실 나는 이 특정 예제를 내 Mac M1에서 작동하도록 관리했지만(매우 불행함) 결과를 기다리는 데 매우 오랜 시간이 걸렸습니다(탁구 게임을 하는 사람이 있습니까?). 따라서 더 큰 데이터 처리를 시작하면 더 많은 가스가 필요하게 되며(말장난 의도) 집 주변에 전용 서버가 없으면 가상 머신을 사용해야 합니다. 클라우드 컴퓨팅 플랫폼.

중앙 집중화되어 있을 뿐만 아니라 데이터가 계산 기계로부터 멀리 떨어져 있기 때문에 비효율적이며 비용이 많이 들 수 있습니다. 이를 위해 GPU 처리를 제공하는 무료 계층 클라우드 컴퓨팅 서비스를 찾지 못했고(누군가 암호화폐 채굴 금지라고 말했나요..?) 한 달에 US$400가 넘는 계획이 나왔습니다(고마워요).

바칼라우!

다행히도 이러한 문제는 Bacalhau가 해결하려고 하는 문제 중 일부입니다. Bacalhau에서는 데이터 처리 및 계산을 모든 사람이 사용할 수 있도록 개방하고 처리 시간을 단축하는 것이 가능합니다. 첫째, 여러 노드에 걸쳐 일괄 처리를 사용하고, 둘째, 데이터가 있는 곳에 처리 노드를 배치함으로써 가능합니다!

Bacalhau는 IPFS, Filecoin 및 Web3에 내재된 분산 가치를 보다 광범위하게 포기하지 않고 데이터에 대한 오프체인 계산을 가능하게 하여 데이터 처리의 미래를 민주화하는 데 도움을 주는 것을 목표로 하고 있습니다.

는 사용자가 IPFS(및 곧 Filecoin)에 저장된 데이터를 포함한 모든 데이터에 대해 Docker 컨테이너 또는 웹 어셈블리 이미지를 작업으로 실행할 수 있는 공개적이고 투명하며 선택적으로 검증 가능한 계산 프로세스를 위한 플랫폼을 제공하는 P2P 개방형 계산 네트워크입니다. US$400 이상이 아닌 GPU 작업도 지원합니다!

Bacalhau에서 스크립트 실행

이 스크립트를 실행하려면 Bacalhau에서 사용할 수 있도록 Dockerise를 수행하면 됩니다. 그 방법을 배우고 싶다면 따라갈 수 있습니다. 그런 다음 단 한 줄의 코드로 Bacalhau CLI를 사용하여 실행할 수 있습니다(다른 한 줄로 후).

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

하지만 이 예에서는 통합 섹션에서 보여드릴 이 고정된 안정적인 확산 스크립트에 연결하는 HTTP 엔드포인트를 사용하겠습니다! 하지만 여기서는 이것이 웹3 친화적인 데이터 계산 프로세스를 실행하는 강력하고 유연한 방법이라는 점에 주목하겠습니다. 우리는 이 하나의 작은 모델에만 국한되지 않습니다. 그래도 NFT 스크립트로 넘어가겠습니다! :)

⚒️ Solidity NFT 스크립트 구축 및 배포

스마트 계약

NFT 스마트 계약은 기반으로 하지만 메타데이터 표준 확장이 포함된 ERC721URIStorage 버전을 사용합니다(따라서 NFT.Storage에 저장할 IPFS 주소 메타데이터를 계약에 전달할 수 있습니다). .

이 기본 계약은 mint() 및 transfer()와 같은 기능이 이미 구현된 NFT 계약의 일반 기능을 추가로 제공합니다.

또한 새로운 NFT가 생성될 때마다 체인에서 방출될 이벤트뿐만 아니라 프런트 엔드에 대한 데이터를 가져오기 위한 몇 가지 getter 함수도 추가했음을 알 수 있습니다. 이는 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을 Hyperspace Testnet에
2. 수도꼭지( 또는 )에서 테스트 tFIL 자금을 확보하세요.

Hardhat과 함께 스마트 계약 배포

저는 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;

그리고 스마트 계약을 배포하기 위해 배포 스크립트를 생성합니다. 여기서는 서명자(소유자)로 지갑 주소를 구체적으로 설정하고 있습니다. 작성하는 시점에 FEVM에서 여전히 작동 중인 몇 가지 매핑 오류가 있습니다. 뭔가 이상한 행동.

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 설정(또는 물론 선택한 프레임워크!)을 사용합니다.

Typescript에 관해서는... 음, 저는 이것을 약간 급하게 만들었고 이것이 Typescript의 아주 좋은 예는 아니라는 점을 인정해야 합니다. 하지만 vars는 행복해 보입니다... ;)

Anyhoo - 이 섹션의 주요 요점은 프런트 엔드 코딩 방법을 보여주는 것이 아니라 스마트 계약인 Bacalhau(안정적인 확산 ML 모델 사용) 및 물론 NFT.Storage와 상호 작용하는 방법을 보여주는 것입니다. NotOnIPFSNotYourNFT.

완전한 흐름

[todo: 순서도 다이어그램 작성]

• 사용자가 입력 필드에 텍스트 프롬프트를 입력합니다 ->
• 이미지 생성 버튼 클릭 -> Bacalhau Job을 호출하여 이미지 생성
• Bacalhau 작업 완료 -> 형식이 NFT 메타데이터 JSON 개체로 반환됩니다.
• 사용자가 Mint NFT 버튼을 클릭합니다 -> NFT.Storage가 NFT 메타데이터를 저장하기 위해 호출되고 폴더에 대한 IPFS CID와 함께 반환됩니다. -> 스마트 계약의 Mint NFT 기능이 이 IPFS_URI로 호출되어 이 메타데이터로 NFT를 생성합니다.
• !! [FEVM 문제] -> 여기서는 일반적으로 이 결과의 TX(트랜잭션 해시)가 반환될 때까지 기다리지만 현재는 작동하지 않으므로 대신 계약 이벤트 리스너를 사용하여 이것이 완료되는 시점을 확인합니다.
• 완료! -> 이제 모든 디스플레이 데이터를 다시 가져오고 사용자 상태에 대한 발행 성공 피드백을 제공할 수 있습니다.

좋습니다. 이를 코드에서 어떻게 구현하는지 살펴보겠습니다!

바칼랴우 상호작용

Bacalhau용 프런트 엔드 API 엔드포인트 생성은 엔지니어 이 작성한 에 문서화되어 있습니다.

API는 현재 이 블로그에 문서화된 안정적인 확산 스크립트 에만 직접적으로 적용되지만 팀에서는 HTTP에서 예제와 자체 배포 스크립트를 호출할 수 있도록 이를 보다 일반적인 API로 확장하는 과정에 있습니다. REST 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는 자바스크립트 또는 HTTP SDK를 사용하여 NFT 메타데이터를 IPFS 및 Filecoin에 영구적으로 쉽게 저장할 수 있게 해주는 공공재(무료)입니다.

NFT 메타데이터는 Open Zeppelin 문서에서 직접 가져온 아래 예와 유사한 JSON 문서입니다.

NFT를 생성할 때 메타데이터를 체인에 저장하지 않는 한(대용량 파일의 경우 엄청나게 비용이 많이 들 수 있음) 토큰의 '대체 불가능성'을 준수하려면 다음과 같은 저장소가 필요하다는 점에 유의하는 것이 중요합니다. 지속적이고 안정적이며 불변합니다.

NFT에 위의 예와 같은 위치 기반 주소가 있는 경우 판매 후 이 위치 경로를 전환하는 것은 매우 간단합니다. 즉, 구매했다고 생각한 NFT가 완전히 다른 것으로 바뀌거나 이 경우 문자 그대로 양탄자가 됩니다. NFT 제작자가 러그 사진의 아트 이미지를 전환한 곳은 아래입니다.

Open Zeppelin에서도 경고하는 내용이 있습니다!

NFT.Storage를 사용한다는 것은 IPFS에 고정될 뿐만 아니라 지속성을 위해 Filecoin에 저장되는 메타데이터에 대한 변경 불가능한 IPFS 파일 CID( 콘텐츠 - 위치가 아님 - ID 식별자)를 얻는다는 것을 의미합니다. NFT.Storage를 실행하고 이에 대한 (.env 파일에 저장하기 위해)를 가져옵니다.

.env example

 NEXT_PUBLIC_NFT_STORAGE_API_KEY=xxx

또한 FVM에는 (아직!) NFT 마켓플레이스가 없기 때문에 올바른 형식의 메타데이터 JSON을 생성했는지 확인해야 합니다... 우리는 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.Storage를 사용하여 메타데이터를 불변적이고 지속적으로 저장했습니다. 이제 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 );

계약에 대한 이벤트를 수신합니다. 이는 읽기 전용(가져오기) 이벤트이므로 공개 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 객체가 지갑에 의해 웹 브라우저에 주입되어야 합니다. 이것이 우리가 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); }

쓰기 연결 계약을 사용하여 mint 함수를 호출합니다.

먼저, 사용자의 지갑 주소가 있고 FVM Hyperspace 체인에 있는지 확인하세요. chainId를 확인하는 방법, 프로그래밍 방식으로 Hyperspace 네트워크를 Metamask/지갑에 추가하는 방법 등 여러분이 원할 수 있는 몇 가지 유용한 지갑 기능이 있습니다. 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); }); } };

쓰기 모드에서 계약 발행 기능을 호출합니다....

 // 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' ), }); }); }

우우 - NFT 발행!! 유니콘 댄스 모드 시간!

🌟 최종 생각: AI 및 블록체인의 가능성

Bacalhau는 데이터에 대한 반복적이고 결정적인 처리 작업을 수행하는 데 적합합니다.

• ETL 프로세스
• 머신러닝 및 AI
• IOT 데이터 통합
• 다음을 포함한 일괄 처리
  • 금융 및 시장 데이터
• 비디오 및 이미지 처리 - 광고 소재에 적합

  
  

에는 위의 일부를 달성하는 방법에 대한 여러 예가 있습니다. Bacalhau가 FEVM 스마트 계약에서 Bacalhau를 직접 호출하기 위한 통합을 구축하는 데 바쁜 동안 Bacalhau x FVM 협업에 대한 몇 가지 생각은 다음과 같습니다.

• 향후 Filecoin 데이터의 온보딩 및 오프보딩을 도와주세요.
• 거래 및 스토리지 제공업체에 대해 온체인에서 검색된 데이터를 처리하여 Filecoin에 대한 평판과 서비스 품질 계층을 구축하는 데 도움을 줍니다.
• Bacalhau는 시장 및 결제 데이터에 대한 계산을 제공할 수 있습니다.
• Bacalhau는 DAO 및 DataDAO의 데이터 처리에 도움을 줄 수 있습니다.
• Bacalhau는 비디오 및 이미지 처리와 같은 창의적인 작업을 위한 자동화를 강화하는 데 도움이 될 수 있습니다.
• Bacalhau는 VR 및 AR을 포함한 게임 및 메타버스 데이터 처리를 가능하게 할 수 있습니다.
• Bacalhau, IOT 및 시뮬레이션이 가능합니다
• AI 및 ML 애플리케이션

🐠 바칼랴우 로드맵

우리는 현재 스마트 계약에서 직접 Bacalhau를 실행할 수 있는 방법을 구축하고 있습니다!!!! 이 프로젝트는 Project Frog / Project Lilypad라고 불리며 FEVM 스마트 계약에서 Bacalhau 작업을 호출할 수 있는 통합 계층이 될 것입니다.

뉴스레터에 가입하거나 아래 소셜 미디어에 가입하여 진행 상황을 계속 지켜보세요.

✍️ 계속 연락하세요!

끝까지 읽으셨다면 축하드립니다!!!

이것이 도움이 되었다면 좋아요, 댓글, 팔로우 또는 공유해 주시면 감사하겠습니다! <3

바칼라우와 계속 연락하세요!

• 트위터
• 유튜브
• 파일코인 프로젝트 슬랙 #bacalhau
• Github @
• 포럼

♥️ 와 함께

이 기사가 가치 있다고 생각하시나요?

후원자가 되어 Alison Haire를 지원하세요. 어떤 금액이든 감사합니다!