File size: 5,265 Bytes
03afb93 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyLlama Chat</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
min-height: 100vh;
font-family: 'Arial', sans-serif;
}
.chat-container {
max-width: 700px;
margin: 2rem auto;
background: white;
border-radius: 1rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.chat-header {
background: #2563eb;
color: white;
padding: 1rem;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
}
.chat-body {
max-height: 500px;
overflow-y: auto;
padding: 1rem;
}
.message {
margin: 0.5rem 0;
padding: 0.75rem;
border-radius: 0.5rem;
max-width: 80%;
}
.user-message {
background: #dbeafe;
margin-left: auto;
text-align: right;
}
.ai-message {
background: #f3f4f6;
margin-right: auto;
}
.input-container {
display: flex;
padding: 1rem;
background: #f9fafb;
border-top: 1px solid #e5e7eb;
}
.input-container input {
flex: 1;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem 0 0 0.5rem;
outline: none;
}
.input-container button {
padding: 0.75rem 1.5rem;
background: #2563eb;
color: white;
border: none;
border-radius: 0 0.5rem 0.5rem 0;
cursor: pointer;
transition: background 0.3s;
}
.input-container button:hover {
background: #1e40af;
}
.loading {
display: none;
margin: 1rem auto;
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #2563eb;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.attribution {
text-align: center;
margin: 1rem;
font-size: 0.9rem;
color: #f3f4f6;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">TinyLlama Chat</div>
<div class="chat-body" id="chat-body">
<div class="message ai-message">Hello! How can I assist you today?</div>
</div>
<div class="input-container">
<input type="text" id="prompt" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
</div>
<div class="loading" id="loading"></div>
</div>
<div class="attribution">
Powered by </a href="https://huggingface.co/TinyLlama/TinyLlama-1.1B-Chat-v1.0" target="_blank">TinyLlama-1.1B-Chat-v1.0</a> by TinyLlama
</div>
<script>
async function sendMessage() {
const promptInput = document.getElementById('prompt');
const chatBody = document.getElementById('chat-body');
const loading = document.getElementById('loading');
const prompt = promptInput.value.trim();
if (!prompt) return;
// Add user message
const userMessage = document.createElement('div');
userMessage.className = 'message user-message';
userMessage.textContent = prompt;
chatBody.appendChild(userMessage);
// Show loading animation
loading.style.display = 'block';
promptInput.value = '';
chatBody.scrollTop = chatBody.scrollHeight;
// Send request to Flask
const response = await fetch('/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `prompt=${encodeURIComponent(prompt)}`
});
const aiResponse = await response.text();
// Hide loading animation
loading.style.display = 'none';
// Add AI response
const aiMessage = document.createElement('div');
aiMessage.className = 'message ai-message';
aiMessage.textContent = aiResponse;
chatBody.appendChild(aiMessage);
chatBody.scrollTop = chatBody.scrollHeight;
}
document.getElementById('prompt').addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
</script>
</body>
</html> |