For the Hackathon, the following files were created:
pages/potw.jsx
components/NftCard.jsx
utils/queryLikes.js
The objective of this Hackathon was to create a contract that houses what's called the "Prompt of the Week", a suggested challenge to generate AI image and consequently mint Ceptor Collectibles in that theme. The contract can be found here:
https://sepolia.etherscan.io/address/0x8dfec628e42cc35665c621ad04e03dc627d15432
And a respository which houses the smart contract code can be found here:
https://github.com/ceptor-club/PromptOfTheWeek
The contract houses 10 prompts in an array. Chainlink VRF chooses the prompt and Chainlink Automation triggers the VRF request once a week. The prompt will then be showcased on localhost:3000/potw.jsx for persons to "like" (click on the heart) of their favorite NFT that aligns with the Prompt challenge. Each like is saved and uploaded to a mongo database where each update includes:
address of the account that liked the NFT contract Address of the NFT tokenId of the NFT Owner of the NFT
TODO:
Currently there is still the hurdle of delivering data from the mongo database to the contract to mint dice and airdrop to the winner. A RESTful API interface will need to be created in the smart contract-functions repository noted above.
In addition, thanks to a new lead, research on the Twitter API will resume to post to Twitter the Prompt of the Week and query likes instead of querying from a database.
Medieval Tinder Profile Pic of (Lawful Neutral) DnDDragonborn dragonborn, druid, wearing leather armor, wooden shield and holding a small dragon egg, meditating in a cave, fantasy illustration, unreal 5 render, 8k, in the style of Medieval Tinder Profile Pic
--prompt generated by uploading a level 1 Zeed (the flying star bird-druid) PDF See acceptablePDF/ folder in this repo for example.
Imagine, creating a new D&D Character on fastcharacter.com (just a few clicks, lets go!), copy it into our website and BOOM! Having a custom AI generated avatar minted and saved into Dragons Mine for for your level 1 Dragonborn, all in under a minute! Download for free or save your character as NFT with a random secret/public mission. Are we having fun yet?
-
Our database of dragonborn heroes is maintained as NFTs in our smart contract, with a nice royalty for our treasury in there. - @Cromewar put a sentence or two and a link here. -
-
In the past, we used Chainlink in our Smart Contract to provide VRF randomness. Link In the future we want to expand this random seed into unique image prompts, gameplay missions and DM/GM approved mission complete access control. See Our Github Repo for mo'
-
We used IPFS/NFT.Storage to provide decentralized, permanent and immutable storage for the image saved to NFT. link to code in front end, line 42 and more code at util for NFT Storage.
- Tweet @fifestarr "We're just getting started! ..." and/or try out our live demo and leave us your UX feedback here on Github as an issue.
follow these steps to run our front-end on your local machine.
- Git clone this front-end
git clone git@github.com:DnDnDiffusion/Front-end.git - If you want to contribute quickly, switch to the welcome branch and add your name to the guest list. Commit with your preferred "class name"
git commit -m "star druid", and then push the changes to welcome branch. - run
npm installin the Front-end directorysee Front-end setup below
- Open your browser to
http://localhost:3000/and enjoy! - Check that the back-end API is functioning by uploading the fastcharacter.com sheet pdf and generating an image.
replace this with a screenshot that's configured with our trained model.
npm installfrom the front-end directory to install dependencies
First, run the development server from the front-end directory:
npm run devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.jsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/getImage. This endpoint can be edited in pages/api/getImage.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
Use the utils/ folder to add general functions (such as generating prompts, or saving files to NFT.Storage)
Ideally, we have a frontend that:
-
Has a "download namedDragonborn.png" button so users that don't know about right clicking or screenshotting can easily get their picture onto their device.
-
Has a "Save as NFT" for permanant decentralized file storage
-
Has a "Connect Wallet" button to enable Save as NFT.
-
Displays form to send to backend for image processing ie. /getImage
-
Scrapes a PDF / sends a pdf to the back-end
-
Displays response of images (choices) for the users character avatar
-
Serverside API call to backend / back-up to nft.storage
-
After character selection, send and save chosen character with character sheet
-
Fully responsive hamburger menu and mobile-friendly
-
Image selection UX highlighting and features
- stuff about the endpoint
Our backend endpoint information sprang forth from the mind and cloud of Somya the Dragonborn Cleric. Here is a link to our Documentation page on Notion, check out "Dragonborn Backend". Happy adventuring!
- Somya & Tippi's advice about Front-end to back-end connection
Just do it! And ask q in the group :D
-
using next/Image everywhere instead of img
- using at least one cool next/Image feature
-
poetic product roadmaps by Tippi
-
collect emails and save to db
make sure it sends to api like the other fields then, save the email to the db in the db you can have something like {
email: <email>,
useCount: <incrementing number>,
...etc
}
then every time they run the app, you increment the number dataaa
This is a Next.js project bootstrapped with create-next-app.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Check out our Next.js deployment documentation for more details.
Tippi had trouble connecting his local stable diffusion to the front-end and we couldn't integrate with the flask pdf uploader.
Thinking this is a good UI.
-- giving the words "level 1" to stable diffusion in the image prompt.