project screenshot 1
project screenshot 2
project screenshot 3

AGI-PIVOT

If you upload an image, you can see the uploaded content in the individual decentralized block nodes on the left side. It's quite intuitive, like an AI photo album, with fragmented content. The main emphasis is on the concept of decentralized storage.

AGI-PIVOT

Created At

ETHGlobal San Francisco

Project Description

The main goal of the project is to address the issue of decentralized storage for AGI model data in the future. We have visually displayed the storage nodes on the left side of the website, while the right side is the file upload area. Once a local file is uploaded, the content just uploaded can be seen in the visual representation of decentralized nodes on the left side. The platform supports the upload of any file type. To make the demo more intuitive, the button text and video demonstration currently use image uploads.

How it's Made

The project uses the Next.js framework, with the left side featuring a complex block node network topology implemented through logical algorithms and CSS3 keyframe animations. The right side utilizes the decentralized infrastructure provided by Walrus, primarily functioning as an API gateway. When a file or image is uploaded and the upload button is clicked, the Next.js client component's form triggers an action that submits the form content to the Next.js server. The server then requests the Walrus API gateway, specifically the WalrusPublisherUrl. Upon successful invocation, the uploaded content is stored in the Walrus decentralized node network, and storage information is returned, including blobId, endEpoch, txDigest, and blobObjectId. To display or download the file content, especially for images, the WalrusAggregatorUrl can be used by appending /v1/ and the blobId to create a retrieval URL. The Next.js server maintains a dataList array in cookies to temporarily store the returned storage information, caching it on the client side. This way, after a successful upload or page refresh, the left-side block node network topology can immediately call the Next.js server's getDataList method to fetch the latest and historical file storage information, triggering a re-render of the front-end components to update the UI.

background image mobile

Join the mailing list

Get the latest news and updates