|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ArmaForge Assistant - Live Chat</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
.chat-container { |
|
|
height: calc(100vh - 180px); |
|
|
} |
|
|
.code-block { |
|
|
font-family: 'Courier New', monospace; |
|
|
background-color: #1e293b; |
|
|
border-left: 3px solid #10b981; |
|
|
} |
|
|
.user-bubble { |
|
|
background-color: #1e40af; |
|
|
border-radius: 1rem 1rem 0 1rem; |
|
|
} |
|
|
.ai-bubble { |
|
|
background-color: #334155; |
|
|
border-radius: 1rem 1rem 1rem 0; |
|
|
} |
|
|
.typing-indicator span { |
|
|
height: 8px; |
|
|
width: 8px; |
|
|
background-color: #6ee7b7; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
margin: 0 2px; |
|
|
animation: bounce 1.4s infinite ease-in-out both; |
|
|
} |
|
|
.typing-indicator span:nth-child(1) { |
|
|
animation-delay: -0.32s; |
|
|
} |
|
|
.typing-indicator span:nth-child(2) { |
|
|
animation-delay: -0.16s; |
|
|
} |
|
|
@keyframes bounce { |
|
|
0%, 80%, 100% { transform: scale(0); } |
|
|
40% { transform: scale(1); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-6 border-b border-teal-500 pb-4"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i data-feather="cpu" class="w-8 h-8 text-teal-400"></i> |
|
|
<h1 class="text-2xl font-bold text-teal-400">ArmaForge Assistant</h1> |
|
|
</div> |
|
|
<button class="text-teal-300 hover:text-white flex items-center"> |
|
|
<i data-feather="settings" class="mr-2"></i> Settings |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="chat-container overflow-y-auto mb-4 space-y-4"> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="ai-bubble max-w-3xl p-4"> |
|
|
<p class="font-medium">Welcome to ArmaForge Assistant! 👋</p> |
|
|
<p class="mt-1">I'm here to help with all your Arma Reforger modding questions. You can ask about:</p> |
|
|
<ul class="list-disc pl-5 mt-2 space-y-1"> |
|
|
<li>Script debugging and optimization</li> |
|
|
<li>Workbench setup and configuration</li> |
|
|
<li>Mod packaging and deployment</li> |
|
|
<li>Game mechanics implementation</li> |
|
|
</ul> |
|
|
<p class="mt-2">What would you like to know about today?</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-end"> |
|
|
<div class="user-bubble max-w-3xl p-4"> |
|
|
<p>How do I spawn AI units in a mission script?</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="ai-bubble max-w-3xl p-4"> |
|
|
<p>Here's a basic example of spawning AI units in Arma Reforger:</p> |
|
|
<div class="code-block p-4 rounded-lg mt-2 text-sm overflow-x-auto"> |
|
|
<pre class="text-green-400"> |
|
|
// Create a group for the AI |
|
|
auto group = GetGame().CreateGroup(); |
|
|
|
|
|
// Spawn a soldier at position [0,0,0] |
|
|
auto unit = GetGame().CreateCharacter(group, "Faction_US_Soldier_Rifleman_M4A1"); |
|
|
unit.SetPosition(vector.Zero); |
|
|
|
|
|
// Add waypoints |
|
|
auto waypoint = group.AddWaypoint(vector(100, 0, 100)); |
|
|
waypoint.SetType(EWaypointType.MOVE);</pre> |
|
|
</div> |
|
|
<p class="mt-3">Remember to set appropriate faction templates and loadouts for your units.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-2 opacity-75 hidden" id="typingIndicator"> |
|
|
<div class="ai-bubble px-4 py-2"> |
|
|
<div class="typing-indicator"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-4"> |
|
|
<form id="chatForm" class="flex items-center space-x-2"> |
|
|
<input type="text" id="userInput" placeholder="Ask about Arma Reforger modding..." |
|
|
class="flex-grow bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500"> |
|
|
<button type="submit" class="bg-teal-600 hover:bg-teal-500 p-3 rounded-lg"> |
|
|
<i data-feather="send" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</form> |
|
|
<div class="flex justify-between mt-2 text-xs text-gray-400"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="hover:text-teal-400 flex items-center"> |
|
|
<i data-feather="code" class="w-3 h-3 mr-1"></i> Code |
|
|
</button> |
|
|
<button class="hover:text-teal-400 flex items-center"> |
|
|
<i data-feather="image" class="w-3 h-3 mr-1"></i> Image |
|
|
</button> |
|
|
</div> |
|
|
<div> |
|
|
<button class="hover:text-teal-400 flex items-center"> |
|
|
<i data-feather="trash-2" class="w-3 h-3 mr-1"></i> Clear |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
const API_URL = 'http://localhost:11434/api/chat'; |
|
|
const chatContainer = document.querySelector('.chat-container'); |
|
|
const chatForm = document.getElementById('chatForm'); |
|
|
const userInput = document.getElementById('userInput'); |
|
|
const typingIndicator = document.getElementById('typingIndicator'); |
|
|
|
|
|
|
|
|
function addMessage(role, content) { |
|
|
const msgDiv = document.createElement('div'); |
|
|
msgDiv.className = role === 'user' ? 'flex justify-end' : 'flex'; |
|
|
|
|
|
const bubbleClass = role === 'user' ? 'user-bubble' : 'ai-bubble'; |
|
|
msgDiv.innerHTML = ` |
|
|
<div class="${bubbleClass} max-w-3xl p-4"> |
|
|
<p>${content}</p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
chatContainer.appendChild(msgDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
async function getAIResponse(prompt) { |
|
|
typingIndicator.classList.remove('hidden'); |
|
|
|
|
|
try { |
|
|
const response = await fetch(API_URL, { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json' |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
model: "llama2", |
|
|
messages: [ |
|
|
{ |
|
|
role: "user", |
|
|
content: prompt |
|
|
} |
|
|
], |
|
|
stream: false |
|
|
}) |
|
|
}); |
|
|
|
|
|
if (!response.ok) throw new Error('Network response was not ok'); |
|
|
const data = await response.json(); |
|
|
return data.message?.content || "Sorry, I couldn't process the response."; |
|
|
} catch (error) { |
|
|
console.error('Error:', error); |
|
|
return "Sorry, I encountered an error. Please ensure OLLAMA is running and accessible at http://localhost:11434"; |
|
|
} finally { |
|
|
typingIndicator.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
chatForm.addEventListener('submit', async function(e) { |
|
|
e.preventDefault(); |
|
|
const message = userInput.value.trim(); |
|
|
|
|
|
if (message) { |
|
|
addMessage('user', message); |
|
|
userInput.value = ''; |
|
|
|
|
|
const aiResponse = await getAIResponse(message); |
|
|
addMessage('assistant', aiResponse); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
userInput.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
chatForm.dispatchEvent(new Event('submit')); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
