Thevetats Ramblings

Explore

About
Blogs
Misc
Resume
Services
Testing
Tools

Blogs

Env

Freshstart

Aliases
How I config my System76
Un-F%ck your M2 for development
ZSH Functions

Toolbelt

What's usually in the workvan

Rust

Notes

Primeagen's Rust for TS Devs

RustGoTs

Primeagen's Polyglot Class 1
Primeagen's Polyglot Class 2
Primeagen's Polyglot Class 3

Tauri

Setting up Tauri with Vite

WebDev

Ai

TheBeast

Slaying the beast

ComponentLibary

Salt Life
Submodules in Git

Sql

Useful SQL

Unocss

Just one more...
Setting up UnoCSS in a Vite Project

Vue

Reference

Suspense
Transitions

Slaying the beast

Published
April 4, 2023
Tags
#ai#vue#web dev

Table of Contents

  • Need a dank photo for this blog.

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.

bash
pnpm i openai

Create: src/gen.ts

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.

ts
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.

ts
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.

ts
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.

ts
/// <reference lib="dom" />

With that we have our full and final file

ts
/// <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.

bash
pnpm ts-node src/gen.ts

Now we can really start...

Made from scratch with ❤️ by Thevetat