the dalle3 cover renders now on ui lesgoooo

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>
         );