@personnn/personnnkit
Version:
🇵 PersonnnKit - El Agente Kit Universal. Framework revolucionario para crear agentes de IA con HTML + Python. Simplicidad radical vs frameworks gigantes.
972 lines (862 loc) • 107 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createProject = createProject;
const fs_1 = __importDefault(require("fs"));
const path_1 = __importDefault(require("path"));
const readline_1 = __importDefault(require("readline"));
// Función para preguntar al usuario sobre opciones de styling
function promptStylingOptions() {
return new Promise((resolve) => {
const rl = readline_1.default.createInterface({
input: process.stdin,
output: process.stdout
});
console.log("\n🎨 Elige tu framework de estilos:");
console.log("1. Pure CSS (ligero, sin dependencias)");
console.log("2. Tailwind CSS (utility-first, auto-hospedado)");
console.log("3. Tailwind + ShadCN/UI (componentes modernos)");
rl.question("\nSelecciona una opción (1-3) [2]: ", (answer) => {
rl.close();
const choice = answer.trim() || "2";
switch (choice) {
case "1":
resolve({ framework: "css", includeShadcn: false });
break;
case "3":
resolve({ framework: "tailwind", includeShadcn: true });
break;
case "2":
default:
resolve({ framework: "tailwind", includeShadcn: false });
break;
}
});
});
}
const templates = {
config: `// personnn.config.ts
export default {
port: 3333,
pagesDir: "pages",
staticDir: "public",
apiDir: "runtime/api.js",
cronFile: "runtime/cron.js",
scriptsDir: "scripts"
};`,
// Tailwind CSS auto-hospedado (minificado)
tailwindCss: `/*! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com */
*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, "Roboto Mono", "Courier New", monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.mt-2{margin-top:0.5rem}.flex{display:flex}.grid{display:grid}.h-16{height:4rem}.min-h-32{min-height:8rem}.min-h-screen{min-height:100vh}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-white\/20{border-color:rgb(255 255 255 / 0.2)}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128 / var(--tw-border-opacity))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}.bg-black\/30{background-color:rgb(0 0 0 / 0.3)}.bg-gray-800\/50{background-color:rgb(31 41 55 / 0.5)}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}.bg-green-900\/30{background-color:rgb(20 83 45 / 0.3)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247 / var(--tw-bg-opacity))}.bg-red-900\/30{background-color:rgb(127 29 29 / 0.3)}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-200{--tw-gradient-to:#dbeafe var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254 / var(--tw-text-opacity))}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254 / var(--tw-text-opacity))}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172 / var(--tw-text-opacity))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165 / var(--tw-text-opacity))}.text-yellow-300{--tw-text-opacity:1;color:rgb(253 224 71 / var(--tw-text-opacity))}.text-transparent{color:transparent}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-white\\/20:hover{background-color:rgb(255 255 255 / 0.2)}.hover\\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity))}.hover\\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.hover\\:bg-purple-600:hover{--tw-bg-opacity:1;background-color:rgb(147 51 234 / var(--tw-bg-opacity))}.hover\\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254 / var(--tw-text-opacity))}@media (min-width:640px){.sm\\:flex-row{flex-direction:row}.sm\\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:768px){.md\\:flex{display:flex}.md\\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\\:text-2xl{font-size:1.5rem;line-height:2rem}.md\\:text-7xl{font-size:4.5rem;line-height:1}}@media (min-width:1024px){.lg\\:px-8{padding-left:2rem;padding-right:2rem}}`,
// Landing page profesional con Tailwind self-hosted
indexHtmlTailwind: `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PersonnnKit - The WordPress for AI Agents</title>
<link href="./css/tailwind.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #007AFF;
--secondary: #5856D6;
--success: #34C759;
--warning: #FF9500;
--danger: #FF3B30;
--background: #FAFAFA;
--surface: #FFFFFF;
--text-primary: #1D1D1F;
--text-secondary: #86868B;
--border: #E5E5E7;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--background);
color: var(--text-primary);
line-height: 1.6;
}
.ios-card {
background: var(--surface);
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.ios-card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.notion-block {
background: var(--surface);
border-radius: 8px;
border: 1px solid var(--border);
padding: 16px;
margin: 8px 0;
}
.gradient-text {
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ios-button {
background: var(--primary);
color: white;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-weight: 600;
transition: all 0.2s ease;
cursor: pointer;
}
.ios-button:hover {
background: #0056CC;
transform: scale(1.02);
}
.ios-button.secondary {
background: var(--surface);
color: var(--primary);
border: 1px solid var(--border);
}
.ios-button.secondary:hover {
background: #F2F2F7;
}
.code-block {
background: #1E1E1E;
color: #D4D4D4;
border-radius: 8px;
padding: 16px;
font-family: 'SF Mono', Monaco, monospace;
font-size: 14px;
overflow-x: auto;
}
.architecture-diagram {
background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
border-radius: 12px;
padding: 24px;
border: 1px solid var(--border);
}
.flow-arrow {
color: var(--primary);
font-size: 24px;
margin: 0 16px;
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}
.status-active { background: var(--success); }
.status-beta { background: var(--warning); }
.status-planned { background: var(--text-secondary); }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeInUp 0.6s ease-out;
}
.hero-gradient {
background: linear-gradient(135deg, #F8F9FA 0%, #E3F2FD 100%);
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
<span class="text-white text-sm font-bold">P</span>
</div>
<span class="text-xl font-semibold">PersonnnKit</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#architecture" class="text-gray-600 hover:text-gray-900 transition-colors">Architecture</a>
<a href="#capabilities" class="text-gray-600 hover:text-gray-900 transition-colors">Capabilities</a>
<a href="#demo" class="text-gray-600 hover:text-gray-900 transition-colors">Demo</a>
<a href="#roadmap" class="text-gray-600 hover:text-gray-900 transition-colors">Roadmap</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient py-20 px-4">
<div class="max-w-6xl mx-auto text-center animate-fade-in">
<div class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-800 text-sm font-medium mb-8">
<span class="status-indicator status-active"></span>
Now in Beta - Build AI Agents in Minutes
</div>
<h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text">
The WordPress<br>for AI Agents
</h1>
<p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto mb-12">
Create intelligent local agents using familiar technologies. HTML + Python + Zero complexity.
Your data stays on your machine, your agents work instantly.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button onclick="runMainTask()" class="ios-button text-lg px-8 py-4">
🚀 Try Live Demo
</button>
<button onclick="scrollToArchitecture()" class="ios-button secondary text-lg px-8 py-4">
📖 Learn More
</button>
</div>
</div>
</section>
<!-- Quick Start -->
<section class="py-16 px-4 bg-white">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">Get Started in 30 Seconds</h2>
<div class="ios-card p-6">
<div class="code-block">
<span style="color: #6A9955;"># Install globally</span>
npm install -g personnnkit
<span style="color: #6A9955;"># Create your first agent</span>
personnnkit create my-agent
<span style="color: #6A9955;"># Navigate and start</span>
cd my-agent
npm run setup
npm run dev
<span style="color: #6A9955;"># Your agent is live at http://localhost:3333 🎉</span>
</div>
</div>
</div>
</section>
<!-- Architecture -->
<section id="architecture" class="py-20 px-4 bg-gray-50">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">System Architecture</h2>
<div class="architecture-diagram mb-12">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="ios-card p-6 m-2 flex-1">
<h3 class="font-bold text-lg mb-2">🎨 Frontend Layer</h3>
<p class="text-gray-600 text-sm">HTML/CSS/JS<br>Modern UI Components<br>Real-time Updates</p>
</div>
<div class="flow-arrow">→</div>
<div class="ios-card p-6 m-2 flex-1">
<h3 class="font-bold text-lg mb-2">🔗 API Layer</h3>
<p class="text-gray-600 text-sm">RESTful Endpoints<br>WebSocket Support<br>Auto-generated Routes</p>
</div>
<div class="flow-arrow">→</div>
<div class="ios-card p-6 m-2 flex-1">
<h3 class="font-bold text-lg mb-2">🐍 Python Engine</h3>
<p class="text-gray-600 text-sm">AI Processing<br>Data Analysis<br>Custom Logic</p>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="ios-card p-6">
<h3 class="text-xl font-bold mb-4">📁 Project Structure</h3>
<div class="code-block text-sm">
my-agent/
├── pages/ <span style="color: #6A9955;"># Frontend HTML pages</span>
├── scripts/ <span style="color: #6A9955;"># Python AI logic</span>
├── runtime/ <span style="color: #6A9955;"># API & cron jobs</span>
├── public/ <span style="color: #6A9955;"># Static assets</span>
└── dist/ <span style="color: #6A9955;"># Production build</span>
</div>
</div>
<div class="ios-card p-6">
<h3 class="text-xl font-bold mb-4">⚡ Development Flow</h3>
<div class="space-y-3">
<div class="notion-block">
<strong>1. Design</strong> - Create HTML interfaces
</div>
<div class="notion-block">
<strong>2. Logic</strong> - Write Python scripts
</div>
<div class="notion-block">
<strong>3. Connect</strong> - Auto-generated APIs
</div>
<div class="notion-block">
<strong>4. Deploy</strong> - One-command build
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Capabilities -->
<section id="capabilities" class="py-20 px-4 bg-white">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">What You Can Build</h2>
<div class="grid md:grid-cols-3 gap-8 mb-16">
<div class="ios-card p-6">
<div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center mb-4">
<span class="text-2xl">🤖</span>
</div>
<h3 class="text-xl font-bold mb-3">AI Assistants</h3>
<p class="text-gray-600">Personal productivity tools, chatbots, and intelligent automation systems.</p>
</div>
<div class="ios-card p-6">
<div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center mb-4">
<span class="text-2xl">📊</span>
</div>
<h3 class="text-xl font-bold mb-3">Data Processors</h3>
<p class="text-gray-600">Analytics dashboards, report generators, and data visualization tools.</p>
</div>
<div class="ios-card p-6">
<div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center mb-4">
<span class="text-2xl">🔍</span>
</div>
<h3 class="text-xl font-bold mb-3">Content Extractors</h3>
<p class="text-gray-600">Web scrapers, document processors, and media analysis tools.</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="ios-card p-6">
<h3 class="text-xl font-bold mb-4 text-green-600">✅ What You CAN Do</h3>
<ul class="space-y-2 text-gray-700">
<li>• Build with HTML, CSS, JavaScript, Python</li>
<li>• Use any Python library (pandas, numpy, etc.)</li>
<li>• Create real-time interfaces</li>
<li>• Process local files and data</li>
<li>• Build APIs automatically</li>
<li>• Schedule background tasks</li>
<li>• Deploy as static sites</li>
</ul>
</div>
<div class="ios-card p-6">
<h3 class="text-xl font-bold mb-4 text-orange-600">⚠️ Current Limitations</h3>
<ul class="space-y-2 text-gray-700">
<li>• No built-in database (use files/external DBs)</li>
<li>• Single-user by design</li>
<li>• Python 3.8+ required</li>
<li>• No built-in authentication</li>
<li>• Local development focused</li>
<li>• No cloud deployment tools (yet)</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Demo Section -->
<section id="demo" class="py-20 px-4 bg-gray-50">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">Live Demo</h2>
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h3 class="text-2xl font-bold mb-6">🎥 YouTube Content Extractor</h3>
<p class="text-gray-600 mb-6">
This demo agent showcases PersonnnKit's power by extracting and analyzing content from YouTube videos using OpenAI Whisper AI - all running locally on your machine.
</p>
<div class="space-y-4 mb-8">
<div class="flex items-center space-x-3">
<span class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white text-sm">✓</span>
<span>Downloads audio from any YouTube video</span>
</div>
<div class="flex items-center space-x-3">
<span class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white text-sm">✓</span>
<span>Transcribes speech using Whisper AI (local)</span>
</div>
<div class="flex items-center space-x-3">
<span class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white text-sm">✓</span>
<span>Analyzes sentiment and extracts keywords</span>
</div>
<div class="flex items-center space-x-3">
<span class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white text-sm">✓</span>
<span>Saves results in multiple formats</span>
</div>
</div>
<div class="space-y-3">
<button onclick="runWhisperAgent()" class="ios-button-primary w-full">
🎤 Run Whisper Agent
</button>
<button onclick="runMainTask()" class="ios-button-secondary w-full">
🚀 Run Main Task
</button>
<button onclick="runAnalysis()" class="ios-button-secondary w-full">
📊 Run Analysis
</button>
<button onclick="testConnection()" class="ios-button-outline w-full">
🔗 Test Connection
</button>
</div>
</div>
<div class="ios-card p-6">
<div class="flex items-center justify-between mb-4">
<h4 class="text-lg font-semibold">Agent Output</h4>
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-400"></div>
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<div class="w-3 h-3 rounded-full bg-green-400"></div>
</div>
</div>
<div id="output" class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm min-h-[200px] overflow-auto">
<div class="text-gray-500">Ready to execute agent tasks...</div>
<div class="text-gray-500 mt-2">💡 Try the Whisper Agent to extract content from YouTube videos!</div>
</div>
</div>
</div>
</div>
</section>
<!-- Roadmap -->
<section id="roadmap" class="py-20 px-4 bg-white">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">Development Roadmap</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="ios-card p-6">
<div class="flex items-center mb-4">
<span class="status-indicator status-active"></span>
<h3 class="text-xl font-bold">Current (v1.0)</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• Core framework</li>
<li>• Python integration</li>
<li>• Auto-generated APIs</li>
<li>• Hot reload</li>
<li>• Static build</li>
</ul>
</div>
<div class="ios-card p-6">
<div class="flex items-center mb-4">
<span class="status-indicator status-beta"></span>
<h3 class="text-xl font-bold">Next (v1.5)</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• Plugin system</li>
<li>• Template marketplace</li>
<li>• Database connectors</li>
<li>• WebSocket support</li>
<li>• Docker deployment</li>
</ul>
</div>
<div class="ios-card p-6">
<div class="flex items-center mb-4">
<span class="status-indicator status-planned"></span>
<h3 class="text-xl font-bold">Future (v2.0)</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li>• Cloud deployment</li>
<li>• Multi-user support</li>
<li>• Built-in auth</li>
<li>• Visual editor</li>
<li>• Agent marketplace</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 px-4 bg-gray-900 text-white">
<div class="max-w-6xl mx-auto text-center">
<div class="flex items-center justify-center space-x-3 mb-4">
<div class="w-8 h-8 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
<span class="text-white text-sm font-bold">P</span>
</div>
<span class="text-xl font-semibold">PersonnnKit</span>
</div>
<p class="text-gray-400 mb-4">The WordPress for AI Agents</p>
<p class="text-sm text-gray-500">Made with ❤️ by Azomland & Personnn</p>
</div>
</footer>
<script>
async function runScript(scriptName) {
const output = document.getElementById('output');
output.innerHTML = '<div style="color: #FF9800;">⏳ Executing ' + scriptName + '...</div>';
try {
const response = await fetch('/api/run-script', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ script: scriptName })
});
const result = await response.json();
if (response.ok) {
output.innerHTML = \`
<div style="color: #4CAF50; margin-bottom: 8px;">✅ Execution completed successfully</div>
<div style="background: rgba(76, 175, 80, 0.1); padding: 12px; border-radius: 6px; border-left: 3px solid #4CAF50;">
<pre style="white-space: pre-wrap; margin: 0; color: #E0E0E0;">\${result.output}</pre>
</div>
\`;
} else {
output.innerHTML = \`
<div style="color: #F44336; margin-bottom: 8px;">❌ Execution failed</div>
<div style="background: rgba(244, 67, 54, 0.1); padding: 12px; border-radius: 6px; border-left: 3px solid #F44336;">
<pre style="white-space: pre-wrap; margin: 0; color: #E0E0E0;">\${result.error}</pre>
</div>
\`;
}
} catch (error) {
output.innerHTML = \`
<div style="color: #F44336; margin-bottom: 8px;">❌ Connection error</div>
<div style="background: rgba(244, 67, 54, 0.1); padding: 12px; border-radius: 6px; border-left: 3px solid #F44336;">
<span style="color: #E0E0E0;">\${error.message}</span>
</div>
\`;
}
}
function runMainTask() {
runScript('main_task.py');
}
function runAnalysis() {
runScript('analysis.py');
}
async function runWhisperAgent() {
const output = document.getElementById('output');
// Prompt for YouTube URL
const youtubeUrl = prompt('🔗 Enter YouTube URL:', 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
if (!youtubeUrl) {
output.innerHTML = '<div style="color: #FF9800;">❌ No URL provided</div>';
return;
}
output.innerHTML = '<div style="color: #FF9800;">⏳ Starting Whisper extraction...</div>';
try {
const response = await fetch('/api/whisper-extract', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ youtube_url: youtubeUrl })
});
const result = await response.json();
if (response.ok) {
output.innerHTML = \`
<div style="color: #4CAF50; margin-bottom: 8px;">✅ Whisper extraction completed successfully</div>
<div style="background: rgba(76, 175, 80, 0.1); padding: 12px; border-radius: 6px; border-left: 3px solid #4CAF50;">
<pre style="white-space: pre-wrap; margin: 0; color: #E0E0E0;">\${result.output}</pre>
</div>
\`;
} else {
output.innerHTML = \`
<div style="color: #F44336; margin-bottom: 8px;">❌ Whisper extraction failed</div>
<div style="background: rgba(244, 67, 54, 0.1); padding: 12px; border-radius: 6px; border-left: 3px solid #F44336;">
<pre style="white-space: pre-wrap; margin: 0; color: #E0E0E0;">\${result.error}</pre>
</div>
\`;
}
} catch (error) {
output.innerHTML = \`
<div style="color: #F44336; margin-bottom: 8px;">❌ Connection error</div>
<div style="background: rgba(244, 67, 54, 0.1); padding: 12px; border-radius: 6px; border-left: 3px solid #F44336;">
<span style="color: #E0E0E0;">\${error.message}</span>
</div>
\`;
}
}
async function testConnection() {
const output = document.getElementById('output');
output.innerHTML = '<div style="color: #FF9800;">⏳ Testing connection...</div>';
try {
const response = await fetch('/api/ping');
const result = await response.text();
output.innerHTML = \`
<div style="color: #4CAF50; margin-bottom: 8px;">✅ Connection successful</div>
<div style="background: rgba(76, 175, 80, 0.1); padding: 12px; border-radius: 6px; border-left: 3px solid #4CAF50;">
<span style="color: #E0E0E0;">\${result}</span>
</div>
\`;
} catch (error) {
output.innerHTML = \`
<div style="color: #F44336; margin-bottom: 8px;">❌ Connection failed</div>
<div style="background: rgba(244, 67, 54, 0.1); padding: 12px; border-radius: 6px; border-left: 3px solid #F44336;">
<span style="color: #E0E0E0;">\${error.message}</span>
</div>
\`;
}
}
function scrollToArchitecture() {
document.getElementById('architecture').scrollIntoView({
behavior: 'smooth'
});
}
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.ios-card').forEach(card => {
observer.observe(card);
});
</script>
</body>
</html>`,
contactHtml: `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - PersonnnKit Agent</title>
<link href="./css/tailwind.css" rel="stylesheet">
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body class="gradient-bg min-h-screen text-white">
<div class="max-w-2xl mx-auto px-4 py-16">
<div class="glass p-8 rounded-xl">
<h1 class="text-4xl font-bold mb-6 text-center">📞 Contact</h1>
<p class="text-xl text-blue-100 mb-8 text-center">Need help with this agent?</p>
<div class="space-y-4">
<div class="glass p-4 rounded-lg">
<div class="flex items-center space-x-3">
<span class="text-2xl">📧</span>
<div>
<h3 class="font-semibold">Email</h3>
<p class="text-blue-200">your@email.com</p>
</div>
</div>
</div>
<div class="glass p-4 rounded-lg">
<div class="flex items-center space-x-3">
<span class="text-2xl">🌐</span>
<div>
<h3 class="font-semibold">Website</h3>
<p class="text-blue-200">https://your-website.com</p>
</div>
</div>
</div>
<div class="glass p-4 rounded-lg">
<div class="flex items-center space-x-3">
<span class="text-2xl">💬</span>
<div>
<h3 class="font-semibold">WhatsApp</h3>
<p class="text-blue-200">+1234567890</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-8">
<a href="/" class="glass px-6 py-3 rounded-lg font-semibold hover:bg-white/20 transition-all inline-block">
← Back to home
</a>
</div>
</div>
</div>
</body>
</html>`,
mainTask: `#!/usr/bin/env python3
# scripts/main_task.py - YouTube Content Extractor with Whisper
import os
import json
import datetime
import tempfile
import subprocess
from pathlib import Path
def main():
"""YouTube Content Extractor using Whisper AI"""
print("🎥 YouTube Content Extractor Agent")
print("=" * 50)
# Example YouTube URL (you can change this)
youtube_url = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
try:
# Step 1: Download audio from YouTube
print("📥 Step 1: Downloading audio from YouTube...")
audio_file = download_youtube_audio(youtube_url)
if not audio_file:
raise Exception("Failed to download audio from YouTube")
print(f"✅ Audio downloaded: {audio_file}")
# Step 2: Extract text using Whisper
print("🎤 Step 2: Extracting text using Whisper AI...")
transcript = extract_text_with_whisper(audio_file)
if not transcript:
raise Exception("Failed to extract text with Whisper")
print(f"✅ Text extracted: {len(transcript)} characters")
# Step 3: Process and analyze content
print("📊 Step 3: Processing content...")
analysis = analyze_content(transcript)
# Step 4: Save results
print("💾 Step 4: Saving results...")
save_results(youtube_url, transcript, analysis)
# Prepare final result
result = {
"timestamp": datetime.datetime.now().isoformat(),
"status": "success",
"youtube_url": youtube_url,
"transcript_length": len(transcript),
"word_count": len(transcript.split()),
"analysis": analysis,
"transcript_preview": transcript[:200] + "..." if len(transcript) > 200 else transcript
}
print(json.dumps(result, indent=2, ensure_ascii=False))
print("✅ YouTube content extraction completed!")
# Cleanup
cleanup_temp_files(audio_file)
except Exception as e:
error_result = {
"timestamp": datetime.datetime.now().isoformat(),
"status": "error",
"error": str(e),
"message": "Failed to extract YouTube content"
}
print(json.dumps(error_result, indent=2))
def download_youtube_audio(url):
"""Download audio from YouTube using yt-dlp"""
try:
import yt_dlp
# Create temp directory
temp_dir = tempfile.mkdtemp()
output_path = os.path.join(temp_dir, "audio.%(ext)s")
ydl_opts = {
'format': 'bestaudio/best',
'outtmpl': output_path,
'extractaudio': True,
'audioformat': 'wav',
'audioquality': '192K',
}
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
ydl.download([url])
# Find the downloaded file
for file in os.listdir(temp_dir):
if file.startswith("audio"):
return os.path.join(temp_dir, file)
return None
except ImportError:
print("❌ yt-dlp not installed. Install with: pip install yt-dlp")
return None
except Exception as e:
print(f"❌ Error downloading audio: {e}")
return None
def extract_text_with_whisper(audio_file):
"""Extract text from audio using OpenAI Whisper"""
try:
import whisper
print("🔄 Loading Whisper model...")
model = whisper.load_model("base") # You can use: tiny, base, small, medium, large
print("🔄 Transcribing audio...")
result = model.transcribe(audio_file)
return result["text"]
except ImportError:
print("❌ Whisper not installed. Install with: pip install openai-whisper")
return None
except Exception as e:
print(f"❌ Error with Whisper transcription: {e}")
return None
def analyze_content(transcript):
"""Analyze the extracted content"""
words = transcript.split()
sentences = transcript.split('.')
# Basic analysis
analysis = {
"word_count": len(words),
"sentence_count": len([s for s in sentences if s.strip()]),
"avg_words_per_sentence": round(len(words) / max(len(sentences), 1), 2),
"most_common_words": get_most_common_words(words),
"estimated_reading_time": f"{len(words) // 200} minutes",
"language_detected": "en", # Could be enhanced with language detection
"content_type": detect_content_type(transcript)
}
return analysis
def get_most_common_words(words, top_n=5):
"""Get most common words (excluding common stop words)"""
stop_words = {'the', 'a', 'an', 'and', 'or', 'but', 'in', 'on', 'at', 'to', 'for', 'of', 'with', 'by', 'is', 'are', 'was', 'were', 'be', 'been', 'have', 'has', 'had', 'do', 'does', 'did', 'will', 'would', 'could', 'should', 'may', 'might', 'must', 'can', 'this', 'that', 'these', 'those', 'i', 'you', 'he', 'she', 'it', 'we', 'they', 'me', 'him', 'her', 'us', 'them'}
word_freq = {}
for word in words:
word_clean = word.lower().strip('.,!?";')
if word_clean and word_clean not in stop_words and len(word_clean) > 2:
word_freq[word_clean] = word_freq.get(word_clean, 0) + 1
return sorted(word_freq.items(), key=lambda x: x[1], reverse=True)[:top_n]
def detect_content_type(transcript):
"""Detect the type of content based on keywords"""
transcript_lower = transcript.lower()
if any(word in transcript_lower for word in ['tutorial', 'how to', 'step by step', 'guide']):
return "Tutorial/Educational"
elif any(word in transcript_lower for word in ['music', 'song', 'lyrics', 'album']):
return "Music"
elif any(word in transcript_lower for word in ['news', 'breaking', 'report', 'journalist']):
return "News"
elif any(word in transcript_lower for word in ['podcast', 'interview', 'discussion']):
return "Podcast/Interview"
elif any(word in transcript_lower for word in ['review', 'opinion', 'think', 'believe']):
return "Review/Opinion"
else:
return "General Content"
def save_results(url, transcript, analysis):
"""Save results to files"""
try:
# Create data directory if it doesn't exist
data_dir = Path("data")
data_dir.mkdir(exist_ok=True)
timestamp = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
# Save transcript
transcript_file = data_dir / f"transcript_{timestamp}.txt"
with open(transcript_file, 'w', encoding='utf-8') as f:
f.write(f"YouTube URL: {url}\\n")
f.write(f"Extracted on: {datetime.datetime.now().isoformat()}\\n")
f.write("=" * 50 + "\\n\\n")
f.write(transcript)
# Save analysis
analysis_file = data_dir / f"analysis_{timestamp}.json"
with open(analysis_file, 'w', encoding='utf-8') as f:
json.dump({
"url": url,
"timestamp": datetime.datetime.now().isoformat(),
"analysis": analysis
}, f, indent=2, ensure_ascii=False)
print(f"📁 Results saved:")
print(f" - Transcript: {transcript_file}")
print(f" - Analysis: {analysis_file}")
except Exception as e:
print(f"⚠️ Warning: Could not save results: {e}")
def cleanup_temp_files(audio_file):
"""Clean up temporary files"""
try:
if audio_file and os.path.exists(audio_file):
temp_dir = os.path.dirname(audio_file)
import shutil
shutil.rmtree(temp_dir)
print("🧹 Temporary files cleaned up")
except Exception as e:
print(f"⚠️ Warning: Could not clean up temp files: {e}")
if __name__ == "__main__":
main()`,
analysis: `#!/usr/bin/env python3
# scripts/analysis.py
import random
import json
import datetime
def main():
"""Example analysis script"""
print("📊 Starting analysis...")
# Simulate analysis
metrics = {
"active_users": random.randint(100, 1000),
"conversion_rate": round(random.uniform(2.5, 8.5), 2),
"revenue": round(random.uniform(1000, 50000), 2),
"performance_score": random.randint(75, 98)
}
result = {
"timestamp": datetime.datetime.now().isoformat(),
"analysis_type": "performance_metrics",
"metrics": metrics,
"insights": [
"User engagement is trending upward",
"Conversion optimization opportunities identified",
"Revenue growth potential detected"
]
}
print(json.dumps(result, indent=2, ensure_ascii=False))
print("✅ Analysis completed!")
if __name__ == "__main__":