[Python] Dont know how to send uploaded images from frontend to the backend or api [closed]

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.

Continue reading...