use openAI to generate story

packages/nextjs/.env.example

@@ -12,3 +12,5 @@
 NEXT_PUBLIC_ALCHEMY_API_KEY=
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 
+OPENAI_API_KEY=
+

packages/nextjs/app/api/mint/route.ts

@@ -1,5 +1,6 @@
 // app/api/mint/route.ts
 import { NextResponse } from "next/server";
+import OpenAI from "openai";
 import { createWalletClient, fallback, http, verifyMessage } from "viem";
 import { privateKeyToAccount } from "viem/accounts";
 import deployedContracts from "~~/contracts/deployedContracts";
@@ -21,6 +22,40 @@ const walletClient = createWalletClient({
   account: privateKeyToAccount(wallet_private_key),
 });
 
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+async function generateFrogStory(frogStats: FrogStats): Promise<string> {
+  const prompt = `
+Create a short, mystical story (max 4 sentences) about a priest juicing this frog in a magical ritual. Use these attributes in creative ways:
+
+Name: ${frogStats.name}
+Beauty: ${frogStats.beauty}/10
+Intelligence: ${frogStats.intelligence}/10
+Jump: ${frogStats.jump}/10
+Speed: ${frogStats.speed}/10
+Rarity: ${frogStats.rarity}/10
+Biome: ${frogStats.biome}
+
+Description: ${frogStats.description}
+`;
+
+  try {
+    const completion = await openai.chat.completions.create({
+      messages: [{ role: "user", content: prompt }],
+      model: "gpt-3.5-turbo",
+      temperature: 0.7,
+      max_tokens: 150,
+    });
+
+    return completion.choices[0].message.content || "Failed to generate story";
+  } catch (error) {
+    console.error("Error generating story:", error);
+    return "In a mystical ceremony, a priest encountered this remarkable frog.";
+  }
+}
+
 type ProofData = {
   pi_a: string[];
   pi_b: string[][]; // Array of arrays for pi_b
@@ -127,11 +162,17 @@ export async function POST(req: Request) {
       ],
     });
 
+    const story = await generateFrogStory({
+      ...body.frogStats,
+      description,
+    });
+
     return NextResponse.json(
       {
         success: true,
         message: "NFT minted successfully",
         txHash: hash,
+        story,
       },
       { status: 200 },
     );

packages/nextjs/app/zpass/page.tsx

