|
|
|
|
|
|
|
|
|
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Mr. Mxyzptlk - Converse com um Modelo | Fourlabs</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link rel="icon" type="image/x-icon" href="/static/imgs/icon.svg"> |
| <link rel="stylesheet" href="/static/style/dashboard.css"> |
| <link rel="stylesheet" type="text/css" href="/static/style/alert.css"> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#21223a', |
| secondary: '#ff580f', |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-100"> |
| <div id="alert-container" style="position: fixed; top: 80px; right: 20px; z-index: 1000; width: 100%; max-width: 500px;"></div> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-primary text-white w-64 md:w-20 lg:w-64 fixed h-full overflow-y-auto"> |
| <div class="p-4 border-b border-gray-700"> |
| <div class="w-full flex flex-col items-center justify-center"> |
| <img |
| alt="logo" |
| loading="lazy" |
| width="100" |
| height="100" |
| decoding="async" |
| data-nimg="1" |
| class="w-36" |
| src="/static/imgs/logo-branco-labs.svg" |
| style="color: transparent;margin-top: 8px;" |
| > |
| <p |
| class="text-[10px] text-white mt-2 text-center" |
| style="margin-top: -1px; margin-left: 12px;font-size: 9px;"> |
| Inovação e experimentação |
| </p> |
| </div> |
| </div> |
|
|
| <div class="p-4"> |
| <div class="flex items-center space-x-3 mb-6"> |
| <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center"> |
| <span class="font-bold">MS</span> |
| </div> |
| <div class="lg:block hidden"> |
| <h3 class="font-semibold">Marlon Sousa</h3> |
| <p class="text-xs text-gray-400">Admin</p> |
| </div> |
| </div> |
|
|
| <nav> |
| <ul class="space-y-2"> |
| <li> |
| <a href="/" |
| class="sidebar-item flex items-center p-3 rounded-lg |
| active"> |
| <i class="fa-solid fa-server text-secondary w-6 text-center"></i> |
| <span class="ml-3 lg:block hidden">Instances</span> |
| </a> |
| </li> |
| <li> |
| <a href="" |
| class="sidebar-item flex items-center p-3 rounded-lg |
| "> |
| <i class="fa-solid fa-cubes text-secondary w-6 text-center"></i> |
| <span class="ml-3 lg:block hidden">Moxe</span> |
| </a> |
| </li> |
| <li> |
| <a href="/" |
| class="sidebar-item flex items-center p-3 rounded-lg |
| "> |
| <i class="fa-solid fa-robot text-secondary w-5 h-5 mr-3"></i> |
| <span class="ml-3 lg:block hidden">Agentes</span> |
| </a> |
| </li> |
| <li> |
| <a href="/" |
| class="sidebar-item flex items-center p-3 rounded-lg |
| "> |
| <i class="fa-solid fa-diagram-project text-secondary w-5 h-5 mr-3"></i> |
| <span class="ml-3 lg:block hidden">Projetos</span> |
| </a> |
| </li> |
| <li> |
| <a href="/" |
| class="sidebar-item flex items-center p-3 rounded-lg |
| "> |
| <i data-feather="activity" class="text-secondary w-5 h-5 mr-3"></i> |
| <span class="ml-3 lg:block hidden">Atividade</span> |
| </a> |
| </li> |
| <li> |
| <a href="/settings/" |
| class="sidebar-item flex items-center p-3 rounded-lg |
| "> |
| <i class="fa-solid fa-screwdriver-wrench text-secondary w-6 text-center"></i> |
| <span class="ml-3 lg:block hidden">Configurações</span> |
| </a> |
| </li> |
| </ul> |
| </nav> |
| </div> |
|
|
| <div class="absolute bottom-0 w-full p-4 border-t border-gray-700"> |
| <form id="logout-form" method="POST" action="/account/logout/" class="hidden"> |
| <input type="hidden" name="csrfmiddlewaretoken" value="MnYe4YaLuTb5AZgEnVFzWrZPFMBdPA80wkFGxjael4hIsejNxadyoK7h2ziCbTe5"> |
| </form> |
|
|
| <a href="#" onclick="document.getElementById('logout-form').submit(); return false;" class="sidebar-item flex items-center p-3 rounded-lg"> |
| <i class="fas fa-sign-out-alt text-secondary w-6 text-center"></i> |
| <span class="ml-3 lg:block hidden">Logout</span> |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 ml-0 md:ml-20 lg:ml-64 overflow-y-auto"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="flex items-center justify-between p-4"> |
| <div class="flex items-center space-x-4"> |
| <button id="mobileToggleSidebar" class="text-gray-600 lg:hidden block"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <h1 class="text-xl font-bold text-primary">Converse com um Modelo</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="/launch/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> |
| <i data-feather="plus" class="mr-2 w-4 h-4"></i> |
| Subir Instância |
| </a> |
| <div class="relative"> |
| <button id="notificationsBtn" class="relative"> |
| <i class="fas fa-bell text-xl text-gray-600"></i> |
| <span class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">0</span> |
| </button> |
| <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-50"> |
| <div class="py-1"> |
| <div class="px-4 py-2 border-b border-gray-200"> |
| <h3 class="text-sm font-medium text-gray-700">Notifications</h3> |
| </div> |
| |
| </div> |
| <div class="px-4 py-2 bg-gray-50 text-center"> |
| <a href="#" class="text-sm font-medium text-secondary hover:text-primary">View all notifications</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| |
|
|
| <style> |
| :root { |
| --primary: #21223a; |
| --secondary: #ff580f; |
| } |
| |
| .chat-container { |
| scroll-behavior: smooth; |
| height: calc(100% - 28%); |
| overflow-y: auto; |
| } |
| |
| .message-bubble { |
| max-width: 80%; |
| animation: fadeIn 0.3s ease-in; |
| } |
| |
| .typing-indicator { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| } |
| |
| .typing-dot { |
| width: 6px; |
| height: 6px; |
| background-color: var(--secondary); |
| border-radius: 50%; |
| animation: typing 1.4s infinite ease-in-out; |
| } |
| |
| .typing-dot:nth-child(2) { animation-delay: 0.16s; } |
| .typing-dot:nth-child(3) { animation-delay: 0.32s; } |
| |
| @keyframes typing { |
| 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } |
| 30% { transform: translateY(-10px); opacity: 1; } |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .llm-option:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(33, 34, 58, 0.15); |
| } |
| </style> |
|
|
| <div class="bg-gray-50 border-b border-gray-200 p-3"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <span class="text-sm text-gray-600">Modelo:</span> |
| <select class="w-full px-4 py-3 border border-gray-200 rounded-xl" name="model" id="modelSelect"> |
| |
| |
| |
| <option value="2c387c0e-838d-4c68-8257-296cf0b68469" selected> |
| granite-code:8b |
| </option> |
| |
| |
| |
| |
| |
| <option value="5fef64b9-ac1d-4461-a9e9-148582e780f0" > |
| deepseek-r1:7b |
| </option> |
| |
| |
| |
| |
| |
| <option value="95d05e19-6063-4fa2-804a-c551e37358b5" > |
| deepseek-r1:1.5b |
| </option> |
| |
| |
| |
| |
| |
| <option value="0b685e78-a520-4d3a-8adc-f3f3305d4162" > |
| llama3.2:3b |
| </option> |
| |
| |
| |
| |
| |
| |
| |
| </select> |
| </div> |
|
|
| <div class="flex items-center space-x-2"> |
| <button |
| id="uploadPdfBtn" |
| class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff580f]" |
| > |
| <i data-feather="upload" class="mr-2 w-4 h-4"></i> |
| Enviar PDF |
| </button> |
| <button |
| id="generateCodeBtn" |
| class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium |
| rounded-md text-white bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff580f]" |
| > |
| <i data-feather="code" class="mr-2 w-4 h-4"></i> |
| Gerar Código |
| </button> |
|
|
|
|
| </div> |
| </div> |
| </div> |
|
|
|
|
| |
| <div class="flex-1 p-6 space-y-6 chat-container overflow-y-auto" id="chatMessages"> |
| </div> |
|
|
| |
| <div class="bg-white border-t border-gray-200 p-6"> |
| <div class="flex items-center space-x-4"> |
| <div class="flex-1 relative"> |
| <input |
| type="text" |
| placeholder="Digite sua mensagem..." |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ff580f] focus:border-transparent" |
| id="messageInput" |
| > |
| <div class="absolute right-3 top-3 flex items-center space-x-2"> |
| <button class="text-gray-400 hover:text-[#ff580f] transition-colors"> |
| <i data-feather="paperclip"></i> |
| </button> |
| <button class="text-gray-400 hover:text-[#ff580f] transition-colors"> |
| <i data-feather="mic"></i> |
| </button> |
| </div> |
| </div> |
| <button |
| class="bg-[#ff580f] hover:bg-[#e64a0c] text-white p-3 rounded-lg transition-colors duration-200" |
| onclick="sendMessage()" |
| > |
| <i data-feather="send"></i> |
| </button> |
| </div> |
|
|
| <div class="mt-3 flex items-center justify-end"> |
| <span class="text-sm text-gray-500">⌘K para atalhos</span> |
| </div> |
| </div> |
|
|
| <div id="pdfUploadModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"> |
| <div class="relative top-20 mx-auto p-5 border max-w-3xl shadow-lg rounded-md bg-white"> |
| <div class="mt-3 text-center"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-[#ff580f]"> |
| <i data-feather="file-text" class="text-white"></i> |
| </div> |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mt-2"> |
| Enviar PDF |
| </h3> |
| <div class="mt-2 px-7 py-3"> |
| <p class="text-sm text-gray-500"> |
| Selecione um arquivo PDF para enviar e processar. |
| </p> |
| <form class="mt-4"> |
| <div class="flex items-center justify-center w-full"> |
| <label for="pdfFile" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> |
| <i data-feather="upload-cloud" class="w-8 h-8 text-gray-400"></i> |
| <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Clique para enviar</span> ou arraste e solte</p> |
| <p class="text-xs text-gray-500">PDF (MAX. 10MB)</p> |
| </div> |
| <input id="pdfFile" name="pdfFile" type="file" class="hidden" accept=".pdf"> |
| </label> |
| </div> |
| </form> |
| <div class="items-center px-4 py-3 mt-4"> |
| <button |
| id="uploadSubmitBtn" |
| class="px-4 py-2 bg-[#ff580f] text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-[#e64a0c] focus:outline-none focus:ring-2 focus:ring-[#ff580f]"> |
| Enviar PDF |
| </button> |
| <button |
| id="uploadCancelBtn" |
| class="mt-3 px-4 py-2 bg-gray-300 text-gray-700 text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500"> |
| Cancelar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div id="codeModal" class="fixed inset-0 z-50 hidden flex items-center justify-center"> |
| <div class="bg-white rounded-lg shadow-lg w-full max-w-5xl h-[75vh] flex flex-col p-6"> |
| |
| <div class="flex justify-between items-center mb-4 border-b pb-2"> |
| <h2 class="text-xl font-semibold text-gray-800">Código para Ollama</h2> |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700 text-xl leading-none">✕</button> |
| </div> |
|
|
| |
| <div class="flex items-end space-x-3 mb-4"> |
| <div class="flex-1"> |
| <label for="languageSelect" class="block text-sm font-medium text-gray-700 mb-1">Linguagem:</label> |
| <select |
| id="languageSelect" |
| class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#ff580f]" |
| > |
| <option value="python">Python</option> |
| <option value="javascript">JavaScript</option> |
| <option value="java">Java</option> |
| <option value="csharp">C#</option> |
| </select> |
| </div> |
|
|
| <button |
| id="copyCodeBtn" |
| class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none" |
| > |
| <i data-feather="copy" class="mr-2 w-4 h-4"></i> |
| Copiar Código |
| </button> |
|
|
| <button |
| id="viewDocsBtn" |
| class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none" |
| > |
| <i data-feather="book-open" class="mr-2 w-4 h-4"></i> |
| Ver Documentação |
| </button> |
| </div> |
| |
| <div class="flex-1 rounded-md p-4 overflow-auto border border-gray-700" style="background-color: #21223a;"> |
| <pre class="h-full"><code id="exampleCode" class="language-python"></code></pre> |
| </div> |
| </div> |
| </div> |
|
|
|
|
| <script> |
| feather.replace(); |
| |
| |
| const uploadPdfBtn = document.getElementById('uploadPdfBtn'); |
| const pdfUploadModal = document.getElementById('pdfUploadModal'); |
| const uploadCancelBtn = document.getElementById('uploadCancelBtn'); |
| const uploadSubmitBtn = document.getElementById('uploadSubmitBtn'); |
| const pdfFileInput = document.getElementById('pdfFile'); |
| |
| uploadPdfBtn.addEventListener('click', function() { |
| pdfUploadModal.classList.remove('hidden'); |
| }); |
| |
| uploadCancelBtn.addEventListener('click', function() { |
| pdfUploadModal.classList.add('hidden'); |
| pdfFileInput.value = ''; |
| }); |
| |
| uploadSubmitBtn.addEventListener('click', function() { |
| const file = pdfFileInput.files[0]; |
| if (!file) { |
| alert('Por favor, selecione um arquivo PDF.'); |
| return; |
| } |
| |
| if (file.type !== 'application/pdf') { |
| alert('Por favor, selecione apenas arquivos PDF.'); |
| return; |
| } |
| |
| if (file.size > 10 * 1024 * 1024) { |
| alert('O arquivo é muito grande. Tamanho máximo: 10MB.'); |
| return; |
| } |
| |
| |
| addMessage(`PDF enviado: ${file.name}`, 'user'); |
| addMessage(`Estou processando o arquivo "${file.name}". Em breve poderei responder perguntas sobre seu conteúdo.`, 'ai'); |
| |
| pdfUploadModal.classList.add('hidden'); |
| pdfFileInput.value = ''; |
| }); |
| |
| |
| pdfUploadModal.addEventListener('click', function(e) { |
| if (e.target === pdfUploadModal) { |
| pdfUploadModal.classList.add('hidden'); |
| pdfFileInput.value = ''; |
| } |
| }); |
| |
| const chatMessages = document.getElementById('chatMessages'); |
| const messageInput = document.getElementById('messageInput'); |
| |
| function sendMessage() { |
| const message = messageInput.value.trim(); |
| if (!message) return; |
| |
| const modelSelect = document.querySelector("select"); |
| const selectedModelId = modelSelect.value; |
| |
| addMessage(message, 'user'); |
| messageInput.value = ''; |
| addTypingIndicator(); |
| |
| fetch("/chatbot/", { |
| method: "POST", |
| headers: { |
| "Content-Type": "application/json", |
| "X-CSRFToken": getCookie("csrftoken") |
| }, |
| body: JSON.stringify({ |
| message: message, |
| model_id: selectedModelId |
| }) |
| }) |
| .then(response => { |
| const reader = response.body.getReader(); |
| const decoder = new TextDecoder(); |
| let accumulatedText = ""; |
| |
| function readChunk() { |
| reader.read().then(({ done, value }) => { |
| if (done) { |
| removeTypingIndicator(); |
| addMessage(accumulatedText.trim(), 'ai'); |
| return; |
| } |
| |
| const chunk = decoder.decode(value, { stream: true }); |
| const lines = chunk.split("\n\n"); |
| for (const line of lines) { |
| if (line.startsWith("data: ")) { |
| const data = line.replace("data: ", ""); |
| if (data === "[FIM]") { |
| removeTypingIndicator(); |
| addMessage(accumulatedText.trim(), 'ai'); |
| return; |
| } else { |
| console.log(data) |
| accumulatedText += data; |
| updateTypingIndicatorText(accumulatedText); |
| } |
| } |
| } |
| readChunk(); |
| }); |
| } |
| |
| readChunk(); |
| }) |
| .catch(error => { |
| console.error(error); |
| removeTypingIndicator(); |
| addMessage("Erro ao conectar com o servidor.", 'ai'); |
| }); |
| } |
| |
| function getCookie(name) { |
| let cookieValue = null; |
| if (document.cookie && document.cookie !== '') { |
| const cookies = document.cookie.split(';'); |
| for (let i = 0; i < cookies.length; i++) { |
| const cookie = cookies[i].trim(); |
| if (cookie.substring(0, name.length + 1) === (name + '=')) { |
| cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); |
| break; |
| } |
| } |
| } |
| return cookieValue; |
| } |
| |
| function updateTypingIndicatorText(text) { |
| const typingIndicator = document.getElementById('typingIndicator'); |
| if (typingIndicator) { |
| typingIndicator.innerHTML = `<p>${text}</p>`; |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| } |
| |
| function addMessage(text, sender) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `message-bubble ${sender === 'user' ? 'bg-white rounded-2xl p-4 shadow-md ml-auto' : 'bg-[#21223a] text-white rounded-2xl p-4 shadow-md'}`; |
| |
| const messageContent = document.createElement('p'); |
| messageContent.className = sender === 'user' ? 'text-gray-800' : 'text-white'; |
| messageContent.textContent = text; |
| |
| const timestamp = document.createElement('span'); |
| timestamp.className = `text-xs block mt-2 ${sender === 'user' ? 'text-gray-500' : 'text-gray-300'}`; |
| timestamp.textContent = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
| |
| messageDiv.appendChild(messageContent); |
| messageDiv.appendChild(timestamp); |
| chatMessages.appendChild(messageDiv); |
| |
| |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| function addTypingIndicator() { |
| const typingDiv = document.createElement('div'); |
| typingDiv.className = 'message-bubble bg-[#21223a] text-white rounded-2xl p-4 shadow-md'; |
| typingDiv.id = 'typingIndicator'; |
| |
| const typingContent = document.createElement('div'); |
| typingContent.className = 'typing-indicator'; |
| |
| for (let i = 0; i < 3; i++) { |
| const dot = document.createElement('div'); |
| dot.className = 'typing-dot'; |
| typingContent.appendChild(dot); |
| } |
| |
| typingDiv.appendChild(typingContent); |
| chatMessages.appendChild(typingDiv); |
| |
| |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| function removeTypingIndicator() { |
| const typingIndicator = document.getElementById('typingIndicator'); |
| if (typingIndicator) { |
| typingIndicator.remove(); |
| } |
| } |
| |
| |
| messageInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| |
| document.querySelectorAll('.llm-option').forEach(option => { |
| option.addEventListener('click', function() { |
| document.querySelectorAll('.llm-option').forEach(opt => { |
| opt.classList.remove('border-[#ff580f]'); |
| }); |
| this.classList.add('border-[#ff580f]'); |
| |
| const modelName = this.querySelector('span').textContent; |
| document.querySelector('.mt-3 span:first-child').textContent = `Modelo selecionado: ${modelName}`; |
| }); |
| }); |
| </script> |
|
|
| <link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css" rel="stylesheet" /> |
| <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-python.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-java.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-csharp.min.js"></script> |
|
|
| <script> |
| document.addEventListener("DOMContentLoaded", () => { |
| feather.replace(); |
| |
| |
| const openModal = document.getElementById("generateCodeBtn"); |
| const codeModal = document.getElementById("codeModal"); |
| const closeModal = document.getElementById("closeModal"); |
| |
| openModal.addEventListener("click", () => codeModal.classList.remove("hidden")); |
| closeModal.addEventListener("click", () => codeModal.classList.add("hidden")); |
| |
| |
| const languageSelect = document.getElementById("languageSelect"); |
| const codeEl = document.getElementById("exampleCode"); |
| const copyBtn = document.getElementById("copyCodeBtn"); |
| const docsBtn = document.getElementById("viewDocsBtn"); |
| |
| |
| const codeExamples = { |
| python: `import ollama |
| |
| response = ollama.chat(model="llama3", messages=[ |
| {"role": "user", "content": "Olá, mundo!"} |
| ]) |
| |
| print(response['message']['content'])`, |
| javascript: `import ollama from "ollama"; |
| |
| const response = await ollama.chat({ |
| model: "llama3", |
| messages: [{ role: "user", content: "Olá, mundo!" }], |
| }); |
| |
| console.log(response.message.content);`, |
| java: `import java.util.*; |
| |
| public class Main { |
| public static void main(String[] args) { |
| System.out.println("Olá, mundo!"); |
| } |
| }`, |
| csharp: `using System; |
| |
| class Program { |
| static void Main() { |
| Console.WriteLine("Olá, mundo!"); |
| } |
| }` |
| }; |
| |
| |
| languageSelect.addEventListener("change", (e) => { |
| const lang = e.target.value; |
| codeEl.className = "language-" + lang; |
| codeEl.textContent = codeExamples[lang]; |
| Prism.highlightElement(codeEl); |
| }); |
| |
| |
| copyBtn.addEventListener("click", () => { |
| navigator.clipboard.writeText(codeEl.textContent); |
| copyBtn.innerHTML = '<i data-feather="check" class="mr-2 w-4 h-4"></i>Copiado!'; |
| feather.replace(); |
| setTimeout(() => { |
| copyBtn.innerHTML = '<i data-feather="copy" class="mr-2 w-4 h-4"></i>Copiar Código'; |
| feather.replace(); |
| }, 1500); |
| }); |
| |
| |
| const docsUrls = { |
| python: "https://docs.python.org/3/", |
| javascript: "https://developer.mozilla.org/pt-BR/docs/Web/JavaScript", |
| java: "https://docs.oracle.com/en/java/", |
| csharp: "https://learn.microsoft.com/dotnet/csharp/" |
| }; |
| docsBtn.addEventListener("click", () => { |
| const lang = languageSelect.value; |
| window.open(docsUrls[lang], "_blank"); |
| }); |
| |
| |
| Prism.highlightElement(codeEl); |
| }); |
| </script> |
|
|
|
|
|
|
| </div> |
| </div> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| |
| VANTA.NET({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x3b82f6, |
| backgroundColor: 0xf8fafc, |
| points: 12.00, |
| maxDistance: 22.00, |
| spacing: 18.00 |
| }); |
| |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.pagination a').forEach(link => { |
| link.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| |
| if(this.textContent.trim() === '2' || this.textContent.trim() === '3') { |
| alert('Loading page ' + this.textContent.trim()); |
| } |
| }); |
| }); |
| </script> |
| <script src="/static/script/alert.js"></script> |
|
|
| |
| </body> |
| </html> |
| |
