Spaces:

5dimension
/

terminal

Running

App Files Files Community

5dimension commited on Jun 18

Commit

679a89e

verified ·

1 Parent(s): 85de14a

improve to production rdy app - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +229 -13

index.html CHANGED Viewed

@@ -61,6 +61,33 @@
                 }
             }
         }
     </script>
 </head>
 <body class="bg-gray-900 overflow-hidden font-terminal min-h-screen">
@@ -181,33 +208,222 @@
             <div class="flex items-center">
                 <div class="text-green-500 mr-3 font-bold">user@terminal:~$</div>
                 <div class="flex-grow flex items-center border border-green-700 bg-black/30">
-                    <div class="h-full bg-green-500/30 w-40 pl-3 font-mono pr-1 py-1 relative">
-                        <div class="inline-block w-4 h-6 bg-green-400 prompt ml-1"></div>
                     </div>
-                    <input type="text" class="flex-grow bg-transparent outline-none px-2 py-1 text-green-300" placeholder="Enter cognitive query...">
                 </div>
-                <button class="ml-3 px-4 py-1 bg-green-700 hover:bg-green-600 text-cyan-100 font-bold rounded-sm">Execute</button>
             </div>
             <div class="mt-3 flex justify-between text-xs text-cyan-400">
-                <div>
                     <i class="fas fa-brain mr-1"></i>
-                    Neural Processing Units: 86%
                 </div>
-                <div>
                     <i class="fas fa-bolt mr-1"></i>
-                    Quantum Entanglement Stability: 92%
                 </div>
-                <div>
                     <i class="fas fa-database mr-1"></i>
-                    Knowledge Integrity: 99.8%
                 </div>
-                <div class="text-yellow-400 font-bold">
-                    <i class="fas fa-star"></i>
-                    AI_SCORE: +30
                 </div>
             </div>
         </div>
     </div>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=5dimension/terminal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

                 }
             }
         }
+        // Configuration
+        const CONFIG = {
+            HF_API_URL: "https://api-inference.huggingface.co/models/",
+            DEFAULT_MODEL: "mistralai/Mixtral-8x7B-Instruct-v0.1",
+            MAX_TOKENS: 4096,
+            RATE_LIMIT: 3000, // ms between requests
+            HISTORY_SIZE: 20
+        };
+        const PROMPT_TEMPLATES = {
+            "standard": `[INST] You are NeuroCognitive Terminal v9.24.6. Provide detailed technical analysis with references.
+Break response into clear sections with markdown formatting. Current date: ${new Date().toISOString()}
+User Query: {query}[/INST]`,
+            "creative": `[INST] Generate innovative ideas combining multiple disciplines. Use lateral thinking and unconventional approaches.
+Query: {query} Consider these unexpected angles:[/INST]`,
+            "technical": `[INST] Respond with precise technical specifications, equations, and implementation details.
+Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sample code[/INST]`
+        };
+        // State management
+        const AppState = {
+            history: JSON.parse(localStorage.getItem('terminalHistory')) || [],
+            lastRequestTime: 0,
+            currentModel: CONFIG.DEFAULT_MODEL,
+            apiKey: localStorage.getItem('hfApiKey') || ''
+        };
     </script>
 </head>
 <body class="bg-gray-900 overflow-hidden font-terminal min-h-screen">
             <div class="flex items-center">
                 <div class="text-green-500 mr-3 font-bold">user@terminal:~$</div>
                 <div class="flex-grow flex items-center border border-green-700 bg-black/30">
+                    <select class="bg-black text-green-400 px-2 h-full border-r border-green-800">
+                        <option value="standard">Standard</option>
+                        <option value="creative">Creative</option>
+                        <option value="technical">Technical</option>
+                    </select>
+                    <input id="promptInput" type="text" class="flex-grow bg-transparent outline-none px-2 py-1 text-green-300" placeholder="Enter cognitive query...">
+                    <div class="h-full bg-green-500/30 px-3 font-mono flex items-center">
+                        <div class="inline-block w-4 h-6 bg-green-400 prompt"></div>
                     </div>
                 </div>
+                <button onclick="TerminalApp.executePrompt()" class="ml-3 px-4 py-1 bg-green-700 hover:bg-green-600 text-cyan-100 font-bold rounded-sm">Execute</button>
             </div>
             <div class="mt-3 flex justify-between text-xs text-cyan-400">
+                <div class="flex items-center">
                     <i class="fas fa-brain mr-1"></i>
+                    <span>LLM: <span id="llmStatus" class="text-green-400">${CONFIG.DEFAULT_MODEL.split('/').pop()}</span></span>
                 </div>
+                <div class="flex items-center">
                     <i class="fas fa-bolt mr-1"></i>
+                    <span>Tokens: <span id="tokenCounter">0</span>/2048</span>
                 </div>
+                <div class="flex items-center">
                     <i class="fas fa-database mr-1"></i>
+                    <span>Context: <span id="contextStatus">Ready</span></span>
                 </div>
+                <div class="text-yellow-400 font-bold flex items-center">
+                    <i class="fas fa-star mr-1"></i>
+                    <span>Score: <span id="aiScore">+30</span></span>
                 </div>
             </div>
         </div>
     </div>
