Ticker

6/recent/ticker-posts

Image Generator code

Ai March 06, 2023

 

Image Generator

Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Image Generator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Image Generator</h1>
    <form>
        <label for="keywords">Enter keywords:</label>
        <input type="text" id="keywords" name="keywords">
        <button type="button" id="generate">Generate Images</button>
    </form>
    <div id="images"></div>
</body>
</html>

Css

<style>
h1 {
    text-align: center;
}

form {
    margin: 20px auto;
    text-align: center;
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"] {
    padding: 5px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

button {
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    background-color: #4CAF50;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background-color: #3E8E41;
}

#images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

#images img {
    width: 300px;
    height: 300px;
    margin: 10px;
    object-fit: cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

</style>

js


<script>
$(document).ready(function() {
  $('#generate').click(function() {
    var keywords = $('#keywords').val();
    if (keywords.trim() == '') {
      alert('Please enter some keywords.');
      return;
    }
    $('#images').html('<p>Loading...</p>');
    $.ajax({
      url: 'https://api.openai.com/v1/images/generations',
      type: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer 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'
      },
      data: JSON.stringify({
        'model': 'image-alpha-001',
        'prompt': keywords,
        'num_images': 5,
        'size': '1024x1024'
      }),
      success: function(response) {
        var images = '';
        response.data.forEach(function(image) {
          images += '<a href="' + image.url + '" download><img src="' + image.url + '"></a>';
        });
        $('#images').html(images);
      },
      error: function(xhr, status, error) {
        $('#images').html('<p>Error: ' + error + '</p>');
      }
    });
  });
});

</script>
Ai

Posted by Ai

Post a Comment

0 Comments

Please do not enter any spam link in the comment box.