feat: publishing infernet-container-starter v0.2.0

This commit is contained in:
ritual-all
2024-03-29 10:50:13 -04:00
parent 41aaa152e6
commit 4545223364
155 changed files with 6086 additions and 257 deletions

2
projects/prompt-to-nft/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
# modal service outputs
modal/outputs

View File

@ -0,0 +1,3 @@
wallet
config.json
**/keyfile-arweave.json

View File

@ -0,0 +1,27 @@
FROM python:3.11-slim as builder
WORKDIR /app
ENV PYTHONUNBUFFERED 1
ENV PYTHONDONTWRITEBYTECODE 1
ENV PIP_NO_CACHE_DIR 1
ENV RUNTIME docker
ENV PYTHONPATH src
RUN apt-get update
RUN apt-get install -y git curl
# install uv
ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
RUN /install.sh && rm /install.sh
COPY src/requirements.txt .
RUN /root/.cargo/bin/uv pip install --system --no-cache -r requirements.txt
copy wallet wallet
COPY src src
ENTRYPOINT ["hypercorn", "app:create_app()"]
CMD ["-b", "0.0.0.0:3000"]

View File

@ -0,0 +1,23 @@
DOCKER_ORG := ritualnetwork
EXAMPLE_NAME := prompt-to-nft
TAG := $(DOCKER_ORG)/example-$(EXAMPLE_NAME)-infernet:latest
.phony: build run build-multiplatform
build:
ifdef CI
mkdir -p wallet # in CI we don't have a wallet directory. This enables to bypass that and ensure that the image
# is built successfully
endif
@docker build -t $(TAG) .
wallet_dir ?= /app/wallet
run:
docker run -p 3000:3000 -v ./wallet:$(wallet_dir) --env-file prompt_to_nft.env $(TAG)
# You may need to set up a docker builder, to do so run:
# docker buildx create --name mybuilder --bootstrap --use
# refer to https://docs.docker.com/build/building/multi-platform/#building-multi-platform-images for more info
build-multiplatform:
docker buildx build --platform linux/amd64,linux/arm64 -t $(TAG) --push .

View File

