You will be provided with a web data and a user prompt.
The web data is from a result from a search engine. You please use the web data to answer the user prompt.

WEB DATA: To modify the provided HTML and JavaScript code to include an image uploading feature that allows only a single image to be selected and adds the `image_url` with the binary image data to the payload, you can follow these steps:

1. **Add an Input Element for Image Upload**:
   Add an `<input>` element of type `file` to your HTML. This will allow users to select an image file.

   ```html
   <input type="file" id="image-input" accept="image/*">
   ```

2. **Handle Image Upload**:
   Modify your JavaScript code to handle the image upload. You need to read the selected file and convert it to a binary format that can be sent in the payload.

   ```javascript
   const imageInput = document.getElementById('image-input');

   imageInput.addEventListener('change', (e) => {
     const file = e.target.files;
     if (file) {
       const reader = new FileReader();
       reader.onload = (event) => {
         const imageData = event.target.result;
         // Add the image data to your payload
         const payload = {
           // Your existing payload properties
           image_url: imageData,
         };
         // Use this payload in your fetch request
       };
       reader.readAsDataURL(file);
     }
   });
   ```

3. **Integrate with Existing Code**:
   You need to integrate this image upload handling with your existing `sendMsg` function. Here’s an example of how you might do it:

   ```javascript
   const sendMsg = async (msg) => {
     if (typing) return;
     setInput(true);
     const selectedModel = modelDropdown.value;
     const file = imageInput.files;
     if (file) {
       const reader = new FileReader();
       reader.onload = async (event) => {
         const imageData = event.target.result;
         const payload = {
           prompt: msg,
           model: selectedModel,
           cvid: id,
           web: webToggle.checked,
           image_url: imageData,
         };
         try {
           const res = await fetch('https://kairo-api.kys.gay/api/gpt', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(payload),
           });
           const data = await res.json();
           id = id || data.conversation_id;
           aiMsg.innerHTML = '';
           await typeEffect(data.message, aiMsg);
         } catch (err) {
           aiMsg.textContent = 'Error. Try again.';
         } finally {
           setInput(false);
         }
       };
       reader.readAsDataURL(file);
     } else {
       // Handle the case when no image is selected
       const payload = {
         prompt: msg,
         model: selectedModel,
         cvid: id,
         web: webToggle.checked,
       };
       // Your existing fetch request logic here
     }
   };
   ```

4. **Limit to Single Image**:
   The `input` element of type `file` without the `multiple` attribute already limits the selection to a single file. So, the provided code inherently supports selecting only one image.

