<!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> 
 
 |