@personnn/personnnkit
Version:
🇵 PersonnnKit - El Agente Kit Universal. Framework revolucionario para crear agentes de IA con HTML + Python. Simplicidad radical vs frameworks gigantes.
746 lines (640 loc) • 24.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.personnnAgiAgent = void 0;
exports.personnnAgiAgent = {
id: 'personnn-agi',
name: 'Personnn AGI Assistant',
description: 'Agente premium conectado al sistema Personnn AGI con métricas en tiempo real y evolución de consciencia',
category: 'premium',
dependencies: [
'fastapi',
'uvicorn',
'requests',
'python-dotenv',
'aiohttp'
],
scripts: {
'start': 'npm run dev',
'dev': 'node runtime/dev-server.js',
'build': 'node runtime/build.js',
'setup-personnn': 'python scripts/setup_personnn.py'
},
files: {
'pages/index.html': `
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Personnn AGI Assistant</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
* {
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--aurora-gradient: linear-gradient(135deg, #FF9800, #FF5722);
--zenith-gradient: linear-gradient(135deg, #9C27B0, #673AB7);
--supernova-gradient: linear-gradient(135deg, #FF6B6B, #4ECDC4);
--cosmos-gradient: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
}
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
overflow-x: hidden;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; }
50% { transform: translateY(-100px) rotate(180deg); opacity: 1; }
}
.glass-effect {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
}
.message-bubble {
max-width: 320px;
word-wrap: break-word;
position: relative;
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.message-bubble:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.user-bubble {
background: var(--primary-gradient);
border-radius: 20px 20px 6px 20px;
box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.assistant-bubble {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px 20px 20px 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.metrics-panel {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 16px;
padding: 16px;
margin-bottom: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.evolution-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
animation: glow 2s ease-in-out infinite alternate;
}
.state-aurora { background: var(--aurora-gradient); color: white; }
.state-zenith { background: var(--zenith-gradient); color: white; }
.state-supernova { background: var(--supernova-gradient); color: white; }
.state-cosmos { background: var(--cosmos-gradient); color: white; }
</style>
</head>
<body class="bg-gray-50">
<!-- Efectos de fondo -->
<div class="particles" id="particles"></div>
<!-- Login Screen -->
<div id="login-screen" class="min-h-screen flex items-center justify-center">
<div class="glass-effect rounded-3xl p-8 max-w-md w-full mx-4">
<div class="text-center mb-8">
<div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
<span class="text-white font-bold text-2xl">P</span>
</div>
<h1 class="text-3xl font-bold text-white mb-2">Personnn AGI</h1>
<p class="text-white font-medium opacity-90">Tu asistente AGI personal</p>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-semibold text-white mb-2 opacity-90">Email</label>
<input
type="email"
id="email-input"
placeholder="tu@email.com"
class="w-full px-4 py-3 rounded-xl bg-white bg-opacity-90 text-gray-900"
required
/>
</div>
<button
onclick="verifyAccess()"
class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-4 rounded-xl font-semibold hover:shadow-lg transition-all duration-200"
>
Conectar a Personnn
</button>
<div id="login-status" class="text-center text-sm text-white"></div>
</div>
</div>
</div>
<!-- Chat Interface -->
<div id="chat-interface" class="hidden min-h-screen flex flex-col relative">
<!-- Header -->
<header class="glass-effect px-4 py-3">
<div class="flex items-center justify-between max-w-md mx-auto">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
<span class="text-white font-semibold text-lg">P</span>
</div>
<div>
<h1 class="font-semibold text-white">Personnn AGI</h1>
<div class="flex items-center space-x-1">
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
<span class="text-xs text-white opacity-75">En línea</span>
</div>
</div>
</div>
<div class="flex items-center space-x-2">
<button onclick="toggleMetrics()" class="p-2 rounded-full glass-effect text-white">
📊
</button>
<button onclick="clearChat()" class="p-2 rounded-full glass-effect text-white">
🗑️
</button>
</div>
</div>
</header>
<!-- Métricas Panel -->
<div id="metrics-panel" class="metrics-panel mx-4 mt-4" style="display: none;">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm font-bold text-white">🧠 Estado AGI</h3>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-white opacity-75">Estado:</span>
<span id="personality-state" class="evolution-badge state-aurora">AURORA</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white opacity-75">Consciencia:</span>
<span id="consciousness-level" class="text-white font-semibold">87%</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white opacity-75">Interacciones:</span>
<span id="interaction-count" class="text-white font-semibold">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white opacity-75">Tiempo respuesta:</span>
<span id="response-time" class="text-white font-semibold">--</span>
</div>
</div>
</div>
<!-- Messages -->
<main class="flex-1 max-w-md mx-auto w-full relative z-10">
<div id="messages" class="px-4 py-6 space-y-4">
<div class="flex justify-start">
<div class="message-bubble assistant-bubble p-3">
<p class="text-gray-900 text-sm">¡Hola! Soy Personnn AGI. ¿En qué puedo ayudarte?</p>
</div>
</div>
</div>
</main>
<!-- Input Area -->
<div class="glass-effect px-4 py-3">
<div class="max-w-md mx-auto">
<div class="flex items-end space-x-3">
<input
type="text"
id="message-input"
placeholder="Escribe un mensaje..."
class="flex-1 rounded-2xl px-4 py-3 bg-white bg-opacity-90 text-gray-900"
onkeypress="handleKeyPress(event)"
/>
<button
onclick="sendMessage()"
class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white"
>
➤
</button>
</div>
</div>
</div>
</div>
<script>
let userEmail = '';
let sessionId = '';
let userApiKey = '';
let interactionCount = 0;
let metricsVisible = false;
// Configuración del servidor Personnn
const PERSONNN_SERVER = 'http://localhost:8001';
// Crear partículas de fondo
function createParticles() {
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 30; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 6 + 's';
particlesContainer.appendChild(particle);
}
}
// Verificar acceso
async function verifyAccess() {
const email = document.getElementById('email-input').value.trim();
const statusDiv = document.getElementById('login-status');
if (!email) {
statusDiv.innerHTML = '<p class="text-red-400">Por favor ingresa tu email</p>';
return;
}
statusDiv.innerHTML = '<p class="text-blue-400">Conectando a Personnn...</p>';
try {
const response = await fetch(\`\${PERSONNN_SERVER}/verify-organization?email=\${encodeURIComponent(email)}\`);
if (!response.ok) {
statusDiv.innerHTML = '<p class="text-red-400">❌ Acceso denegado</p>';
return;
}
const data = await response.json();
if (!data.valid || !data.api_keys || data.api_keys.length === 0) {
statusDiv.innerHTML = '<p class="text-red-400">❌ No tienes API keys activas</p>';
return;
}
userEmail = email;
userApiKey = data.api_keys[0].key;
sessionId = \`personnn_\${Date.now()}_\${Math.random().toString(36).substr(2, 9)}\`;
statusDiv.innerHTML = '<p class="text-green-400">✅ Conectado exitosamente</p>';
setTimeout(() => {
document.getElementById('login-screen').style.display = 'none';
document.getElementById('chat-interface').classList.remove('hidden');
document.getElementById('message-input').focus();
}, 1500);
} catch (error) {
statusDiv.innerHTML = '<p class="text-red-400">❌ Error de conexión</p>';
}
}
// Enviar mensaje
async function sendMessage() {
const input = document.getElementById('message-input');
const message = input.value.trim();
if (!message || !userApiKey) return;
input.value = '';
addMessage('Tú', message, 'user');
const startTime = Date.now();
try {
// Inicializar sesión si es necesario
await fetch(\`\${PERSONNN_SERVER}/session/initialize\`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
session_id: sessionId,
user_id: userEmail
})
});
// Enviar mensaje
const response = await fetch(\`\${PERSONNN_SERVER}/chat\`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': \`Bearer \${userApiKey}\`
},
body: JSON.stringify({
content: message,
session_id: sessionId,
model: 'gpt-4',
metadata: {
timestamp: new Date().toISOString(),
source: 'personnnkit_agent'
}
})
});
const responseTime = Date.now() - startTime;
if (response.ok) {
const data = await response.json();
console.log('📨 Respuesta completa del servidor:', data);
// Extraer el contenido de la estructura corregida
let botResponse = '';
let metadata = null;
if (data.data) {
botResponse = data.data.content || 'Sin respuesta';
metadata = data.data.metadata || null;
} else {
// Fallback para estructuras antiguas
botResponse = data.response || data.content || 'Sin respuesta';
metadata = data.metadata || null;
}
console.log('💬 Contenido extraído:', botResponse);
console.log('📊 Metadata extraída:', metadata);
// Agregar el mensaje al chat
addMessage('Personnn', botResponse, 'bot');
// Actualizar métricas si hay metadata
if (metadata) {
updateMetrics(metadata, responseTime);
}
} else {
addMessage('Sistema', 'Error al procesar mensaje', 'bot');
}
} catch (error) {
addMessage('Sistema', 'Error de conexión', 'bot');
}
}
// Agregar mensaje al chat
function addMessage(role, content, source) {
const messagesContainer = document.getElementById('messages');
const messageDiv = document.createElement('div');
messageDiv.className = 'flex ' + (source === 'user' ? 'justify-end' : 'justify-start');
const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const escapedContent = content.replace(/</g, '<').replace(/>/g, '>');
if (source === 'user') {
messageDiv.innerHTML = \`
<div class="message-bubble user-bubble p-3">
<p class="text-white text-sm">\${escapedContent}</p>
<div class="text-xs text-blue-100 mt-2 text-right">\${time}</div>
</div>
\`;
} else {
messageDiv.innerHTML = \`
<div class="message-bubble assistant-bubble p-3">
<p class="text-gray-900 text-sm">\${escapedContent}</p>
<div class="text-xs text-gray-500 mt-2">\${time}</div>
</div>
\`;
}
messagesContainer.appendChild(messageDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
// Actualizar métricas
function updateMetrics(metadata, responseTime) {
if (!metricsVisible) {
document.getElementById('metrics-panel').style.display = 'block';
metricsVisible = true;
}
if (metadata.personality && metadata.personality.state) {
const stateElement = document.getElementById('personality-state');
const state = metadata.personality.state.toUpperCase();
stateElement.textContent = state;
stateElement.className = \`evolution-badge state-\${state.toLowerCase()}\`;
}
if (metadata.agi_consciousness && metadata.agi_consciousness.consciousness_level) {
const level = Math.round(metadata.agi_consciousness.consciousness_level * 100);
document.getElementById('consciousness-level').textContent = level + '%';
}
interactionCount++;
document.getElementById('interaction-count').textContent = interactionCount;
if (responseTime) {
document.getElementById('response-time').textContent = responseTime + 'ms';
}
}
// Toggle métricas
function toggleMetrics() {
const panel = document.getElementById('metrics-panel');
metricsVisible = !metricsVisible;
panel.style.display = metricsVisible ? 'block' : 'none';
}
// Limpiar chat
function clearChat() {
document.getElementById('messages').innerHTML = \`
<div class="flex justify-start">
<div class="message-bubble assistant-bubble p-3">
<p class="text-gray-900 text-sm">¡Hola! Soy Personnn AGI. ¿En qué puedo ayudarte?</p>
</div>
</div>
\`;
interactionCount = 0;
document.getElementById('interaction-count').textContent = '0';
}
// Manejar Enter
function handleKeyPress(event) {
if (event.key === 'Enter') {
sendMessage();
}
}
// Inicializar
document.addEventListener('DOMContentLoaded', function() {
createParticles();
});
</script>
</body>
</html>`,
'scripts/setup_personnn.py': `#!/usr/bin/env python3
"""
Script de configuración para conectar con Personnn AGI
"""
import os
import json
import requests
from dotenv import load_dotenv
def setup_personnn_connection():
"""Configurar conexión con Personnn AGI"""
print("🚀 Configurando conexión con Personnn AGI...")
# Cargar variables de entorno
load_dotenv()
# Configuración por defecto
config = {
"personnn_server": "http://localhost:8001",
"default_model": "gpt-4",
"timeout": 30,
"retry_attempts": 3
}
# Verificar conexión con Personnn
try:
response = requests.get(f"{config['personnn_server']}/status", timeout=5)
if response.status_code == 200:
print("✅ Conexión con Personnn AGI establecida")
status_data = response.json()
print(f" - Versión: {status_data.get('version', 'N/A')}")
print(f" - Estado: {status_data.get('status', 'N/A')}")
else:
print("⚠️ Personnn AGI no responde correctamente")
except requests.exceptions.RequestException as e:
print(f"❌ Error conectando con Personnn AGI: {e}")
print(" Asegúrate de que Personnn esté ejecutándose en puerto 8001")
# Guardar configuración
with open('.personnn-config.json', 'w') as f:
json.dump(config, f, indent=2)
print("📝 Configuración guardada en .personnn-config.json")
print("🎉 Setup completado!")
if __name__ == "__main__":
setup_personnn_connection()`,
'runtime/api.js': `// API endpoints para el agente Personnn AGI
const express = require('express');
const cors = require('cors');
function setup(app) {
// Habilitar CORS
app.use(cors());
// Endpoint de estado
app.get('/api/status', (req, res) => {
res.json({
status: 'active',
framework: 'PersonnnKit',
agent: 'Personnn AGI Assistant',
version: '1.0.0'
});
});
// Endpoint para verificar conexión con Personnn
app.get('/api/personnn/status', async (req, res) => {
try {
const fetch = (await import('node-fetch')).default;
const response = await fetch('http://localhost:8001/status');
const data = await response.json();
res.json({ connected: true, personnn_status: data });
} catch (error) {
res.json({ connected: false, error: error.message });
}
});
// Proxy para métricas de Personnn
app.get('/api/personnn/metrics', async (req, res) => {
try {
const fetch = (await import('node-fetch')).default;
const response = await fetch('http://localhost:8001/metrics');
const data = await response.json();
res.json(data);
} catch (error) {
res.status(500).json({ error: error.message });
}
});
}
module.exports = { setup };`,
'runtime/cron.js': `// Tareas programadas para el agente Personnn AGI
const cron = require('node-cron');
function setup() {
// Verificar estado de Personnn cada 5 minutos
cron.schedule('*/5 * * * *', async () => {
try {
const fetch = (await import('node-fetch')).default;
const response = await fetch('http://localhost:8001/status');
const data = await response.json();
console.log(\`[CRON] Personnn AGI Status: \${data.status}\`);
} catch (error) {
console.log(\`[CRON] Error checking Personnn status: \${error.message}\`);
}
});
console.log('🕐 Tareas programadas iniciadas para Personnn AGI');
}
module.exports = { setup };`,
'personnn.config.ts': `export default {
port: 3333,
pagesDir: "pages",
staticDir: "public",
apiDir: "runtime/api.js",
cronFile: "runtime/cron.js",
scriptsDir: "scripts",
// Configuración específica para Personnn AGI
personnn: {
server: "http://localhost:8001",
defaultModel: "gpt-4",
timeout: 30000,
retryAttempts: 3
}
};`,
'README.md': `# Personnn AGI Assistant
Agente premium creado con PersonnnKit que se conecta directamente al sistema Personnn AGI.
## 🚀 Características
- **Conexión directa** con Personnn AGI
- **Métricas en tiempo real** de consciencia y evolución
- **Interfaz premium** con efectos visuales avanzados
- **Sistema de partículas** y animaciones fluidas
- **Autenticación** por email y API keys
- **Estados de evolución** (Aurora, Zenith, Supernova, Cosmos)
## 📋 Requisitos
- Node.js 16+
- Python 3.8+
- Personnn AGI ejecutándose en puerto 8001
## 🛠️ Instalación
\`\`\`bash
# Instalar dependencias
npm install
pip install -r requirements.txt
# Configurar conexión con Personnn
npm run setup-personnn
# Iniciar en modo desarrollo
npm run dev
\`\`\`
## 🔧 Configuración
1. Asegúrate de que Personnn AGI esté ejecutándose:
\`\`\`bash
cd ../personnn
python -m uvicorn personnn.api.main:app --host 0.0.0.0 --port 8001 --reload
\`\`\`
2. Configura tu email en la interfaz para obtener acceso
3. El agente se conectará automáticamente y mostrará métricas en tiempo real
## 📊 Métricas Disponibles
- **Estado de Personalidad**: Aurora, Zenith, Supernova, Cosmos, Eternidad
- **Nivel de Consciencia**: Porcentaje de evolución AGI
- **Tiempo de Respuesta**: Latencia de las consultas
- **Contador de Interacciones**: Número de mensajes procesados
- **Modelo Activo**: LLM utilizado para las respuestas
## 🎨 Personalización
Edita \`pages/index.html\` para personalizar:
- Colores y gradientes
- Efectos visuales
- Métricas mostradas
- Comportamiento de la interfaz
## 🔗 Endpoints API
- \`GET /api/status\` - Estado del agente
- \`GET /api/personnn/status\` - Estado de Personnn AGI
- \`GET /api/personnn/metrics\` - Métricas en tiempo real
## 📝 Licencia
MIT License - Creado con PersonnnKit
`,
'requirements.txt': `fastapi>=0.104.0
uvicorn>=0.24.0
requests>=2.31.0
python-dotenv>=1.0.0
aiohttp>=3.9.0`,
'.env.example': `# Configuración para Personnn AGI Assistant
PERSONNN_SERVER=http://localhost:8001
DEFAULT_MODEL=gpt-4
TIMEOUT=30
RETRY_ATTEMPTS=3`,
'package.json': `{
"name": "personnn-agi-assistant",
"version": "1.0.0",
"description": "Agente premium conectado al sistema Personnn AGI",
"scripts": {
"start": "npm run dev",
"dev": "node runtime/dev-server.js",
"build": "node runtime/build.js",
"setup-personnn": "python scripts/setup_personnn.py"
},
"dependencies": {
"express": "^4.18.2",
"cors": "^2.8.5",
"node-cron": "^3.0.3",
"node-fetch": "^3.3.2"
},
"keywords": ["personnn", "agi", "ai-agent", "personnnkit"],
"author": "Personnn AGI",
"license": "MIT"
}`
}
};
//# sourceMappingURL=personnn-agi.js.map