@@ -74,6 +74,8 @@ const ZuAuth = () => {
   const { address: connectedAddress } = useAccount();
   const [z, setZ] = useState<ParcnetAPI | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [story, setStory] = useState<string | null>(null);
+  const [mintedFrogName, setMintedFrogName] = useState<string | null>(null);
 
   const { signMessageAsync } = useSignMessage();
 
@@ -108,8 +110,9 @@ const ZuAuth = () => {
   const handleMintNFT = async () => {
     try {
       if (!z) return notification.error("Please authenticate first");
-
       setIsLoading(true);
+      setStory(null); // Reset story when starting new mint
+
       const result = await z.gpc.prove({
         request: {
           pods: {
@@ -195,6 +198,8 @@ const ZuAuth = () => {
         }
 
         console.log("The data is", data);
+        setStory(data.story);
+        setMintedFrogName(frogName as string);
         notification.success(`Successfully minted Frog NFT: ${frogName}`);
       }
     } catch (e) {
@@ -207,16 +212,28 @@ const ZuAuth = () => {
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full text-sm flex space-x-2">
-        {!z && (
-          <button onClick={handleAuth} className="btn btn-primary" disabled={isLoading}>
-            {isLoading ? "Connecting..." : "Connect Zupass"}
-          </button>
-        )}
-        {z && (
-          <button onClick={handleMintNFT} className="btn btn-primary" disabled={isLoading}>
-            {isLoading ? "Minting..." : "Mint Frog NFT"}
-          </button>
+      <div className="z-10 max-w-5xl w-full flex flex-col gap-8">
+        <div className="flex space-x-2">
+          {!z && (
+            <button onClick={handleAuth} className="btn btn-primary" disabled={isLoading}>
+              {isLoading ? "Connecting..." : "Connect Zupass"}
+            </button>
+          )}
+          {z && (
+            <button onClick={handleMintNFT} className="btn btn-primary" disabled={isLoading}>
+              {isLoading ? "Minting..." : "Mint Frog NFT"}
+            </button>
+          )}
+        </div>
+
+        {story && mintedFrogName && (
+          <div className="card w-full bg-base-200 shadow-xl">
+            <div className="card-body">
+              <h2 className="card-title text-2xl font-bold text-primary">The Tale of {mintedFrogName}</h2>
+              <div className="divider"></div>
+              <p className="text-lg italic leading-relaxed">{story}</p>
+            </div>
+          </div>
         )}
       </div>
     </main>

packages/nextjs/package.json

@@ -31,6 +31,7 @@
     "next": "~14.0.4",
     "next-themes": "~0.2.1",
     "nprogress": "~0.2.0",
+    "openai": "^4.71.0",
     "qrcode.react": "~3.1.0",
     "react": "~18.2.0",
     "react-copy-to-clipboard": "~5.1.0",

yarn.lock

@@ -2419,6 +2419,7 @@ __metadata:
     next: ~14.0.4
     next-themes: ~0.2.1
     nprogress: ~0.2.0
+    openai: ^4.71.0
     postcss: ~8.4.16
     prettier: ~2.8.4
     qrcode.react: ~3.1.0
@@ -3069,6 +3070,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node-fetch@npm:^2.6.4":
+  version: 2.6.11
+  resolution: "@types/node-fetch@npm:2.6.11"
+  dependencies:
+    "@types/node": "*"
+    form-data: ^4.0.0
+  checksum: 180e4d44c432839bdf8a25251ef8c47d51e37355ddd78c64695225de8bc5dc2b50b7bb855956d471c026bb84bd7295688a0960085e7158cbbba803053492568b
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:*":
   version: 22.7.4
   resolution: "@types/node@npm:22.7.4"
@@ -3106,6 +3117,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^18.11.18":
+  version: 18.19.64
+  resolution: "@types/node@npm:18.19.64"
+  dependencies:
+    undici-types: ~5.26.4
+  checksum: e7680215b03c9bee8a33947f03d06048e8e460f23b1b7b29c45350cf437faa5f8fcb7d8c3eb8dfec8427923e7a184df42bc710c1b6252b4852e3ed7064c6228f
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^8.0.0":
   version: 8.10.66
   resolution: "@types/node@npm:8.10.66"
@@ -4440,6 +4460,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"agentkeepalive@npm:^4.2.1":
+  version: 4.5.0
+  resolution: "agentkeepalive@npm:4.5.0"
+  dependencies:
+    humanize-ms: ^1.2.1
+  checksum: 13278cd5b125e51eddd5079f04d6fe0914ac1b8b91c1f3db2c1822f99ac1a7457869068997784342fe455d59daaff22e14fb7b8c3da4e741896e7e31faf92481
+  languageName: node
+  linkType: hard
+
 "aggregate-error@npm:^3.0.0":
   version: 3.1.0
   resolution: "aggregate-error@npm:3.1.0"
@@ -8113,6 +8142,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"form-data-encoder@npm:1.7.2":
+  version: 1.7.2
+  resolution: "form-data-encoder@npm:1.7.2"
+  checksum: aeebd87a1cb009e13cbb5e4e4008e6202ed5f6551eb6d9582ba8a062005178907b90f4887899d3c993de879159b6c0c940af8196725b428b4248cec5af3acf5f
+  languageName: node
+  linkType: hard
+
 "form-data@npm:^2.2.0":
   version: 2.5.1
   resolution: "form-data@npm:2.5.1"
@@ -8135,6 +8171,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"formdata-node@npm:^4.3.2":
+  version: 4.4.1
+  resolution: "formdata-node@npm:4.4.1"
+  dependencies:
+    node-domexception: 1.0.0
+    web-streams-polyfill: 4.0.0-beta.3
+  checksum: d91d4f667cfed74827fc281594102c0dabddd03c9f8b426fc97123eedbf73f5060ee43205d89284d6854e2fc5827e030cd352ef68b93beda8decc2d72128c576
+  languageName: node
+  linkType: hard
+
 "fp-ts@npm:1.19.3":
   version: 1.19.3
   resolution: "fp-ts@npm:1.19.3"
@@ -9114,6 +9160,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"humanize-ms@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "humanize-ms@npm:1.2.1"
+  dependencies:
+    ms: ^2.0.0
+  checksum: 9c7a74a2827f9294c009266c82031030eae811ca87b0da3dceb8d6071b9bde22c9f3daef0469c3c533cc67a97d8a167cd9fc0389350e5f415f61a79b171ded16
+  languageName: node
+  linkType: hard
+
 "husky@npm:~8.0.3":
   version: 8.0.3
   resolution: "husky@npm:8.0.3"
@@ -10907,7 +10962,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:^2.1.1, ms@npm:^2.1.3":
+"ms@npm:^2.0.0, ms@npm:^2.1.1, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
@@ -11095,6 +11150,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-domexception@npm:1.0.0":
+  version: 1.0.0
+  resolution: "node-domexception@npm:1.0.0"
+  checksum: ee1d37dd2a4eb26a8a92cd6b64dfc29caec72bff5e1ed9aba80c294f57a31ba4895a60fd48347cf17dd6e766da0ae87d75657dfd1f384ebfa60462c2283f5c7f
+  languageName: node
+  linkType: hard
+
 "node-emoji@npm:^1.10.0":
   version: 1.11.0
   resolution: "node-emoji@npm:1.11.0"
@@ -11484,6 +11546,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"openai@npm:^4.71.0":
+  version: 4.71.0
+  resolution: "openai@npm:4.71.0"
+  dependencies:
+    "@types/node": ^18.11.18
+    "@types/node-fetch": ^2.6.4
+    abort-controller: ^3.0.0
+    agentkeepalive: ^4.2.1
+    form-data-encoder: 1.7.2
+    formdata-node: ^4.3.2
+    node-fetch: ^2.6.7
+  peerDependencies:
+    zod: ^3.23.8
+  peerDependenciesMeta:
+    zod:
+      optional: true
+  bin:
+    openai: bin/cli
+  checksum: ba4b3772e806c59b1ea1235a40486392c797906e45dd97914f2cd819b4be2996e207c7b7c67d43236692300354f4e9ffa8ebfca6e97d3555655ebf0f3f01e3f2
+  languageName: node
+  linkType: hard
+
 "optionator@npm:^0.8.1":
   version: 0.8.3
   resolution: "optionator@npm:0.8.3"
@@ -14620,6 +14704,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici-types@npm:~5.26.4":
+  version: 5.26.5
+  resolution: "undici-types@npm:5.26.5"
+  checksum: 3192ef6f3fd5df652f2dc1cd782b49d6ff14dc98e5dced492aa8a8c65425227da5da6aafe22523c67f035a272c599bb89cfe803c1db6311e44bed3042fc25487
+  languageName: node
+  linkType: hard
+
 "undici-types@npm:~6.19.2":
   version: 6.19.8
   resolution: "undici-types@npm:6.19.8"
@@ -15121,6 +15212,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-streams-polyfill@npm:4.0.0-beta.3":
+  version: 4.0.0-beta.3
+  resolution: "web-streams-polyfill@npm:4.0.0-beta.3"
+  checksum: dfec1fbf52b9140e4183a941e380487b6c3d5d3838dd1259be81506c1c9f2abfcf5aeb670aeeecfd9dff4271a6d8fef931b193c7bedfb42542a3b05ff36c0d16
+  languageName: node
+  linkType: hard
+
 "web-vitals@npm:0.2.4":
   version: 0.2.4
   resolution: "web-vitals@npm:0.2.4"