We will create a simple Vue app that uses the Lightning AI platform to generate images based on user prompts which will then be displayed in a gallery powered by Meteron.

Frontend setup

For frontend we are using a vuetifyjs framework which provides Material UI components. To install the dependencies, simply run after cloning the repository:

yarn

The actual code that loads generated images is as simple as:

// A cluster consists of one or more servers that run the model. Create
// a new cluster here <https://app.meteron.ai/?tab=Settings>.
const API_CLUSTER = 'stable-diffusion'

// For using the API anonymously, you can use the anonymous token.
// You can get yours from <https://app.meteron.ai/?tab=API%20Keys> page.
const API_ANON_TOKEN = 'pub_YOUR_PROJECTS_KEY'
const API_GET_GENERATIONS_URL = `https://app.meteron.ai/api/images/generations?status=completed&cluster=${API_CLUSTER}&pageSize=200`

watchEffect(async () => {
  var headers = new Headers({
    'Authorization': `Bearer ${API_ANON_TOKEN}`
  })

  let data = await (await fetch(API_GET_GENERATIONS_URL, 
		{ headers: headers })).json()

  images.value = data.results
})

And to send images for generation:

const API_GENERATE_URL = `https://app.meteron.ai/api/images/generations?cluster=${API_CLUSTER}`

var headers = new Headers({
  'Authorization': `Bearer ${API_ANON_TOKEN}`,
  'Content-Type': 'application/json'
})

const data = {
  'prompt': prompt.value,
  'high_quality': 'true'
}

newImageGen.value = await (await fetch(API_GENERATE_URL, 
	{ headers: headers, method: 'POST', body: JSON.stringify(data) })).json()

You can view the code here: https://github.com/meteron-ai/hazy-hues/blob/main/src/components/Gallery.vue#L186

Model deployment

For model deployment we will be using Lightning AI https://lightning.ai/muse app which provides a public API to generate images. In a following article we will explore how to deploy custom weights for this app (for example from https://civitai.com/) to generate more impressive images.

Meteron configuration

Sign into your https://app.meteron.ai and click on the “add AI endpoint” button:

Untitled

Follow the steps to add your Stable Diffusion endpoint from Lightning AI.