学习如何创建人工智能NFT，实现稳定扩散和Moralis连接

Table of Contents

1. 引言
2. 连接数字钱包
3. 生成AI图像
4. 将图像上传至IPFS
5. 创建NFT Token URI
6. 部署智能合约
7. 铸造NFT
8. 查看我的NFTs
9. 总结

引言

嗨，大家好！欢迎来到本周的莫拉莱斯蓝图！本周我们将学习如何解锁人工智能的力量，创建自己的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。

希望本篇蓝图对你有帮助！如果你还有任何疑问，请随时向我提问。谢谢收看，下次再见！