Custom image generator not working

Development Python
1

import openai

import os

from flask import Flask, render_template_string, request

openai.api_key = os.environ[‘OPENAI_API_KEY’]

def generate_tutorial(components):

response = openai.Image.create(prompt=components,

model=“image-alpha-001”,

size=“1024x1024”,

response_format=“url”)

image_url = response[“data”][0][“url”]

return image_url

app = Flask(name)

@app.route(‘/’, methods=[‘GET’, ‘POST’])
def hello():
output = “”
return render_template_string(‘’’

Infinite Image Generator body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; } .container { background-color: #ffffff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } h1 { color: #333333; } .form-control { background-color: #f8f8f8; border: 1px solid #dddddd; color: #333333; } .btn-primary { background-color: #89c2d9; border-color: #89c2d9; } .btn-primary:hover { background-color: #a3d1e0; border-color: #a3d1e0; } .btn-secondary { background-color: #b0b0b0; border-color: #b0b0b0; } .btn-secondary:hover { background-color: #c2c2c2; border-color: #c2c2c2; } .card { background-color: #f8f8f8; border: none; } #output { display: block; margin-bottom: 20px; text-align: center; } #myImage { width: 256px; height: 256px; display: block; margin: 0 auto; }

Custom Image Generator

Textual Description of the Image:
Share with the Image
Output: Copy

Generating an image for you...

''', output=output) @app.route('/generate', methods=['POST']) def generate(): components = request.form['components'] return generate_tutorial(components) if __name__ == '__main__': app.run(host='0.0.0.0', port=8080) This is the code I used and this is the result, Ive attached ![image|690x357](upload://o4arakKRw7UEmnZ2iRgbzRdzeq2.png) Its been a while now and it didn't load...
2

Hi @prashant0410

Sorry for the delayed response. Please try the below code for custom image generator and let us know if you face any issues. Make sure to replace open api key with your actual openapi key

from openai import OpenAI
import os
from flask import Flask, render_template_string, request

client = OpenAI(
    api_key=os.
    environ['OPENAI_API_KEY'],  # this is also the default, it can be omitted
)


def generate_tutorial(components):
  response = client.images.generate(
      prompt=components,
      #model="image-alpha-001",
      size="1024x1024",
      response_format="url")
  image_url = response.data[0].url
  return image_url


app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def hello():
  output = ""

  if request.method == 'POST':
    components = request.form['components']
    output = generate_tutorial(components)

  return render_template_string('''
        <!DOCTYPE html>
        <html>
        <head>
            <title>Infinite Image Generator</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
            <style>
                /* Your CSS styles go here */
            </style>
            <script>
                // Your JavaScript code goes here
            </script>
        </head>
        <body>
            <div class="container">
                <h1 class="my-4">Custom Image Generator</h1>
                <form id="tutorial-form" onsubmit="event.preventDefault(); generateTutorial();" class="mb-3">
                    <div class="mb-3">
                        <label for="components" class="form-label">Textual Description of the Image:</label>
                        <input type="text" class="form-control" id="components" name="components" placeholder="Enter the Description (Ex: A Lion in a Cage)" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Share with the Image</button>
                </form>
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        Output:
                        <button class="btn btn-secondary btn-sm" onclick="copyToClipboard()">Copy</button>
                    </div>
                    <div class="card-body">
                        <p id="output" style="white-space: pre-wrap;"></p>
                        <img id="myImage" src="{{ output }}" style="width: auto; height: 300px;">
                    </div>
                </div>
            </div>
            <script>
                async function generateTutorial() {
                    const components = document.querySelector('#components').value;
                    const output = document.querySelector('#output');
                    const imgElement = document.getElementById('myImage');
                    const response = await fetch('/generate', {
                        method: 'POST',
                        body: new FormData(document.querySelector('#tutorial-form'))
                    });
                    const imageUrl = await response.text();
                    imgElement.src = imageUrl;
                    output.textContent = 'Generating an image for you...';
                }

                function copyToClipboard() {
                    const imgElement = document.getElementById('myImage');
                    const imageUrl = imgElement.src;
                    const textarea = document.createElement('textarea');
                    textarea.value = imageUrl;
                    document.body.appendChild(textarea);
                    textarea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textarea);
                    alert('Copied to clipboard');
                }
            </script>
        </body>
        </html>
    ''',
                                output=output)


@app.route('/generate', methods=['POST'])
def generate():
  components = request.form['components']
  return generate_tutorial(components)


if __name__ == '__main__':
  app.run(host='0.0.0.0', port=8080)

If you still face issues, please feel free to get back to us

3

hii @prashant0410 you can refer below code ,basically it is giving error due to following resons:-
There are several issues in your code, including syntax errors and improper HTML structure. Let’s correct and format your code properly:

  1. Correct the syntax for dictionary keys.
  2. Fix the use of double quotes for strings in Python.
  3. Ensure proper indentation and formatting.
  4. Correct the HTML and embedded JavaScript.
import openai
import os
from flask import Flask, render_template_string, request

# Set the OpenAI API key
openai.api_key = os.getenv('OPENAI_API_KEY')

def generate_tutorial(components):
    response = openai.Image.create(
        prompt=components,
        model="image-alpha-001",
        size="1024x1024",
        response_format="url"
    )
    image_url = response["data"][0]["url"]
    return image_url

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def hello():
    output = ""
    if request.method == 'POST':
        components = request.form['components']
        output = generate_tutorial(components)
    return render_template_string('''
    <!DOCTYPE html>
    <html>
    <head>
        <title>Infinite Image Generator</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #f5f5f5;
            }
            .container {
                background-color: #ffffff;
                border-radius: 10px;
                padding: 20px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            h1 {
                color: #333333;
            }
            .form-control {
                background-color: #f8f8f8;
                border: 1px solid #dddddd;
                color: #333333;
            }
            .btn-primary {
                background-color: #89c2d9;
                border-color: #89c2d9;
            }
            .btn-primary:hover {
                background-color: #a3d1e0;
                border-color: #a3d1e0;
            }
            .btn-secondary {
                background-color: #b0b0b0;
                border-color: #b0b0b0;
            }
            .btn-secondary:hover {
                background-color: #c2c2c2;
                border-color: #c2c2c2;
            }
            .card {
                background-color: #f8f8f8;
                border: none;
            }
            #output {
                display: block;
                margin-bottom: 20px;
                text-align: center;
            }
            #myImage {
                width: 256px;
                height: 256px;
                display: block;
                margin: 0 auto;
            }
        </style>
        <script>
        async function generateImage() {
            const components = document.querySelector('#components').value;
            const output = document.querySelector('#output');
            const loading = document.querySelector('#loading');
            output.textContent = '';
            loading.style.display = 'block';

            const response = await fetch('/generate', {
                method: 'POST',
                body: new FormData(document.querySelector('#image-form'))
            });

            const newOutput = await response.text();
            loading.style.display = 'none';
            output.innerHTML = `<img id="myImage" src="${newOutput}" alt="Generated Image">`;
        }

        function copyToClipboard() {
            const output = document.querySelector('#output');
            const textarea = document.createElement('textarea');
            textarea.value = output.textContent;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('Copied to clipboard');
        }
        </script>
    </head>
    <body>
        <div class="container">
            <h1 class="my-4"><strong>Custom Image Generator</strong></h1>
            <form id="image-form" onsubmit="event.preventDefault(); generateImage();" class="mb-3">
                <div class="mb-3">
                    <label for="components" class="form-label"><strong>Textual Description of the Image:</strong></label>
                    <input type="text" class="form-control" id="components" name="components" placeholder="Enter your description" required>
                </div>
                <button type="submit" class="btn btn-primary">Generate Image</button>
            </form>
            <div id="loading" style="display:none;">Generating image, please wait...</div>
            <div id="output"></div>
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Output:</strong>
                    <button class="btn btn-secondary btn-sm" onclick="copyToClipboard()">Copy</button>
                </div>
                <div class="card-body">
                    <pre id="output" class="mb-0" style="white-space: pre-wrap;">{{ output }}</pre>
                </div>
            </div>
            <div class="alert alert-info mt-4" role="alert">
                <strong>Data Privacy Notice:</strong> Your input data is used only to generate images and is not stored or logged.
            </div>
        </div>
    </body>
    </html>
    ''', output=output)

@app.route('/generate', methods=['POST'])
def generate():
    components = request.form['components']
    content = generate_tutorial(components)
    return content

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

I hope it will solve your error as i had run on my replit it is running fine,also check your api_access limit there may be problem also.
If you still have any doubt please feel free to contact me

4

Hi, @prashant0410
The code you have provided is slightly unreadable. Hence it is difficult to pinpoint where the error exactly lies.

Try this code out(Take care of the API-Key part):

from boltiotai import openai
import os
from flask import Flask, render_template_string, request

api_key = os.environ['API_KEY']

openai.api_key = api_key


def generate_tutorial(components):
  response = openai.Images.create(prompt=components,
                                  model="dall-e-3",
                                  n=1,
                                  size="1024x1024")
  image_url = response["data"][0]["url"]
  return image_url


app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def hello():
  output = ""
  if request.method == 'POST':
    components = request.form['components']
    output = generate_tutorial(components)

  return render_template_string('''<html >
