I am coming back to development after years of not working on anything so my skills are rather rusty and I apologize for any improper syntax and formatting issues presented in advance.
I am currently working on a little web app project that takes a text prompt and generates an image using googles aivertex and gemini.
Here is some code snippets for review.
HTML Template
<body>
<h1>Turn your words into art!</h1>
<p>Enter a description of the image you want to generate.</p>
<form target="_blank" id="text-form" action="/my_prompt" onsubmit="dontredict('myindex.html')" method="post">
<label for="text-input">Text Prompt:</label>
<textarea id="text-input" name="text" rows="5" placeholder="e.g. A cat riding a bicycle on Mars"></textarea>
<button type="submit">Generate Image</button>
</form>
<div id="image-container">
{% if img_data %}
<h1>Your generated image will appear here.</h1>
<img id="picture" style="height: 300px;" src="{{url_for('static',filename='my-output.png')}}">
{% else %}
<h1>Image will be render here...</h1>
{% endif %}
</div>
<!--Jquery Cdn -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script type="text/javascript">
function dontredict(dynamicUrl){
$(document).on('submit', '#text-form', function (e) {
e.preventDefault();
console.log('button smashed');
$.ajax({
type: 'POST',
url: '/my_prompt',
data: {
text: $("#text-input").val()
},
success: function () {
alert('saved');
}
})
});
}
</script>
</body>
Python text-to-image.py
def disp_image():
if os.path.exists(output_file):
im = Image.open("static/my-output.png")
data = io.BytesIO()
im.save(data, "PNG")
encoded_img_data = base64.b64encode(data.getvalue())
img_data=encoded_img_data.decode('utf-8')
return render_template("myindex.html", img_data=img_data)
#if os.path.exists(output_file):
#return redirect(url_for('static/my-output.png'))
@app.route('/my_prompt', methods = ['POST'])
@cross_origin()
def imggen():
print("inside gen")
if request.method == 'POST':
prompt = request.form.get("text")
logger.info('%s This is the prompt: ', prompt)
print(prompt);
print("after prompt")
model = ImageGenerationModel.from_pretrained("imagegeneration@006")
images = model.generate_images(
prompt=prompt,
# Optional parameters
number_of_images=1,
language="en",
# You can't use a seed value and watermark at the same time.
# add_watermark=False,
# seed=100,
aspect_ratio="1:1",
safety_filter_level="block_some",
person_generation="allow_adult",
)
images[0].save(location=output_file, include_generation_parameters=False)
print(f"Created output image using {len(images[0]._image_bytes)} bytes")
print(disp_image())
return disp_image()
else:
print("error")
The issues I’m having is when the text is posted and comes back with the generated image it get saved properly to the static image folder (using flask and python) but, it does not display or render to the html page. I am also aware that some of the code may be redundant. Let me know what I am doing wrong, in terms of displaying the image to the actual html page, Thank you.
New contributor
Christopher Opitz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.