File size: 9,121 Bytes
fd9d6c0 e3197b5 5beea39 e8a6ed7 e3197b5 e8a6ed7 5beea39 e8a6ed7 e3197b5 5beea39 e8a6ed7 e3197b5 e8a6ed7 fd9d6c0 e8a6ed7 fd9d6c0 e8a6ed7 fd9d6c0 e8a6ed7 fd9d6c0 |
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 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 |
<!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 -->
<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>
<!-- Chat Area -->
<div class="chat-container overflow-y-auto mb-4 space-y-4">
<!-- Welcome Message -->
<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>
<!-- Sample Conversation -->
<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>
<!-- Typing Indicator -->
<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>
<!-- Input Area -->
<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>
// Initialize feather icons
feather.replace();
// Connect to OLLAMA API
const API_URL = 'http://localhost:11434/api/chat'; // Default OLLAMA endpoint
const chatContainer = document.querySelector('.chat-container');
const chatForm = document.getElementById('chatForm');
const userInput = document.getElementById('userInput');
const typingIndicator = document.getElementById('typingIndicator');
// Add message to chat
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;
}
// Get AI response
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", // or any other model you have installed
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');
}
}
// Handle form submission
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);
}
});
// Allow Shift+Enter for new lines, Enter to submit
userInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
chatForm.dispatchEvent(new Event('submit'));
}
});
</script>
</body>
</html>
|