+    <script>
+        // API Client
+        class HuggingFaceClient {
+            static async query(payload, model = CONFIG.DEFAULT_MODEL) {
+                const now = Date.now();
+                if (now - AppState.lastRequestTime < CONFIG.RATE_LIMIT) {
+                    throw new Error(`Rate limited. Please wait ${Math.ceil((CONFIG.RATE_LIMIT - (now - AppState.lastRequestTime))/1000)}s`);
+                }
+                if (!AppState.apiKey) {
+                    throw new Error('API key not configured. Set your HuggingFace token in settings.');
+                }
+                AppState.lastRequestTime = now;
+                const response = await fetch(`${CONFIG.HF_API_URL}${model}`, {
+                    headers: {
+                        "Authorization": `Bearer ${AppState.apiKey}`,
+                        "Content-Type": "application/json"
+                    },
+                    method: "POST",
+                    body: JSON.stringify(payload),
+                });
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.error || 'API request failed');
+                }
+                return response.json();
+            }
+        }
+        // UI Components
+        class TerminalUI {
+            static addHistoryEntry(prompt, response) {
+                const entry = {
+                    timestamp: new Date().toISOString(),
+                    prompt,
+                    response,
+                    model: AppState.currentModel
+                };
+                AppState.history.unshift(entry);
+                if (AppState.history.length > CONFIG.HISTORY_SIZE) {
+                    AppState.history.pop();
+                }
+                localStorage.setItem('terminalHistory', JSON.stringify(AppState.history));
+            }
+            static async streamResponse(responseText, prompt) {
+                const terminalOutput = document.querySelector('.terminal-scrollbar');
+                const responseDiv = document.createElement('div');
+                responseDiv.className = 'mb-4';
+                terminalOutput.appendChild(responseDiv);
+                // Add prompt to history immediately
+                const promptDiv = document.createElement('div');
+                promptDiv.className = 'mb-2';
+                promptDiv.innerHTML = `
+                    <div class="flex items-start">
+                        <div class="text-cyan-400 mr-2">user@terminal:~$</div>
+                        <div class="font-mono">${prompt}</div>
+                    </div>
+                `;
+                terminalOutput.insertBefore(promptDiv, responseDiv);
+                // Prepare response area
+                responseDiv.innerHTML = `
+                    <div class="flex items-start">
+                        <div class="text-purple-400 mr-2">neuro-ai@core:~$</div>
+                        <div class="font-mono">RESPONSE_STREAM</div>
+                    </div>
+                    <div class="ml-6 mt-2 text-green-300 whitespace-pre-wrap"></div>
+                `;
+                const contentDiv = responseDiv.querySelector('.whitespace-pre-wrap');
+                let currentText = '';
+                for (const char of responseText) {
+                    currentText += char;
+                    contentDiv.textContent = currentText;
+                    terminalOutput.scrollTop = terminalOutput.scrollHeight;
+                    await new Promise(r => setTimeout(r, 5));
+                }
+                this.addHistoryEntry(prompt, responseText);
+                return currentText;
+            }
+            static showError(message) {
+                const terminalOutput = document.querySelector('.terminal-scrollbar');
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'mb-4 text-red-400';
+                errorDiv.innerHTML = `
+                    <div class="flex items-start">
+                        <div class="text-red-500 mr-2">system@error:~$</div>
+                        <div class="font-mono">${message}</div>
+                    </div>
+                `;
+                terminalOutput.appendChild(errorDiv);
+                terminalOutput.scrollTop = terminalOutput.scrollHeight;
+            }
+            static toggleLoading(state) {
+                const statusEl = document.getElementById('contextStatus');
+                const llmStatus = document.getElementById('llmStatus');
+                if (state) {
+                    statusEl.textContent = 'Processing';
+                    statusEl.classList.add('text-yellow-400');
+                    llmStatus.classList.add('animate-pulse');
+                } else {
+                    statusEl.textContent = 'Ready';
+                    statusEl.classList.remove('text-yellow-400');
+                    llmStatus.classList.remove('animate-pulse');
+                }
+            }
+        }
+        // Main Application
+        class TerminalApp {
+            static async executePrompt() {
+                const input = document.getElementById('promptInput');
+                const prompt = input.value.trim();
+                if (!prompt) return;
+                const mode = document.querySelector('select').value;
+                const fullPrompt = PROMPT_TEMPLATES[mode].replace('{query}', prompt);
+                TerminalUI.toggleLoading(true);
+                try {
+                    const response = await HuggingFaceClient.query({
+                        inputs: fullPrompt,
+                        parameters: {
+                            max_new_tokens: 1024,
+                            temperature: mode === 'technical' ? 0.3 : 0.7,
+                            return_full_text: false
+                        }
+                    });
+                    const result = Array.isArray(response) ? response[0].generated_text : response.generated_text;
+                    const processedText = await TerminalUI.streamResponse(result, prompt);
+                    document.getElementById('tokenCounter').textContent = processedText.length;
+                    input.value = '';
+                } catch (error) {
+                    TerminalUI.showError(error.message);
+                    console.error('API Error:', error);
+                } finally {
+                    TerminalUI.toggleLoading(false);
+                }
+            }
+            static init() {
+                // Load settings
+                const settingsButton = document.createElement('div');
+                settingsButton.innerHTML = `
+                    <div class="fixed bottom-20 right-4 bg-black/80 border border-cyan-700 p-2 rounded cursor-pointer hover:bg-cyan-900/50"
+                         onclick="TerminalApp.showSettings()">
+                        <i class="fas fa-cog"></i>
+                    </div>
+                `;
+                document.body.appendChild(settingsButton);
+                // Display initial history if any
+                if (AppState.history.length > 0) {
+                    const lastEntry = AppState.history[0];
+                    TerminalUI.streamResponse(lastEntry.response, lastEntry.prompt);
+                }
+            }
+            static showSettings() {
+                // Implementation for settings modal
+                alert('Settings modal would appear here to configure API key and model');
+            }
+        }
+        // Initialize app
+        document.addEventListener('DOMContentLoaded', () => {
+            TerminalApp.init();
+        });
+    </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=5dimension/terminal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>