DALL-E returns images- something fucky w response

app/api/open-ai/image/route.ts

@@ -20,6 +20,7 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
 
       const { data } = imageCompletion;
       console.log({ data });
+      console.log('THIS IS THE DALLE IMAGE:', data[0].url);
 
       return new NextResponse(JSON.stringify({ text: data }), {
         status: 200

components/generate/GenerateStoryContext.tsx

@@ -27,6 +27,7 @@ function GenerateStoryContextProvider({ children }: { children: PropsWithChildre
   const [loading, setLoading] = useState<boolean>(false);
   const [story, setStory] = useState<IStory>();
   const [titleImage, setTitleImage] = useState<string>();
+  //TODO (Patricio) images will just be merged with story in the context, so we don't need to pass them down to the component
 
   // TODO (Patricio->Benson): should we memoize the titleImage like this? It takes the image a second to come back from the API...
   const value = useMemo<IGenerateStoryContext>(
@@ -45,6 +46,7 @@ function GenerateStoryContextProvider({ children }: { children: PropsWithChildre
   const getStoryAsync = useCallback(async () => {
     setLoading(true);
     const story = await chatOperations.createStoryAsync();
+    //const storyWithImages = mergeImages(story);
     const titleImage = await imageOperations.createImageAsync(story.introduction);
     setTitleImage(titleImage);
     setStory(story);

components/generate/utils.tsx

@@ -1,5 +1,6 @@
 import { IStory } from 'operations/chatOperations';
 
+//TODO (Patricio/Benson): make decision: should this create image for each page item? or for whole story? should it be called in context or in component? I ask this bc we need different images for title and for each page, with different formatting inside of the myDocument...
 function mergeImages(story: IStory, titleImage: string): IStory {
   return {
     ...story,

components/pdf/StoryPDFViewer.tsx

@@ -115,6 +115,10 @@ Font.register({
   ]
 });
 
+// const imgURL = 'https://oaidalleapiprodscus.blob.core.windows.net/private/org-pxRHHmesRMqKmtS7jjETVyk3/user-HhW2JRuIlirnomqLUWzzHAv3/img-YVMtH4dWy9GzTS3jZuVhimJ8.png?st=2023-11-20T18%3A24%3A16Z&se=2023-11-20T20%3A24%3A16Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-11-20T17%3A08%3A24Z&ske=2023-11-21T17%3A08%3A24Z&sks=b&skv=2021-08-06&sig=GB9P0duWfauJt0xiiXwPStScSadBsSoSxS1jRCZg29c%3D';
+
+// TODO- this image works- but for some reason the DALLE ones dont render
+
 const imgURL =
   'https://cdn.discordapp.com/attachments/989274756341706822/1175024578578366534/pinturillu_sian_couple_of_men_illustration_fantasy_Charlie_Bowa_1c51f19c-d5b9-4b53-b32f-e5468912bd1d.png?ex=6569b9ea&is=655744ea&hm=8dd0e4e5653bb9f7a7330f745983035f93e1891279351efe2dd6be7657987d88&';
 
@@ -124,7 +128,7 @@ Right now for the Story viewer just render all the text at the bottom until we c
 with a solidified way at dispersing the text throughout the page.
 */
 
-// TODO(Benson -> Patricio): replace hardcoded images.
+///TODO hardcoded images replaced w titleImage- titleimage prop doesnt seem to render inside of the Image component in the Document function
 const Document = ({ pages }: { pages: { text: string }[] }, titleImage: string) => {
   return (
     <PDFDocument>
@@ -134,7 +138,7 @@ const Document = ({ pages }: { pages: { text: string }[] }, titleImage: string)
             <View key={index} style={{ ...styles.section, bottom: '10%' }}>
               <Text>{text}</Text>
             </View>
-            <Image src={titleImage} style={styles.image} />
+            <Image src={imgURL} style={styles.image} />
           </Page>
         );
       })}

operations/imageOperations.ts

@@ -7,11 +7,14 @@ const generateRequestPayload = (prompt: string) => ({
 
 // TODO(Benson): Type the interface returned from open ai
 
+function getFunctionCallArguments<T>(response: any) {
+  return response.data[0].url;
+}
+
 async function createImageAsync(prompt: string): Promise<any> {
   const data = await post('/api/open-ai/image', generateRequestPayload(prompt));
-  console.log({ data });
-  // return getFunctionCallArguments<any>(data);
-  return data;
+  console.log('return payload of DALLE', data);
+  return getFunctionCallArguments<string>(data);
 }
 
 export default { createImageAsync };