By following these steps, you can modify your code to include an image uploading feature that allows only a single image to be selected and adds the `image_url` with the binary image data to the payload.
        
    USER PROMPT: user: modify this so it has an image uploading where you can only select one image then to the payload: it adds image_url with the image / file: binary which shall be the value of the image_url body in the payload:  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ethos AI</title> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <style>         :root { --bg: #121212; --text: #e0e0e0; --primary: #bb86fc; --secondary: #03dac6; --surface: #1e1e1e; --error: #cf6679; --disabled: #4a4a4a; --code-bg: #2d2d2d; }         body { font-family: 'Roboto', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }         .container { width: 90%; max-width: 800px; }         h1 { color: var(--primary); text-align: center; font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700; }         #chat-container { background: var(--surface); border-radius: 12px; padding: 1rem; height: 60vh; overflow-y: auto; margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }         .message { margin: 0.5rem 0; padding: 0.75rem; border-radius: 8px; max-width: 80%; }         .user-message { background: var(--primary); color: var(--bg); align-self: flex-end; margin-left: auto; }         .ai-message { background: var(--surface); border: 1px solid var(--secondary); align-self: flex-start; }         #input-container { display: flex; gap: 0.5rem; }         #user-input { flex: 1; padding: 0.75rem; border: none; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 1rem; font-family: 'Roboto', sans-serif; }         #user-input:disabled { background: var(--disabled); }         button { padding: 0.75rem 1.5rem; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; font-family: 'Roboto', sans-serif; font-weight: 700; }         #send-message { background: var(--secondary); color: var(--bg); }         #send-message:disabled { background: var(--disabled); cursor: not-allowed; }         #new-conversation { background: var(--primary); color: var(--bg); margin-bottom: 1rem; }         button:hover:not(:disabled) { opacity: 0.9; transform: translateY(-2px); }         .loading-indicator { display: flex; align-items: center; gap: 10px; }         .loading-circle { width: 20px; height: 20px; border: 2px solid white; border-top: 2px solid var(--secondary); border-radius: 50%; animation: spin 1s linear infinite; }         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }         .toggle-container { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }         .toggle-switch { position: relative; display: inline-block; width: 60px; height: 34px; }         .toggle-switch input { opacity: 0; width: 0; height: 0; }         .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--disabled); transition: .4s; border-radius: 34px; }         .toggle-slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: var(--text); transition: .4s; border-radius: 50%; }         input:checked + .toggle-slider { background-color: var(--secondary); }         input:checked + .toggle-slider:before { transform: translateX(26px); }         /* Markdown Styles */         .ai-message p { margin: 0.5em 0; }         .ai-message h2 { color: var(--primary); font-size: 1.5em; margin-top: 1em; }         .ai-message h3 { color: var(--secondary); font-size: 1.2em; margin-top: 0.8em; }         .ai-message code { background-color: var(--code-bg); padding: 0.2em 0.4em; border-radius: 3px; font-family: monospace; }         .ai-message pre { background-color: var(--code-bg); padding: 1em; border-radius: 5px; overflow-x: auto; position: relative; }         .ai-message pre code { background-color: transparent; padding: 0; }         .ai-message ul, .ai-message ol { padding-left: 1.5em; }         .ai-message blockquote { border-left: 3px solid var(--primary); padding-left: 1em; margin-left: 0; color: var(--text); }         .ai-message a { color: var(--secondary); text-decoration: none; }         .ai-message a:hover { text-decoration: underline; }         .ai-message img { max-width: 100%; height: auto; border-radius: 5px; }         .copy-button { position: absolute; top: 5px; right: 5px; background: var(--primary); color: var(--bg); border: none; border-radius: 4px; padding: 5px 10px; font-size: 0.8rem; cursor: pointer; }         .copy-button:hover { opacity: 0.8; }     </style> </head> <body> <div class="container"> <h1>Ethos AI</h1> <button id="new-conversation">New Conversation</button> <div class="toggle-container"> <span>Internet:</span> <label class="toggle-switch"> <input type="checkbox" id="web-toggle"> <span class="toggle-slider"></span> </label> </div> <div id="model-selector"> <label for="model-dropdown">Select Model:</label> <select id="model-dropdown"> <option value="gpt-o1-preview">gpt-o1-preview</option> <option value="gpt-o1-mini">gpt-o1-mini</option> <option value="gpt-4o" selected>gpt-4o</option> <option value="gpt-4o-turbo">gpt-4o-turbo</option> <option value="gpt-4o-mini">gpt-4o-mini</option> </select> </div> <div id="chat-container"></div> <div id="input-container"> <input type="text" id="user-input" placeholder="Type your message..."> <button id="send-message">Send</button> </div> </div> <script>         const chat = document.getElementById('chat-container'),             input = document.getElementById('user-input'),             send = document.getElementById('send-message'),             reset = document.getElementById('new-conversation'),             webToggle = document.getElementById('web-toggle'),             modelDropdown = document.getElementById('model-dropdown');          let id = null, typing = false;         let autoScroll = true; // Auto-scroll flag          const setInput = (state) => { input.disabled = send.disabled = typing = state; };          const sendMsg = async (msg) => {             if (typing) return;             setInput(true);             const selectedModel = modelDropdown.value;             const payload = {                 prompt: msg,                 model: selectedModel,                 cvid: id,                 web: webToggle.checked             };              chat.innerHTML += `<div class="message user-message">${msg}</div>`;             chat.scrollTop = chat.scrollHeight;             const aiMsg = document.createElement('div');             aiMsg.className = 'message ai-message';             aiMsg.innerHTML = '<div class="loading-indicator"><div class="loading-circle"></div>' +                 (webToggle.checked ? "Thinking and searching through the web." : "Thinking...") +                 '</div>';             chat.appendChild(aiMsg);             chat.scrollTop = chat.scrollHeight;              try {                 const res = await fetch('https://kairo-api.kys.gay/api/gpt', {                     method: 'POST',                     headers: { 'Content-Type': 'application/json' },                     body: JSON.stringify(payload),                 });                 const data = await res.json();                 id = id || data.conversation_id;                 aiMsg.innerHTML = '';                 await typeEffect(data.message, aiMsg);             } catch (err) {                 aiMsg.textContent = 'Error. Try again.';             } finally {                 setInput(false);             }         };          const typeEffect = (text, element, speed = 1) => new Promise((resolve) => {             let i = 0;             let buffer = '';             const type = () => {                 if (i < text.length) {                     buffer += text.charAt(i++);                     element.innerHTML = marked.parse(buffer);                     addCopyButtons(element);                                          if (autoScroll) {                         chat.scrollTop = chat.scrollHeight;                     }                      setTimeout(type, speed);                 } else {                     resolve();                 }             };             type();         });          const addCopyButtons = (el) => {             const preTags = el.querySelectorAll('pre');             preTags.forEach(pre => {                 const button = document.createElement('button');                 button.textContent = 'Copy';                 button.className = 'copy-button';                 button.onclick = () => {                     navigator.clipboard.writeText(pre.innerText).then(() => {                         button.textContent = 'Copied!';                         setTimeout(() => button.textContent = 'Copy', 1000);                     });                 };                 pre.appendChild(button);             });         };          send.addEventListener('click', () => {             const msg = input.value.trim();             if (msg) sendMsg(msg);             input.value = '';         });          reset.addEventListener('click', () => {             chat.innerHTML = '';             input.value = '';             id = null;         });          input.addEventListener('keypress', (e) => {             if (e.key === 'Enter') {                 const msg = input.value.trim();                 if (msg) sendMsg(msg);                 input.value = '';             }         });          chat.addEventListener('scroll', () => {             // Adjust autoScroll based on user scrolling             if (chat.scrollTop < chat.scrollHeight - chat.clientHeight) {                 autoScroll = false;             } else {                 autoScroll = true;             }         });     </script> </body> </html>