art for legal nifty

package.json

@@ -16,6 +16,7 @@
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@fontsource/alegreya-sans": "^4.5.9",
+    "@fontsource/raleway-dots": "^4.5.10",
     "@hookform/resolvers": "^2.9.6",
     "@pinata/sdk": "^1.1.26",
     "@rainbow-me/rainbowkit": "^0.5.0",
@@ -24,6 +25,7 @@
     "@tiptap/extension-link": "2.0.0-beta.43",
     "@tiptap/react": "2.0.0-beta.114",
     "@tiptap/starter-kit": "2.0.0-beta.191",
+    "canvas": "^2.9.3",
     "ethers": "^5.6.9",
     "framer-motion": "^6.5.1",
     "graphql": "^16.6.0",
@@ -35,6 +37,7 @@
     "react-hook-form": "^7.33.1",
     "react-icons": "^4.4.0",
     "react-tsparticles": "^2.2.3",
+    "seedrandom": "^3.0.5",
     "tsparticles": "^2.2.3",
     "wagmi": "^0.6.4",
     "zod": "^3.17.10"

pages/api/gen.ts

@@ -0,0 +1,70 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import path from 'path'
+const { registerFont, createCanvas } = require('canvas')
+const seedrandom = require('seedrandom')
+
+registerFont(path.resolve('./public/fonts/RalewayDots-Regular.ttf'), { family: 'RalewayDots' })
+
+// Dimensions for the image
+const width = 500
+const height = 500
+
+// Instantiate the canvas object
+const canvas = createCanvas(width, height)
+const ctx = canvas.getContext('2d')
+
+export default function handler(_req: NextApiRequest, res: NextApiResponse) {
+  const seed = seedrandom(_req.body.id).quick()
+  // Fill the rectangle with purple
+  ctx.fillStyle = '#000'
+  ctx.fillRect(0, 0, width, height)
+
+  ctx.font = "bold 24pt 'RalewayDots', cursive"
+  ctx.textAlign = 'start'
+  ctx.fillStyle = getNeonColor(seed)
+  ctx.fillText(`${_req.body.name} ~ ${_req.body.jurisdiction}`, 5, 35)
+
+  ctx.strokeStyle = getNeonColor(seed)
+  ctx.fillStyle = getNeonColor(seed + 10)
+
+  ctx.beginPath()
+  ctx.moveTo(0, 500)
+
+  // createBuilding(0, 30)
+  // createBuilding(30, 50)
+  let i = 0
+  let w = getRandomInt(30, 50)
+  while (i < 500) {
+    createBuilding(i, w)
+    w = getRandomInt(30, 50)
+    i = i + 30
+  }
+
+  // Write the image to file
+  const buffer = canvas.toBuffer('image/png')
+  res.setHeader('Content-Type', 'image/jpg')
+  res.send(buffer)
+}
+
+const getNeonColor = (seed: number) => {
+  return `hsl(${seed * 360}, ${seed * 19 + 80}%, ${seed * 9 + 50}%, 1)`
+}
+
+const createBuilding = (start: number, width: number) => {
+  const height = getRandomInt(200, 400)
+  createLine(start, height)
+  createLine(width, height)
+  createLine(width, 500)
+}
+
+const createLine = (x: number, y: number) => {
+  ctx.lineTo(x, y)
+  ctx.lineWidth = 1
+  ctx.stroke()
+}
+
+function getRandomInt(min: number, max: number) {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min) + min) //The maximum is exclusive and the minimum is inclusive
+}

pages/gen.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import type { NextPage } from 'next'
+import Image from 'next/image'
+import { Skeleton, Flex } from '@chakra-ui/react'
+import Layout from '~/layout'
+import { generateArt } from '~/utils'
+
+const Home: NextPage = () => {
+  const [name, setName] = useState('Ross LLC')
+  const [jurisdiction, setJurisdiction] = useState('Delaware')
+  const [id, setID] = useState(1)
+  const [image, setImage] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const gen = async () => {
+    setLoading(true)
+    if (!id || !name || !jurisdiction) return
+    try {
+      const res = await generateArt(name, jurisdiction, id)
+      if (res) {
+        setImage(res as string)
+      }
+    } catch (e) {
+      console.log('error', e)
+    }
+    setLoading(false)
+  }
+
+  return (
+    <Layout heading="Home" content="Wrap anything" back={false}>
+      <Flex
+        direction="column"
+        justify={'center'}
+        ml={['2.5%', '5%', '15%', '25%']}
+        mr={['2.5%', '5%', '15%', '25%']}
+        mt={['10%', '1.3%', '2.5%', '5%']}
+        mb={['10%', '1.3%', '2.5%', '5%']}
+        gap={5}
+      >
+        <Skeleton isLoaded={image !== ''} height="500px" width="500px">
+          {image !== '' && <Image src={image} height="500px" width="500px" />}
+        </Skeleton>
+        <input
+          value={name}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+          className="p-2 text-white rounded-lg w-[500px]"
+        />
+        <input
+          value={jurisdiction}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setJurisdiction(e.target.value)}
+          className="p-2 text-white rounded-lg w-[500px]"
+        />
+        <input
+          type="number"
+          value={id}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setID(Number(e.target.value))}
+          className="p-2 text-white rounded-lg w-[500px]"
+        />
+        <button
+          onClick={gen}
+          disabled={loading}
+          className=" w-[500px] bg-brand-50 hover:bg-brand-100 text-black text-2xl font-extrabold  rounded-lg py-2"
+        >
+          Generate!
+        </button>
+      </Flex>
+    </Layout>
+  )
+}
+
+export default Home