second commit
This commit is contained in:
Carlos Tello
@@ -0,0 +1,549 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user