Refactored the getHtmlFromOpenAI function to `getHtmlFromOpenRouter…

…` and updated the API endpoint and headers to use the OpenRouter service.
RobinVivant · Jul 17, 2024 · a2dd232 · a2dd232
1 parent e46ef22
commit a2dd232
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/app/lib/getHtmlFromOpenAI.ts b/app/lib/getHtmlFromOpenAI.ts
@@ -5,7 +5,7 @@ import {
 	OPEN_AI_SYSTEM_PROMPT,
 } from '../prompt'
 
-export async function getHtmlFromOpenAI({
+export async function getHtmlFromOpenRouter({
 	image,
 	apiKey,
 	text,
@@ -24,7 +24,7 @@ export async function getHtmlFromOpenAI({
 	}
 	previousPreviews?: PreviewShape[]
 }) {
-	if (!apiKey) throw Error('You need to provide an API key (sorry)')
+	if (!apiKey) throw Error('You need to provide an OpenRouter API key (sorry)')
 
 	const messages: GPT4VCompletionRequest['messages'] = [
 		{
@@ -92,7 +92,7 @@ export async function getHtmlFromOpenAI({
 	})
 
 	const body: GPT4VCompletionRequest = {
-		model: 'gpt-4-vision-preview',
+		model: 'openai/gpt-4-vision-preview',
 		max_tokens: 4096,
 		temperature: 0,
 		messages,
@@ -103,17 +103,19 @@ export async function getHtmlFromOpenAI({
 	let json = null
 
 	try {
-		const resp = await fetch('https://api.openai.com/v1/chat/completions', {
+		const resp = await fetch('https://openrouter.ai/api/v1/chat/completions', {
 			method: 'POST',
 			headers: {
 				'Content-Type': 'application/json',
-				Authorization: `Bearer ${apiKey}`,
+				'Authorization': `Bearer ${apiKey}`,
+				'HTTP-Referer': 'https://your-site-url.com', // Replace with your actual site URL
+				'X-Title': 'Make Real Starter', // Replace with your app's name
 			},
 			body: JSON.stringify(body),
 		})
 		json = await resp.json()
 	} catch (e: any) {
-		throw Error(`Could not contact OpenAI: ${e.message}`)
+		throw Error(`Could not contact OpenRouter: ${e.message}`)
 	}
 
 	return json

diff --git a/app/makeReal.tsx b/app/makeReal.tsx
@@ -1,6 +1,6 @@
 import { Editor, createShapeId, getSvgAsImage, track } from '@tldraw/tldraw'
 import { getSelectionAsText } from './lib/getSelectionAsText'
-import { getHtmlFromOpenAI } from './lib/getHtmlFromOpenAI'
+import { getHtmlFromOpenRouter } from './lib/getHtmlFromOpenAI'
 import { blobToBase64 } from './lib/blobToBase64'
 import { addGridToSvg } from './lib/addGridToSvg'
 import { PreviewShape } from './PreviewShape/PreviewShape'
@@ -55,7 +55,7 @@ export async function makeReal(editor: Editor, apiKey: string) {
 
 	// Send everything to OpenAI and get some HTML back
 	try {
-		const json = await getHtmlFromOpenAI({
+		const json = await getHtmlFromOpenRouter({
 			image: dataUrl,
 			apiKey,
 			text: getSelectionAsText(editor),
@@ -65,7 +65,7 @@ export async function makeReal(editor: Editor, apiKey: string) {
 		})
 
 		if (!json) {
-			throw Error('Could not contact OpenAI.')
+			throw Error('Could not contact OpenRouter.')
 		}
 
 		if (json?.error) {