|
|
<!doctype html> |
|
|
<html lang="uk"> |
|
|
|
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> |
|
|
<title>Локальний “Hello World” чат • Transformers.js</title> |
|
|
<style> |
|
|
:root { |
|
|
color-scheme: light dark; |
|
|
--bg: Canvas; |
|
|
--fg: CanvasText; |
|
|
--muted: color-mix(in oklab, var(--fg) 60%, transparent); |
|
|
--border: color-mix(in oklab, var(--fg) 25%, transparent); |
|
|
--bubble-me: color-mix(in oklab, var(--bg) 94%, var(--fg) 6%); |
|
|
--bubble-bot: color-mix(in oklab, var(--bg) 88%, var(--fg) 12%); |
|
|
--accent: #2f7bfd; |
|
|
} |
|
|
|
|
|
* { |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
html, |
|
|
body { |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
body { |
|
|
margin: 0; |
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji"; |
|
|
background: var(--bg); |
|
|
color: var(--fg); |
|
|
line-height: 1.35; |
|
|
} |
|
|
|
|
|
header { |
|
|
position: sticky; |
|
|
top: 0; |
|
|
z-index: 10; |
|
|
padding: 12px 16px; |
|
|
border-bottom: 1px solid var(--border); |
|
|
backdrop-filter: blur(6px); |
|
|
background: color-mix(in oklab, var(--bg) 88%, transparent); |
|
|
} |
|
|
|
|
|
header .row { |
|
|
display: flex; |
|
|
gap: 8px; |
|
|
align-items: center; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
header h1 { |
|
|
font-size: 1.05rem; |
|
|
margin: 0; |
|
|
margin-right: auto; |
|
|
} |
|
|
|
|
|
select, |
|
|
button, |
|
|
input, |
|
|
textarea { |
|
|
font: inherit; |
|
|
color: inherit; |
|
|
background: transparent; |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 10px; |
|
|
padding: 8px 10px; |
|
|
} |
|
|
|
|
|
select { |
|
|
min-width: 270px; |
|
|
} |
|
|
|
|
|
.muted { |
|
|
color: var(--muted); |
|
|
font-size: .92rem; |
|
|
} |
|
|
|
|
|
main { |
|
|
display: grid; |
|
|
grid-template-rows: 1fr auto; |
|
|
height: calc(100dvh - 64px); |
|
|
} |
|
|
|
|
|
#messages { |
|
|
overflow-y: auto; |
|
|
padding: 14px 12px 8px; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.msg { |
|
|
max-width: 72ch; |
|
|
border: 1px solid var(--border); |
|
|
padding: 10px 12px; |
|
|
border-radius: 14px; |
|
|
margin: 8px 0; |
|
|
word-wrap: break-word; |
|
|
white-space: pre-wrap; |
|
|
} |
|
|
|
|
|
.msg.me { |
|
|
background: var(--bubble-me); |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
.msg.bot { |
|
|
background: var(--bubble-bot); |
|
|
margin-right: auto; |
|
|
} |
|
|
|
|
|
.msg.sys { |
|
|
font-size: .9rem; |
|
|
border-style: dashed; |
|
|
color: var(--muted); |
|
|
} |
|
|
.error-details { |
|
|
font-size: .88em; |
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
|
|
background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%); |
|
|
color: var(--muted); |
|
|
margin: 6px 0 0 0; |
|
|
padding: 7px 10px; |
|
|
border-radius: 7px; |
|
|
white-space: pre-wrap; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
form#composer { |
|
|
position: sticky; |
|
|
bottom: 0; |
|
|
padding: 10px 12px 14px; |
|
|
border-top: 1px solid var(--border); |
|
|
background: color-mix(in oklab, var(--bg) 94%, transparent); |
|
|
} |
|
|
|
|
|
.composer-row { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr auto; |
|
|
gap: 8px; |
|
|
align-items: end; |
|
|
} |
|
|
|
|
|
textarea#prompt { |
|
|
width: 100%; |
|
|
min-height: 44px; |
|
|
max-height: 35dvh; |
|
|
resize: vertical; |
|
|
padding: 10px 12px; |
|
|
} |
|
|
|
|
|
button#send { |
|
|
background: color-mix(in oklab, var(--bg) 92%, transparent); |
|
|
color: inherit; |
|
|
border: 1px solid var(--border); |
|
|
padding: 10px 14px; |
|
|
border-radius: 12px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
button:disabled { |
|
|
opacity: .6; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.status { |
|
|
display: flex; |
|
|
gap: 8px; |
|
|
align-items: center; |
|
|
padding: 6px 0 2px; |
|
|
} |
|
|
|
|
|
.dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: var(--border); |
|
|
box-shadow: 0 0 0 0 var(--border); |
|
|
animation: pulse 1.2s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
transform: scale(1); |
|
|
box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 22%, transparent); |
|
|
} |
|
|
|
|
|
70% { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 0 0 6px transparent; |
|
|
} |
|
|
|
|
|
100% { |
|
|
transform: scale(1); |
|
|
box-shadow: 0 0 0 0 transparent; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (min-width: 720px) { |
|
|
main { |
|
|
height: calc(100vh - 64px); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<header> |
|
|
<div class="row"> |
|
|
<h1>Локальний чат: 1</h1> |
|
|
<label for="model" class="muted" style="display:none">Модель</label> |
|
|
<select id="model" title="Оберіть модель (Xenova)"> |
|
|
<option value="Xenova/distilgpt2">Xenova/distilgpt2 (швидка, маленька)</option> |
|
|
<option value="Xenova/phi-3-mini-4k-instruct">Xenova/phi-3-mini-4k-instruct</option> |
|
|
<option value="Xenova/t5-small">Xenova/t5-small (text2text)</option> |
|
|
<option value="Xenova/gemma-2b-it">Xenova/gemma-2b-it</option> |
|
|
<option value="Xenova/llama-3-8b-instruct">Xenova/llama-3-8b-instruct</option> |
|
|
<option value="Xenova/Mistral-7B-Instruct-v0.2">Xenova/Mistral-7B-Instruct-v0.2</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="status" class="status muted"> |
|
|
<span class="dot" aria-hidden="true"></span> |
|
|
<span id="status-text">Готово</span> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<div id="messages" aria-live="polite" aria-busy="false"> |
|
|
<div class="msg sys">Підказка: спершу спробуйте маленькі моделі (наприклад, distilgpt2 або t5-small). Великі |
|
|
(7B/8B) можуть не поміститися в памʼять браузера.</div> |
|
|
</div> |
|
|
|
|
|
<form id="composer" autocomplete="off"> |
|
|
<div class="composer-row"> |
|
|
<textarea id="prompt" placeholder="Напишіть повідомлення…" required></textarea> |
|
|
<button id="send" type="submit">Надіслати</button> |
|
|
</div> |
|
|
</form> |
|
|
</main> |
|
|
|
|
|
|
|
|
<script type="module" src="chat-full.js"></script> |
|
|
</body> |
|
|
|
|
|
|
