https://github.com/anis-marrouchi/stability.ai-text-to-image
https://github.com/anis-marrouchi/stability.ai-text-to-image
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/anis-marrouchi/stability.ai-text-to-image
- Owner: anis-marrouchi
- License: mit
- Created: 2023-09-11T10:24:31.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-09-11T12:48:09.000Z (about 2 years ago)
- Last Synced: 2025-01-31T09:42:36.523Z (8 months ago)
- Language: JavaScript
- Size: 1.73 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Building a Web App using Stability.ai REST API
In this tutorial, we'll learn how to build a web app that generates images using the Stability.ai REST API based on a submitted prompt and displays it to the user. The API documentation covers several endpoints including account management, engine enumeration, and image generation. Let's dive in!
## Prerequisite
You will need a basic understanding of:
- HTML/CSS for front-end development
- JavaScript for API calls
- Basic understanding of REST APIs
## Step 1: Setting up your Development Environment
First, create a new folder for our project and initialize it with the necessary front-end files.
```bash
mkdir text-to-image-app
cd text-to-image-app
touch index.html app.js
```
## Step 2: Creating the HTML structure
In `index.html`, add the following HTML structure with Tailwind CSS:
```html
Text to Image Generator
Text to Image Generator
Generate
```
## Step 3: Making API Calls
In `app.js`, we'll make the API calls using the native `fetch` function provided by JavaScript:
```javascript
const promptInput = document.querySelector('#prompt-input');
const promptForm = document.querySelector('#prompt-form');
const result = document.querySelector('#result');
promptForm.addEventListener('submit', (event) => {
event.preventDefault();
const promptText = promptInput.value;
fetch('https://api.stability.ai/v1/generation/stable-diffusion-xl-1024-v1-0/text-to-image', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer YOUR_API_KEY_HERE`
},
body: JSON.stringify({ text_prompts: [{text: promptText}] })
})
.then(response => response.json())
.then(data => {
result.innerHTML = '';
data.artifacts.forEach((image, index) => {
const img = document.createElement('img');
img.src = `data:image/png;base64,${image.base64}`;
img.setAttribute("alt", `Generated Image ${index + 1}`);
result.appendChild(img);
});
})
.catch((error) => {
console.error('Error:', error);
});
});
```
**Note**: Replace `YOUR_API_KEY_HERE` with your actual Stability.ai API key.
## Step 4: Displaying Generated Images
The code within the `.then()` function handles the response that we get from the API. Stability.ai returns the generated image as a base64 string, which we convert to an image and append to the `result` div.
---
That's it! You've built your own web app that generates images from text prompts using the Stability.ai REST API.
Remember to always refer back to the API documentation to understand the requirements and constraints of each parameter, and happy coding!