user: modify this code so it has an image uploading button where you can only select one image and in the body add "image_url:" where the value is the filebinary of the image:  <!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>