<head >
 <title >Infinite Image Generator </title >
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet">

 <style >

  body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #f5f5f5;
  }

  .container {
   background-color: #ffffff;
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  h1 {
   color: #333333;
  }

  .form-control {
   background-color: #f8f8f8;
   border: 1px solid #dddddd;
   color: #333333;
  }

  .btn-primary {
   background-color: #89c2d9;
   border-color: #89c2d9;
  }

  .btn-primary:hover {
   background-color: #a3d1e0;
   border-color: #a3d1e0;
  }

  .btn-secondary {
   background-color: #b0b0b0;
   border-color: #b0b0b0;
  }

  .btn-secondary:hover {
   background-color: #c2c2c2;
   border-color: #c2c2c2;
  }

  .card {
   background-color: #f8f8f8;
   border: none;
  }

  #output {
   display: block;
   margin-bottom: 20px;
   text-align: center;
  }

  #myImage {
   width: 256px;
   height: 256px;
   display: block;
   margin: 0 auto;
  }
 </style >

 <script >

  async function generateTutorial() {
   const components = document.querySelector('#components').value;
   const output = document.querySelector('#output');
   const imgElement = document.getElementById('myImage');
    output.textContent = 'Generating an image for you...';
   const response = await fetch('/generate', {
    method: 'POST',
    body: new FormData(document.querySelector('#tutorial-form'))
   });
   const imageUrl = await response.text();
   imgElement.src = imageUrl;
   output.textContent = 'Copy it!';
  }

  function copyToClipboard() {
   const imgElement = document.getElementById('myImage');
   const imageUrl = imgElement.src;
   const textarea = document.createElement('textarea');
   textarea.value = imageUrl;
   document.body.appendChild(textarea);
   textarea.select();
   document.execCommand('copy');
   document.body.removeChild(textarea);
   alert('Copied to clipboard');
  }

 </script >

