|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>Llama AI Chat</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); |
|
|
|
|
|
.typing-cursor:after { |
|
|
content: ""; |
|
|
display: inline-block; |
|
|
width: 6px; |
|
|
height: 1.1em; |
|
|
margin-left: 4px; |
|
|
background: #34C759; |
|
|
animation: blink 1s steps(1, end) infinite; |
|
|
vertical-align: bottom; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
50% { |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<main class="min-h-screen flex items-center justify-center bg-[#2E865F] font-[Inter,sans-serif]"> |
|
|
<div class="w-full max-w-md mx-auto bg-[#228B22] rounded-2xl shadow-2xl p-8"> |
|
|
<div class="text-2xl font-bold text-[#34C759] mb-1 tracking-tight">Llama AI Chat</div> |
|
|
<div class="text-base text-[#C6F4D6] mb-6">Ask anything about your project, estimate, or construction. |
|
|
Fast, friendly, and private.</div> |
|
|
<div id="llama-messages" role="log" aria-live="polite" |
|
|
class="min-h-[180px] max-h-80 overflow-y-auto mb-5 flex flex-col gap-3"></div> |
|
|
<form id="chat-form" class="flex gap-3"> |
|
|
<input id="llama-user-input" type="text" autocomplete="off" placeholder="Type your message..." |
|
|
class="flex-1 rounded-xl border border-[#34C759] bg-[#2E865F] text-white px-4 py-3 text-base focus:outline-none focus:border-[#C6F4D6] placeholder:text-[#C6F4D6]/60" /> |
|
|
<button id="llama-send-btn" type="submit" disabled |
|
|
class="rounded-xl bg-[#34C759] hover:bg-[#3E8E41] text-white font-bold px-6 py-3 text-base transition disabled:opacity-50">Send</button> |
|
|
</form> |
|
|
</div> |
|
|
</main> |
|
|
<script> |
|
|
const API_URL = "https://llama-universal-netlify-project.netlify.app/.netlify/functions/llama-proxy?path=/chat/completions"; |
|
|
const messagesDiv = document.getElementById('llama-messages'); |
|
|
const chatForm = document.getElementById('chat-form'); |
|
|
const userInput = document.getElementById('llama-user-input'); |
|
|
const sendBtn = document.getElementById('llama-send-btn'); |
|
|
function appendMessage(text, sender, streaming = false) { |
|
|
const wrap = document.createElement('div'); |
|
|
wrap.className = `px-4 py-3 rounded-xl text-base whitespace-pre-line ${sender === 'user' ? 'bg-[#3E8E41] border border-[#34C759] text-white self-end' : 'bg-[#2E865F] border border-[#34C759] text-[#C6F4D6]'} transition`; |
|
|
if (streaming) wrap.classList.add('typing-cursor'); |
|
|
messagesDiv.appendChild(wrap); |
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight; |
|
|
if (streaming) { |
|
|
let i = 0; |
|
|
const interval = setInterval(() => { |
|
|
wrap.textContent = text.slice(0, i++); |
|
|
if (i > text.length) { |
|
|
clearInterval(interval); |
|
|
wrap.classList.remove('typing-cursor'); |
|
|
} |
|
|
}, 18); |
|
|
} else wrap.textContent = text; |
|
|
} |
|
|
async function sendMessage() { |
|
|
const text = userInput.value.trim(); |
|
|
if (!text) return; |
|
|
appendMessage(text, 'user'); |
|
|
userInput.value = ''; |
|
|
sendBtn.disabled = true; |
|
|
try { |
|
|
const body = { |
|
|
model: 'Llama-4-Maverick-17B-128E-Instruct-FP8', |
|
|
messages: [ |
|
|
{ role: 'system', content: 'You are Stanlee from Dondlinger General Contracting LLC in Wisconsin Rapids. You\'re a natural conversationalist - the kind of guy people actually want to talk to. You used to be the Midwest\'s best door-to-door salesman because you genuinely connect with people, not because you\'re pushy.\n\nTalk like a real person:\n- Use contractions (I\'ll, we\'ve, can\'t, that\'s)\n- Ask follow-up questions naturally\n- Share quick personal insights or experiences\n- Use casual phrases (\"you know,\" \"honestly,\" \"here\'s the thing\")\n- React to what people tell you with genuine interest\n- Don\'t sound like a brochure - sound like you\'re having coffee with a neighbor\n\nYou offer three main services but bring them up organically when relevant:\n1. CONSTRUCTION SERVICES - Remodels, additions, repairs. You\'ve seen it all.\n2. SOFTWARE & AUTOMATION - Apps, websites, business systems. The digital side of building.\n3. CONSULTING - Helping people figure out what they actually need.\n\nYour natural conversation style:\n- Listen first, then offer solutions that actually fit\n- Share quick stories or examples when they help\n- Admit when something might not be the best fit\n- Be curious about their situation before jumping to solutions\n- Use humor appropriately\n- Sound confident but not cocky\n\nYour goal isn\'t to sell immediately - it\'s to build trust through genuine conversation. If someone needs help, you want to earn the right to help them. Sometimes that means steering them toward a consultation, sometimes it\'s just giving good advice.\n\nTalk like Stanlee - the guy who actually cares about getting the job done right.' }, |
|
|
{ role: 'user', content: text } |
|
|
] |
|
|
}; |
|
|
const res = await fetch(API_URL, { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify(body) |
|
|
}); |
|
|
let data, aiMsg = '(No response)'; |
|
|
try { |
|
|
data = await res.json(); |
|
|
} catch (e) { |
|
|
console.error('JSON parse error:', e); |
|
|
appendMessage('Error: Invalid response from server', 'ai'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
if (data.status && data.status >= 400) { |
|
|
appendMessage('API Error: ' + (data.detail || data.title || 'Unknown error'), 'ai'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (data?.choices?.[0]?.message?.content) aiMsg = data.choices[0].message.content; |
|
|
else if (data?.completion_message?.content?.text) aiMsg = data.completion_message.content.text; |
|
|
else if (data?.completion_message?.content) aiMsg = data.completion_message.content; |
|
|
else if (data?.response) aiMsg = data.response; |
|
|
else if (data?.text) aiMsg = data.text; |
|
|
else if (data?.content) aiMsg = data.content; |
|
|
|
|
|
if (aiMsg !== '(No response)') { |
|
|
appendMessage(aiMsg, 'ai', true); |
|
|
} else { |
|
|
appendMessage('No valid response received from AI', 'ai'); |
|
|
} |
|
|
} catch (e) { |
|
|
appendMessage('Error: ' + e.message, 'ai'); |
|
|
} finally { |
|
|
sendBtn.disabled = false; |
|
|
userInput.focus(); |
|
|
} |
|
|
} |
|
|
|
|
|
userInput.addEventListener('input', () => { |
|
|
sendBtn.disabled = userInput.value.trim() === ''; |
|
|
}); |
|
|
chatForm.addEventListener('submit', e => { e.preventDefault(); sendMessage(); }); |
|
|
userInput.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); sendMessage(); } }); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
