Story Protocol Alpha Hackathon 2023 — AIGC NFT Marketplace

jasonLu

Published in

The Z Institute

7 min readDec 20, 2023

前言

本篇文章主要分成三個部分：

專案介紹：針對本次專案簡介及開發工具
專案筆記：對於 blockchain 開發、工具使用上做基本介紹，以及記錄一些開發時遇到的問題
心得：針對參加本次黑客松心得

專案介紹

Demo 網站

讓 AI 模型原本黑盒子的决策過程，利用區塊鏈特性提供了一个更加透明、可驗證和可信的框架
以 AI 模型創作者 角度，當把自己模型發佈到鏈上，隨者使用該模型的人越來越多，該創作者也能因此受到獎勵
以 AI 模型使用者 角度，利用 AI 模型生成出來的圖片和音樂做成 NFT，且整個過程可以藉由 OPML 技術被驗證，因此可以證明該圖片和音樂內容是第一位生成出來的模型使用者
程式碼 : 前端 , 合約

開發工具

這次參與由 story protocol 所舉辦得 hackthon 活動，並以以下工具開發本專案：

Next.js + Typescript + Tailwind / daisyUI
RainbowKit : 用於連接錢包，且提供 React Hook 的方式給開發者使用
wagmi : 基於 ether.js 包裝成 React Hook 的方式給開發者使用，來和以太坊互動
veim : 用來產生 typescript 介面基於 contract abi

流程

使用者會先上傳自己的 AI 模型到鏈上
此時會有合約 ( AIGC_Factory ) 在鏈上建立兩個合約，一個用來鑄造使用模型的代幣 ( AIGT )，另一個用來產生 NFT ( AIGC )
首先會先需要用 AIGT 鑄造使用該模型所需的代幣
接著使用該代幣去將 ai 模型產生的內容鑄造為 NFT

專案筆記

智能合約

AIGC Factory：工廠合約，用來生成 AIGT 和 AIGC 合約
AIGT：基於 ERC-20，作為使用 AI 模型的代幣
AIGC：基於 ERC-721，將 AI 模型的產物變為獨一無二的數位資產 ( NFT 化 )
OPML library：允許複雜的 AI 運算在區塊鏈系統外 ( off-chain ) 高效進行，而只有在結果被質疑時，才會用區塊鏈 ( on-chain ) 的透明和不可篡改的特性來確保最終結果的正確性和可信度。

開發基本介紹

ABI ( Application Binary Interface )：以 JSON 格式的文本，定義了智能合約的接口，包括合約中可調用的函數、參數類型、返回值類型，做為 web3 前端開發者，只要有合約地址和 ABI 就能與該智能合約做互動，簡單來說 ABI 就如同 web2 的 API ，只是這邊原本後端伺服器變成區塊鏈
使用 Etherscan 來查詢或操作部署上的合約資訊，例如：這個 AIGC_Factory 合約 ( 就是一開始填完表單 publish 後使用到的合約，這邊使用過往的一筆紀錄，如果照著影片步驟，就會有多一筆 Transaction Hash )
Events 部分源於合約這邊

點選其中一個 Transaction Hash
Overview：交易看到其詳細資訊
Internal Txns : 可以看到建立了 AIGC 和 AIGT 兩個合約

點到 contract 分頁會有三個子分頁可以選擇 ( Read / Write Contract 會好要連接錢包，例如：MetaMask )
Code：合約的所有程式碼，包括 ABI
Read Contract：用於查詢合約裡的資訊 ( 無需 gas fee )
Write Contract：用於修改合約裡得資訊 ( 無論有無成功都需要 gas fee + 交易可能所需的費用 )

RainbowKit

useConnectModal：跳出連線錢包的介面

Veim

使用 `npx wagmi generate` 生成 contract abi 的 function 會封裝 wagmi react hook 的方法到，abi 的 function 中，例如：useAigcFactoryCreateAigc 用來建立 AIGC model 就已經封裝了 useContractWrite

Wagmi

useAccount：用於存取帳戶資料和連線狀態
useContractEvent：訂閱合約事件 ( 用來通知前端畫面，合約寫入的交易是否完成，來做畫面的跳轉 )
useContractRead：呼叫合約上的 Read 方法
useContractWrite：呼叫合約上的 write 方法，其中回傳值的 `write` 和 `writeAsync` 方法類似，差別在 `write(…)` 沒有回傳值，而使用 `await writeAsync(…)` ，會回傳 transaction hash，但這不代表交易已經完成了，這方面在官方文件上沒有解釋的很清楚
useWaitForTransaction：等待直到 transaction 被處理。與 useContractWrite 搭配使用

其他

使用 ipfs-http-client，將 NFT metadata、圖片、音樂檔案傳到 IPFS

遇到問題

因為 nextjs 是 SSR 的關係，在使用 wagmi react hook 取得一些鏈上資料必須先連接錢包，這部分無法在 server 端先取得資料，造成 hydrating error ，因此以此方式解決該問題
AIGC 合約要使用 AIGT 代幣必須等到 AIGT `approve` 授權完成才可以使用 AIGT 代幣 ( 可以使用 AIGT 的 `allowance` 確認是否有授權指定數量的代幣 )
在使用 useContractWrite 呼叫 `approve` 時，雖然交易有送出去，但在交易還沒完成前就執行 AIGC 的 mint NFT
在串接這種鏈上資料時，需要考慮到送出去的交易不一定會馬上完成，這時候必須將這種情況考慮進去，才能有良好的使用者體驗，避免一直等待交易完成才能繼續操作，或是資料顯示的是交易未完成前得資料
當所選 IPFS gateway 不穩定時可以嘗試不同 gateway ( ex : https://ipfs.io/ipfs/{CID}, https://gateway.pinata.cloud/ipfs/{CID}, https://cloudflare-ipfs.com/ipfs/{CID} … )，CID（ Content Identifier ）是儲存在IPFS網路中的一段內容的唯一識別，再上傳資料後可以取得

心得

這次參與由 story protocol 所舉辦得 hackthon 地點在舊金山，且只有兩天開發的關係，整個過程非常緊湊，第一天先討論了一下專案內容，以及分工一下不同畫面部分，第二天開始串接 Blockcahin 跟 ai 生成部分，及優化專案的架構跟流程。

最後很高興我們的專案 AIGC NFT Marketplace 成為 Story Protocol Alpha Hackathon 2023 的獲勝者，這邊也非常感謝 Lee Ting Ting 給的機會參加這次的活動，以及另一位優秀開發者 Jack 得協作，整個過程下來學到非常多東西。