Init to win it

Author: zackproser

README.md

@@ -1,36 +1,80 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Embeddings Demo 
 
-## Getting Started
+### Understand how data is converted to embeddings
 
-First, run the development server:
+![Embeddings demo](./docs/embeddings-demo.png)
+
+### Built With
+
+- Next.js + tailwind
+- OpenAI's `text-embedding-3-small` model
+- Node version 20 or higher
+
+---
+
+### Start the project
+
+**Requires Node version 20+**
+
+From the project root directory, run the following command.
+
+```bash
+npm install
+```
+
+### Set environment variables
+
+Make sure you have populated a `.env.local` file with your OpenAI API key: 
+
+```
+OPENAI_API_KEY="your_openai_api_key_here"
+```
+
+Start the app.
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Project structure
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+In this example we opted to use Next.js and the app router, which colocates the frontend and backend code in a single repository.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+**Frontend Client**
 
-## Learn More
+The frontend uses Next.js and tailwind to allow users to enter free form text. This text is split by word on the client-side and then converted to tokens by the `tiktoken` library 
+when the user clicks the `Convert text to embeddings` button. 
 
-To learn more about Next.js, take a look at the following resources:
+OpenAI's `text-embedding-3-small` model extracts the features of the text you provide it and returns vectors representing these features. 
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+**Backend API route**
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+This project exposes an API route: `/api/embeddings`: 
 
-## Deploy on Vercel
+```typescript
+import { NextRequest, NextResponse } from 'next/server';
+import OpenAI from 'openai';
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+export async function POST(req: NextRequest) {
+  const { inputText } = await req.json();
+
+  try {
+    const response = await openai.embeddings.create({
+      model: 'text-embedding-3-small',
+      input: inputText,
+    });
+
+    const generatedEmbeddings = response.data[0].embedding;
+    console.log(`Generated embeddings: %o`, generatedEmbeddings);
+
+    return NextResponse.json({ embeddings: generatedEmbeddings }, { status: 200 });
+  } catch (error) {
+    console.error('Error generating embeddings:', error);
+    return NextResponse.json({ error }, { status: 500 });
+  }
+}
+```

docs/embeddings-demo.png

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.3",
+    "openai": "^4.47.1",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "typescript": "^5"
   }
 }