| 
<!DOCTYPE html><html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>LLM local</title>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" href="./assets/css/dark.min.css">
 <script src="./assets/js/highlight.min.js"></script>
 
 <style>
 body { font-family: Arial, sans-serif; margin: 20px; }
 #output { border: 1px solid #ccc; padding: 10px; height: 500px; overflow-y: scroll; background: #f9f9f9; }
 pre { background: #282c34; color: white; padding: 10px; border-radius: 5px; overflow-x: auto; }
 code { font-family: "Courier New", monospace; }
 </style>
 </head>
 <body>
 
 <div class="offcanvas offcanvas-start" tabindex="-1" id="historySidebar">
 <div class="offcanvas-header">
 <h5 class="offcanvas-title">? Histórico</h5>
 <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
 </div>
 <div class="offcanvas-body">
 <ul id="historyList" class="list-group"></ul>
 </div>
 </div>
 
 <div class="row">
 <div class="col-sm-9">
 <div id="output"></div>
 <div id="form">
 <input type="text" id="userInput" class="form-control" placeholder="Digite sua mensagem..." >
 <input type="file" id="imageInput" accept="image/*" class="form-control mt-2">
 <button id="btnenvia" class="btn btn-outline-secondary">Enviar</button>
 </div>
 </div>
 <div class="col-sm">
 <button class="btn btn-primary m-2" data-bs-toggle="offcanvas" data-bs-target="#historySidebar">
 ? Histórico de Conversas
 </button>
 <hr>
 <label for="modelSelect">Escolha o Modelo:</label>
 <select id="modelSelect" class="form-select">
 <option value="gemma-3-4b-it:2" >Gemma 3:4B (aceita imagem)</option>
 <option value="gemma2:2b" >Gemma 2:2B</option>
 <option value="gemma2" >Gemma 2:9B</option>
 <option value="deepseek-r1">Deepseek R1</option>
 <option value="llama3" >Llama 3</option>
 </select>
 
 <label>
 <input type="checkbox" id="streamToggle" checked class="form-check-input">
 Ativar Stream
 </label>
 <label>
 <input type="checkbox" id="ollamaToggle" checked class="form-check-input">
 Servidor Ollama
 </label>
 <div id="loadingSpinner" class="text-center my-3" style="display: none;">
 <div class="spinner-border text-primary" role="status">
 <span class="visually-hidden">Carregando...</span>
 </div>
 <p>Processando resposta...</p>
 </div>
 </div>
 </div>
 
 <script src="./assets/js/chatjs.js" defer></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
 
 |