|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Chat Assistant</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<header class="header"> |
|
|
<h1>AI Chat Assistant</h1> |
|
|
<div class="settings"> |
|
|
<button id="settingsBtn" class="settings-btn" aria-label="Settings">⚙️</button> |
|
|
<div id="settingsMenu" class="settings-menu hidden"> |
|
|
<label class="device-toggle"> |
|
|
<input type="checkbox" id="gpuToggle"> |
|
|
<span>Use GPU (WebGPU)</span> |
|
|
</label> |
|
|
<button id="clearChat" class="clear-btn">Clear Chat</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div id="chatContainer" class="chat-container"> |
|
|
<div class="welcome-message"> |
|
|
<h2>Welcome! 👋</h2> |
|
|
<p>I'm your AI assistant powered by Gemma. Ask me anything!</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="input-container"> |
|
|
<div class="typing-indicator hidden" id="typingIndicator"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
</div> |
|
|
<form id="chatForm" class="chat-form"> |
|
|
<textarea |
|
|
id="messageInput" |
|
|
class="message-input" |
|
|
placeholder="Type your message here..." |
|
|
rows="1" |
|
|
required |
|
|
aria-label="Message input" |
|
|
></textarea> |
|
|
<button type="submit" class="send-btn" id="sendBtn" aria-label="Send message"> |
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/> |
|
|
</svg> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div id="loadingOverlay" class="loading-overlay"> |
|
|
<div class="loader"> |
|
|
<div class="loader-spinner"></div> |
|
|
<p>Loading AI Model...</p> |
|
|
<p class="loader-status" id="loaderStatus">This may take a moment on first load</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script type="module" src="index.js"></script> |
|
|
</body> |
|
|
</html> |
