feat: publishing infernet-container-starter v0.2.0
2
projects/prompt-to-nft/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
# modal service outputs
|
||||
modal/outputs
|
3
projects/prompt-to-nft/container/.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
wallet
|
||||
config.json
|
||||
**/keyfile-arweave.json
|
27
projects/prompt-to-nft/container/Dockerfile
Normal 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"]
|
23
projects/prompt-to-nft/container/Makefile
Normal 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 .
|
91
projects/prompt-to-nft/container/README.md
Normal 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%).
|
53
projects/prompt-to-nft/container/config.sample.json
Normal 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": {}
|
||||
}
|
||||
]
|
||||
}
|
@ -0,0 +1,2 @@
|
||||
ARWEAVE_WALLET_FILE_PATH=
|
||||
IMAGE_GEN_SERVICE_URL=
|
0
projects/prompt-to-nft/container/src/__init__.py
Normal file
109
projects/prompt-to-nft/container/src/app.py
Normal 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)
|
5
projects/prompt-to-nft/container/src/requirements.txt
Normal 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
|
14
projects/prompt-to-nft/contracts/.gitignore
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
# Compiler files
|
||||
cache/
|
||||
out/
|
||||
|
||||
# Ignores development broadcast logs
|
||||
!/broadcast
|
||||
/broadcast/*/31337/
|
||||
/broadcast/**/dry-run/
|
||||
|
||||
# Docs
|
||||
docs/
|
||||
|
||||
# Dotenv file
|
||||
.env
|
14
projects/prompt-to-nft/contracts/Makefile
Normal 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)
|
7
projects/prompt-to-nft/contracts/foundry.toml
Normal 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
|
3
projects/prompt-to-nft/contracts/remappings.txt
Normal file
@ -0,0 +1,3 @@
|
||||
forge-std/=lib/forge-std/src
|
||||
infernet-sdk/=lib/infernet-sdk/src
|
||||
solmate/=lib/solmate/src
|
22
projects/prompt-to-nft/contracts/script/CallContract.s.sol
Normal 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();
|
||||
}
|
||||
}
|
26
projects/prompt-to-nft/contracts/script/Deploy.s.sol
Normal 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();
|
||||
}
|
||||
}
|
63
projects/prompt-to-nft/contracts/src/DiffusionNFT.sol
Normal 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);
|
||||
}
|
||||
}
|
BIN
projects/prompt-to-nft/img/fetching-from-arweave.png
Normal file
After Width: | Height: | Size: 506 KiB |
BIN
projects/prompt-to-nft/img/just-connected.png
Normal file
After Width: | Height: | Size: 500 KiB |
BIN
projects/prompt-to-nft/img/metamask-anvil.png
Normal file
After Width: | Height: | Size: 26 KiB |
BIN
projects/prompt-to-nft/img/mint-screen.png
Normal file
After Width: | Height: | Size: 394 KiB |
BIN
projects/prompt-to-nft/img/minted-nft.png
Normal file
After Width: | Height: | Size: 1001 KiB |
BIN
projects/prompt-to-nft/img/ui.png
Normal file
After Width: | Height: | Size: 19 KiB |
416
projects/prompt-to-nft/prompt-to-nft.md
Normal 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.
|
||||
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.
|
||||

|
||||
|
||||
Here, you should also see the NFT you minted earlier through the direct foundry script.
|
||||
|
||||

|
||||
|
||||
### 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.
|
||||
|
||||

|
||||
|
||||
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.
|
||||
|
||||

|
||||
|
||||
And there you have it! You've minted an NFT from a prompt using the UI!
|
||||

|
25
projects/prompt-to-nft/stablediffusion/Dockerfile
Normal 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"]
|
19
projects/prompt-to-nft/stablediffusion/Makefile
Normal 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 .
|
25
projects/prompt-to-nft/stablediffusion/src/app.py
Normal 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)
|
10
projects/prompt-to-nft/stablediffusion/src/requirements.txt
Normal 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
|
@ -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
|
3
projects/prompt-to-nft/ui/.eslintrc.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
36
projects/prompt-to-nft/ui/.gitignore
vendored
Normal 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
|
11
projects/prompt-to-nft/ui/Makefile
Normal 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;
|
40
projects/prompt-to-nft/ui/README.md
Normal 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.
|
BIN
projects/prompt-to-nft/ui/bun.lockb
Executable file
6
projects/prompt-to-nft/ui/next.config.mjs
Normal file
@ -0,0 +1,6 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
};
|
||||
|
||||
export default nextConfig;
|
32
projects/prompt-to-nft/ui/package.json
Normal 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"
|
||||
}
|
||||
}
|
6
projects/prompt-to-nft/ui/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
BIN
projects/prompt-to-nft/ui/public/favicon.ico
Normal file
After Width: | Height: | Size: 25 KiB |
1
projects/prompt-to-nft/ui/public/next.svg
Normal 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 |
1
projects/prompt-to-nft/ui/public/vercel.svg
Normal 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 |
10
projects/prompt-to-nft/ui/src/components/Button.tsx
Normal 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}
|
||||
/>
|
||||
);
|
15
projects/prompt-to-nft/ui/src/components/ClientRendered.tsx
Normal 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}</>;
|
||||
};
|
38
projects/prompt-to-nft/ui/src/components/FaucetButton.tsx
Normal 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>
|
||||
);
|
||||
};
|
69
projects/prompt-to-nft/ui/src/components/LoadImg.tsx
Normal 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>
|
||||
);
|
||||
};
|
28
projects/prompt-to-nft/ui/src/components/MintButton.tsx
Normal 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>
|
||||
);
|
||||
};
|
24
projects/prompt-to-nft/ui/src/components/NFTBalance.tsx
Normal 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()}</>;
|
||||
};
|
56
projects/prompt-to-nft/ui/src/components/NftCollection.tsx
Normal 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>
|
||||
);
|
||||
};
|
46
projects/prompt-to-nft/ui/src/components/NftImage.tsx
Normal 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>
|
||||
);
|
||||
};
|
20
projects/prompt-to-nft/ui/src/pages/_app.tsx
Normal 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>
|
||||
);
|
||||
}
|
13
projects/prompt-to-nft/ui/src/pages/_document.tsx
Normal 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>
|
||||
);
|
||||
}
|
13
projects/prompt-to-nft/ui/src/pages/api/hello.ts
Normal 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" });
|
||||
}
|
BIN
projects/prompt-to-nft/ui/src/pages/golden-skiing.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
54
projects/prompt-to-nft/ui/src/pages/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
25
projects/prompt-to-nft/ui/src/styles/globals.css
Normal 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;
|
||||
}
|
||||
}
|
45
projects/prompt-to-nft/ui/src/util/chain.ts
Normal 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/"],
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
26
projects/prompt-to-nft/ui/src/util/config.ts
Normal 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(),
|
||||
},
|
||||
});
|
4
projects/prompt-to-nft/ui/src/util/constants.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import {Address} from "viem";
|
||||
|
||||
export const NFT_ADDRESS: Address =
|
||||
"0x663F3ad617193148711d28f5334eE4Ed07016602";
|
454
projects/prompt-to-nft/ui/src/util/nftAbi.ts
Normal 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: [],
|
||||
},
|
||||
];
|
20
projects/prompt-to-nft/ui/tailwind.config.ts
Normal 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;
|
22
projects/prompt-to-nft/ui/tsconfig.json
Normal 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"]
|
||||
}
|