Azure DALL·E Image Generation in HTML

This project demonstrates how to integrate Azure's DALL·E Image Generation API into a local HTML page. The user can generate a single image by entering a text prompt, and the image will be fetched from the Azure API and displayed on the page.

Demo URL:

https://karan89200.github.io/VisionBox/

Table of Contents

• Introduction
• Features
• Technologies Used
• Prerequisites
• Setup
• Running the Application
• API Configuration
• Challenges
• Future Improvements
• License

Introduction

This project allows users to input a text prompt and generate an image using Azure's DALL·E Image Generation API. The application is built using HTML, JavaScript, and the Azure OpenAI Service. The image is displayed directly on the webpage after it's fetched from the API.

Flow of Generating Image

Features

• User-friendly interface for entering text prompts.
• Fetches and displays images generated by Azure DALL·E based on the input prompt.
• Single API request per image.
• Supports a variety of image types based on user input.

How HTML page connect with Azure DALL-E

Technologies Used

• HTML/CSS: For structuring and styling the webpage.
• JavaScript: For handling the API requests and DOM manipulation.
• Azure OpenAI API: For generating images via DALL·E.
• Azure Portal: For managing the API keys and endpoints.

Prerequisites

Before running the application, ensure you have:

• An Azure account with access to Azure OpenAI services.
• The DALL·E endpoint URL and API key from Azure.
• Basic understanding of HTML, JavaScript, and APIs.

Setup

1. Install any IDE : Pycharm, Vscode,Spider
2. Install node (npm, express or other dependices)
3. Sign in azure ai portal through microsoft account.
4. If you have mastercard or visa card, you can create free 30 days trial (200$ given by microsoft azure for usage) and pay as you go premium accountl

###LIVE DEMO ###To run this model. ###step 1. In terminal, type : node <filename.js> for running the local server on your computer. ###step 2. Start live server of your web page.

Here is the

1. Clone the Repository

https://github.com/bunk4code/VisionBox/

cd azure-dalle-html-integration