学习如何创建人工智能NFT,实现稳定扩散和Moralis连接
Table of Contents
- 引言
- 连接数字钱包
- 生成AI图像
- 将图像上传至IPFS
- 创建NFT Token URI
- 部署智能合约
- 铸造NFT
- 查看我的NFTs
- 总结
引言
嗨,大家好!欢迎来到本周的莫拉莱斯蓝图!本周我们将学习如何解锁人工智能的力量,创建自己的AI NFT创作者。通过本次蓝图,我们将完成一个像这样的项目。让我们开始吧!
连接数字钱包
首先,我们需要连接我们的Metamask数字钱包。在视频描述中,你会找到一个GitHub的模板项目链接,包括了依赖项和基本模板。这个蓝图将为你提供前端的基本版本,但目前按钮还没有任何功能,只有基本的导航功能。在后端文件夹里,有一个完整的智能合约示例,以及一个基本的Flask应用程序。在前端文件夹中,我们将拥有所有你之前看到的前端功能。
首先,我们从实际生成图像开始。有许多方法可以做到这一点,其中一种方法是在Google Colab中创建自己的AI模型并在服务器上运行,而另一种更简单的方法是使用API。我将使用API来生成图像。
我们需要前往DreamStudio.ai,点击登录,如果你还没有账号,请创建一个。我将使用Google账号登录。登录之后,我们可以在这里看到生成图像的页面。在任意的文本框中输入一些文本,然后点击"Dream"按钮,它会开始生成一张新图片。我们可以在这里看到四个生成的图片。但是我们不想在这个页面使用这些图片,我们只是想把这些功能集成到自己的网站上。
如果点击你的个人资料图片,你将看到你的API密钥以及你当前的API配额。我的配额目前是可以免费生成超过900张图片的。下面是我们将用来连接到Stable Diffusion API并生成我们自己图像的API密钥。请记住,这是敏感信息,请不要与任何人分享。一旦你拥有API密钥,回到项目模板的backend文件夹,将你的API密钥粘贴到.env文件中。
现在,我们需要在Flask服务器中连接到Stable Diffusion API和IPFS。我们已经为服务器配置了Flask的参数,还需要安装项目GitHub上列出的先决条件。现在我们需要在服务器中使用该API密钥。
Stable Diffusion提供了Python代码示例,我们可以复制并使用,但为了与我们的Flask服务器配合使用,需要进行一些修改。首先,创建一个名为generate
的路由和对应的处理函数。根据提供的代码,在处理函数中替换默认提示,将其替换为从前端获取的提示,然后使用API密钥连接到Stable Diffusion API。我们还可以在代码中添加一些参数,以控制生成图像的复杂性和大小。最后,输出生成的图像。确保创建一个名为"out"的文件夹,用于保存生成的图像。完成后,我们已经准备好实际生成图像的工作。
现在,我们将前往imagegenerator.js文件,我们将在其中创建一个名为generateImage
的函数,并使用前文创建的generate
路由的端点来连接到服务器。我们还将添加一些逻辑,以确保用户不会连续点击"Generate"按钮。最后,我们将在页面上显示生成的图像。完成后,我们可以在页面上看到一个"Generate"按钮,点击该按钮可以生成图片。
生成AI图像
在页面上,我们可以输入一个提示文本,然后点击"Generate"按钮。这将调用Stable Diffusion API并为我们生成一张图片。如果我们喜欢这张图片,我们可以点击"Mint NFT"按钮。这将把图片上传到IPFS并创建一个新的Token URI,然后触发Metamask的事务以铸造一个新的NFT。我们可以确认这个事务,一旦它完成,我们可以返回到页面,点击"My NFTs",这里我们将看到钱包中所有NFT的信息。
在这个项目中,我们将使用Table Diffusion React作为前端,用Python的Flask构建后端,当然还有几个Morales端点。如果你想学习如何实现这个,请继续观看,因为我们刚刚开始。
链接数字钱包
首先,请确保你已经按照描述中的方式配置好了环境,然后将你的Metamask钱包连接到你的应用程序。在连接到Metamask钱包之前,我们需要创建一个名为connectWallet
的自定义Hook。这个Hook将使用Ethers.js来连接到Metamask。
首先,在Hook中声明一些状态变量,比如isConnected
(用于验证是否已连接)、account
和signer
。然后,在Hook中定义一个异步函数connectToMetamask
,它将使用try-catch语句来连接到Metamask钱包。在try语句块中,我们首先声明一个叫做provider
的变量,它将被赋值为new ethers.providers.Web3Provider(window.ethereum)
,这是用于连接Metamask的Web3提供程序。接下来,我们声明一个名为accounts
的变量,它将获取通过provider.send(eth_request, account)
请求来的钱包地址。最后,我们将签名者赋值为accounts[0]
,并将isConnected
设置为true
。
完成这个Hook的最后一步是在页面中使用它,我们需要在header.js组件中使用,其中我们需要一个按钮来连接钱包。在ConnectWalletButton
组件中,我们将从父组件中接收isConnected
、account
、signer
和connectToMetamask
作为参数,并将这些参数传递给按钮。在按钮的点击事件中,根据isConnected
的值来判断是连接还是断开连接,并显示相应的文本。
在页面上重新加载,然后点击"Connect Wallet"按钮,这将触发Metamask的连接流程。在连接成功后,你将看到钱包地址的缩略形式。这样我们就可以使用钱包的签名者来与智能合约进行交互了。
生成AI图像
现在,我们可以开始生成AI图像了。在imagegenerator.js文件中,我们创建了一个名为generateImage
的函数,它会连接到我们刚才创建的API endpoint,并将提示作为参数。这样,当点击"Generate"按钮时,我们的应用程序就能生成AI图像。我们使用Axios库来发送POST请求,并将提示作为请求的参数。
完成上述步骤后,我们将在按钮的点击事件中调用generateImage
函数。按钮上显示的文本会根据isLoading
变量的值进行更改。现在,当我们在页面上点击"Generate"按钮时,我们将能够生成AI图像。
接下来,我们需要在前端应用程序中上传生成的图像到IPFS,然后创建一个Token URI。我们将使用Morales的上传文件到IPFS的端点,并与我们的Flask服务器进行通信。这将确保我们的图像存储在去中心化的IPFS网络上,而不是将其保存在区块链上。
首先,我们需要在我们的Flask应用中创建一个新的路由,这个路由将用于将图像上传到IPFS。我们要将生成的图像以base64编码的形式作为请求的主体内容,并通过调用Morales的IPFS上传文件端点来完成上传过程。上传完成后,我们将获得一个表示图像在IPFS上的路径。
接下来,我们还需要在Flask应用中创建另一个路由,这个路由将用于创建NFT的Token URI。实际上,Token URI是一个JSON文件,其中包含了NFT的元数据,包括名称、描述、图像等。我们将通过调用Morales的上传文件到IPFS端点来创建NFT的Token URI。
最后,我们需要在Morales后台创建一个项目,并获取项目的API密钥。然后,我们将在我们的Flask服务器中使用该API密钥来连接到Morales API。完成这一步后,我们就可以将图像上传到IPFS,创建Token URI,并在智能合约中铸造NFT了。
将图像上传至IPFS
在前文中,我们已经为我们的Flask应用创建了一个将图像上传到IPFS的端点。现在我们需要在imagegenerator.js中的generateImage
函数中连接到这个端点,并在生成图像后上传图像。我们将使用Axios库来发送POST请求,并将base64编码的图像作为请求的数据。注意,在请求的最后,我们定义了headers,指定了请求的内容类型为application/json
。最后,我们将返回所得到的IPFS链接,以便在后续步骤中使用。
完成这一步后,我们将能够将AI生成的图像上传到IPFS并获得图像的IPFS链接。这个链接将在后续步骤中被用来创建NFT的Token URI。
创建NFT Token URI
在前文中,我们已经为我们的Flask应用创建了一个创建NFT Token URI的端点。现在,我们需要在imagegenerator.js中的generateImage
函数中连接到这个端点,并使用以"uploadedImage"为参数的图像来生成Token URI。我们将使用Axios库来发送POST请求,并将图像作为请求的数据。最后,我们将返回所得到的Token URI,以便在后续步骤中使用。
一旦我们上传了图像并创建了Token URI,我们就准备好在智能合约中铸造NFT了。
部署智能合约
在部署智能合约之前,请确保你已经在Morales上创建了一个项目,并获得了自己的API密钥。然后,你可以在GitHub存储库中找到部署智能合约的示例代码。你可以使用该代码作为参考,自定义你的智能合约。
在部署智能合约之前,我们需要检查链配置和环境变量设置。确保你在.env文件中设置了正确的Morales API密钥。
完成上述步骤后,我们将准备好部署智能合约。我们将使用Brownie来编译和部署智能合约,因此确保你已经安装了Brownie并配置了所需的网络。
首先,我们需要在前端的Chain Info文件夹中查找我们部署的智能合约的地址。在App.js中,声明一个contractAddress
变量,并将其设置为相应的地址。
然后,我们需要在mintnft.js组件中导入智能合约。在组件中,我们可以使用这个智能合约来实现铸造新NFT的功能。
完成这些步骤后,我们现在可以使用智能合约代码来铸造新的NFT。
铸造NFT
在mintnft.js
组件中,我们已经导入了mintNFT
钩子,我们可以使用这个钩子来实现铸造NFT的功能。在组件中,我们将调用mintNFT
函数,并将钱包签名者和Token URI作为参数。钱包签名者来自父组件App.js,并作为参数传递给了mintnft.js
组件。
一旦我们调用了mintNFT
函数,我们将触发一个交易,将NFT铸造到合约中。
查看我的NFTs
在留言板应用中,我们已经创建了一个名为MyNFTs
的组件来显示我的NFTs。在这个组件中,我们将使用Morales的get NFTs by contract
端点来查询与我连接的钱包地址相关的NFT。
在后端项目中,我们需要创建一个新的路由来处理这个请求。在处理函数中,我们将使用合约地址和钱包地址作为参数,并返回与合约和钱包地址相关的NFT的信息。
在前端应用程序中,我们需要使用Axios来连接到后端的getNFTs
端点,并渲染返回的NFT信息。我们将使用map
函数来迭代NFT数组,并根据需要显示每个NFT的详情。
完成以上步骤后,我们将能够在网页上查看和管理我们的NFTs。
总结
总之,通过本次蓝图,我们学习了如何使用人工智能生成图像,并将其铸造为NFT。我们学会了如何连接数字钱包,生成AI图像,将图像上传到IPFS,并通过智能合约铸造NFT。我们还学会了如何查看和管理自己的NFTs。
希望本篇蓝图对你有帮助!如果你还有任何疑问,请随时向我提问。谢谢收看,下次再见!