diff --git a/.env-ollama.example b/.env-ollama.example new file mode 100644 index 00000000..9ae62088 --- /dev/null +++ b/.env-ollama.example @@ -0,0 +1,3 @@ +OPENAI_API_KEY=sk-1234567890abcdef +OPENAI_BASE_URL=http://localhost:11434/v1 +OPENAI_MODEL='llava:7b' \ No newline at end of file diff --git a/.env-openai.example b/.env-openai.example new file mode 100644 index 00000000..0dfd4e29 --- /dev/null +++ b/.env-openai.example @@ -0,0 +1 @@ +OPENAI_API_KEY=[sk-your-key] \ No newline at end of file diff --git a/.gitignore b/.gitignore index fd3dbb57..b9f8d23e 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +.env \ No newline at end of file diff --git a/README.md b/README.md index dea3c24c..cdbe6239 100644 --- a/README.md +++ b/README.md @@ -12,14 +12,28 @@ This works by just taking the current canvas SVG, converting it to a PNG, and se ## Getting Started -This is a Next.js app. To get started run the following commands in the root directory of the project. You will need an OpenAI API key with access to the GPT-4 Vision API. +This is a Next.js app. To get started run the following commands in the root directory of the project. > Note this uses Next.js 14 and requires a version of `node` greater than 18.17. [Read more here](https://nextjs.org/docs/pages/building-your-application/upgrading/version-14). +### OpenAI + +You will need an OpenAI API key with access to the GPT-4 Vision API. + ```bash -echo "OPENAI_API_KEY=sk-your-key" > .env.local +cp .env-openai.example .env # Edit the .env with your OpenAI key npm install npm run dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +### Ollama + +You will need access to an Ollama instance with access to an LLM model with vision capabilities, i.e. llava. + +```bash +cp .env-openai.example .env # Edit the .env with your Ollama base url and model name, you can leave the key as is +npm install +npm run dev +``` diff --git a/app/api/toHtml/route.ts b/app/api/toHtml/route.ts index 7223ac1d..cef14cec 100644 --- a/app/api/toHtml/route.ts +++ b/app/api/toHtml/route.ts @@ -6,12 +6,21 @@ const systemPrompt = `You are an expert tailwind developer. A user will provide 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 apiKey = process.env.OPENAI_API_KEY; + const baseURL = process.env.OPENAI_BASE_URL; + const model = process.env.OPENAI_MODEL ?? "gpt-4o"; + const max_tokens = process.env.OPENAI_MAX_TOKENS + ? parseInt(process.env.OPENAI_MAX_TOKENS, 10) + : 4096; + + const openai = new OpenAI({ baseURL, apiKey }); + const { image } = await request.json(); const resp = await openai.chat.completions.create({ - model: "gpt-4o", - max_tokens: 4096, + model, + max_tokens, + temperature: 0.8, messages: [ { role: "system",