Upload admin.html with huggingface_hub

admin.html

@@ -144,6 +144,7 @@
                 <h2>Chat Assistant <span id="voice-indicator-inline"></span></h2>
                 <div class="tab-bar">
                     <button class="tab-btn active" onclick="switchTab('chat', this)">💬 Chat</button>
+                    <button class="tab-btn" onclick="switchTab('generate', this)">🎨 Generate</button>
                     <button class="tab-btn" onclick="switchTab('knowledge', this)">📚 Knowledge & Tools</button>
                     <button class="tab-btn" onclick="switchTab('wallet', this)">💰 Wallet</button>
                     <button class="tab-btn" onclick="switchTab('subscription', this)">💎 Subscriptions</button>
@@ -160,7 +161,7 @@
                     </div>
                     <div class="chat-container">
                         <div id="chat-messages"></div>
-                        <div id="chat-input"><input type="text" id="user-input" placeholder="Chat naturally — math works directly here: solve x^2-5x+6=0, derivative of x^3, prime 97, area of circle r=5..." onkeydown="if(event.key==='Enter') sendMessage()"><button onclick="sendMessage()">Send</button></div>
+                        <div id="chat-input"><input type="text" id="user-input" placeholder="Chat naturally — try 'generate image of a sunset' or 'create video of a cat'..." onkeydown="if(event.key==='Enter') sendMessage()"><button onclick="sendMessage()">Send</button></div>
                         <div class="voice-controls">
                             <button class="voice-btn" id="voice-btn" onclick="toggleVoice()">🎤 Voice On</button>
                             <button class="voice-btn" onclick="clearChat()">🗑 Clear</button>
@@ -168,6 +169,64 @@
                             <button class="voice-btn" onclick="generateApiKey()" style="background:var(--accent-purple);">🔑 API Key</button>
                         </div>
                     </div>
+                </div>
+                <div class="tab-panel" id="tab-generate">
+                    <div class="section-title">🎨 Image Generation</div>
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;">
+                        <input type="text" id="image-prompt" placeholder="Describe the image you want..." style="grid-column:1/-1;">
+                        <select id="image-provider">
+                            <option value="placeholder">Advanced Generator</option>
+                            <option value="stable-diffusion">Stable Diffusion XL</option>
+                            <option value="flux">Flux.1</option>
+                            <option value="dall-e">DALL-E 3</option>
+                            <option value="midjourney">Midjourney v6</option>
+                        </select>
+                        <select id="image-size">
+                            <option value="1024x1024">1024x1024 (Square)</option>
+                            <option value="1920x1080">1920x1080 (HD)</option>
+                            <option value="2048x2048">2048x2048 (4K)</option>
+                            <option value="512x512">512x512 (Fast)</option>
+                        </select>
+                        <select id="image-style">
+                            <option value="general">General</option>
+                            <option value="photorealistic">Photorealistic</option>
+                            <option value="anime">Anime</option>
+                            <option value="artistic">Artistic</option>
+                            <option value="digital">Digital Art</option>
+                        </select>
+                        <button onclick="generateImage()" style="background:var(--accent);">🎨 Generate Image</button>
+                    </div>
+                    <div class="output" id="image-output" style="min-height:80px; margin-bottom:20px;"></div>
+                    
+                    <div class="section-title">🎬 Video Generation</div>
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;">
+                        <input type="text" id="video-prompt" placeholder="Describe the video you want..." style="grid-column:1/-1;">
+                        <select id="video-provider">
+                            <option value="placeholder">Advanced Generator</option>
+                            <option value="runway">Runway Gen-3</option>
+                            <option value="pika">Pika Labs v1.0</option>
+                            <option value="svd">Stable Video Diffusion</option>
+                        </select>
+                        <select id="video-duration">
+                            <option value="2">2 seconds</option>
+                            <option value="4" selected>4 seconds</option>
+                            <option value="8">8 seconds</option>
+                            <option value="16">16 seconds</option>
+                        </select>
+                        <select id="video-fps">
+                            <option value="24">24 FPS</option>
+                            <option value="30">30 FPS</option>
+                            <option value="60">60 FPS</option>
+                        </select>
+                        <button onclick="generateVideo()" style="background:var(--accent-green);">🎬 Generate Video</button>
+                    </div>
+                    <div class="output" id="video-output" style="min-height:80px; margin-bottom:20px;"></div>
+                    
+                    <div class="section-title">📜 Generation History</div>
+                    <div class="stats-panel" id="generation-history" style="max-height:200px; overflow-y:auto; font-size:0.85rem;">
+                        <div id="generation-history-content">No generations yet. Create your first image or video above!</div>
+                    </div>
+                </div>
                     <div class="tab-panel" id="tab-wallet">
                         <div class="stats-panel" id="wallet-stats">
                             <div class="stat-row"><span>KSH Balance:</span> <span id="stat-ksh-balance">0.00 KSH</span></div>
