Basic OpenAI integration

sketches/2024-05-30-lookslike-prototype/src/apiKey.ts

@@ -0,0 +1,19 @@
+export function fetchApiKey() {
+  let apiKey = localStorage.getItem("apiKey");
+
+  if (!apiKey) {
+    // Prompt the user for the API key if it doesn't exist
+    const userApiKey = prompt("Please enter your API key:");
+
+    if (userApiKey) {
+      // Save the API key in localStorage
+      localStorage.setItem("apiKey", userApiKey);
+      apiKey = userApiKey;
+    } else {
+      // Handle the case when the user cancels or doesn't provide an API key
+      alert("API key not provided. Some features may not work.");
+    }
+  }
+
+  return apiKey;
+}

sketches/2024-05-30-lookslike-prototype/src/llm.ts

@@ -0,0 +1,58 @@
+import Instructor from "@instructor-ai/instructor";
+import OpenAI from "openai";
+import { fetchApiKey } from "./apiKey";
+
+const apiKey = fetchApiKey() as string
+
+const openai = new OpenAI({
+  apiKey: apiKey,
+  dangerouslyAllowBrowser: true,
+});
+
+let model = "gpt-4o";
+// let model = "gpt-4-turbo-preview";
+export const client = Instructor({
+  client: openai,
+  mode: "JSON",
+});
+
+export async function generateImage(prompt: string) {
+  const response = await openai.images.generate({
+    model: "dall-e-3",
+    prompt: prompt,
+    n: 1,
+    size: "1024x1024",
+  });
+  return response.data[0].url;
+}
+
+export async function doLLM(input: string, system: string, response_model: any) {
+  try {
+    return await client.chat.completions.create({
+      messages: [
+        { role: "system", content: system },
+        { role: "user", content: input },
+      ],
+      model,
+    });
+  } catch (error) {
+    console.error("Error analyzing text:", error);
+    return null;
+  }
+}
+
+export function grabViewTemplate(txt: string) {
+  return txt.match(/```vue\n([\s\S]+?)```/)?.[1];
+}
+
+export function grabJson(txt: string) {
+  return JSON.parse(txt.match(/```json\n([\s\S]+?)```/)[1]);
+}
+
+export function extractResponse(data: any) {
+  return data.choices[0].message.content;
+}
+
+export function extractImage(data: any) {
+  return data.data[0].url;
+}

sketches/2024-05-30-lookslike-prototype/src/main.ts

@@ -9,3 +9,12 @@ export * as ComButton from './components/com-button'
 export * as ComUnibox from './components/com-unibox'
 export * as ComEditor from './components/com-editor'
 export * as ComApp from './components/com-app'
+
+import { doLLM } from './llm'
+
+async function start() {
+  const result = await doLLM('hello world', '', null)
+  console.log(result)
+}
+
+start()