</head >
<body >
 <div class="container">
  <h1 class="my-4">Custom Image Generator </h1 >
  <form id="tutorial-form" onsubmit="event.preventDefault(); generateTutorial();" class="mb-3">
   <div class="mb-3">
    <label for="components" class="form-label">Textual Description of the Image:</label >
    <input type="text" class="form-control" id="components" name="components" placeholder="Enter the Description (Ex: A Lion in a Cage)" required >
   </div >
   <button type="submit" class="btn btn-primary">Generate! </button >
  </form >
  <div class="card">
   <div class="card-header d-flex justify-content-between align-items-center">
    Output:
    <button class="btn btn-secondary btn-sm" onclick="copyToClipboard()">Copy </button >
   </div >
   <div class="card-body">
    <p id="output" style="white-space: pre-wrap;">The Image will be displayed here: </p >
    <img id="myImage" src="">
   </div >
  </div >
 </div >
</body >
</html >''',
                                output=output)


@app.route('/generate', methods=['POST'])
def generate():
  components = request.form['components']
  return generate_tutorial(components)


if __name__ == '__main__':
  app.run(host='0.0.0.0', port=8080)
5

hii @prashant0410
Explanation:

Your code has issues with syntax, improper HTML structure, and missing input handling. Below is the corrected and properly formatted version:

  1. Imports and API Key Setup:
  • Import necessary modules and set the OpenAI API key.
  1. Flask App Setup:
  • Define the root route for GET and POST requests to handle form submissions.
  • Define a route for generating images.
  1. HTML and JavaScript:
  • Use Bootstrap for styling.
  • Form to input image description and display the generated image.
  • JavaScript functions handle image generation and copying to the clipboard.
    Corrected Code:
import openai
import os
from flask import Flask, render_template_string, request

# Set the OpenAI API key
openai.api_key = os.getenv('OPENAI_API_KEY')

def generate_tutorial(components):
    response = openai.Image.create(
        prompt=components,
        model="image-alpha-001",
        size="1024x1024",
        response_format="url"
    )
    image_url = response["data"][0]["url"]
    return image_url

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def hello():
    output = ""
    if request.method == 'POST':
        components = request.form['components']
        output = generate_tutorial(components)
    return render_template_string('''
    <!DOCTYPE html>
    <html>
    <head>
        <title>Custom Image Generator</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; }
            .container { background-color: #ffffff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
            h1 { color: #333333; }
            .form-control { background-color: #f8f8f8; border: 1px solid #dddddd; color: #333333; }
            .btn-primary { background-color: #89c2d9; border-color: #89c2d9; }
            .btn-primary:hover { background-color: #a3d1e0; border-color: #a3d1e0; }
            .btn-secondary { background-color: #b0b0b0; border-color: #b0b0b0; }
            .btn-secondary:hover { background-color: #c2c2c2; border-color: #c2c2c2; }
            .card { background-color: #f8f8f8; border: none; }
            #output { display: block; margin-bottom: 20px; text-align: center; }
            #myImage { width: 256px; height: 256px; display: block; margin: 0 auto; }
        </style>
        <script>
        async function generateImage() {
            const components = document.querySelector('#components').value;
            const output = document.querySelector('#output');
            const loading = document.querySelector('#loading');
            output.textContent = '';
            loading.style.display = 'block';

            const response = await fetch('/generate', {
                method: 'POST',
                body: new FormData(document.querySelector('#image-form'))
            });

            const newOutput = await response.text();
            loading.style.display = 'none';
            output.innerHTML = `<img id="myImage" src="${newOutput}" alt="Generated Image">`;
        }

        function copyToClipboard() {
            const output = document.querySelector('#output');
            const textarea = document.createElement('textarea');
            textarea.value = output.textContent;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('Copied to clipboard');
        }
        </script>
    </head>
    <body>
        <div class="container">
            <h1 class="my-4"><strong>Custom Image Generator</strong></h1>
            <form id="image-form" onsubmit="event.preventDefault(); generateImage();" class="mb-3">
                <div class="mb-3">
                    <label for="components" class="form-label"><strong>Textual Description of the Image:</strong></label>
                    <input type="text" class="form-control" id="components" name="components" placeholder="Enter your description" required>
                </div>
                <button type="submit" class="btn btn-primary">Generate Image</button>
            </form>
            <div id="loading" style="display:none;">Generating image, please wait...</div>
            <div id="output"></div>
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Output:</strong>
                    <button class="btn btn-secondary btn-sm" onclick="copyToClipboard()">Copy</button>
                </div>
                <div class="card-body">
                    <pre id="output" class="mb-0" style="white-space: pre-wrap;">{{ output }}</pre>
                </div>
            </div>
            <div class="alert alert-info mt-4" role="alert">
                <strong>Data Privacy Notice:</strong> Your input data is used only to generate images and is not stored or logged.
            </div>
        </div>
    </body>
    </html>
    ''', output=output)

@app.route('/generate', methods=['POST'])
def generate():
    components = request.form['components']
    content = generate_tutorial(components)
    return content

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)