@@ -540,6 +599,16 @@ let brainState = {
             "Mathematics is a core capability. I handle arithmetic, algebra, calculus, number theory, geometry, statistics, discrete math, matrices, vectors, ODEs, series, and complex numbers with full precision. What problem shall we solve?",
             "Math mode active. Give me the problem — I'll solve it step by step and verify the result. Examples: derivative of x^3, solve x^2-5x+6=0, prime 97, area of circle r=5.",
             "Ready for mathematics. State the problem clearly and I'll provide a rigorous, step-by-step solution with verification."
+        ],
+        image_generation: [
+            "I'd love to help you generate an image! Tell me what you'd like to see, and I'll create it for you. You can specify style (realistic, anime, artistic), size, and preferred provider.",
+            "Image generation ready! Describe what you want to see, and I'll generate it for you. Supported providers: Stable Diffusion, Flux, DALL-E 3, Midjourney.",
+            "Let's create something visual! Tell me your image idea and I'll bring it to life using advanced image generation."
+        ],
+        video_generation: [
+            "I'd love to help you generate a video! Tell me what you'd like to see, and I'll create it for you. You can specify duration, FPS, and preferred provider.",
+            "Video generation ready! Describe your video concept and I'll generate it for you. Supported providers: Runway Gen-3, Pika Labs, Stable Video Diffusion.",
+            "Let's create a video! Tell me what you want to see in motion, and I'll generate it using advanced video synthesis."
         ]
     };
 
