549 lines
17 KiB
HTML
549 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Code Agent Chat</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
height: 100vh;
|
|
display: flex;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Chat Panel */
|
|
.chat-panel {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.chat-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.message {
|
|
display: flex;
|
|
gap: 10px;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.message.user {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.message-content {
|
|
max-width: 70%;
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.message.user .message-content {
|
|
background: #667eea;
|
|
color: white;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.message.assistant .message-content {
|
|
background: #f0f0f0;
|
|
color: #333;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
|
|
.message-image {
|
|
max-width: 200px;
|
|
border-radius: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.message-meta {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Input Area */
|
|
.input-area {
|
|
border-top: 1px solid #e0e0e0;
|
|
padding: 20px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
textarea {
|
|
flex: 1;
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
max-height: 120px;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
}
|
|
|
|
textarea:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.send-btn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
flex: 1;
|
|
}
|
|
|
|
.send-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.send-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.file-input-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.file-input-wrapper input[type="file"] {
|
|
display: none;
|
|
}
|
|
|
|
.upload-btn {
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.upload-btn:hover {
|
|
background: #45a049;
|
|
}
|
|
|
|
.selected-image {
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
border-radius: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.image-indicator {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 300px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-header {
|
|
background: #f5f5f5;
|
|
padding: 15px;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.sidebar-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 15px;
|
|
}
|
|
|
|
.file-item {
|
|
padding: 8px 12px;
|
|
background: #f9f9f9;
|
|
border-radius: 6px;
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.file-item:hover {
|
|
background: #f0f0f0;
|
|
border-left-color: #667eea;
|
|
}
|
|
|
|
.model-selector {
|
|
padding: 15px;
|
|
border-top: 1px solid #e0e0e0;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.loading {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #667eea;
|
|
border-radius: 50%;
|
|
animation: pulse 1.5s infinite;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.error {
|
|
background: #ffebee;
|
|
color: #c62828;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.success {
|
|
background: #e8f5e9;
|
|
color: #2e7d32;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 100%;
|
|
}
|
|
|
|
.message-content {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Chat Panel -->
|
|
<div class="chat-panel">
|
|
<div class="chat-header">🤖 Code Agent Chat</div>
|
|
|
|
<div class="chat-messages" id="chatMessages"></div>
|
|
|
|
<div class="input-area">
|
|
<div class="input-container">
|
|
<textarea
|
|
id="messageInput"
|
|
placeholder="Escribe tu directive aquí... (ej: Crea un contador HTML)"
|
|
onkeydown="if(event.key==='Enter' && event.ctrlKey) sendMessage();"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div id="selectedImageContainer" style="display:none;">
|
|
<img id="selectedImagePreview" class="selected-image" alt="Imagen seleccionada">
|
|
<div class="image-indicator" id="imageIndicator"></div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<div class="file-input-wrapper">
|
|
<input type="file" id="imageInput" accept="image/*">
|
|
<button class="upload-btn" onclick="document.getElementById('imageInput').click();">
|
|
📸 Adjuntar Imagen
|
|
</button>
|
|
</div>
|
|
<button class="send-btn" id="sendBtn" onclick="sendMessage();">
|
|
Enviar (Ctrl+Enter)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">📁 Workspace</div>
|
|
|
|
<div class="sidebar-content" id="fileList">
|
|
<p style="color: #999; font-size: 13px;">Cargando archivos...</p>
|
|
</div>
|
|
|
|
<div class="model-selector">
|
|
<label style="font-size: 12px; color: #666;">Modelo LLM:</label>
|
|
<select id="modelSelect" onchange="localStorage.setItem('selectedModel', this.value)">
|
|
<option value="phi">⚡ Phi (Rápido)</option>
|
|
<option value="deepseek-coder:33b">🧠 DeepSeek (Potente)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_URL = "http://localhost:5000/api";
|
|
const chatMessagesDiv = document.getElementById("chatMessages");
|
|
const messageInput = document.getElementById("messageInput");
|
|
const sendBtn = document.getElementById("sendBtn");
|
|
const imageInput = document.getElementById("imageInput");
|
|
const fileList = document.getElementById("fileList");
|
|
const modelSelect = document.getElementById("modelSelect");
|
|
const selectedImageContainer = document.getElementById("selectedImageContainer");
|
|
const selectedImagePreview = document.getElementById("selectedImagePreview");
|
|
const imageIndicator = document.getElementById("imageIndicator");
|
|
|
|
let selectedImage = null;
|
|
|
|
// Load saved model
|
|
const savedModel = localStorage.getItem("selectedModel") || "phi";
|
|
modelSelect.value = savedModel;
|
|
|
|
// Manejo de imagen
|
|
imageInput.addEventListener("change", (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
selectedImage = file;
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
selectedImagePreview.src = event.target.result;
|
|
imageIndicator.textContent = `✅ ${file.name} seleccionada`;
|
|
selectedImageContainer.style.display = "block";
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// Limpiar imagen
|
|
function clearImage() {
|
|
selectedImage = null;
|
|
imageInput.value = "";
|
|
selectedImageContainer.style.display = "none";
|
|
}
|
|
|
|
// Enviar mensaje
|
|
async function sendMessage() {
|
|
const message = messageInput.value.trim();
|
|
if (!message) return;
|
|
|
|
const model = modelSelect.value;
|
|
|
|
// Mostrar mensaje del usuario
|
|
addMessage(message, "user", selectedImage);
|
|
messageInput.value = "";
|
|
clearImage();
|
|
sendBtn.disabled = true;
|
|
|
|
try {
|
|
// Preparar form data
|
|
const formData = new FormData();
|
|
formData.append("message", message);
|
|
formData.append("model", model);
|
|
if (selectedImage) {
|
|
formData.append("image", selectedImage);
|
|
}
|
|
|
|
// Enviar
|
|
const response = await fetch(`${API_URL}/chat`, {
|
|
method: "POST",
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
addMessage(`❌ Error: ${error.detail}`, "assistant");
|
|
return;
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Mostrar respuesta del LLM
|
|
addMessage(data.llm_response, "assistant", null, model);
|
|
|
|
// Mostrar resultado de la acción
|
|
if (data.action_result) {
|
|
const resultText = JSON.stringify(data.action_result, null, 2);
|
|
if (data.action_result.success) {
|
|
addMessage(`✅ ${data.action_result.result}`, "assistant");
|
|
} else {
|
|
addMessage(`⚠️ ${data.action_result.error || data.action_result.result}`, "assistant");
|
|
}
|
|
}
|
|
|
|
// Recargar archivos
|
|
loadFiles();
|
|
} catch (error) {
|
|
addMessage(`❌ Error: ${error.message}`, "assistant");
|
|
} finally {
|
|
sendBtn.disabled = false;
|
|
messageInput.focus();
|
|
}
|
|
}
|
|
|
|
// Agregar mensaje al chat
|
|
function addMessage(text, sender, image = null, model = null) {
|
|
const messageDiv = document.createElement("div");
|
|
messageDiv.className = `message ${sender}`;
|
|
|
|
const contentDiv = document.createElement("div");
|
|
contentDiv.className = "message-content";
|
|
|
|
// Formatear texto (markdown básico)
|
|
let formattedText = text
|
|
.replace(/```([^`]*?)```/g, "<pre><code>$1</code></pre>")
|
|
.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
|
|
.replace(/_(.*?)_/g, "<em>$1</em>");
|
|
|
|
contentDiv.innerHTML = formattedText;
|
|
|
|
if (image instanceof File) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const img = document.createElement("img");
|
|
img.src = e.target.result;
|
|
img.className = "message-image";
|
|
contentDiv.appendChild(img);
|
|
};
|
|
reader.readAsDataURL(image);
|
|
}
|
|
|
|
messageDiv.appendChild(contentDiv);
|
|
|
|
if (model) {
|
|
const meta = document.createElement("div");
|
|
meta.className = "message-meta";
|
|
meta.textContent = `Modelo: ${model}`;
|
|
messageDiv.appendChild(meta);
|
|
}
|
|
|
|
chatMessagesDiv.appendChild(messageDiv);
|
|
chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
|
|
}
|
|
|
|
// Cargar archivos del workspace
|
|
async function loadFiles() {
|
|
try {
|
|
const response = await fetch(`${API_URL}/files`);
|
|
const data = await response.json();
|
|
|
|
fileList.innerHTML = "";
|
|
|
|
if (data.files.length === 0) {
|
|
fileList.innerHTML = '<p style="color: #999; font-size: 13px;">Sin archivos aún</p>';
|
|
return;
|
|
}
|
|
|
|
data.files.forEach(file => {
|
|
const item = document.createElement("div");
|
|
item.className = "file-item";
|
|
|
|
let icon = "📄";
|
|
if (file.type === ".html") icon = "🌐";
|
|
if (file.type === ".js") icon = "📜";
|
|
if (file.type === ".py") icon = "🐍";
|
|
if (file.type === ".css") icon = "🎨";
|
|
|
|
item.innerHTML = `${icon} <strong>${file.name}</strong><br>
|
|
<span style="font-size: 11px; color: #999;">${(file.size / 1024).toFixed(1)} KB</span>`;
|
|
|
|
item.onclick = async () => {
|
|
try {
|
|
const fileResponse = await fetch(`${API_URL}/file/${file.name}`);
|
|
const fileData = await fileResponse.json();
|
|
addMessage(`\`\`\`\n${fileData.content}\n\`\`\``, "assistant");
|
|
} catch (e) {
|
|
addMessage(`Error leyendo ${file.name}`, "assistant");
|
|
}
|
|
};
|
|
|
|
fileList.appendChild(item);
|
|
});
|
|
} catch (error) {
|
|
console.error("Error cargando archivos:", error);
|
|
}
|
|
}
|
|
|
|
// Cargar archivos al iniciar
|
|
loadFiles();
|
|
|
|
// Auto-refresh cada 10 segundos
|
|
setInterval(loadFiles, 10000);
|
|
|
|
// Enter para enviar
|
|
messageInput.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter" && e.ctrlKey) {
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
// Mensaje inicial
|
|
setTimeout(() => {
|
|
addMessage("👋 Hola! Soy tu agent agentico. Puedes:\n\n- **Pedir que cree código** (HTML, Python, Node.js)\n- **Adjuntar imágenes** (capturas, diseños)\n- **Dar directivas** para modificar tus archivos\n- **Ejecutar y testear** automáticamente en el navegador\n\n¿Qué querés crear?", "assistant");
|
|
}, 500);
|
|
</script>
|
|
</body>
|
|
</html> |