Web Navigator

{"name":"WebNavigator (V0.1.0)","description":"Embark on an interactive journey with a chatbot that can navigate the web based on your commands! Explore the virtual world by entering commands to visit different URLs, all within a fun and engaging chat interface.","photo":null,"view_count":4,"fork_count":0,"expires_at":null,"created_at":"2024-05-10T17:03:13.434630Z","updated_at":"2024-05-11T03:22:18.645693Z","user_id":2,"status":"PUBLIC","parent_id":null,"id":1394,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let userData = {\n credits: 50, // Default starting credits\n premiumCredits: 3 // Default starting premium credits\n};\nfunction setCookie(name, value, days) {\n let expires = \"\";\n if (days) {\n let date = new Date();\n date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));\n expires = \"; expires=\" + date.toUTCString();\n }\n document.cookie = name + \"=\" + (value || \"\") + expires + \"; path=/\";\n}\nfunction getCookie(name) {\n let nameEQ = name + \"=\";\n let ca = document.cookie.split(';');\n for (let i = 0; i < ca.length; i++) {\n let c = ca[i];\n while (c.charAt(0) === ' ') c = c.substring(1);\n if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length);\n }\n return null;\n}\nfunction updateCreditDisplay() {\n document.getElementById('credit-balance').textContent = userData.credits;\n document.getElementById('premium-credit-balance').textContent = userData.premiumCredits;\n}\nfunction addCredits(amount) {\n userData.credits += amount;\n updateCreditDisplay();\n setCookie('credits', userData.credits, 7); // Update cookie to expire in 7 days\n}\n\nfunction subtractCredits(amount) {\n if (userData.credits >= amount) {\n userData.credits -= amount;\n updateCreditDisplay();\n setCookie('credits', userData.credits, 7); // Update cookie\n } else {\n console.log(\"Not enough credits\");\n }\n}\n\nfunction addPremiumCredits(amount) {\n userData.premiumCredits += amount;\n updateCreditDisplay();\n setCookie('premiumCredits', userData.premiumCredits, 7); // Update cookie\n}\n\nfunction subtractPremiumCredits(amount) {\n if (userData.premiumCredits >= amount) {\n userData.premiumCredits -= amount;\n updateCreditDisplay();\n setCookie('premiumCredits', userData.premiumCredits, 7); // Update cookie\n } else {\n console.log(\"Not enough premium credits\");\n }\n}\nfunction loadURLInIframe(url) {\n const iframe = document.getElementById('web-viewer');\n let hasLoaded = false;\n\n // Clear previous error messages\n displayIframeLoadError(false);\n\n iframe.onload = function() {\n clearTimeout(iframe.timer);\n hasLoaded = true;\n // Additional logic to verify iframe content could go here\n };\n\n iframe.src = url;\n\n // Adjusted timeout for a better heuristic\n iframe.timer = setTimeout(function() {\n if (!hasLoaded) {\n // If the iframe hasn't loaded, assume it's blocked\n displayIframeLoadError(true);\n }\n }, 500); // Giving more time for the site to load\n}\n\nfunction displayIframeLoadError(show) {\n console.log(show)\n const errorElement = document.getElementById('iframe-error-message');\n if (errorElement) {\n if (show) {\n const message = \"Failed to Load Webpage. The site might not allow being displayed in an iframe.\";\n errorElement.textContent = message;\n errorElement.style.display = 'block';\n } else {\n errorElement.style.display = 'none';\n }\n }\n}\ndocument.addEventListener('DOMContentLoaded', (event) => {\n let storedCredits = getCookie('credits');\n let storedPremiumCredits = getCookie('premiumCredits');\n\n if (storedCredits) userData.credits = parseInt(storedCredits);\n if (storedPremiumCredits) userData.premiumCredits = parseInt(storedPremiumCredits);\n\n updateCreditDisplay();\n});\n\ndocument.getElementById('go-btn').addEventListener('click', function () {\n const urlInput = document.getElementById('url-input').value;\n console.log('Go button clicked, user input:', urlInput); // Debug log\n if (urlInput.trim() !== '') {\n sendMessageToAI(urlInput);\n document.getElementById('url-input').value = ''; // Clear input after sending\n }\n});\nfunction sendMessageToAI(message) {\n const proxyUrl = 'https://corsproxy.io/?';\n const apiUrl = 'https://goldai.onrender.com/v1/chat/completions';\n const modelSelector = document.getElementById('ai-model-selector');\n const selectedModel = modelSelector.options[modelSelector.selectedIndex].value;\n\n let prompt;\n // Deduct credits based on the selected model\n switch (selectedModel) {\n case \"claude-3-opus\": // Coder+\n if (userData.premiumCredits < 3) {\n alert(\"Not enough premium credits for Coder+.\");\n return; // Exit the function if not enough credits\n } else {\n subtractPremiumCredits(3);\n prompt = \"You are a coding assistant. Respond always in html. Only respond html code nothing else. If asked to summarize respond the summary instead of code\";\n }\n break;\n case \"llama-2-7b\": // Lighting Legacy\n if (userData.credits < 1) {\n alert(\"Not enough credits for Lighting Legacy.\");\n return; // Exit the function if not enough credits\n } else {\n subtractCredits(1);\n prompt = \"You are an AI Search Assistant. You can navigate using !navigate url. It must be the full https url. Only respond the !navigate and nothing else. You will be embeded in a website so only use embedable websites. If asked to embed google use https://www.google.com/webhp?igu=1&gws_rd=ssl\";\n }\n break;\n case \"gpt-4-0125-preview\": // Coder\n if (userData.premiumCredits < 1) {\n alert(\"Not enough premium credits for Coder.\");\n return; // Exit the function if not enough credits\n } else {\n subtractPremiumCredits(1);\n prompt = \"You are a coding assistant. Respond always in html. Only respond html code nothing else. If asked to summarize respond the summary instead of code. Never add metadata unless asked and other additional things. Use as little code to make the result. Minify your code to use as little charchtors as possible. Never say ```html just respond directly the html. If asked to say Hello say hi or another smaller version.\";\n }\n break;\n case \"claude-3-sonnet\": // Genius\n if (userData.credits < 25) {\n alert(\"Not enough credits for Genius.\");\n return; // Exit the function if not enough credits\n } else {\n subtractCredits(25);\n prompt = \"You are an AI Search Assistant. You can navigate using !navigate url. It must be the full https url. Only respond the !navigate and nothing else. You will be embeded in a website so only use embedable websites. If asked to embed google use https://www.google.com/webhp?igu=1&gws_rd=ssl\";\n }\n break;\n case \"claude-3-haiku\": // Base\n if (userData.credits < 4) {\n alert(\"Not enough credits for Base.\");\n return; // Exit the function if not enough credits\n } else {\n subtractCredits(4);\n prompt = \"You are an AI Search Assistant. You can navigate using !navigate url. It must be the full https url. Only respond the !navigate and nothing else. You will be embeded in a website so only use embedable websites. If asked to embed google use https://www.google.com/webhp?igu=1&gws_rd=ssl\";\n }\n break;\n case \"llama-3-70b\": // Lighting\n if (userData.credits < 2) {\n alert(\"Not enough credits for Lighting.\");\n return; // Exit the function if not enough credits\n } else {\n subtractCredits(2);\n prompt = \"You are an AI Search Assistant. You can navigate using !navigate url. It must be the full https url. Only respond the !navigate and nothing else. You will be embeded in a website so only use embedable websites. If asked to embed google use https://www.google.com/webhp?igu=1&gws_rd=ssl\";\n }\n break;\n default:\n alert(\"Selected model is not supported.\");\n return; // Exit the function if the model is not recognized\n }\n\n fetch(proxyUrl + apiUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': 'Bearer 2%aK3@*l2X1',\n },\n body: JSON.stringify({\n model: selectedModel,\n messages: [\n {\n role: \"system\",\n content: prompt\n },\n {\n role: \"user\",\n content: message\n }\n ]\n })\n })\n .then(response => response.json())\n .then(data => {\n if (data.choices && data.choices.length > 0 && 'message' in data.choices[0]) {\n const aiMessage = data.choices[0].message;\n if (selectedModel === \"claude-3-opus\" || selectedModel === \"gpt-4-0125-preview\") {\n // Directly display the AI-generated HTML code in the iframe\n const iframe = document.getElementById('web-viewer');\n iframe.contentWindow.document.open();\n iframe.contentWindow.document.write(aiMessage);\n iframe.contentWindow.document.close();\n } else if (aiMessage.startsWith('!navigate ')) {\n const url = aiMessage.replace('!navigate ', '').trim();\n if (url) {\n loadURLInIframe(url); // Use the loadURLInIframe function to set the URL and handle errors\n }\n } else {\n // Optionally, handle non-navigate responses differently\n alert(aiMessage);\n }\n } else {\n console.error('Unexpected response structure:', data);\n }\n })\n}\n\nfunction displayMessage(message, sender) {\n console.log(`Displaying message from ${sender}:`, message); // Debug log\n const chatHistory = document.getElementById('chat-history');\n const messageElement = document.createElement('div');\n messageElement.textContent = `${sender === 'bot' ? 'Bot' : 'You'}: ${message}`;\n chatHistory.appendChild(messageElement);\n\n // Scroll to the bottom of the chat history to show the new message\n chatHistory.scrollTop = chatHistory.scrollHeight;\n}\ndocument.getElementById('summarize-btn').addEventListener('click', function () {\n // Placeholder for summarization functionality\n summarizePage();\n});\n\nfunction summarizePage() {\n const iframe = document.getElementById('web-viewer');\n const currentUrl = iframe.src;\n\n // Check if the iframe is displaying direct HTML content or a webpage via URL\n if (currentUrl === 'about:blank') {\n // If displaying direct HTML content, use summarizeHTMLContent\n console.log('Summarizing direct HTML content');\n summarizeHTMLContent();\n } else {\n // If displaying content from a URL, craft and send the AI command for summarization\n const summarizeCommand = `!summarize ${currentUrl}`;\n console.log('Sending summarization command to AI:', summarizeCommand);\n sendMessageToAI(summarizeCommand);\n }\n}\nfunction summarizeHTMLContent() {\n const iframe = document.getElementById('web-viewer');\n const doc = iframe.contentDocument || iframe.contentWindow.document;\n\n // Expanded list of tags\n const tags = [\n 'p', 'h1', 'h2', 'h3', 'h4', 'img', 'a', // Existing tags\n 'h5', 'h6', 'span', 'strong', 'em', 'blockquote', 'code', 'pre', 'li',\n 'dl', 'dt', 'dd', 'table', 'th', 'tr', 'td', 'input', 'textarea', 'button',\n 'label', 'select', 'option', 'figcaption', 'figure' // Added tags\n ];\n let extractedContent = '';\n\n tags.forEach(tag => {\n const elements = doc.getElementsByTagName(tag);\n for (let i = 0; i < elements.length; i++) {\n if (tag === 'img' && elements[i].alt) {\n extractedContent += 'Image alt text: ' + elements[i].alt + '. ';\n } else if (tag === 'a' && elements[i].href) {\n extractedContent += 'Link: ' + elements[i].textContent + ' (' + elements[i].href + '). ';\n } else if (tag === 'input' || tag === 'textarea' || tag === 'button') {\n const value = elements[i].value || elements[i].textContent;\n extractedContent += `${tag.charAt(0).toUpperCase() + tag.slice(1)}: ${value}. `;\n } else if (tag === 'select') {\n const selectedOption = elements[i].options[elements[i].selectedIndex];\n const value = selectedOption ? selectedOption.text : '';\n extractedContent += `Select: ${value}. `;\n } else if (elements[i].textContent) {\n extractedContent += elements[i].textContent + '. ';\n }\n }\n });\n\n console.log('Extracted content for summarization:', extractedContent);\n // Here, you can send `extractedContent` to your AI model for summarization\n sendMessageToAI(`Summarize: ${extractedContent}`);\n}\nfunction displayDefaultIframeMessage() {\n const iframe = document.getElementById('web-viewer');\n // Adjusted the margin-top to be less, moving the message closer to the top\n const message = '

Go type a command above ⬆️

';\n iframe.contentWindow.document.open();\n iframe.contentWindow.document.write(message);\n iframe.contentWindow.document.close();\n}","style.css":"body,\r\nhtml {\r\n height: 100%;\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n}\r\n\r\n.navbar {\r\n display: flex;\r\n padding: 10px;\r\n background-color: #f0f0f0;\r\n}\r\n\r\ninput[type=\"text\"] {\r\n flex-grow: 1;\r\n padding: 10px;\r\n margin-right: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 5px;\r\n}\r\n\r\nbutton {\r\n padding: 10px 20px;\r\n border: none;\r\n background-color: #007bff;\r\n color: white;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n}\r\n\r\nbutton:hover {\r\n background-color: #0056b3;\r\n}\r\n\r\n#iframe {\r\n width: 100%;\r\n border: none;\r\n}\r\n\r\n#ai-model-selector {\r\n padding: 10px;\r\n margin-right: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 5px;\r\n background-color: #ffffff;\r\n cursor: pointer;\r\n}\r\n\r\n#coming-soon-ad {\r\n position: fixed;\r\n bottom: 20px;\r\n left: 20px;\r\n background-color: #fffae6;\r\n color: #333;\r\n padding: 10px 20px;\r\n border-radius: 5px;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n font-size: 14px;\r\n}\r\n#credit-info {\r\n display: flex;\r\n justify-content: space-around;\r\n padding: 10px;\r\n background-color: #f9f9f9;\r\n border-bottom: 1px solid #ddd;\r\n font-size: 16px;\r\n}\r\n\r\n#credit-info span {\r\n font-weight: bold;\r\n color: #007bff;\r\n}","index.html":"\n\n\n\n \n \n Web Navigator\n \n\n

\n Credits: 100\n Premium Credits: 10\n

\n\n\n \n \n \n\n\n\n

Coder+ & Coder is Here!

"},"chat_history":[{"deleted":0,"code_id":79482,"input_tokens":null,"id":41850,"project_id":1394,"sender":"human","message":"add differnet AI Models it can use\nLighting, Basic, Plus, Genius which each corrsonpend to a model id","created_at":"2024-05-10T17:36:16.880966Z","output_tokens":null},{"deleted":0,"code_id":79482,"input_tokens":null,"id":41851,"project_id":1394,"sender":"ai","message":"```html\n\n```\n\n- This HTML snippet adds a dropdown (``) allows users to choose between different AI models (Genius, Plus, Basic, Lighting), corresponding to specific model IDs.\n\n2. **Sending Messages to AI**: The `sendMessageToAI` function takes a message (in this case, the summary command) and sends it to the AI processing endpoint. It includes the selected model ID in the request, ensuring that the AI uses the correct model for generating responses.\n\n3. **Summarization Command**: The `summarizePage` function is designed to send a summarization command to the AI. Since it calls `sendMessageToAI` for sending the command, it inherently uses the model selected by the user.\n\nHere's a crucial excerpt from the `sendMessageToAI` function that highlights how the selected model is incorporated into the API request:\n\n```javascript\nconst modelSelector = document.getElementById('ai-model-selector');\nconst selectedModel = modelSelector.options[modelSelector.selectedIndex].value;\n\nfetch(proxyUrl + apiUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': 'Bearer 2%aK3@*l2X1',\n },\n body: JSON.stringify({\n model: selectedModel,\n ...\n })\n})\n```\n\n- The `selectedModel` variable captures the model ID from the dropdown.\n- This model ID is then used in the body of the API request (`model: selectedModel`), ensuring that the AI processes the message using the specified model.\n\nSince the `summarizePage` function uses `sendMessageToAI` to send the summary command, and `sendMessageToAI` incorporates the selected model into its request, the summarization automatically uses the selected AI model. There's no need for further modifications to achieve this functionality based on the current code structure.","created_at":"2024-05-10T17:39:33.304347Z","output_tokens":null},{"deleted":0,"code_id":79495,"input_tokens":null,"id":41856,"project_id":1394,"sender":"human","message":"set deafult model to lighting","created_at":"2024-05-10T17:40:41.155241Z","output_tokens":null},{"deleted":0,"code_id":79495,"input_tokens":null,"id":41857,"project_id":1394,"sender":"ai","message":"```html\n\n```\n\n- The `selected` attribute is added to the \"Lighting\" option within the `` element in your HTML file to include this new option. Here's how to do it:\n\n```html\n\n```\n\n- The first `