File: /var/www/html/www.winghung.com/image_generator/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Usage of DALL-E 2 Image Creation Model of OpenAI</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row" style="margin-top:20px">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h3>Basic Usage of DALL-E 2 Image Creation Model of OpenAI</h3>
</div>
<div class="card-body">
<div class="user-action">
<div class="row">
<label for="inputEmail3" class="col-sm-1 col-form-label">Keyword 1</label>
<div class="col-sm-3">
<input type="text" class="form-control prompt" placeholder="Keyword 1" aria-label="Keyword 1">
</div>
<label for="inputEmail3" class="col-sm-1 col-form-label">Keyword 2</label>
<div class="col-sm-3">
<input type="text" class="form-control prompt" placeholder="Keyword 2" aria-label="Keyword 2">
</div>
<label for="inputEmail3" class="col-sm-1 col-form-label">Keyword 3</label>
<div class="col-sm-3">
<input type="text" class="form-control prompt" placeholder="Keyword 3" aria-label="Keyword 3">
</div>
</div>
<div class="row mt-3">
<label for="inputEmail3" class="col-sm-1 col-form-label">Count</label>
<div class="col-sm-3">
<input type="number" class="form-control count" placeholder="Image Count" aria-label="Image Count" value = "1">
</div>
<label for="inputEmail3" class="col-sm-1 col-form-label">Image Size</label>
<div class="col-sm-3">
<select class="form-select size" aria-label="Default select example" placeholder="image size">
<option value="256x256">256x256</option>
<option value="512x512">512x512</option>
<option value="1024x1024">1024x1024</option>
</select>
</div>
<div class="col-sm-4">
<div class="d-grid">
<button type="submit" class="btn btn-info mb-3">Get Images</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-muted">
<div class="img-container"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
const input = document.querySelectorAll('.prompt')
const count = document.querySelector('.count')
const size = document.querySelector('.size')
const button = document.querySelector('button')
const imgContainer = document.querySelector('.img-container')
button.onclick = () => {
if (input[0].value) {
imgContainer.innerHTML = '<div class="spinner-border text-info" role="status" style="width: 3rem; height: 3rem;"><span class="visually-hidden">Loading...</span></div>'
var http = new XMLHttpRequest();
var data = new FormData()
data.append('prompt', input[0].value + input[1].value + input[2].value)
data.append('count', count.value)
data.append('size', size.value)
http.open('POST', 'request.php', true)
http.send(data)
http.onload = () => {
imgContainer.innerHTML = ''
var response = JSON.parse(http.response).data
response.forEach(e => {
console.log(e);
var img = document.createElement('img')
img.className = 'img-thumbnail'
//img.src = 'data:image/jpeg;base64,' + e.b64_json
img.src = e.url
imgContainer.appendChild(img)
});
}
} else {
alert("input a keyword");
}
}
</script>
</body>
</html>