Spaces:

00Boobs00
/

wana

Running

App Files Files Community

00Boobs00 commited on Jan 18

Commit

7355bc1

verified ·

1 Parent(s): b5124c7

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +729 -422

index.html CHANGED Viewed

@@ -1,499 +1,806 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WANA v3 | Autonomous AI Core</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Inter', 'sans-serif'],
-                        display: ['Space Grotesk', 'sans-serif'],
-                        mono: ['JetBrains Mono', 'monospace'],
-                    },
-                    colors: {
-                        'neon-purple': '#b047ff',
-                        'cyber-pink': '#ff2a6d',
-                        'deep-blue': '#0d1117',
-                        'glow-blue': '#00bfff',
-                        'matrix-green': '#00ff41',
-                        'void-black': '#050505',
-                    },
-                    animation: {
-                        'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                        'float': 'float 6s ease-in-out infinite',
-                        'scan': 'scan 2s linear infinite',
-                    },
-                    keyframes: {
-                        float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' } },
-                        scan: { '0%': { transform: 'translateY(-100%)' }, '100%': { transform: 'translateY(100%)' } }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         body {
-            background-color: #050505;
-            background-image:
-                radial-gradient(circle at 50% 50%, rgba(176, 71, 255, 0.05) 0%, transparent 50%),
-                linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
-            background-size: 100% 100%, 40px 40px, 40px 40px;
         }
-        .glass-panel {
-            background: rgba(15, 15, 25, 0.6);
-            backdrop-filter: blur(12px);
-            border: 1px solid rgba(176, 71, 255, 0.15);
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
         }
-        .neon-border {
             position: relative;
         }
-        .neon-border::after {
             content: '';
             position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            padding: 1px;
-            background: linear-gradient(135deg, rgba(176, 71, 255, 0.5), rgba(0, 191, 255, 0.5));
-            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-            -webkit-mask-composite: xor;
-            mask-composite: exclude;
             pointer-events: none;
         }
-        .terminal-text {
-            text-shadow: 0 0 2px rgba(0, 255, 65, 0.5);
         }
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar { width: 6px; }
-        ::-webkit-scrollbar-track { background: #0d1117; }
-        ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: #b047ff; }
-        .vector-node {
-            transition: all 0.5s ease;
         }
-        .vector-node:hover {
-            background-color: #b047ff;
-            box-shadow: 0 0 10px #b047ff;
         }
-        .status-dot {
-            box-shadow: 0 0 8px currentColor;
         }
     </style>
 </head>
-<body class="text-gray-200 min-h-screen flex flex-col">
     <!-- Header -->
-    <header class="border-b border-gray-800 bg-black/80 backdrop-blur-md sticky top-0 z-50">
-        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
-            <div class="flex items-center gap-3">
-                <div class="w-10 h-10 rounded bg-gradient-to-br from-neon-purple to-cyber-pink flex items-center justify-center shadow-lg shadow-purple-500/20">
-                    <i class="fas fa-network-wired text-white"></i>
-                </div>
-                <div>
-                    <h1 class="text-2xl font-bold tracking-tight text-white">WANA <span class="text-neon-purple text-sm font-mono">v3.0.OS</span></h1>
-                    <p class="text-xs text-gray-500 font-mono">AUTONOMOUS ENGINE CORE</p>
-                </div>
-            </div>
-            <div class="flex items-center gap-6">
-                <a href="https://huggingface.co/spaces/00Boobs00/wana" target="_blank" class="text-sm text-gray-400 hover:text-white transition flex items-center gap-2">
-                    <i class="fas fa-cube"></i> HF Space
-                </a>
-                <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-green-900/30 border border-green-500/30 text-green-400 text-xs font-mono">
-                    <div class="w-2 h-2 rounded-full bg-green-500 status-dot animate-pulse"></div>
-                    <span>SYSTEM ONLINE</span>
-                </div>
-                <!-- Built with AnyCoder -->
-                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-gray-600 hover:text-neon-purple transition border border-gray-800 px-2 py-1 rounded">
-                    Built with <span class="font-semibold">anycoder</span>
-                </a>
-            </div>
         </div>
     </header>
-    <!-- Main Dashboard Grid -->
-    <main class="flex-1 container mx-auto px-6 py-8 grid grid-cols-1 lg:grid-cols-12 gap-6">
-        <!-- LEFT COLUMN: System & Permissions -->
-        <section class="lg:col-span-3 space-y-6">
-            <!-- User Role Card -->
-            <div class="glass-panel rounded-xl p-6 neon-border">
-                <div class="flex justify-between items-start mb-4">
-                    <h2 class="text-lg font-display font-bold text-white">Access Control</h2>
-                    <i class="fas fa-shield-alt text-neon-purple"></i>
                 </div>
-                <div class="space-y-4">
-                    <div>
-                        <label class="text-xs text-gray-500 uppercase tracking-wider">Current Role</label>
-                        <div class="mt-1 flex items-center gap-2">
-                            <select id="role-selector" class="bg-black border border-gray-700 text-white text-sm rounded p-2 w-full focus:border-neon-purple outline-none transition">
-                                <option value="user">User (Standard)</option>
-                                <option value="creator">Creator (LoRA+)</option>
-                                <option value="admin" selected>Admin (Root)</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="pt-4 border-t border-gray-800">
-                        <label class="text-xs text-gray-500 uppercase tracking-wider mb-2 block">Permissions</label>
-                        <div id="permissions-list" class="space-y-2 text-xs font-mono">
-                            <!-- Injected by JS -->
-                        </div>
-                    </div>
                 </div>
             </div>
-            <!-- System Health -->
-            <div class="glass-panel rounded-xl p-6 neon-border">
-                <div class="flex justify-between items-start mb-4">
-                    <h2 class="text-lg font-display font-bold text-white">Core Metrics</h2>
-                    <i class="fas fa-microchip text-cyber-pink"></i>
-                </div>
-                <div class="space-y-4">
-                    <div>
-                        <div class="flex justify-between text-xs mb-1">
-                            <span class="text-gray-400">CPU Load</span>
-                            <span id="cpu-val" class="text-glow-blue">12%</span>
                         </div>
-                        <div class="w-full bg-gray-800 rounded-full h-1.5">
-                            <div id="cpu-bar" class="bg-glow-blue h-1.5 rounded-full transition-all duration-500" style="width: 12%"></div>
                         </div>
                     </div>
-                    <div>
-                        <div class="flex justify-between text-xs mb-1">
-                            <span class="text-gray-400">Vector Memory</span>
-                            <span id="mem-val" class="text-neon-purple">48.2 MB</span>
                         </div>
-                        <div class="w-full bg-gray-800 rounded-full h-1.5">
-                            <div class="bg-neon-purple h-1.5 rounded-full transition-all duration-500" style="width: 65%"></div>
                         </div>
                     </div>
-                    <div>
-                        <div class="flex justify-between text-xs mb-1">
-                            <span class="text-gray-400">Autonomy Loop</span>
-                            <span class="text-matrix-green">ACTIVE</span>
-                        </div>
-                        <div class="flex items-center gap-2 mt-2">
-                            <div class="h-2 w-2 rounded-full bg-matrix-green animate-pulse"></div>
-                            <span class="text-xs text-gray-400 font-mono">Uptime: <span id="uptime">04:22:11</span></span>
                         </div>
                     </div>
                 </div>
             </div>
-            <!-- Data Persistence -->
-            <div class="glass-panel rounded-xl p-6 neon-border bg-black/40">
-                <h3 class="text-sm font-bold text-gray-300 mb-3 flex items-center gap-2">
-                    <i class="fas fa-database text-gray-500"></i> Persistent Index
-                </h3>
-                <div class="text-xs text-gray-500 mb-2">data/memory.faiss</div>
-                <button onclick="saveMemory()" class="w-full border border-gray-700 hover:border-neon-purple hover:text-neon-purple text-gray-300 text-xs py-2 rounded transition">
-                    <i class="fas fa-save mr-1"></i> Force Checkpoint
                 </button>
             </div>
         </section>
-        <!-- CENTER COLUMN: Agent Orchestration & Tasking -->
-        <section class="lg:col-span-6 flex flex-col gap-6">
-            <!-- Autonomous Engine Status -->
-            <div class="glass-panel rounded-xl p-1 neon-border flex-1">
-                <div class="bg-gray-900/50 rounded-t-xl px-4 py-2 border-b border-gray-800 flex justify-between items-center">
-                    <h2 class="text-sm font-bold text-glow-blue font-mono"><i class="fas fa-circle text-xs mr-2 animate-pulse"></i> AGENT ORCHESTRATION LAYER</h2>
-                    <div class="flex gap-2">
-                        <span class="text-[10px] px-2 py-0.5 rounded bg-gray-800 text-gray-400">PID: 8821</span>
-                    </div>
-                </div>
-                <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-4 h-full">
-                    <!-- Planner Agent -->
-                    <div class="bg-black/40 border border-gray-800 rounded-lg p-4 relative overflow-hidden group hover:border-neon-purple transition">
-                        <div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-100 transition"><i class="fas fa-chess-knight text-6xl text-neon-purple"></i></div>
-                        <div class="flex items-center gap-3 mb-3">
-                            <div class="w-8 h-8 rounded bg-neon-purple/20 text-neon-purple flex items-center justify-center"><i class="fas fa-chess"></i></div>
-                            <h3 class="font-bold text-sm">Planner</h3>
-                        </div>
-                        <p class="text-xs text-gray-400 mb-3">Task deconstruction & strategy formation.</p>
-                        <div class="flex justify-between items-center text-xs">
-                            <span class="text-gray-500">Status: <span class="text-neon-purple" id="planner-status">IDLE</span></span>
-                            <div class="w-2 h-2 rounded-full bg-gray-600" id="planner-dot"></div>
-                        </div>
-                    </div>
-                    <!-- Creative Agent -->
-                    <div class="bg-black/40 border border-gray-800 rounded-lg p-4 relative overflow-hidden group hover:border-cyber-pink transition">
-                        <div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-100 transition"><i class="fas fa-brain text-6xl text-cyber-pink"></i></div>
-                        <div class="flex items-center gap-3 mb-3">
-                            <div class="w-8 h-8 rounded bg-cyber-pink/20 text-cyber-pink flex items-center justify-center"><i class="fas fa-palette"></i></div>
-                            <h3 class="font-bold text-sm">Creative</h3>
-                        </div>
-                        <p class="text-xs text-gray-400 mb-3">Contextual reasoning & prompt injection.</p>
-                        <div class="flex justify-between items-center text-xs">
-                            <span class="text-gray-500">Status: <span class="text-cyber-pink" id="creative-status">STANDBY</span></span>
-                            <div class="w-2 h-2 rounded-full bg-gray-600" id="creative-dot"></div>
-                        </div>
-                    </div>
-                    <!-- Memory Agent -->
-                    <div class="bg-black/40 border border-gray-800 rounded-lg p-4 relative overflow-hidden group hover:border-matrix-green transition">
-                        <div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-100 transition"><i class="fas fa-memory text-6xl text-matrix-green"></i></div>
-                        <div class="flex items-center gap-3 mb-3">
-                            <div class="w-8 h-8 rounded bg-matrix-green/20 text-matrix-green flex items-center justify-center"><i class="fas fa-database"></i></div>
-                            <h3 class="font-bold text-sm">Memory</h3>
-                        </div>
-                        <p class="text-xs text-gray-400 mb-3">Vector curation & semantic storage.</p>
-                        <div class="flex justify-between items-center text-xs">
-                            <span class="text-gray-500">Status: <span class="text-matrix-green" id="memory-status">WRITING</span></span>
-                            <div class="w-2 h-2 rounded-full bg-matrix-green animate-pulse" id="memory-dot"></div>
-                        </div>
-                    </div>
-                </div>
-                <!-- Active Task Stream -->
-                <div class="bg-black border-t border-gray-800 p-4 font-mono text-xs h-48 overflow-y-auto custom-scrollbar" id="agent-log">
-                    <div class="text-gray-500 mb-1">-- System Boot Sequence Initialized --</div>
-                    <div class="text-neon-purple mb-1">[10:00:01] Planner: Loaded role permissions (Admin)</div>
-                    <div class="text-glow-blue mb-1">[10:00:02] Creative: Context window reset (4096 tokens)</div>
-                    <div class="text-matrix-green mb-1">[10:00:03] Memory: Loaded persistent index from /data/memory.faiss</div>
-                </div>
-            </div>
-            <!-- Generation Input -->
-            <div class="glass-panel rounded-xl p-6 neon-border">
-                <h2 class="text-lg font-display font-bold text-white mb-4">Initiate Generation Cycle</h2>
-                <div class="relative">
-                    <textarea class="w-full bg-gray-900/50 border border-gray-700 rounded-lg p-4 text-sm text-gray-200 focus:border-neon-purple focus:ring-1 focus:ring-neon-purple outline-none h-24 resize-none font-mono" placeholder="Enter system directive..."></textarea>
-                    <div class="absolute bottom-3 right-3 flex gap-2">
-                        <button class="bg-gray-800 hover:bg-gray-700 text-xs px-3 py-1 rounded text-gray-300 transition"><i class="fas fa-paperclip"></i></button>
-                        <button class="bg-neon-purple hover:bg-purple-600 text-white text-xs px-4 py-1 rounded font-bold transition shadow-lg shadow-purple-900/50">
-                            <i class="fas fa-play mr-1"></i> EXECUTE
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <!-- RIGHT COLUMN: Vector Memory Vis & Config -->
-        <section class="lg:col-span-3 space-y-6">
-            <!-- Vector Visualizer -->
-            <div class="glass-panel rounded-xl p-4 neon-border h-80 flex flex-col">
-                <div class="flex justify-between items-center mb-2">
-                    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-widest">Semantic Space</h3>
-                    <div class="flex gap-1">
-                        <div class="w-2 h-2 rounded-full bg-neon-purple"></div>
-                        <div class="w-2 h-2 rounded-full bg-cyber-pink"></div>
-                        <div class="w-2 h-2 rounded-full bg-matrix-green"></div>
-                    </div>
-                </div>
-                <!-- The Grid -->
-                <div class="flex-1 grid grid-cols-6 gap-1 opacity-60" id="vector-grid">
-                    <!-- Generated by JS -->
-                </div>
-                <div class="mt-2 text-[10px] text-center text-gray-600 font-mono">FAISS INDEX VISUALIZATION</div>
-            </div>
-            <!-- Tool Registry -->
-            <div class="glass-panel rounded-xl p-6 neon-border">
-                <h2 class="text-sm font-bold text-white mb-4 flex items-center gap-2">
-                    <i class="fas fa-tools text-gray-500"></i> Tool Registry
-                </h2>
-                <div class="space-y-2">
-                    <div class="flex justify-between items-center p-2 rounded bg-black/40 border border-gray-800 text-xs">
-                        <span class="text-gray-300">generate_video</span>
-                        <span class="text-matrix-green">READY</span>
-                    </div>
-                    <div class="flex justify-between items-center p-2 rounded bg-black/40 border border-gray-800 text-xs">
-                        <span class="text-gray-300">load_lora</span>
-                        <span class="text-matrix-green">READY</span>
-                    </div>
-                    <div class="flex justify-between items-center p-2 rounded bg-black/40 border border-gray-800 text-xs">
-                        <span class="text-gray-300">stream_context</span>
-                        <span class="text-yellow-500">BUSY</span>
-                    </div>
-                </div>
-            </div>
-            <!-- Engine Config -->
-            <div class="glass-panel rounded-xl p-6 neon-border">
-                <h2 class="text-sm font-bold text-white mb-4">Runtime Config</h2>
-                <div class="space-y-3 text-xs">
-                    <div class="flex justify-between">
-                        <span class="text-gray-500">Base Model</span>
-                        <span class="font-mono text-neon-purple">Qwen-72B</span>
-                    </div>
-                    <div class="flex justify-between">
-                        <span class="text-gray-500">LoRA Mode</span>
-                        <span class="font-mono text-cyber-pink">Hot-Swap</span>
-                    </div>
-                    <div class="flex justify-between">
-                        <span class="text-gray-500">Log Level</span>
-                        <span class="font-mono text-gray-300">DEBUG</span>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </main>
-    <footer class="border-t border-gray-800 bg-black py-6 mt-auto">
-        <div class="container mx-auto px-6 text-center">
-            <p class="text-xs text-gray-600 font-mono">
-                WANA v3.0 SYSTEM CORE // ENCRYPTED CONNECTION // <span class="text-neon-purple">VECTORS: 4096</span>
-            </p>
-        </div>
-    </footer>
-    <!-- Logic Script -->
-    <script>
-        // --- 1. Role & Permission System ---
-        const roles = {
-            'user': ['generate', 'view'],
-            'creator': ['generate', 'memory_write', 'lora_swap', 'view'],
-            'admin': ['generate', 'memory_write', 'lora_swap', 'autonomy', 'config', 'view', 'delete']
-        };
-        const roleSelector = document.getElementById('role-selector');
-        const permList = document.getElementById('permissions-list');
-        function updatePermissions() {
-            const role = roleSelector.value;
-            const perms = roles[role];
-            permList.innerHTML = perms.map(p => `
-                <div class="flex items-center gap-2 text-gray-400">
-                    <i class="fas fa-check text-neon-purple text-[10px]"></i>
-                    <span class="uppercase">${p}</span>
-                </div>
-            `).join('');
-            // Visual feedback
-            addLog(`Security: Permissions loaded for role '${role.toUpperCase()}'`);
         }
-        roleSelector.addEventListener('change', updatePermissions);
-        updatePermissions(); // Init
-        // --- 2. Vector Grid Visualizer ---
-        const vectorGrid = document.getElementById('vector-grid');
-        const colors = ['bg-neon-purple', 'bg-cyber-pink', 'bg-matrix-green', 'bg-glow-blue', 'bg-gray-600'];
-        for(let i=0; i<36; i++) {
-            const div = document.createElement('div');
-            // Randomize visual state
-            const colorClass = colors[Math.floor(Math.random() * colors.length)];
-            div.className = `rounded-sm ${colorClass} vector-node opacity-40`;
-            if(Math.random() > 0.7) div.classList.add('opacity-80');
-            vectorGrid.appendChild(div);
-        }
-        // --- 3. System Simulation (The "Brain") ---
-        const logs = document.getElementById('agent-log');
-        const plannerStatus = document.getElementById('planner-status');
-        const creativeStatus = document.getElementById('creative-status');
-        const memoryStatus = document.getElementById('memory-status');
-        function addLog(text) {
-            const time = new Date().toLocaleTimeString('en-US', {hour12: false});
-            const div = document.createElement('div');
-            // Color coding based on text
-            let colorClass = 'text-gray-300';
-            if(text.includes('Planner')) colorClass = 'text-neon-purple';
-            if(text.includes('Creative')) colorClass = 'text-cyber-pink';
-            if(text.includes('Memory')) colorClass = 'text-matrix-green';
-            if(text.includes('Error')) colorClass = 'text-red-500';
-            div.className = `${colorClass} mb-1`;
-            div.innerHTML = `<span class="opacity-50 mr-2">[${time}]</span> ${text}`;
-            logs.appendChild(div);
-            logs.scrollTop = logs.scrollHeight;
-        }
-        function simulateCycle() {
-            const actions = [
-                () => {
-                    plannerStatus.innerText = "PROCESSING";
-                    document.getElementById('planner-dot').className = "w-2 h-2 rounded-full bg-neon-purple animate-pulse";
-                    addLog("Planner: Analyzing goal vector...");
-                    setTimeout(() => {
-                        plannerStatus.innerText = "IDLE";
-                        document.getElementById('planner-dot').className = "w-2 h-2 rounded-full bg-gray-600";
-                    }, 2000);
-                },
-                () => {
-                    creativeStatus.innerText = "GENERATING";
-                    document.getElementById('creative-dot').className = "w-2 h-2 rounded-full bg-cyber-pink animate-pulse";
-                    addLog("Creative: Injecting style parameters...");
-                    setTimeout(() => {
-                        creativeStatus.innerText = "STANDBY";
-                        document.getElementById('creative-dot').className = "w-2 h-2 rounded-full bg-gray-600";
-                    }, 2500);
-                },
-                () => {
-                    memoryStatus.innerText = "INDEXING";
-                    addLog("Memory: Compressing vector trajectory...");
-                    setTimeout(() => {
-                        memoryStatus.innerText = "STORED";
-                        setTimeout(() => memoryStatus.innerText = "WRITING", 1000);
-                    }, 1500);
-                }
-            ];
-            // Run random actions
-            if(Math.random() > 0.5) actions[Math.floor(Math.random()*actions.length)]();
-            // Update CPU/Mem
-            const cpu = 10 + Math.floor(Math.random() * 20);
-            document.getElementById('cpu-val').innerText = cpu + "%";
-            document.getElementById('cpu-bar').style.width = cpu + "%";
-        }
-        setInterval(simulateCycle, 3000);
-        // --- 4. Memory Checkpoint ---
-        function saveMemory() {
-            const btn = event.target;
-            const originalText = btn.innerHTML;
-            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> SAVING...';
-            addLog("System: Initiating manual memory checkpoint...");
             setTimeout(() => {
-                btn.innerHTML = originalText;
-                addLog("System: Vector index saved to disk.");
-                // Flash effect on grid
-                vectorGrid.style.opacity = "1";
-                setTimeout(() => vectorGrid.style.opacity = "0.6", 500);
-            }, 1500);
         }
-        // --- 5. Uptime Counter ---
-        let seconds = 15131; // Fake start time
-        setInterval(() => {
-            seconds++;
-            const h = Math.floor(seconds / 3600).toString().padStart(2, '0');
-            const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
-            const s = (seconds % 60).toString().padStart(2, '0');
-            document.getElementById('uptime').innerText = `${h}:${m}:${s}`;
-        }, 1000);
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FlowEdit | Review, Revise, Update</title>
+    <!-- Importing a nice font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Importing Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        :root {
+            /* Color Palette - Modern & Clean */
+            --primary: #4F46E5;
+            --primary-hover: #4338ca;
+            --secondary: #ec4899;
+            --success: #10b981;
+            --warning: #f59e0b;
+            --danger: #ef4444;
+            --background: #f3f4f6;
+            --surface: #ffffff;
+            --text-main: #1f2937;
+            --text-muted: #6b7280;
+            --border: #e5e7eb;
+            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --radius: 12px;
+            --transition: all 0.3s ease;
+        }
+        /* Dark Mode Variables */
+        [data-theme="dark"] {
+            --background: #111827;
+            --surface: #1f2937;
+            --text-main: #f9fafb;
+            --text-muted: #9ca3af;
+            --border: #374151;
+            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
         body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--background);
+            color: var(--text-main);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            transition: background-color 0.3s ease, color 0.3s ease;
+            overflow: hidden; /* App-like feel */
         }
+        /* --- Header --- */
+        header {
+            background-color: var(--surface);
+            border-bottom: 1px solid var(--border);
+            padding: 0.75rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 10;
+        }
+        .logo {
+            font-weight: 700;
+            font-size: 1.25rem;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .anycoder-link {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        .anycoder-link:hover {
+            color: var(--primary);
+        }
+        .btn-icon {
+            background: none;
+            border: none;
+            color: var(--text-main);
+            font-size: 1.1rem;
+            cursor: pointer;
+            padding: 0.5rem;
+            border-radius: 50%;
+            transition: var(--transition);
+        }
+        .btn-icon:hover {
+            background-color: var(--background);
+            color: var(--primary);
+        }
+        /* --- Main Layout --- */
+        main {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+        }
+        /* --- Sidebar (History) --- */
+        aside {
+            width: 280px;
+            background-color: var(--surface);
+            border-right: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            transition: transform 0.3s ease;
+        }
+        .sidebar-header {
+            padding: 1rem;
+            border-bottom: 1px solid var(--border);
+            font-weight: 600;
+            color: var(--text-muted);
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .history-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0.5rem;
+        }
+        .history-item {
+            padding: 0.75rem;
+            margin-bottom: 0.5rem;
+            background-color: var(--background);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: var(--transition);
+            border: 1px solid transparent;
+        }
+        .history-item:hover, .history-item.active {
+            border-color: var(--primary);
+            background-color: var(--surface);
+            box-shadow: var(--shadow);
+        }
+        .history-item h4 {
+            font-size: 0.9rem;
+            margin-bottom: 0.25rem;
+            color: var(--text-main);
+        }
+        .history-item p {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
+        .status-badge {
+            display: inline-block;
+            font-size: 0.7rem;
+            padding: 2px 6px;
+            border-radius: 4px;
+            margin-top: 4px;
+            font-weight: 500;
+        }
+        .status-draft { background: #e5e7eb; color: #374151; }
+        .status-reviewed { background: #dbeafe; color: #1e40af; }
+        .status-updated { background: #d1fae5; color: #065f46; }
+        /* --- Workspace --- */
+        .workspace {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            padding: 1.5rem;
+            gap: 1.5rem;
+            overflow-y: auto;
+            position: relative;
+        }
+        /* Workflow Steps Indicator */
+        .workflow-steps {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 1rem;
+        }
+        .step {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-muted);
+            font-size: 0.9rem;
             position: relative;
         }
+        .step.active {
+            color: var(--primary);
+            font-weight: 600;
+        }
+        .step::after {
             content: '';
+            display: block;
+            width: 50px;
+            height: 2px;
+            background: var(--border);
+            margin-left: 0.5rem;
+        }
+        .step:last-child::after { display: none; }
+        .step.active::after { background: var(--primary); }
+        /* Editor Grid */
+        .editor-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.5rem;
+            flex: 1;
+            min-height: 0; /* Important for scroll */
+        }
+        .panel {
+            background-color: var(--surface);
+            border-radius: var(--radius);
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .panel-header {
+            padding: 1rem;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(255,255,255,0.02);
+        }
+        .panel-title {
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .panel-tools button {
+            background: none;
+            border: 1px solid var(--border);
+            padding: 4px 8px;
+            border-radius: 6px;
+            cursor: pointer;
+            color: var(--text-muted);
+            font-size: 0.8rem;
+            transition: var(--transition);
+        }
+        .panel-tools button:hover {
+            border-color: var(--primary);
+            color: var(--primary);
+        }
+        .textarea-container {
+            flex: 1;
+            position: relative;
+        }
+        textarea {
+            width: 100%;
+            height: 100%;
+            border: none;
+            resize: none;
+            padding: 1rem;
+            font-family: 'Inter', monospace; /* Monospace for code/precise editing */
+            font-size: 0.95rem;
+            line-height: 1.6;
+            background-color: transparent;
+            color: var(--text-main);
+            outline: none;
+        }
+        /* Stats Bar */
+        .stats-bar {
+            padding: 0.5rem 1rem;
+            background-color: var(--background);
+            border-top: 1px solid var(--border);
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            display: flex;
+            justify-content: space-between;
+        }
+        /* Action Bar */
+        .action-bar {
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+            padding-top: 0.5rem;
+        }
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border-radius: 8px;
+            border: none;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .btn-primary {
+            background-color: var(--primary);
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: var(--primary-hover);
+            transform: translateY(-1px);
+        }
+        .btn-secondary {
+            background-color: var(--surface);
+            border: 1px solid var(--border);
+            color: var(--text-main);
+        }
+        .btn-secondary:hover {
+            background-color: var(--background);
+            border-color: var(--text-muted);
+        }
+        .btn-success {
+            background-color: var(--success);
+            color: white;
+        }
+        .btn-success:hover {
+            background-color: #059669;
+        }
+        /* Loading Overlay */
+        .loading-overlay {
             position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(255,255,255,0.8);
+            backdrop-filter: blur(2px);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 5;
+            opacity: 0;
             pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        [data-theme="dark"] .loading-overlay {
+            background: rgba(31, 41, 55, 0.8);
+        }
+        .loading-overlay.active {
+            opacity: 1;
+            pointer-events: all;
         }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid var(--border);
+            border-top-color: var(--primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
         }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            z-index: 100;
+        }
+        .toast {
+            background-color: var(--surface);
+            color: var(--text-main);
+            padding: 1rem;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            border-left: 4px solid var(--primary);
+            min-width: 300px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            animation: slideIn 0.3s ease forwards;
         }
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
         }
+        /* Responsive Design */
+        @media (max-width: 900px) {
+            .editor-grid {
+                grid-template-columns: 1fr;
+            }
+            aside {
+                display: none; /* Hide sidebar on mobile for simplicity */
+            }
+            .workspace {
+                padding: 1rem;
+            }
         }
     </style>
 </head>
+<body>
     <!-- Header -->
+    <header>
+        <div class="logo">
+            <i class="fa-solid fa-layer-group"></i> FlowEdit
+        </div>
+        <div class="header-actions">
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+                Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em;"></i>
+            </a>
+            <button class="btn-icon" id="themeToggle" title="Toggle Theme">
+                <i class="fa-solid fa-moon"></i>
+            </button>
+            <button class="btn-icon" title="Settings">
+                <i class="fa-solid fa-gear"></i>
+            </button>
         </div>
     </header>
+    <!-- Main Content -->
+    <main>
+        <!-- Sidebar -->
+        <aside>
+            <div class="sidebar-header">
+                <span>History</span>
+                <button class="btn-icon" style="font-size: 0.8rem; padding: 2px;" onclick="clearHistory()">
+                    <i class="fa-solid fa-trash"></i>
+                </button>
+            </div>
+            <div class="history-list" id="historyList">
+                <!-- Items injected by JS -->
+                <div style="padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem;">
+                    No history yet.
+                </div>
+            </div>
+        </aside>
+        <!-- Workspace -->
+        <section class="workspace">
+            <!-- Workflow Indicators -->
+            <div class="workflow-steps">
+                <div class="step active" id="step1">
+                    <i class="fa-solid fa-pen-nib"></i> Input
                 </div>
+                <div class="step" id="step2">
+                    <i class="fa-solid fa-magnifying-glass-chart"></i> Review
+                </div>
+                <div class="step" id="step3">
+                    <i class="fa-solid fa-rotate"></i> Update
                 </div>
             </div>
+            <!-- Editors -->
+            <div class="editor-grid">
+                <!-- Source Panel -->
+                <div class="panel">
+                    <div class="panel-header">
+                        <div class="panel-title">
+                            <i class="fa-regular fa-file-lines"></i> Original Content
                         </div>
+                        <div class="panel-tools">
+                            <button onclick="pasteContent()" title="Paste from Clipboard"><i class="fa-solid fa-paste"></i></button>
+                            <button onclick="clearContent('source')" title="Clear"><i class="fa-solid fa-eraser"></i></button>
                         </div>
                     </div>
+                    <div class="textarea-container">
+                        <textarea id="sourceText" placeholder="Paste your text or code here to begin the review process..."></textarea>
+                    </div>
+                    <div class="stats-bar">
+                        <span id="sourceWords">0 words</span>
+                        <span id="sourceChars">0 chars</span>
+                    </div>
+                </div>
+                <!-- Revised Panel -->
+                <div class="panel">
+                    <div class="panel-header">
+                        <div class="panel-title">
+                            <i class="fa-solid fa-wand-magic-sparkles"></i> Revised Version
                         </div>
+                        <div class="panel-tools">
+                            <button onclick="copySourceToRevised()" title="Copy Source to Revised"><i class="fa-solid fa-arrow-right"></i></button>
+                            <button onclick="clearContent('revised')" title="Clear"><i class="fa-solid fa-eraser"></i></button>
                         </div>
                     </div>
+                    <div class="textarea-container">
+                        <!-- Loading Overlay inside Revised panel -->
+                        <div class="loading-overlay" id="loadingOverlay">
+                            <div class="spinner"></div>
+                            <p style="margin-top: 10px; font-weight: 500;">Analyzing text...</p>
                         </div>
+                        <textarea id="revisedText" placeholder="Review and edit the content here..."></textarea>
+                    </div>
+                    <div class="stats-bar">
+                        <span id="revisedWords">0 words</span>
+                        <span id="revisedChars">0 chars</span>
                     </div>
                 </div>
             </div>
+            <!-- Actions -->
+            <div class="action-bar">
+                <button class="btn btn-secondary" id="analyzeBtn" onclick="analyzeContent()">
+                    <i class="fa-solid fa-magnifying-glass"></i> Analyze & Review
+                </button>
+                <button class="btn btn-primary" id="updateBtn" onclick="saveUpdate()" disabled>
+                    <i class="fa-solid fa-floppy-disk"></i> Save Update
                 </button>
             </div>
         </section>
+    </main>
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+    <script>
+        // --- State Management ---
+        const state = {
+            history: [],
+            currentId: null,
+            status: 'draft' // draft, reviewed, updated
+        };
+        // --- DOM Elements ---
+        const sourceText = document.getElementById('sourceText');
+        const revisedText = document.getElementById('revisedText');
+        const sourceWords = document.getElementById('sourceWords');
+        const sourceChars = document.getElementById('sourceChars');
+        const revisedWords = document.getElementById('revisedWords');
+        const revisedChars = document.getElementById('revisedChars');
+        const historyList = document.getElementById('historyList');
+        const loadingOverlay = document.getElementById('loadingOverlay');
+        const updateBtn = document.getElementById('updateBtn');
+        const analyzeBtn = document.getElementById('analyzeBtn');
+        const themeToggle = document.getElementById('themeToggle');
+        // --- Initialization ---
+        document.addEventListener('DOMContentLoaded', () => {
+            loadHistory();
+            setupEventListeners();
+            checkTheme();
+        });
+        function setupEventListeners() {
+            // Real-time stats update
+            sourceText.addEventListener('input', () => updateStats(sourceText, sourceWords, sourceChars));
+            revisedText.addEventListener('input', () => {
+                updateStats(revisedText, revisedWords, revisedChars);
+                // Enable update button if there is content
+                updateBtn.disabled = revisedText.value.trim().length === 0;
+            });
+            // Theme Toggle
+            themeToggle.addEventListener('click', toggleTheme);
+        }
+        // --- Core Functions ---
+        function updateStats(textarea, wordEl, charEl) {
+            const text = textarea.value;
+            charEl.innerText = `${text.length} chars`;
+            const words = text.trim() === '' ? 0 : text.trim().split(/\s+/).length;
+            wordEl.innerText = `${words} words`;
+        }
+        function copySourceToRevised() {
+            revisedText.value = sourceText.value;
+            updateStats(revisedText, revisedWords, revisedChars);
+            updateBtn.disabled = revisedText.value.trim().length === 0;
+            showToast('Content copied to revision panel', 'info');
+        }
+        function clearContent(type) {
+            if(type === 'source') {
+                sourceText.value = '';
+                updateStats(sourceText, sourceWords, sourceChars);
+            } else {
+                revisedText.value = '';
+                updateStats(revisedText, revisedWords, revisedChars);
+                updateBtn.disabled = true;
+            }
+        }
+        async function pasteContent() {
+            try {
+                const text = await navigator.clipboard.readText();
+                sourceText.value = text;
+                updateStats(sourceText, sourceWords, sourceChars);
+                showToast('Pasted from clipboard', 'success');
+            } catch (err) {
+                showToast('Failed to read clipboard', 'error');
+            }
+        }
+        // --- Workflow: Analyze (Simulated) ---
+        function analyzeContent() {
+            if (!sourceText.value.trim()) {
+                showToast('Please enter content to analyze first.', 'error');
+                return;
+            }
+            // UI Feedback
+            loadingOverlay.classList.add('active');
+            analyzeBtn.disabled = true;
+            // Simulate AI Analysis delay
+            setTimeout(() => {
+                loadingOverlay.classList.remove('active');
+                analyzeBtn.disabled = false;
+                // Move "Reviewed" content to revised area
+                // In a real app, this would be the result of an AI model
+                revisedText.value = sourceText.value;
+                updateStats(revisedText, revisedWords, revisedChars);
+                updateBtn.disabled = false;
+                // Update Workflow Steps UI
+                document.getElementById('step1').classList.remove('active');
+                document.getElementById('step2').classList.add('active');
+                showToast('Analysis complete. Content ready for revision.', 'success');
+                scrollToBottom();
+            }, 1500);
+        }
+        // --- Workflow: Save Update ---
+        function saveUpdate() {
+            if (!revisedText.value.trim()) return;
+            const newEntry = {
+                id: Date.now(),
+                date: new Date().toLocaleString(),
+                original: sourceText.value,
+                revised: revisedText.value,
+                status: 'Updated',
+                preview: revisedText.value.substring(0, 50) + '...'
+            };
+            state.history.unshift(newEntry);
+            localStorage.setItem('flowEditHistory', JSON.stringify(state.history));
+            renderHistory();
+            // Reset Workspace
+            sourceText.value = '';
+            revisedText.value = '';
+            updateStats(sourceText, sourceWords, sourceChars);
+            updateStats(revisedText, revisedWords, revisedChars);
+            updateBtn.disabled = true;
+            // Reset Workflow Steps
+            document.getElementById('step2').classList.remove('active');
+            document.getElementById('step3').classList.add('active');
+            setTimeout(() => {
+                document.getElementById('step3').classList.remove('active');
+                document.getElementById('step1').classList.add('active');
+            }, 2000);
+            showToast('Update saved successfully!', 'success');
+        }
+        // --- History Management ---
+        function loadHistory() {
+            const saved = localStorage.getItem('flowEditHistory');
+            if (saved) {
+                state.history = JSON.parse(saved);
+                renderHistory();
+            }
+        }
+        function renderHistory() {
+            historyList.innerHTML = '';
+            if (state.history.length === 0) {
+                historyList.innerHTML = '<div style="padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem;">No history yet.</div>';
+                return;
+            }
+            state.history.forEach(item => {
+                const div = document.createElement('div');
+                div.className = 'history-item';
+                div.innerHTML = `
+                    <h4>${item.date}</h4>
+                    <p>${item.preview}</p>
+                    <span class="status-badge status-updated">${item.status}</span>
+                `;
+                div.onclick = () => loadHistoryItem(item);
+                historyList.appendChild(div);
+            });
+        }
+        function loadHistoryItem(item) {
+            // Allow users to restore previous items to the editor
+            if(confirm('Load this item back into the editor?')) {
+                sourceText.value = item.original;
+                revisedText.value = item.revised;
+                updateStats(sourceText, sourceWords, sourceChars);
+                updateStats(revisedText, revisedWords, revisedChars);
+                updateBtn.disabled = false;
+                showToast('Item loaded', 'info');
+            }
         }
+        function clearHistory() {
+            if(confirm('Are you sure you want to clear all history?')) {
+                state.history = [];
+                localStorage.removeItem('flowEditHistory');
+                renderHistory();
+                showToast('History cleared', 'info');
+            }
+        }
+        // --- Utilities ---
+        function showToast(message, type = 'info') {
+            const toast = document.createElement('div');
+            toast.className = 'toast';
+            let icon = 'fa-info-circle';
+            let color = 'var(--primary)';
+            if (type === 'success') { icon = 'fa-check-circle'; color = 'var(--success)'; }
+            if (type === 'error') { icon = 'fa-exclamation-circle'; color = 'var(--danger)'; }
+            toast.style.borderLeftColor = color;
+            toast.innerHTML = `
+                <div style="display:flex; align-items:center; gap:10px;">
+                    <i class="fa-solid ${icon}" style="color:${color}"></i>
+                    <span>${message}</span>
+                </div>
+                <i class="fa-solid fa-xmark" style="cursor:pointer; opacity:0.6;" onclick="this.parentElement.remove()"></i>
+            `;
+            document.getElementById('toastContainer').appendChild(toast);
+            // Auto remove
             setTimeout(() => {
+                toast.style.opacity = '0';
+                toast.style.transform = 'translateX(100%)';
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+        function toggleTheme() {
+            const body = document.body;
+            const icon = themeToggle.querySelector('i');
+            if (body.getAttribute('data-theme') === 'dark') {
+                body.removeAttribute('data-theme');
+                icon.className = 'fa-solid fa-moon';
+            } else {
+                body.setAttribute('data-theme', 'dark');
+                icon.className = 'fa-solid fa-sun';
+            }
         }
+        function checkTheme() {
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                toggleTheme();
+            }
+        }
+        function scrollToBottom() {
+            const textarea = document.querySelector('.editor-grid');
+            textarea.scrollIntoView({ behavior: 'smooth' });
+        }
     </script>
 </body>
 </html>