From 35cf58a5109d14a0281529f84afe2bd1f839ff2f Mon Sep 17 00:00:00 2001
From: Patricio Dieck <patricio.dieck@outlook.com>
Date: Sun, 19 Nov 2023 13:50:08 -0600
Subject: [PATCH] the dalle3 cover renders now on ui lesgoooo

---
 .../generate/GenerateStoryComponent.tsx       | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/components/generate/GenerateStoryComponent.tsx b/components/generate/GenerateStoryComponent.tsx
index f14b59718..02cf61efd 100644
--- a/components/generate/GenerateStoryComponent.tsx
+++ b/components/generate/GenerateStoryComponent.tsx
@@ -1,11 +1,14 @@
 'use-client';
+import Image from 'next/image';
 import chatOperations from 'operations/chatOperations';
+import imageOperations from 'operations/imageOperations';
 import { useState } from 'react';
 import GenerateStoryContextProvider, { IGenerateStoryContext } from './GenerateStoryContext';
 
 export default function GenerateStoryComponent() {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState();
+  const [cover, setCover] = useState('');
 
   const getStory = async () => {
     setLoading(true);
@@ -14,6 +17,16 @@ export default function GenerateStoryComponent() {
     setLoading(false);
   };
 
+  const getCover = async () => {
+    setLoading(true);
+    const data = await imageOperations.createImageAsync(
+      'make a cover image of the best book in the world for children'
+    );
+    const coverURL = data.text[0].url;
+    setCover(coverURL);
+    setLoading(false);
+  };
+
   return (
     <GenerateStoryContextProvider>
       {({ story }: IGenerateStoryContext) => {
@@ -26,7 +39,19 @@ export default function GenerateStoryComponent() {
               Run A New Story
             </button>
 
+            <button
+              onClick={getCover}
+              className="mb-10 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+            >
+              Get a Title Image
+            </button>
+
             {loading ? <div className="mb10">Loading...</div> : null}
+
+            {cover && <img src={cover} alt="" width={500} height={500} />}
+
+            {JSON.stringify(data)}
+
             {JSON.stringify(data)}
           </main>
         );