126 lines
6.0 KiB
Plaintext
126 lines
6.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Chat with Llama2</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
|
|
<link href="/v1/static/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
|
|
crossorigin="anonymous">
|
|
<script src="/v1/static/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
|
|
crossorigin="anonymous"></script>
|
|
<script src="/v1/static/js/marked.min.js"
|
|
integrity="sha384-dZulhREgb+hCgQMhZ2VG0l37VQj5pJBq2w0h7Jn3tdMn36aXNepF1+FMLBB4O649"
|
|
crossorigin="anonymous"></script>
|
|
<script src="/v1/static/js/purify.min.js" integrity="sha256-QigBQMy2be3IqJD2ezKJUJ5gycSmyYlRHj2VGBuITpU="
|
|
crossorigin="anonymous"></script>
|
|
<script src="/v1/static/js/jquery-3.7.1.min.js"
|
|
integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<!-- -->
|
|
<link rel="stylesheet" href="/v1/static/css/chat.css">
|
|
</head>
|
|
|
|
<body data-bs-theme="dark">
|
|
<div class="container">
|
|
<div id="scroll-wrapper">
|
|
<div id="chat-container" class="card">
|
|
<div class="card-body">
|
|
<div id="chat-history"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-fixed w-100"
|
|
style="z-index: 9999; top: 0px; height: 200px; background: linear-gradient(180deg, black, transparent);">
|
|
|
|
<div class="position-fixed w-100"
|
|
style="z-index: 9999; top: 0px; height: 200px; background: linear-gradient(180deg, black, transparent);">
|
|
<div class="d-flex justify-content-between align-items-center m-0" style="padding: 16px;">
|
|
<h1>Chat with Ollama</h1>
|
|
<!-- Model dropdown -->
|
|
<div class="d-flex align-items-center m-1">
|
|
<div class="p-2 flex-grow-1 bd-highlight">
|
|
<label for="system-prompt" class="me-2" style="font-size: normal;">System Prompt</label>
|
|
<input id="system-prompt" class="form-control" type="text" placeholder="You are a helpful assistant"
|
|
style="width: auto;"></select>
|
|
<label for="host-address" class="me-2" style="font-size: normal;">Hostname</label>
|
|
<input id="host-address" class="form-control" type="text" placeholder="http://localhost:11434"
|
|
style="width: auto;"></select>
|
|
|
|
</div>
|
|
<div class="d-flex align-items-center m-2">
|
|
<div class="p-2 flex-grow-1 bd-highlight">
|
|
<label for="model-select" class="me-2" style="font-size: normal;">Model:</label>
|
|
<select class="form-select me-5" id="model-select" style="width: auto;"></select>
|
|
<label for="chat-select" class="me-2" style="font-size: normal;">History:</label>
|
|
<select id="chat-select" class="form-select me-2" style="width: auto;">
|
|
<option value="" disabled selected>Select a chat</option>
|
|
</select>
|
|
</div>
|
|
<div class="p-auto flex-grow-1 bd-highlight">
|
|
<div class="d-flex flex-column">
|
|
<button id="new-chat" class="btn btn-dark mb-2" type="button">Reset</button>
|
|
<button id="save-chat" class="btn btn-secondary mb-2" type="button" data-bs-toggle="modal"
|
|
data-bs-target="#nameModal">Save
|
|
</button>
|
|
<button id="delete-chat" class="btn btn-danger" type="button">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container p-2 card" id="input-area">
|
|
<div class="input-group">
|
|
<textarea class="form-control" id="user-input" placeholder="Type your question here..."
|
|
oninput="autoGrow(this)"></textarea>
|
|
<button id="send-button" class="btn btn-primary">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="nameModal" tabindex="-1" aria-labelledby="nameModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="nameModalLabel">Enter Your Name</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="text" class="form-control" id="userName" placeholder="Your Name">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary" id="saveName">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="errorModal" tabindex="-1">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Unable to access Ollama server</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="errorText"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/v1/static/js/api.js"></script>
|
|
<script src="/v1/static/js/chat.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|