Dev

.gitignore

@@ -0,0 +1 @@
+canva-apps-sdk-starter-kit/.env

canva-apps-sdk-starter-kit/.gitignore

@@ -1 +1,4 @@
 node_modules/
+bun.lock
+.env
+canva-apps-sdk-starter-kitcopy/

canva-apps-sdk-starter-kit/examples/fetch/app.tsx

@@ -10,7 +10,7 @@ import { auth } from "@canva/user";
 import React, { useState } from "react";
 import styles from "styles/components.css";
 
-const BACKEND_URL = `${BACKEND_HOST}/custom-route`;
+const BACKEND_URL = `${BACKEND_HOST}/openai`;
 
 type State = "idle" | "loading" | "success" | "error";
 
@@ -25,9 +25,10 @@ export const App = () => {
       setState("loading");
       const token = await auth.getCanvaUserToken();
       const res = await fetch(BACKEND_URL, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
+        method: "POST",
+        body: JSON.stringify({prompt: 'give me a poem'}),
+        headers: new Headers({'content-type': 'application/json', 'Authorization': `Bearer ${token}`}),
+
       });
 
       const body = await res.json();

canva-apps-sdk-starter-kit/examples/fetch/backend/server.ts

@@ -3,6 +3,28 @@ import * as express from "express";
 import * as cors from "cors";
 import { createBaseServer } from "../../../utils/backend/base_backend/create";
 import { createJwtMiddleware } from "../../../utils/backend/jwt_middleware";
+// const { Configuration, OpenAIApi } = require("openai");
+
+import OpenAI from "openai";
+
+//   apiKey: process.env.OPENAI_API_KEY, // Ensure you have your API key stored in the environment variables
+export async function submitPromptAndGetResponse(prompt) {
+  try {
+    const completion = await open_ai.chat.completions.create({
+      messages: [{ role: "system", content: "You are a helpful assistant." }, {
+        "role": "user",
+        "content": prompt
+    }
+    ],
+      model: "gpt-4-turbo-preview",
+    });
+
+    return completion.choices[0];
+
+  } catch (error) {
+    console.error("Error in submitting prompt and getting response:", error);
+  }
+}
 
 async function main() {
   // TODO: Set the CANVA_APP_ID environment variable in the project's .env file
@@ -16,6 +38,8 @@ async function main() {
 
   const router = express.Router();
 
+
+
   /**
    * TODO: Configure your CORS Policy
    *
@@ -61,6 +85,31 @@ async function main() {
     });
   });
 
+  // const configuration = new Configuration({
+  //   apiKey: process.env.OPENAI_KEY, // Ensure your API key is stored securely
+  // });
+  // const openai = new OpenAIApi(configuration);
+
+  router.post("/openai", jwtMiddleware, async (req, res) => {
+    if (req.body.prompt == "") {
+      return res.status(400).json({ error: 'Prompt is required.' });
+    }
+    try {
+      // const openaiResponse = await openai.createCompletion({
+      //   model: "text-davinci-003",
+      //   prompt: prompt,
+      //   max_tokens: 150
+      // });
+      const response = await submitPromptAndGetResponse(req.body.prompt);
+      res.json({"response": response});
+      console.log('OpenAI POST in server.ts');
+    } catch (error) {
+      console.error('Error calling OpenAI API:');
+      res.status(500).json({ error: 'Failed to call OpenAI API.' });
+    }
+  });
+
+
   const server = createBaseServer(router);
   server.start(process.env.CANVA_BACKEND_PORT);
 }

canva-apps-sdk-starter-kit/examples/native_group_elements/app.tsx

@@ -1,32 +1,42 @@
 import React from "react";
 import { Button, Rows, Text } from "@canva/app-ui-kit";
-import { addNativeElement } from "@canva/design";
+import { addNativeElement, addPage } from "@canva/design";
 import styles from "styles/components.css";
 
 export const App = () => {
-  const handleClick = () => {
-    addNativeElement({
-      type: "GROUP",
-      children: [
+  async function handleClick() {
+    await addPage({
+      elements: [
+        // headerElement
         {
-          type: "EMBED",
-          url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
-          width: 100,
-          height: 100,
-          top: 0,
-          left: 0,
-        },
-        {
-          type: "EMBED",
-          url: "https://www.youtube.com/watch?v=o-YBDTqX_ZU",
-          width: 100,
-          height: 100,
-          top: 0,
-          left: 100,
+          type: "GROUP",
+          children: [
+            {
+              type: "TEXT",
+              children: ["Conclusion TITLE TITLE TITLE"], // Center align -- run calculations to find center of page - content offset
+              top: 0,
+              left: 0,
+              width: 1200,
+              fontSize: 90,
+              fontWeight: "bold",
+            },
+            {
+              type: "TEXT",
+              children: ["Islamophobia poses a significant "], // Center align -- run calculations to find center of page - content offset
+              top: 0,
+              left: 0,
+              width: 200,
+              fontSize: 36,
+            },
+          ],
+          top: 200, //1080
+          left: 300, //1920
+          width: 600,
+          height: "auto",
         },
       ],
     });
-  };
+  }
 
   return (
     <div className={styles.scrollContainer}>