Slaying the beast
- Published
- Tags
- #ai#vue#web dev
Need a dank photo for this blog.
Time to spin up dall-E finally. This shitshow of a project I am on deserves a photo of its own.
So lets do that, got the open-api key setup a week or so ago, never had time or a reason to get it going, but this is about as good of a reason as I will ever have.
Cloned my base ts project repo, will link that eventually once it is clean.
From there pnpm dev to make sure I get a running project.
Open up the main.ts, throw some BS in there check linting is good, yup, so off to the races.
pnpm i openai
Create: src/gen.ts
import { writeFileSync } from 'fs'
import { Configuration, OpenAIApi } from 'openai'
const config = new Configuration({
})
I get to here when I realize I always forget how to do env variables correctly. Time to open up the note I always reference, which will be uploaded under web_dev/security/environment_variables.
Now with that solved, and my openAI api key pasted into a .env file.
We can progress.
import { writeFileSync } from 'fs'
import { Configuration, OpenAIApi } from 'openai'
import { load } from 'ts-dotenv'
const env = load({
API_KEY: String,
})
const config = new Configuration({
apiKey: env.API_KEY,
})
const openai = new OpenAIApi(config)
From this point our configuration is setup, now for the fun part the prompt and result.
const prompt = 'Cthulu humanoid monster with legs throwing computers at an army of developers a beach painting realistic'
const result = await openai.createImage({
prompt,
n: 1,
size: '1024x1024',
user: 'thevetat',
})
Now to handle the response, and print some dank photos for el blogarino.
const url = result.data.data[0].url
if (url !== undefined) {
const imgResult = await fetch(url)
const blob = await imgResult.blob()
const buffer = Buffer.from(await blob.arrayBuffer())
writeFileSync(`src/img/${Date.now()}.png`, buffer)
}
Here we get typescript getting mad, didnt care enough to figure it out, some reading led to this comment here https://stackoverflow.com/questions/75522795/unable-to-find-fetch-in-node-18#comment133247562_75522795 Didnt care much beyond that so went with it.
Threw this on the top of the file and marched on. Will figure this out more in depth when it is not 3am.
/// <reference lib="dom" />
With that we have our full and final file
/// <reference lib="dom" />
import { writeFileSync } from 'fs'
import { Configuration, OpenAIApi } from 'openai'
import { load } from 'ts-dotenv'
const env = load({
API_KEY: String,
})
const config = new Configuration({
apiKey: env.API_KEY,
})
const openai = new OpenAIApi(config)
const prompt = 'Cthulu humanoid monster with legs throwing computers at an army of developers a beach painting realistic'
const result = await openai.createImage({
prompt,
n: 1,
size: '1024x1024',
user: 'thevetat',
})
const url = result.data.data[0].url
if (url !== undefined) {
const imgResult = await fetch(url)
const blob = await imgResult.blob()
const buffer = Buffer.from(await blob.arrayBuffer())
writeFileSync(`src/img/${Date.now()}.png`, buffer)
}
create the src/img folder and profit.
pnpm ts-node src/gen.ts
Now we can really start...