[pull] main from SawyerHood:main

app/api/toHtml/route.ts

@@ -1,12 +1,16 @@
+import { OpenAI } from "openai";
+
 const systemPrompt = `You are an expert tailwind developer. A user will provide you with a
  low-fidelity wireframe of an application and you will return 
  a single html file that uses tailwind to create the website. Use creative license to make the application more fleshed out.
 if you need to insert an image, use placehold.co to create a placeholder image. Respond only with the html file.`;
 
 export async function POST(request: Request) {
+  const openai = new OpenAI();
   const { image } = await request.json();
-  const body: GPT4VCompletionRequest = {
-    model: "gpt-4-vision-preview",
+
+  const resp = await openai.chat.completions.create({
+    model: "gpt-4o",
     max_tokens: 4096,
     messages: [
       {
@@ -20,65 +24,18 @@ export async function POST(request: Request) {
             type: "image_url",
             image_url: { url: image, detail: "high" },
           },
-          "Turn this into a single html file using tailwind.",
+          {
+            type: "text",
+            text: "Turn this into a single html file using tailwind.",
+          },
         ],
       },
     ],
-  };
-
-  let json = null;
-  try {
-    const resp = await fetch("https://api.openai.com/v1/chat/completions", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
-      },
-      body: JSON.stringify(body),
-    });
-    json = await resp.json();
-  } catch (e) {
-    console.log(e);
-  }
+  });
 
-  return new Response(JSON.stringify(json), {
+  return new Response(JSON.stringify(resp), {
     headers: {
       "content-type": "application/json; charset=UTF-8",
     },
   });
 }
-
-type MessageContent =
-  | string
-  | (
-      | string
-      | {
-          type: "image_url";
-          image_url: string | { url: string; detail: "low" | "high" | "auto" };
-        }
-    )[];
-
-export type GPT4VCompletionRequest = {
-  model: "gpt-4-vision-preview";
-  messages: {
-    role: "system" | "user" | "assistant" | "function";
-    content: MessageContent;
-    name?: string | undefined;
-  }[];
-  functions?: any[] | undefined;
-  function_call?: any | undefined;
-  stream?: boolean | undefined;
-  temperature?: number | undefined;
-  top_p?: number | undefined;
-  max_tokens?: number | undefined;
-  n?: number | undefined;
-  best_of?: number | undefined;
-  frequency_penalty?: number | undefined;
-  presence_penalty?: number | undefined;
-  logit_bias?:
-    | {
-        [x: string]: number;
-      }
-    | undefined;
-  stop?: (string[] | string) | undefined;
-};