Update to gpt-4o

SawyerHood · May 18, 2024 · 1b2079d · 1b2079d
1 parent cc9cf80
commit 1b2079d
Show file tree

Hide file tree

Showing 3 changed files with 239 additions and 65 deletions.
diff --git a/app/api/toHtml/route.ts b/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;
-};