I have a problem.

I have a frontend with HTML, CSS and JavaScript where the user can upload or take a picture, and it should be sent to the API or backend with a prompt and then the result will be sent to the frontend for showing

Now, I have created the backend code from OpenAI documentation, but the problem is that it gives one and single picture locally by getting the path of the picture not getting the uploaded one.

And then it shows the result in the terminal by printing it, not showing it on the frontend.

Can you please help me to change my code?
import base64
import requests # type: ignore

OpenAI API Key

api_key = “”

Function to encode the image

def encode_image(image_path):
with open(image_path, “rb”) as image_file:
return base64.b64encode(image_file.read()).decode(‘utf-8’)

Path to your image

image_path = “C:/Users/zenith/Downloads/download.JPG”

Getting the base64 string

base64_image = encode_image(image_path)

headers = {
“Content-Type”: “application/json”,
“Authorization”: f”Bearer {api_key}”
}

payload = {
“model”: “gpt-4o-mini”,
“messages”: [
{
“role”: “user”,
“content”: [
{
“type”: “text”,
“text”: “detect and analyze the plant in this picture in 150 words”
},
{
“type”: “image_url”,
“image_url”: {
“url”: f”data:image/jpeg;base64,{base64_image}”
}
}
]
}
],
“max_tokens”: 300
}

response = requests.post(“https://api.openai.com/v1/chat/completions”, headers=headers, json=payload)

Documentation and nothing.