Skip to content

DnDnDiffusion/Front-end

Repository files navigation

D&D Diffusion => Operation Dragonborn => ???

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.

Operation Dragonborn Screenshot

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?

Blockchain, Chainlink & IPFS

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

Getting Started (for developers)

  1. Tweet @fifestarr "We're just getting started! ..." and/or try out our live demo and leave us your UX feedback here as an issue.

follow these steps to run our front-end on your local machine.

  1. Git clone this front-end git clone [email protected]:DnDnDiffusion/Front-end.git
  2. If you want to contribute quickly, fork this repo, checkout the welcome branch and add your name to the ContributorsList.md. Commit with your preferred D&D "class name" git commit -m "star druid", and then push the changes to welcome branch. Come back and make a Pull Request (PR) to the staging branch.
  3. run npm install in the Front-end directory

see Front-end setup below

  1. Open your browser to http://localhost:3000/ and enjoy!
  2. Check that the back-end API is functioning by uploading the fastcharacter.com sheet pdf and generating an image. image

replace this with a screenshot that's configured with our trained model.

Front-end setup

npm install or yarn from the front-end directory

First, run the development server from the front-end directory:

npm run dev
# or
yarn dev

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

What should I build to improve the UI/UX?

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

    [x] Has a "Save as NFT" for permanant decentralized file storage

    [] Has a "Connect Wallet" button to enable Save as NFT.

    [x] Displays form to send to backend for image processing ie. /getImage

    [x] 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

endpoint documentation

[x] stuff about the endpoint

Our backend endpoint information is somewhat centralized in the mind and cloud of Somya the Dragonborn Cleric. Here is a link to our R&D page on Notion. Happy adventuring!

[] Somya & Tippi's advice about Front-end to back-end connection

-- @Somya, how can I fix these issues while you're sleeping? Can you provide some step-by-step instructions or meet with me in around.co to teach me? -- Tippi

Roadmaps

[] using next/Image everywhere instead of img, using at least one cool Image feature

[x] 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.

Learn More

To learn more about Next.js, take a look at the following resources:

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.

Common errors

image Tippi had trouble connecting his local stable diffusion to the front-end and we couldn't integrate with the flask pdf uploader.

image Thinking this is a good UI.

-- giving the words "level 1" to stable diffusion in the image prompt.