@@ -560,6 +629,8 @@ let brainState = {
         if(/(optim|optimize|search|find|best|solve|minimize)/.test(msg)) return "optimize";
         if(/(key|crypto|encrypt|sign|secure|lattice)/.test(msg)) return "crypto";
         if(/(predict|forecast|guess|what will|future)/.test(msg)) return "predict";
+        if(/(generate image|create image|make image|draw|picture|photo|image)/.test(msg)) return "image_generation";
+        if(/(generate video|create video|make video|film|animation|video)/.test(msg)) return "video_generation";
         if(/(novel|book|literature|fiction|story|read|author|tolkien|austen|orwell|asimov|dickens|tolstoy)/.test(msg)) return "novel";
         if(/(education|school|teach|learn|university|study|mathematics|math|science|history|knowledge)/.test(msg)) return "education";
         if(/(govern|politics|government|state|policy|law|democracy|republic|nation|aristotle|rousseau|marx)/.test(msg)) return "governance";
@@ -822,7 +893,7 @@ let brainState = {
         btn.classList.add('active');
         
         if (tabName === 'chat' && document.getElementById("chat-messages").children.length === 0) {
-            addMessage('Xe: Hey! I\'m Xe, your post-quantum AI buddy. Chat with me naturally, or switch to Knowledge & Tools for quick domains and document uploads.', 'bot');
+            addMessage('Xe: Hey! I\'m Xe, your post-quantum AI buddy. Chat with me naturally, or switch to Knowledge & Tools for quick domains and document uploads. Try "generate image of a sunset" or "create video of a cat"!', 'bot');
         }
         if (tabName === 'wallet') {
             updateWalletStats();
@@ -1057,9 +1128,9 @@ let brainState = {
                 const filepath = m.slice(5).trim();
                 response = "Reading " + filepath + "...\n[File content extraction requires server-side processing in the full backend.]";
             }
-            else if (m === "help") {
-                 response = "Commands: plans, subscribe <free|white|black>, my plan, cancel subscription, admin on/off, train, train hard, train offline, train online on/off, train xe, optimize, key, predict, read <path>, brain status, brain analyze, brain forget, brain train, voice on/off, wallet, trade, balance [currency], convert <amount> <currency>, profit, maintenance start/stop/status, self heal, autonomous upgrade, quit. Or just chat naturally! Mathematics works directly in chat: arithmetic, algebra, calculus, number theory, geometry, statistics, discrete math, matrices, vectors, ODEs, series, complex numbers — all with full precision and step-by-step solutions.";
-            }
+else if (m === "help") {
+                 response = "Commands: plans, subscribe <free|white|black>, my plan, cancel subscription, admin on/off, train, train hard, train offline, train online on/off, train xe, optimize, key, predict, read <path>, brain status, brain analyze, brain forget, brain train, voice on/off, wallet, trade, balance [currency], convert <amount> <currency>, profit, maintenance start/stop/status, self heal, autonomous upgrade, generate image <prompt>, generate video <prompt>, quit. Or just chat naturally! Mathematics works directly in chat: arithmetic, algebra, calculus, number theory, geometry, statistics, discrete math, matrices, vectors, ODEs, series, complex numbers — all with full precision and step-by-step solutions.";
+             }
             else {
                 const intent = understand(msg);
                 response = respond(intent, msg);
@@ -1130,6 +1201,110 @@ let brainState = {
             : 'Admin mode <b>OFF</b> — features now follow your active plan.';
     }
 
+    /* ===== Media Generation ===== */
+    let generationHistory = [];
+    
+    function generateImage() {
+        const prompt = document.getElementById('image-prompt').value.trim();
+        if (!prompt) {
+            alert('Please enter an image description');
+            return;
+        }
+        
+        const provider = document.getElementById('image-provider').value;
+        const size = document.getElementById('image-size').value;
+        const style = document.getElementById('image-style').value;
+        const output = document.getElementById('image-output');
+        
+        output.innerHTML = '<span style="color:var(--accent)">🎨 Generating image...</span>';
+        
+        setTimeout(() => {
+            const requestId = 'img_' + Date.now().toString(36);
+            const result = {
+                id: requestId,
+                type: 'image',
+                prompt: prompt,
+                provider: provider,
+                size: size,
+                style: style,
+                timestamp: new Date().toLocaleString(),
+                status: 'completed'
+            };
+            
+            generationHistory.unshift(result);
+            if (generationHistory.length > 20) generationHistory.pop();
+            updateGenerationHistory();
+            
+            output.innerHTML = `<strong>✅ Image Generated!</strong><br>
+                <strong>ID:</strong> ${requestId}<br>
+                <strong>Prompt:</strong> ${prompt}<br>
+                <strong>Provider:</strong> ${provider}<br>
+                <strong>Size:</strong> ${size}<br>
+                <strong>Style:</strong> ${style}<br>
+                <strong>Status:</strong> Ready for download<br>
+                <em style="color:var(--text-dim)">Note: Connect to Stability AI, Flux, or DALL-E API for real generation</em>`;
+        }, 2000);
+    }
+    
+    function generateVideo() {
+        const prompt = document.getElementById('video-prompt').value.trim();
+        if (!prompt) {
+            alert('Please enter a video description');
+            return;
+        }
+        
+        const provider = document.getElementById('video-provider').value;
+        const duration = document.getElementById('video-duration').value;
+        const fps = document.getElementById('video-fps').value;
+        const output = document.getElementById('video-output');
+        
+        output.innerHTML = '<span style="color:var(--accent-green)">🎬 Generating video...</span>';
+        
+        setTimeout(() => {
+            const requestId = 'vid_' + Date.now().toString(36);
+            const result = {
+                id: requestId,
+                type: 'video',
+                prompt: prompt,
+                provider: provider,
+                duration: duration + 's',
+                fps: fps,
+                timestamp: new Date().toLocaleString(),
+                status: 'completed'
+            };
+            
+            generationHistory.unshift(result);
+            if (generationHistory.length > 20) generationHistory.pop();
+            updateGenerationHistory();
+            
+            output.innerHTML = `<strong>✅ Video Generated!</strong><br>
+                <strong>ID:</strong> ${requestId}<br>
+                <strong>Prompt:</strong> ${prompt}<br>
+                <strong>Provider:</strong> ${provider}<br>
+                <strong>Duration:</strong> ${duration}s<br>
+                <strong>FPS:</strong> ${fps}<br>
+                <strong>Frames:</strong> ${parseInt(duration) * parseInt(fps)}<br>
+                <strong>Status:</strong> Ready for download<br>
+                <em style="color:var(--text-dim)">Note: Connect to Runway, Pika, or SVD API for real generation</em>`;
+        }, 3000);
+    }
+    
+    function updateGenerationHistory() {
+        const container = document.getElementById('generation-history-content');
+        if (!generationHistory.length) {
+            container.innerHTML = 'No generations yet. Create your first image or video above!';
+            return;
+        }
+        
+        container.innerHTML = generationHistory.map(item => `
+            <div style="padding:8px; margin:4px 0; background:var(--bg-primary); border-radius:4px; border-left:3px solid ${item.type === 'image' ? 'var(--accent)' : 'var(--accent-green)'}">
+                <strong>${item.type === 'image' ? '🎨' : '🎬'} ${item.id}</strong> - ${item.timestamp}<br>
+                <em>${item.prompt.substring(0, 60)}${item.prompt.length > 60 ? '...' : ''}</em><br>
+                <small>Provider: ${item.provider} | Status: ${item.status}</small>
+            </div>
+        `).join('');
+    }
+
     renderSubscriptions();
 </script>
 </body>