From 2cb0d97ad1d5a1a7260709a8c3ee8ad9196f68ae Mon Sep 17 00:00:00 2001 From: gwmccubbin Date: Thu, 26 Jan 2023 12:55:37 -0600 Subject: [PATCH 1/2] Initializes front end app for starter code --- src/App.js | 123 +---------------------------------------------------- 1 file changed, 1 insertion(+), 122 deletions(-) diff --git a/src/App.js b/src/App.js index 831a50d..a1582d9 100644 --- a/src/App.js +++ b/src/App.js @@ -17,106 +17,10 @@ import config from './config.json'; function App() { const [provider, setProvider] = useState(null) const [account, setAccount] = useState(null) - const [nft, setNFT] = useState(null) - - const [name, setName] = useState("") - const [description, setDescription] = useState("") - const [image, setImage] = useState(null) - const [url, setURL] = useState(null) - - const [message, setMessage] = useState("") - const [isWaiting, setIsWaiting] = useState(false) const loadBlockchainData = async () => { const provider = new ethers.providers.Web3Provider(window.ethereum) setProvider(provider) - - const network = await provider.getNetwork() - - const nft = new ethers.Contract(config[network.chainId].nft.address, NFT, provider) - setNFT(nft) - } - - const submitHandler = async (e) => { - e.preventDefault() - - if (name === "" || description === "") { - window.alert("Please provide a name and description") - return - } - - setIsWaiting(true) - - // Call AI API to generate a image based on description - const imageData = await createImage() - - // Upload image to IPFS (NFT.Storage) - const url = await uploadImage(imageData) - - // Mint NFT - await mintImage(url) - - setIsWaiting(false) - setMessage("") - } - - const createImage = async () => { - setMessage("Generating Image...") - - // You can replace this with different model API's - const URL = `https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2` - - // Send the request - const response = await axios({ - url: URL, - method: 'POST', - headers: { - Authorization: `Bearer ${process.env.REACT_APP_HUGGING_FACE_API_KEY}`, - Accept: 'application/json', - 'Content-Type': 'application/json', - }, - data: JSON.stringify({ - inputs: description, options: { wait_for_model: true }, - }), - responseType: 'arraybuffer', - }) - - const type = response.headers['content-type'] - const data = response.data - - const base64data = Buffer.from(data).toString('base64') - const img = `data:${type};base64,` + base64data // <-- This is so we can render it on the page - setImage(img) - - return data - } - - const uploadImage = async (imageData) => { - setMessage("Uploading Image...") - - // Create instance to NFT.Storage - const nftstorage = new NFTStorage({ token: process.env.REACT_APP_NFT_STORAGE_API_KEY }) - - // Send request to store image - const { ipnft } = await nftstorage.store({ - image: new File([imageData], "image.jpeg", { type: "image/jpeg" }), - name: name, - description: description, - }) - - // Save the URL - const url = `https://ipfs.io/ipfs/${ipnft}/metadata.json` - setURL(url) - - return url - } - - const mintImage = async (tokenURI) => { - setMessage("Waiting for Mint...") - - const signer = await provider.getSigner() - const transaction = await nft.connect(signer).mint(tokenURI, { value: ethers.utils.parseUnits("1", "ether") }) - await transaction.wait() } useEffect(() => { @@ -126,33 +30,8 @@ function App() { return (
+

Edit App.js to get started.

-
-
- { setName(e.target.value) }} /> - setDescription(e.target.value)} /> - -
- -
- {!isWaiting && image ? ( - AI generated image - ) : isWaiting ? ( -
- -

{message}

-
- ) : ( - <> - )} -
-
- - {!isWaiting && url && ( -

- View Metadata -

- )}
); } From 2b11d12fd594653ea860be00f4300dd052d0ab9c Mon Sep 17 00:00:00 2001 From: willemarswuog Date: Sat, 1 Apr 2023 21:38:28 +0200 Subject: [PATCH 2/2] Create launch.json --- .vscode/launch.json | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..e69de29