@ -0,0 +1,91 @@
# Prompt-to-NFT Container
## Overview
## Building & Running the Container in Isolation
Note that this container is meant to be started by the infernet-node. For development &
Testing purposes, you can run the container in isolation using the following commands.
### Building the Container
Simply run the following command to build the container.
```bash
make build
```
Consult the [Makefile](./Makefile) for the build command.
### Adding Arweave File
Add your arweave wallet file
### Running the Container
To run the container, you can use the following command:
```bash
make run
```
## Testing the Container
Run the following command to run an inference:
```bash
curl -X POST http://127.0.0.1:3000/service_output \
-H "Content-Type: application/json" \
-d '{"source":1, "data": {"prompt": "a golden retriever skiing"}}'
```
#### Note Regarding the Input
The inputs provided above correspond to an iris flower with the following
characteristics. Refer to the
1. Sepal Length: `5.5cm`
2. Sepal Width: `2.4cm`
3. Petal Length: `3.8cm`
4. Petal Width: `1.1cm`
Putting this input into a vector and scaling it, we get the following scaled input:
```python
[1.0380048, 0.5586108, 1.1037828, 1.712096]
```
Refer
to [this function in the model's repository](https://github.com/ritual-net/simple-ml-models/blob/03ebc6fb15d33efe20b7782505b1a65ce3975222/iris_classification/iris_inference_pytorch.py#L13)
for more information on how the input is scaled.
For more context on the Iris dataset, refer to
the [UCI Machine Learning Repository](https://archive.ics.uci.edu/ml/datasets/iris).
### Output
By running the above command, you should get a response similar to the following:
```json
[
[
[
0.0010151526657864451,
0.014391022734344006,
0.9845937490463257
]
]
]
```
The response corresponds to the model's prediction for each of the classes:
```python
['setosa', 'versicolor', 'virginica']
```
In this case, the model predicts that the input corresponds to the class `virginica`with
a probability of `0.9845937490463257`(~98.5%).

View File

@ -0,0 +1,53 @@
{
"log_path": "infernet_node.log",
"server": {
"port": 4000
},
"chain": {
"enabled": true,
"trail_head_blocks": 0,
"rpc_url": "http://host.docker.internal:8545",
"coordinator_address": "0x5FbDB2315678afecb367f032d93F642f64180aa3",
"wallet": {
"max_gas_limit": 4000000,
"private_key": "0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"
}
},
"startup_wait": 1.0,
"docker": {
"username": "your-username",
"password": ""
},
"redis": {
"host": "redis",
"port": 6379
},
"forward_stats": true,
"containers": [
{
"id": "prompt-to-nft",
"image": "ritualnetwork/example-prompt-to-nft-infernet:latest",
"external": true,
"port": "3000",
"allowed_delegate_addresses": [],
"allowed_addresses": [],
"allowed_ips": [],
"command": "--bind=0.0.0.0:3000 --workers=2",
"env": {
"ARWEAVE_WALLET_FILE_PATH": "wallet/keyfile-arweave.json",
"IMAGE_GEN_SERVICE_URL": "http://your.services.ip:port"
}
},
{
"id": "anvil-node",
"image": "ritualnetwork/infernet-anvil:0.0.0",
"external": true,
"port": "8545",
"allowed_delegate_addresses": [],
"allowed_addresses": [],
"allowed_ips": [],
"command": "",
"env": {}
}
]
}

View File

@ -0,0 +1,2 @@
ARWEAVE_WALLET_FILE_PATH=
IMAGE_GEN_SERVICE_URL=

View File

@ -0,0 +1,109 @@
import logging
import os
from pathlib import Path
from typing import Any, cast
import aiohttp
from eth_abi import decode, encode # type: ignore
from infernet_ml.utils.arweave import upload, load_wallet
from infernet_ml.utils.service_models import InfernetInput, InfernetInputSource
from quart import Quart, request
log = logging.getLogger(__name__)
async def run_inference(prompt: str, output_path: str) -> None:
async with aiohttp.ClientSession() as session:
app_url = os.getenv("IMAGE_GEN_SERVICE_URL")
async with session.post(
f"{app_url}/service_output",
json={
"prompt": prompt,
},
) as response:
image_bytes = await response.read()
with open(output_path, "wb") as f:
f.write(image_bytes)
def ensure_env_vars() -> None:
if not os.getenv("IMAGE_GEN_SERVICE_URL"):
raise ValueError("IMAGE_GEN_SERVICE_URL environment variable not set")
load_wallet()
def create_app() -> Quart:
app = Quart(__name__)
ensure_env_vars()
@app.route("/")
def index() -> str:
"""
Utility endpoint to check if the service is running.
"""
return "Stable Diffusion Example Program"
@app.route("/service_output", methods=["POST"])
async def inference() -> dict[str, Any]:
req_data = await request.get_json()
"""
InfernetInput has the format:
source: (0 on-chain, 1 off-chain)
data: dict[str, Any]
"""
infernet_input: InfernetInput = InfernetInput(**req_data)
temp_file = "image.png"
if infernet_input.source == InfernetInputSource.OFFCHAIN:
prompt: str = cast(dict[str, str], infernet_input.data)["prompt"]
else:
# On-chain requests are sent as a generalized hex-string which we will
# decode to the appropriate format.
(prompt, mintTo) = decode(
["string", "address"], bytes.fromhex(cast(str, infernet_input.data))
)
log.info("mintTo: %s", mintTo)
log.info("prompt: %s", prompt)
# run the inference and download the image to a temp file
await run_inference(prompt, temp_file)
tx = upload(Path(temp_file), {"Content-Type": "image/png"})
if infernet_input.source == InfernetInputSource.OFFCHAIN:
"""
In case of an off-chain request, the result is returned as is.
"""
return {
"prompt": prompt,
"hash": tx.id,
"image_url": f"https://arweave.net/{tx.id}",
}
else:
"""
In case of an on-chain request, the result is returned in the format:
{
"raw_input": str,
"processed_input": str,
"raw_output": str,
"processed_output": str,
"proof": str,
}
refer to: https://docs.ritual.net/infernet/node/containers for more info.
"""
return {
"raw_input": infernet_input.data,
"processed_input": "",
"raw_output": encode(["string"], [tx.id]).hex(),
"processed_output": "",
"proof": "",
}
return app
if __name__ == "__main__":
"""
Utility to run the app locally. For development purposes only.
"""
create_app().run(host="0.0.0.0", port=3000)

View File

@ -0,0 +1,5 @@
quart==0.19.4
infernet_ml==0.1.0
PyArweave @ git+https://github.com/ritual-net/pyarweave.git
web3==6.15.0
tqdm==4.66.1

View File

@ -0,0 +1,14 @@
# Compiler files
cache/
out/
# Ignores development broadcast logs
!/broadcast
/broadcast/*/31337/
/broadcast/**/dry-run/
# Docs
docs/
# Dotenv file
.env

View File

@ -0,0 +1,14 @@
# phony targets are targets that don't actually create a file
.phony: deploy
# anvil's third default address
sender := 0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a
RPC_URL := http://localhost:8545
# deploying the contract
deploy:
@PRIVATE_KEY=$(sender) forge script script/Deploy.s.sol:Deploy --broadcast --rpc-url $(RPC_URL)
# calling sayGM()
call-contract:
@PRIVATE_KEY=$(sender) forge script script/CallContract.s.sol:CallContract --broadcast --rpc-url $(RPC_URL)

View File

@ -0,0 +1,7 @@
[profile.default]
src = "src"
out = "out"
libs = ["lib"]
via_ir = true
# See more config options https://github.com/foundry-rs/foundry/blob/master/crates/config/README.md#all-options

View File

@ -0,0 +1,3 @@
forge-std/=lib/forge-std/src
infernet-sdk/=lib/infernet-sdk/src
solmate/=lib/solmate/src

View File

@ -0,0 +1,22 @@
// SPDX-License-Identifier: BSD-3-Clause-Clear
pragma solidity ^0.8.0;
import {Script, console2} from "forge-std/Script.sol";
import {DiffusionNFT} from "../src/DiffusionNFT.sol";
contract CallContract is Script {
string defaultPrompt = "A picture of a shrimp dunking a basketball";
function run() public {
// Setup wallet
uint256 deployerPrivateKey = vm.envUint("PRIVATE_KEY");
address mintTo = vm.envOr("mint_to", msg.sender);
string memory prompt = vm.envOr("prompt", defaultPrompt);
vm.startBroadcast(deployerPrivateKey);
DiffusionNFT nft = DiffusionNFT(0x663F3ad617193148711d28f5334eE4Ed07016602);
nft.mint(prompt, mintTo);
vm.stopBroadcast();
}
}

View File

@ -0,0 +1,26 @@
// SPDX-License-Identifier: BSD-3-Clause-Clear
pragma solidity ^0.8.13;
import {Script, console2} from "forge-std/Script.sol";
import {DiffusionNFT} from "../src/DiffusionNFT.sol";
contract Deploy is Script {
function run() public {
// Setup wallet
uint256 deployerPrivateKey = vm.envUint("PRIVATE_KEY");
vm.startBroadcast(deployerPrivateKey);
// Log address
address deployerAddress = vm.addr(deployerPrivateKey);
console2.log("Loaded deployer: ", deployerAddress);
address coordinator = 0x5FbDB2315678afecb367f032d93F642f64180aa3;
// Create consumer
DiffusionNFT nft = new DiffusionNFT(coordinator);
console2.log("Deployed IrisClassifier: ", address(nft));
// Execute
vm.stopBroadcast();
vm.broadcast();
}
}

View File

@ -0,0 +1,63 @@
// SPDX-License-Identifier: BSD-3-Clause-Clear
pragma solidity ^0.8.13;
import {console2} from "forge-std/console2.sol";
import {CallbackConsumer} from "infernet-sdk/consumer/Callback.sol";
import {ERC721} from "solmate/tokens/ERC721.sol";
contract DiffusionNFT is CallbackConsumer, ERC721 {
string private EXTREMELY_COOL_BANNER = "\n\n" "_____ _____ _______ _ _ _\n"
"| __ \\|_ _|__ __| | | | /\\ | |\n" "| |__) | | | | | | | | | / \\ | |\n"
"| _ / | | | | | | | |/ /\\ \\ | |\n" "| | \\ \\ _| |_ | | | |__| / ____ \\| |____\n"
"|_| \\_\\_____| |_| \\____/_/ \\_\\______|\n\n";
constructor(address coordinator) CallbackConsumer(coordinator) ERC721("DiffusionNFT", "DN") {}
function mint(string memory prompt, address to) public {
_requestCompute("prompt-to-nft", abi.encode(prompt, to), 20 gwei, 1_000_000, 1);
}
uint256 public counter = 0;
mapping(uint256 => string) public arweaveHashes;
function tokenURI(uint256 tokenId) public view override returns (string memory) {
return string.concat("https://arweave.net/", arweaveHashes[tokenId]);
}
function nftCollection() public view returns (uint256[] memory) {
uint256 balance = balanceOf(msg.sender);
uint256[] memory collection = new uint256[](balance);
uint256 j = 0;
for (uint256 i = 0; i < counter; i++) {
if (ownerOf(i) == msg.sender) {
collection[j] = i;
j++;
}
}
return collection;
}
function _receiveCompute(
uint32 subscriptionId,
uint32 interval,
uint16 redundancy,
address node,
bytes calldata input,
bytes calldata output,
bytes calldata proof
) internal override {
console2.log(EXTREMELY_COOL_BANNER);
(bytes memory raw_output, bytes memory processed_output) = abi.decode(output, (bytes, bytes));
(string memory arweaveHash) = abi.decode(raw_output, (string));
(bytes memory raw_input, bytes memory processed_input) = abi.decode(input, (bytes, bytes));
(string memory prompt, address to) = abi.decode(raw_input, (string, address));
counter += 1;
arweaveHashes[counter] = arweaveHash;
console2.log("nft minted!", string.concat("https://arweave.net/", arweaveHashes[counter]));
console2.log("nft id", counter);
console2.log("nft owner", to);
_mint(to, counter);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 506 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 500 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 394 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1001 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -0,0 +1,416 @@
# Prompt to NFT
In this tutorial we are going to create a dapp where we can generate NFT's by a single prompt from the user. This
project has many components:
1. A service that runs Stable Diffusion.
2. A NextJS frontend that connects to the local Anvil node
3. An NFT smart contract which is also a [Infernet Consumer](https://docs.ritual.net/infernet/sdk/consumers/Callback).
4. An Infernet container which collects the prompt, calls the Stable Diffusion service, retrieves the NFT and uploads it
to Arweave.
5. An anvil node to which we will deploy the NFT smart contract.
## Install Pre-requisites
For this tutorial you'll need to have the following installed.
1. [Docker](https://docs.docker.com/engine/install/)
2. [Foundry](https://book.getfoundry.sh/getting-started/installation)
## Setting up a stable diffusion service
Included with this tutorial, is a [containerized stable-diffusion service](./stablediffusion).
### Rent a GPU machine
To run this service, you will need to have access to a machine with a powerful GPU. In the video above, we use an
A100 instance on [Paperspace](https://www.paperspace.com/).
### Install docker
You will have to install docker.
For Ubuntu, you can run the following commands:
```bash copy
# install docker
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```
As docker installation may vary depending on your operating system, consult the
[official documentation](https://docs.docker.com/engine/install/ubuntu/) for more information.
After installation, you can verify that docker is installed by running:
```bash
# sudo docker run hello-world
Hello from Docker!
```
### Ensure CUDA is installed
Depending on where you rent your GPU machine, CUDA is typically pre-installed. For Ubuntu, you can follow the
instructions [here](https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#prepare-ubuntu).
You can verify that CUDA is installed by running:
```bash copy
# verify Installation
python -c '
import torch
print("torch.cuda.is_available()", torch.cuda.is_available())
print("torch.cuda.device_count()", torch.cuda.device_count())
print("torch.cuda.current_device()", torch.cuda.current_device())
print("torch.cuda.get_device_name(0)", torch.cuda.get_device_name(0))
'
```
If CUDA is installed and available, your output will look similar to the following:
```bash
torch.cuda.is_available() True
torch.cuda.device_count() 1
torch.cuda.current_device() 0
torch.cuda.get_device_name(0) Tesla V100-SXM2-16GB
```
### Ensure `nvidia-container-runtime` is installed
For your container to be able to access the GPU, you will need to install the `nvidia-container-runtime`.
On Ubuntu, you can run the following commands:
```bash copy
# Docker GPU support
# nvidia container-runtime repos
# https://nvidia.github.io/nvidia-container-runtime/
curl -s -L https://nvidia.github.io/nvidia-container-runtime/gpgkey | \
sudo apt-key add - distribution=$(. /etc/os-release;echo $ID$VERSION_ID)
curl -s -L https://nvidia.github.io/nvidia-container-runtime/$distribution/nvidia-container-runtime.list | \
sudo tee /etc/apt/sources.list.d/nvidia-container-runtime.list
sudo apt-get update
# install nvidia-container-runtime
# https://docs.docker.com/config/containers/resource_constraints/#gpu
sudo apt-get install -y nvidia-container-runtime
```
As always, consult the [official documentation](https://nvidia.github.io/nvidia-container-runtime/) for more
information.
You can verify that `nvidia-container-runtime` is installed by running:
```bash copy
which nvidia-container-runtime-hook
# this should return a path to the nvidia-container-runtime-hook
```
Now, with the pre-requisites installed, we can move on to setting up the stable diffusion service.
### Clone this repository
```bash copy
# Clone locally
git clone --recurse-submodules https://github.com/ritual-net/infernet-container-starter
# Navigate to the repository
cd infernet-container-starter
```
### Build the Stable Diffusion service
This will build the `stablediffusion` service container.
```bash copy
make build-service project=prompt-to-nft service=stablediffusion
```
### Run the Stable Diffusion service
```bash copy
make run-service project=prompt-to-nft service=stablediffusion
```
This will start the `stablediffusion` service. Note that this service will have to download a large model file,
so it may take a few minutes to be fully ready. Downloaded model will get cached, so subsequent runs will be faster.
## Setting up the Infernet Node along with the `prompt-to-nft` container
You can follow the following steps on your local machine to setup the Infernet Node and the `prompt-to-nft` container.
### Ensure `docker` & `foundry` exist
To check for `docker`, run the following command in your terminal:
```bash copy
docker --version
# Docker version 25.0.2, build 29cf629 (example output)
```
You'll also need to ensure that docker-compose exists in your terminal:
```bash copy
which docker-compose
# /usr/local/bin/docker-compose (example output)
```
To check for `foundry`, run the following command in your terminal:
```bash copy
forge --version
# forge 0.2.0 (551bcb5 2024-02-28T07:40:42.782478000Z) (example output)
```
### Clone the starter repository
Just like our other examples, we're going to clone this repository.
All of the code and instructions for this tutorial can be found in the
[`projects/prompt-to-nft`](./prompt-to-nft)
directory of the repository.
```bash copy
# Clone locally
git clone --recurse-submodules https://github.com/ritual-net/infernet-container-starter
# Navigate to the repository
cd infernet-container-starter
```
### Configure the `prompt-to-nft` container
#### Configure the URL for the Stable Diffusion service
The `prompt-to-nft` container needs to know where to find the stable diffusion service. To do this, we need to
modify the configuration file for the `prompt-to-nft` container. We have a sample [config.sample.json](./container/config.sample.json) file.
Simply navigate to the [`projects/prompt-to-nft/container`](./container) directory and set up the config file:
```bash
cd projects/prompt-to-nft/container
cp config.sample.json config.json
```
In the `containers` field, you will see the following:
```json
"containers": [
{
// etc. etc.
"env": {
"ARWEAVE_WALLET_FILE_PATH": "/app/wallet/keyfile-arweave.json",
"IMAGE_GEN_SERVICE_URL": "http://your.services.ip:port" // <- replace with your service's IP and port
}
}
},
```
#### Configure the path to your Arweave wallet
Create a directory named `wallet` in the `container` directory and place your Arweave wallet file in it.
```bash
mkdir wallet
cp /path/to/your/arweave-wallet.json wallet/keyfile-arweave.json
```
By default the `prompt-to-nft` container will look for a wallet file at `/app/wallet/keyfile-arweave.json`. The `wallet`
directory you have created, will get copied into your docker file at the build step below. If your wallet filename is
different, you can change the `ARWEAVE_WALLET_FILE_PATH` environment variable in the `config.json` file.
```json
"containers": [
{
// etc. etc.
"env": {
"ARWEAVE_WALLET_FILE_PATH": "/app/wallet/keyfile-arweave.json", // <- replace with your wallet file name
"IMAGE_GEN_SERVICE_URL": "http://your.services.ip:port"
}
}
},
```
### Build the `prompt-to-nft` container
First, navigate back to the root of the repository. Then simply run the following command to build the `prompt-to-nft`
container:
```bash copy
cd ../../..
make build-container project=prompt-to-nft
```
### Deploy the `prompt-to-nft` container with Infernet
You can run a simple command to deploy the `prompt-to-nft` container along with bootstrapping the rest of the
Infernet node stack in one go:
```bash copy
make deploy-container project=prompt-to-nft
```
### Check the running containers
At this point it makes sense to check the running containers to ensure everything is running as expected.
```bash
# > docker container ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
0dbc30f67e1e ritualnetwork/example-prompt-to-nft-infernet:latest "hypercorn app:creat…" 8 seconds ago Up 7 seconds
0.0.0.0:3000->3000/tcp prompt-to-nft
0c5140e0f41b ritualnetwork/infernet-anvil:0.0.0 "anvil --host 0.0.0.…" 23 hours ago Up 23 hours
0.0.0.0:8545->3000/tcp anvil-node
f5682ec2ad31 ritualnetwork/infernet-node:latest "/app/entrypoint.sh" 23 hours ago Up 9 seconds
0.0.0.0:4000->4000/tcp deploy-node-1
c1ece27ba112 fluent/fluent-bit:latest "/fluent-bit/bin/flu…" 23 hours ago Up 10 seconds 2020/tcp,
0.0.0.0:24224->24224/tcp, :::24224->24224/tcp deploy-fluentbit-1
3cccea24a303 redis:latest "docker-entrypoint.s…" 23 hours ago Up 10 seconds 0.0.0.0:6379->6379/tcp,
:::6379->6379/tcp deploy-redis-1
```
You should see five different images running, including the Infernet node and the prompt-to-nft container.
## Minting an NFT by directly calling the consumer contract
In the following steps, we will deploy our NFT consumer contract and call it using a forge script to mint an NFT.
### Setup
Notice that in [one of the steps above](#check-the-running-containers) we have an Anvil node running on port `8545`.
By default, the [`anvil-node`](https://hub.docker.com/r/ritualnetwork/infernet-anvil) image used deploys the
[Infernet SDK](https://docs.ritual.net/infernet/sdk/introduction) and other relevant contracts for you:
- Coordinator: `0x5FbDB2315678afecb367f032d93F642f64180aa3`
- Primary node: `0x70997970C51812dc3A010C7d01b50e0d17dc79C8`
### Deploy our NFT Consumer contract
In this step, we will deploy our NFT consumer contract to the Anvil node. Our [`DiffusionNFT.sol`](./contracts/src/DiffusionNFT.sol)
contract is a simple ERC721 contract which implements our consumer interface.
#### Anvil logs
During this process, it is useful to look at the logs of the Anvil node to see what's going on. To follow the logs,
in a new terminal, run:
```bash copy
docker logs -f anvil-node
```
#### Deploying the contract
Once ready, to deploy the [`DiffusionNFT`](./contracts/src/DiffusionNFT.sol) consumer contract, in another terminal, run:
```bash copy
make deploy-contracts project=prompt-to-nft
```
You should expect to see similar Anvil logs:
```bash
# > make deploy-contracts project=prompt-to-nft
eth_getTransactionReceipt
Transaction: 0x0577dc98192d971bafb30d53cb217c9a9c16f92ab435d20a697024a4f122c048
Contract created: 0x663f3ad617193148711d28f5334ee4ed07016602
Gas used: 1582129
Block Number: 1
Block Hash: 0x1113522c8422bde163f21461c7c66496e08d4bb44f56e4131c2af57f8457f5a5
Block Time: "Wed, 6 Mar 2024 05:03:45 +0000"
eth_getTransactionByHash
```
From our logs, we can see that the `DiffusionNFT` contract has been deployed to address
`0x663f3ad617193148711d28f5334ee4ed07016602`.
### Call the contract
Now, let's call the contract to mint an NFT! In the same terminal, run:
```bash copy
make call-contract project=prompt-to-nft prompt="A golden retriever skiing."
```
You should first expect to see an initiation transaction sent to the `DiffusionNFT` contract:
```bash
eth_getTransactionReceipt
Transaction: 0x571022944a1aca5647e10a58b2242a83d88f2e54dca0c7b4afe3c4b61fa3faf6
Gas used: 214390
Block Number: 2
Block Hash: 0x167a45bb2d30ab3732553aafb1755a3e126b2e1ae7ef52ca96bd75acb0eeb5eb
Block Time: "Wed, 6 Mar 2024 05:06:09 +0000"
```
Shortly after that you should see another transaction submitted from the Infernet Node which is the
result of your on-chain subscription and its associated job request:
```bash
eth_sendRawTransaction
_____ _____ _______ _ _ _
| __ \|_ _|__ __| | | | /\ | |
| |__) | | | | | | | | | / \ | |
| _ / | | | | | | | |/ /\ \ | |
| | \ \ _| |_ | | | |__| / ____ \| |____
|_| \_\_____| |_| \____/_/ \_\______|
nft minted! https://arweave.net/<arweave-hash>
nft id 1
nft owner 0x1804c8AB1F12E6bbf3894d4083f33e07309d1f38
Transaction: 0xcaf67e3f627c57652fa563a9b6f0f7fd27911409b3a7317165a6f5dfb5aff9fd
Gas used: 250851
Block Number: 3
Block Hash: 0xfad6f6743bd2d2751723be4c5be6251130b0f06a46ca61c8d77077169214f6a6
Block Time: "Wed, 6 Mar 2024 05:06:18 +0000"
eth_blockNumber
```
We can now confirm that the address of the Infernet Node (see the logged `node` parameter in the Anvil logs above)
matches the address of the node we setup by default for our Infernet Node.
We can also see that the owner of the NFT is `0x1804c8AB1F12E6bbf3894d4083f33e07309d1f38` and the NFT has been minted
and uploaded to Arweave.
Congratulations! 🎉 You have successfully minted an NFT!
## Minting an NFT from the UI
This project also includes a simple NextJS frontend that connects to the local Anvil node. This frontend allows you to
connect your wallet and mint an NFT by providing a prompt.
### Pre-requisites
Ensure that you have the following installed:
1. [NodeJS](https://nodejs.org/en)
2. A node package manager. This can be either `npm`, `yarn`, `pnpm` or `bun`. Of course, we recommend `bun`.
### Run the UI
From the top-level directory of the repository, simply run the following command:
```bash copy
make run-service project=prompt-to-nft service=ui
```
This will start the UI service. You can now navigate to `http://localhost:3001` in your browser to see the UI.
![ui image](./img/ui.png)j
### Connect your wallet
By clicking "Connect Wallet", your wallet will also ask you to switch to our anvil testnet. By accepting, you will be
connected.
![metamask prompt](./img/metamask-anvil.png)
Here, you should also see the NFT you minted earlier through the direct foundry script.
![ui just after connecting](./img/just-connected.png)
### Get Some ETH
To be able to mint the NFT, you will need some ETH. You can get some testnet ETH the "Request 1 ETH" button at
the top of the page. If your balance does not update, you can refresh the page.
### Enter a prompt & mint a new NFT
You can now enter a prompt and hit the "Generate NFT" button. A look at your anvil-node & infernet-node logs will
show you the transactions being sent and the NFT being minted. The newly-minted NFT will also appear in the UI.
![mint screen](./img/mint-screen.png)
Once your NFT's been generated, the UI will attempt to fetch it from arweave and display it. This usually takes less
than a minute.
![fetching from arweave](./img/fetching-from-arweave.png)
And there you have it! You've minted an NFT from a prompt using the UI!
![minted nft](./img/minted-nft.png)

View File

@ -0,0 +1,25 @@
FROM python:3.11-slim as builder
WORKDIR /app
ENV PYTHONUNBUFFERED 1
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONPATH src
WORKDIR /app
RUN apt-get update
RUN apt-get install -y git curl ffmpeg libsm6 libxext6
# install uv
ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
RUN /install.sh && rm /install.sh
COPY src/requirements.txt .
RUN /root/.cargo/bin/uv pip install --system --no-cache -r requirements.txt
COPY src src
ENTRYPOINT ["hypercorn", "app:create_app()"]
CMD ["-b", "0.0.0.0:3000"]

View File

@ -0,0 +1,19 @@
DOCKER_ORG := ritualnetwork
EXAMPLE_NAME := stablediffusion
TAG := $(DOCKER_ORG)/example-$(EXAMPLE_NAME)-infernet:latest
.phony: build run build-multiplatform
build:
@docker build -t $(TAG) .
port_mapping ?= 0.0.0.0:3002:3000
run:
docker run -p $(port_mapping) --gpus all -v ~/.cache:/root/.cache $(TAG)
# You may need to set up a docker builder, to do so run:
# docker buildx create --name mybuilder --bootstrap --use
# refer to https://docs.docker.com/build/building/multi-platform/#building-multi-platform-images for more info
build-multiplatform:
docker buildx build --platform linux/amd64,linux/arm64 -t $(TAG) --push .

View File

@ -0,0 +1,25 @@
from quart import Quart, request, Response
from stable_diffusion_workflow import StableDiffusionWorkflow
def create_app() -> Quart:
app = Quart(__name__)
workflow = StableDiffusionWorkflow()
workflow.setup()
@app.get("/")
async def hello():
return "Hello, World! I'm running stable diffusion"
@app.post("/service_output")
async def service_output():
req_data = await request.get_json()
image_bytes = workflow.inference(req_data)
return Response(image_bytes, mimetype="image/png")
return app
if __name__ == "__main__":
create_app().run(host="0.0.0.0", port=3002)

View File

@ -0,0 +1,10 @@
diffusers~=0.19
invisible_watermark~=0.1
transformers==4.36
accelerate~=0.21
safetensors~=0.3
Quart==0.19.4
jmespath==1.0.1
huggingface-hub==0.20.3
infernet_ml==0.1.0
PyArweave @ git+https://github.com/ritual-net/pyarweave.git

View File

@ -0,0 +1,86 @@
import io
from typing import Any
import torch
from diffusers import DiffusionPipeline
from huggingface_hub import snapshot_download
from infernet_ml.workflows.inference.base_inference_workflow import (
BaseInferenceWorkflow,
)
class StableDiffusionWorkflow(BaseInferenceWorkflow):
def __init__(
self,
*args: Any,
**kwargs: Any,
):
super().__init__(*args, **kwargs)
def do_setup(self) -> Any:
ignore = [
"*.bin",
"*.onnx_data",
"*/diffusion_pytorch_model.safetensors",
]
snapshot_download(
"stabilityai/stable-diffusion-xl-base-1.0", ignore_patterns=ignore
)
snapshot_download(
"stabilityai/stable-diffusion-xl-refiner-1.0",
ignore_patterns=ignore,
)
load_options = dict(
torch_dtype=torch.float16,
use_safetensors=True,
variant="fp16",
device_map="auto",
)
# Load base model
self.base = DiffusionPipeline.from_pretrained(
"stabilityai/stable-diffusion-xl-base-1.0", **load_options
)
# Load refiner model
self.refiner = DiffusionPipeline.from_pretrained(
"stabilityai/stable-diffusion-xl-refiner-1.0",
text_encoder_2=self.base.text_encoder_2,
vae=self.base.vae,
**load_options,
)
def do_preprocessing(self, input_data: dict[str, Any]) -> dict[str, Any]:
return input_data
def do_run_model(self, input: dict[str, Any]) -> bytes:
negative_prompt = input.get("negative_prompt", "disfigured, ugly, deformed")
prompt = input["prompt"]
n_steps = input.get("n_steps", 24)
high_noise_frac = input.get("high_noise_frac", 0.8)
image = self.base(
prompt=prompt,
negative_prompt=negative_prompt,
num_inference_steps=n_steps,
denoising_end=high_noise_frac,
output_type="latent",
).images
image = self.refiner(
prompt=prompt,
negative_prompt=negative_prompt,
num_inference_steps=n_steps,
denoising_start=high_noise_frac,
image=image,
).images[0]
byte_stream = io.BytesIO()
image.save(byte_stream, format="PNG")
image_bytes = byte_stream.getvalue()
return image_bytes
def do_postprocessing(self, input: Any, output: Any) -> Any:
return output

View File

@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}

36
projects/prompt-to-nft/ui/.gitignore vendored Normal file
View File

@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

View File

@ -0,0 +1,11 @@
.phony: run
run:
@PACKAGE_MANAGER=$$(command -v bun || command -v pnpm || command -v npm); \
if [ -z $$PACKAGE_MANAGER ]; then \
echo "No package manager found. Please install bun, pnpm, or npm."; \
exit 1; \
fi; \
echo "Using $$PACKAGE_MANAGER..."; \
$$PACKAGE_MANAGER install; \
$$PACKAGE_MANAGER run dev;

View File

@ -0,0 +1,40 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

Binary file not shown.

View File

@ -0,0 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
export default nextConfig;

View File

@ -0,0 +1,32 @@
{
"name": "ui",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --port 3001",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@rainbow-me/rainbowkit": "^2.0.0",
"@tanstack/react-query": "^5.22.2",
"next": "14.1.0",
"prettier": "^3.2.5",
"react": "^18",
"react-dom": "^18",
"viem": "2.x",
"wagmi": "^2.5.7"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"eslint": "^8",
"eslint-config-next": "14.1.0"
}
}

View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

After

Width:  |  Height:  |  Size: 630 B

View File

@ -0,0 +1,10 @@
import { ButtonHTMLAttributes, PropsWithChildren } from "react";
export const Button = (
p: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,
) => (
<button
className={"bg-emerald-700 font-light px-4 py-2 rounded-xl text-white"}
{...p}
/>
);

View File

@ -0,0 +1,15 @@
import { PropsWithChildren, useEffect, useState } from "react";
export const ClientRendered = ({ children }: PropsWithChildren) => {
// look at here:https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
if (!isClient) {
return null;
}
return <>{children}</>;
};

View File

@ -0,0 +1,38 @@
import { http, useAccount } from "wagmi";
import { createWalletClient, parseUnits } from "viem";
import { anvilNode } from "@/util/chain";
import { privateKeyToAccount } from "viem/accounts";
import { Button } from "@/components/Button";
export const FaucetButton = () => {
const account = useAccount();
const requestEth = async () => {
const { address: _address } = account;
if (!_address) {
console.log("No address found");
return;
}
const address = _address!;
const faucetAccount = privateKeyToAccount(
"0x7c852118294e51e653712a81e05800f419141751be58f605c371e15141b007a6",
);
const client = createWalletClient({
account: faucetAccount,
chain: anvilNode,
transport: http(),
});
await client.sendTransaction({
to: address,
value: parseUnits("1", 18),
});
};
return (
<Button onClick={requestEth}>
{account ? "Request 1 ETH" : "Connect Your Wallet"}
</Button>
);
};

View File

@ -0,0 +1,69 @@
import { useEffect, useState } from "react";
export const LoadImg = ({ url, tokenId }: { url: string; tokenId: number }) => {
const [loaded, setLoaded] = useState(false);
const [attempts, setAttempts] = useState(0);
useEffect(() => {
if (loaded) {
return;
}
let img = new Image();
const loadImg = () => {
console.log(`trying: ${attempts}`);
img = new Image();
img.src = url;
img.onload = () => {
setLoaded(true);
};
img.onerror = () => {
if (attempts < 100) {
// Set a max number of attempts
setTimeout(() => {
setAttempts((prev) => prev + 1);
loadImg(); // Retry loading the image
}, 1000); // Retry after 1 seconds
}
};
};
if (!loaded) {
loadImg();
}
// Cleanup function to avoid memory leaks
return () => {
img.onload = null;
img.onerror = null;
};
}, [url, loaded, attempts]);
return (
<div
className={
"bg-teal-600 bg-opacity-20 rounded-lg flex flex-1 justify-center items-center"
}
>
{loaded ? (
<img className={"rounded-lg"} src={url} alt={`NFT ${tokenId}`} />
) : (
<div className={""}>
<button
type="button"
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm rounded-lg
border border-transparent bg-emerald-700 text-white hover:bg-blue-700 disabled:opacity-50
disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
>
<span
className="animate-spin inline-block size-4 border-[2px] border-current border-t-transparent text-white
rounded-full"
role="status"
aria-label="loading"
></span>
Fetching from Arweave
</button>{" "}
</div>
)}
</div>
);
};

View File

@ -0,0 +1,28 @@
import { useAccount, useWriteContract } from "wagmi";
import { nftAbi } from "@/util/nftAbi";
import { NFT_ADDRESS } from "@/util/constants";
import {Button} from "@/components/Button";
export const MintButton = ({ prompt }: { prompt: string }) => {
const { address } = useAccount();
const { writeContract } = useWriteContract();
return (
<Button
onClick={() => {
if (!address) {
return;
}
writeContract({
chainId: 31337,
abi: nftAbi,
address: NFT_ADDRESS,
functionName: "mint",
args: [prompt, address],
});
}}
>
<span className={"text-xl"}>Generate NFT</span>
</Button>
);
};

View File

@ -0,0 +1,24 @@
import { useAccount, useReadContract } from "wagmi";
import { nftAbi } from "@/util/nftAbi";
import { NFT_ADDRESS } from "@/util/constants";
const NFTBalance = () => {
const { address } = useAccount();
const readContract = useReadContract({
address: NFT_ADDRESS,
account: address,
abi: nftAbi,
query: {
enabled: Boolean(address),
refetchInterval: 1000,
},
functionName: "counter",
});
if (!readContract.data) {
return <>loading...</>;
}
return <>your nft balance: {readContract.data.toString()}</>;
};

View File

@ -0,0 +1,56 @@
import { useAccount, useReadContract } from "wagmi";
import { NFT_ADDRESS } from "@/util/constants";
import { nftAbi } from "@/util/nftAbi";
import { NftImage } from "@/components/NftImage";
export const NftCollection = () => {
const { address } = useAccount();
const readContract = useReadContract({
address: NFT_ADDRESS,
account: address,
abi: nftAbi,
query: {
enabled: Boolean(address),
refetchInterval: 1000,
},
functionName: "counter",
});
if (readContract.data === 0n) {
return <>No NFTs</>;
}
console.log("read contract data", readContract.data);
if (!readContract.data) {
return <>Please connect your wallet.</>;
}
const counter = parseInt(readContract.data.toString());
const nftIds = new Array(counter).fill(0n).map((_, index) => index + 1);
console.log(`counter: ${counter}`);
return (
<div
className={
"bg-emerald-700 bg-opacity-10 p-3 flex-1 flex flex-col w-[100%]"
}
>
<h2 className={"text-2xl ml-2 my-3"}>The Collection</h2>
{nftIds.length === 0 ? (
<div className={"justify-center flex mt-20 text-opacity-80"}>
No NFTs minted.
</div>
) : (
<div className={"flex flex-wrap"}>
{nftIds.map((id) => {
return (
<NftImage key={id} tokenId={id} contractAddress={NFT_ADDRESS} />
);
})}
</div>
)}
</div>
);
};

View File

@ -0,0 +1,46 @@
import { Address } from "viem";
import { useAccount, useReadContract } from "wagmi";
import { nftAbi } from "@/util/nftAbi";
import { LoadImg } from "@/components/LoadImg";
export const NftImage = ({
tokenId,
contractAddress,
}: {
tokenId: number;
contractAddress: Address;
}) => {
const { address } = useAccount();
console.log(
"tokenid",
tokenId,
"contractAddress",
contractAddress,
"address",
address,
);
const { data } = useReadContract({
address: contractAddress,
abi: nftAbi,
account: address,
functionName: "tokenURI",
query: {
enabled: Boolean(address),
refetchInterval: 1000,
},
args: [BigInt(tokenId)],
});
console.log("nft image data", data);
if (!data) {
return <>loading...</>;
}
return (
<div className={"p-2 w-[100%] md:w-1/2 lg:w-1/3 flex"}>
<LoadImg url={data} tokenId={tokenId} />
</div>
);
};

View File

@ -0,0 +1,20 @@
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { WagmiProvider } from "wagmi";
import { config } from "@/util/config";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
const queryClient = new QueryClient();
export default function App({ Component, pageProps }: AppProps) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
<Component {...pageProps} />
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}

View File

@ -0,0 +1,13 @@
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}

View File

@ -0,0 +1,13 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
type Data = {
name: string;
};
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>,
) {
res.status(200).json({ name: "John Doe" });
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@ -0,0 +1,54 @@
import { useAccount } from "wagmi";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { FaucetButton } from "@/components/FaucetButton";
import { useState } from "react";
import { ClientRendered } from "@/components/ClientRendered";
import { MintButton } from "@/components/MintButton";
import { NftCollection } from "@/components/NftCollection";
import { addNetwork } from "@/util/chain";
import {Button} from "@/components/Button";
export default function Home() {
const account = useAccount();
const [prompt, setPrompt] = useState<string>(
"A picture of a golden retriever fighting sparta in the 300 movie",
);
return (
<ClientRendered>
<nav
className="
backdrop-blur-[17px] bg-white bg-opacity-10 fixed bg-fixed
dark:border-b-white dark:border-opacity-[15%] py-4
w-[calc(100%-36px)] rounded-[8px] px-[22px] mx-[18px]
mt-[30px] gap-3 flex flex-row justify-end"
>
<Button onClick={addNetwork}>Add Network</Button>
<FaucetButton />
<ConnectButton />
</nav>
<main
className={`flex min-h-screen flex-col items-center pt-[140px] gap-3`}
>
<div
className={"flex flex-row items-center gap-3 w-[80%] md:max-w-[80%]"}
>
<label htmlFor="prompt" className={"text-xl"}>
Your Prompt
</label>
<input
name={"prompt"}
className={
"p-2 border-2 rounded-md min-w-96 bg-opacity-20 bg-white border-0 flex-1"
}
type="text"
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
/>
</div>
<MintButton prompt={prompt} />
<NftCollection />
</main>
</ClientRendered>
);
}

View File

@ -0,0 +1,25 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
background: #0d0825;
color: white;
}
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}

View File

@ -0,0 +1,45 @@
import { type Chain } from "viem";
export const anvilNode = {
id: 31337,
name: "Anvil Node",
nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
rpcUrls: {
default: { http: ["http://localhost:8545"] },
},
blockExplorers: {
default: { name: "Etherscan", url: "https://etherscan.io" },
},
contracts: {
ensRegistry: {
address: "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e",
},
ensUniversalResolver: {
address: "0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da",
blockCreated: 16773775,
},
multicall3: {
address: "0xca11bde05977b3631167028862be2a173976ca11",
blockCreated: 14353601,
},
},
} as const satisfies Chain;
export const addNetwork = () => {
window.ethereum.request({
method: "wallet_addEthereumChain",
params: [
{
chainId: `0x${(31337).toString(16)}`,
rpcUrls: ["http://184.105.4.216:8545"],
chainName: "Anvil Node",
nativeCurrency: {
name: "Ethereum",
symbol: "ETH",
decimals: 18,
},
blockExplorerUrls: ["https://etherscan.io/"],
},
],
});
};

View File

@ -0,0 +1,26 @@
import "@rainbow-me/rainbowkit/styles.css";
import { connectorsForWallets, getDefaultConfig } from "@rainbow-me/rainbowkit";
import { anvilNode } from "@/util/chain";
import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
import { createConfig, http } from "wagmi";
const connectors = connectorsForWallets(
[
{
groupName: "Recommended",
wallets: [metaMaskWallet],
},
],
{
appName: "My RainbowKit App",
projectId: "YOUR_PROJECT_ID",
},
);
export const config = createConfig({
connectors,
chains: [anvilNode],
transports: {
[anvilNode.id]: http(),
},
});

View File

@ -0,0 +1,4 @@
import {Address} from "viem";
export const NFT_ADDRESS: Address =
"0x663F3ad617193148711d28f5334eE4Ed07016602";

View File

@ -0,0 +1,454 @@
export const nftAbi = <const>[
{
type: "constructor",
inputs: [
{
name: "coordinator",
type: "address",
internalType: "address",
},
],
stateMutability: "nonpayable",
},
{
type: "function",
name: "approve",
inputs: [
{
name: "spender",
type: "address",
internalType: "address",
},
{
name: "id",
type: "uint256",
internalType: "uint256",
},
],
outputs: [],
stateMutability: "nonpayable",
},
{
type: "function",
name: "arweaveHashes",
inputs: [
{
name: "",
type: "uint256",
internalType: "uint256",
},
],
outputs: [
{
name: "",
type: "string",
internalType: "string",
},
],
stateMutability: "view",
},
{
type: "function",
name: "balanceOf",
inputs: [
{
name: "owner",
type: "address",
internalType: "address",
},
],
outputs: [
{
name: "",
type: "uint256",
internalType: "uint256",
},
],
stateMutability: "view",
},
{
type: "function",
name: "counter",
inputs: [],
outputs: [
{
name: "",
type: "uint256",
internalType: "uint256",
},
],
stateMutability: "view",
},
{
type: "function",
name: "getApproved",
inputs: [
{
name: "",
type: "uint256",
internalType: "uint256",
},
],
outputs: [
{
name: "",
type: "address",
internalType: "address",
},
],
stateMutability: "view",
},
{
type: "function",
name: "isApprovedForAll",
inputs: [
{
name: "",
type: "address",
internalType: "address",
},
{
name: "",
type: "address",
internalType: "address",
},
],
outputs: [
{
name: "",
type: "bool",
internalType: "bool",
},
],
stateMutability: "view",
},
{
type: "function",
name: "mint",
inputs: [
{
name: "prompt",
type: "string",
internalType: "string",
},
{
name: "to",
type: "address",
internalType: "address",
},
],
outputs: [],
stateMutability: "nonpayable",
},
{
type: "function",
name: "name",
inputs: [],
outputs: [
{
name: "",
type: "string",
internalType: "string",
},
],
stateMutability: "view",
},
{
type: "function",
name: "nftCollection",
inputs: [],
outputs: [
{
name: "",
type: "uint256[]",
internalType: "uint256[]",
},
],
stateMutability: "view",
},
{
type: "function",
name: "ownerOf",
inputs: [
{
name: "id",
type: "uint256",
internalType: "uint256",
},
],
outputs: [
{
name: "owner",
type: "address",
internalType: "address",
},
],
stateMutability: "view",
},
{
type: "function",
name: "rawReceiveCompute",
inputs: [
{
name: "subscriptionId",
type: "uint32",
internalType: "uint32",
},
{
name: "interval",
type: "uint32",
internalType: "uint32",
},
{
name: "redundancy",
type: "uint16",
internalType: "uint16",
},
{
name: "node",
type: "address",
internalType: "address",
},
{
name: "input",
type: "bytes",
internalType: "bytes",
},
{
name: "output",
type: "bytes",
internalType: "bytes",
},
{
name: "proof",
type: "bytes",
internalType: "bytes",
},
],
outputs: [],
stateMutability: "nonpayable",
},
{
type: "function",
name: "safeTransferFrom",
inputs: [
{
name: "from",
type: "address",
internalType: "address",
},
{
name: "to",
type: "address",
internalType: "address",
},
{
name: "id",
type: "uint256",
internalType: "uint256",
},
],
outputs: [],
stateMutability: "nonpayable",
},
{
type: "function",
name: "safeTransferFrom",
inputs: [
{
name: "from",
type: "address",
internalType: "address",
},
{
name: "to",
type: "address",
internalType: "address",
},
{
name: "id",
type: "uint256",
internalType: "uint256",
},
{
name: "data",
type: "bytes",
internalType: "bytes",
},
],
outputs: [],
stateMutability: "nonpayable",
},
{
type: "function",
name: "setApprovalForAll",
inputs: [
{
name: "operator",
type: "address",
internalType: "address",
},
{
name: "approved",
type: "bool",
internalType: "bool",
},
],
outputs: [],
stateMutability: "nonpayable",
},
{
type: "function",
name: "supportsInterface",
inputs: [
{
name: "interfaceId",
type: "bytes4",
internalType: "bytes4",
},
],
outputs: [
{
name: "",
type: "bool",
internalType: "bool",
},
],
stateMutability: "view",
},
{
type: "function",
name: "symbol",
inputs: [],
outputs: [
{
name: "",
type: "string",
internalType: "string",
},
],
stateMutability: "view",
},
{
type: "function",
name: "tokenURI",
inputs: [
{
name: "tokenId",
type: "uint256",
internalType: "uint256",
},
],
outputs: [
{
name: "",
type: "string",
internalType: "string",
},
],
stateMutability: "view",
},
{
type: "function",
name: "transferFrom",
inputs: [
{
name: "from",
type: "address",
internalType: "address",
},
{
name: "to",
type: "address",
internalType: "address",
},
{
name: "id",
type: "uint256",
internalType: "uint256",
},
],
outputs: [],
stateMutability: "nonpayable",
},
{
type: "event",
name: "Approval",
inputs: [
{
name: "owner",
type: "address",
indexed: true,
internalType: "address",
},
{
name: "spender",
type: "address",
indexed: true,
internalType: "address",
},
{
name: "id",
type: "uint256",
indexed: true,
internalType: "uint256",
},
],
anonymous: false,
},
{
type: "event",
name: "ApprovalForAll",
inputs: [
{
name: "owner",
type: "address",
indexed: true,
internalType: "address",
},
{
name: "operator",
type: "address",
indexed: true,
internalType: "address",
},
{
name: "approved",
type: "bool",
indexed: false,
internalType: "bool",
},
],
anonymous: false,
},
{
type: "event",
name: "Transfer",
inputs: [
{
name: "from",
type: "address",
indexed: true,
internalType: "address",
},
{
name: "to",
type: "address",
indexed: true,
internalType: "address",
},
{
name: "id",
type: "uint256",
indexed: true,
internalType: "uint256",
},
],
anonymous: false,
},
{
type: "error",
name: "NotCoordinator",
inputs: [],
},
];

View File

@ -0,0 +1,20 @@
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
};
export default config;

View File

@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "es2020",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}