Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Mar 27

Commit

990be86

verified ·

1 Parent(s): a0b3c15

Upload SPOILER_v1.html

Browse files

Files changed (1) hide show

SPOILER_v1.html +777 -0

SPOILER_v1.html ADDED Viewed

	@@ -0,0 +1,777 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Office Procedure Expert System</title>
+    <style>
+        :root {
+            --primary: #1a3a6b;
+            --secondary: #3498db;
+            --accent: #f39c12;
+            --background: #f5f7fa;
+            --text: #2c3e50;
+            --light: #ecf0f1;
+            --success: #2ecc71;
+            --danger: #e74c3c;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: var(--background);
+            color: var(--text);
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        header {
+            background-color: var(--primary);
+            color: white;
+            padding: 1rem;
+            text-align: center;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            margin-bottom: 0.5rem;
+        }
+        main {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            padding: 1rem;
+            max-width: 1200px;
+            margin: 0 auto;
+            width: 100%;
+        }
+        @media (min-width: 768px) {
+            main {
+                flex-direction: row;
+                gap: 1rem;
+            }
+        }
+        .chat-container {
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            margin-bottom: 1rem;
+        }
+        .rules-container {
+            flex: 1;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            padding: 1rem;
+            display: flex;
+            flex-direction: column;
+            max-height: 85vh;
+            overflow: hidden;
+        }
+        .rules-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--light);
+        }
+        .chat-header {
+            background-color: var(--primary);
+            color: white;
+            padding: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .chat-messages {
+            flex: 1;
+            padding: 1rem;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            max-height: 60vh;
+        }
+        .message {
+            max-width: 80%;
+            padding: 0.8rem 1rem;
+            border-radius: 1rem;
+            margin-bottom: 0.5rem;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+            position: relative;
+            word-wrap: break-word;
+        }
+        .user-message {
+            background-color: var(--secondary);
+            color: white;
+            align-self: flex-end;
+            border-bottom-right-radius: 0.2rem;
+        }
+        .bot-message {
+            background-color: var(--light);
+            color: var(--text);
+            align-self: flex-start;
+            border-bottom-left-radius: 0.2rem;
+        }
+        .chat-input {
+            display: flex;
+            padding: 1rem;
+            border-top: 1px solid var(--light);
+            background-color: white;
+        }
+        .chat-input input {
+            flex: 1;
+            padding: 0.8rem 1rem;
+            border: 1px solid var(--light);
+            border-radius: 2rem;
+            margin-right: 0.5rem;
+            outline: none;
+        }
+        .chat-input input:focus {
+            border-color: var(--secondary);
+        }
+        button {
+            padding: 0.5rem 1rem;
+            background-color: var(--secondary);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        button:hover {
+            background-color: var(--primary);
+        }
+        button.danger {
+            background-color: var(--danger);
+        }
+        button.success {
+            background-color: var(--success);
+        }
+        .rule-form {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        .rule-form textarea {
+            padding: 0.5rem;
+            border: 1px solid var(--light);
+            border-radius: 4px;
+            resize: vertical;
+            min-height: 80px;
+            font-size: 0.9rem;
+            margin-bottom: 0.5rem;
+        }
+        .rule-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+        .rules-list {
+            overflow-y: auto;
+            flex: 1;
+        }
+        .rule-item {
+            padding: 0.8rem;
+            border: 1px solid var(--light);
+            border-radius: 4px;
+            margin-bottom: 0.5rem;
+            position: relative;
+        }
+        .rule-item p {
+            margin-bottom: 0.5rem;
+            word-wrap: break-word;
+        }
+        .rule-actions-inline {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.5rem;
+        }
+        .language-selector {
+            padding: 0.5rem;
+            border-radius: 4px;
+            border: 1px solid var(--light);
+            background-color: white;
+            margin-left: 0.5rem;
+        }
+        .system-message {
+            text-align: center;
+            color: var(--text);
+            opacity: 0.7;
+            margin: 0.5rem 0;
+            font-size: 0.8rem;
+        }
+        .loader {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+            margin-right: 0.5rem;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .hidden {
+            display: none;
+        }
+        .settings-btn {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 1.2rem;
+            cursor: pointer;
+        }
+        .settings-panel {
+            position: absolute;
+            top: 60px;
+            right: 20px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
+            padding: 1rem;
+            z-index: 100;
+            width: 300px;
+        }
+        .settings-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--light);
+        }
+        .close-btn {
+            background: none;
+            border: none;
+            font-size: 1.2rem;
+            cursor: pointer;
+            color: var(--text);
+        }
+        .settings-body {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .setting-item {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .setting-item label {
+            font-weight: bold;
+        }
+        .tooltip {
+            position: relative;
+            display: inline-block;
+            margin-left: 0.5rem;
+            cursor: help;
+        }
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 200px;
+            background-color: var(--text);
+            color: white;
+            text-align: center;
+            border-radius: 6px;
+            padding: 0.5rem;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            font-size: 0.8rem;
+        }
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Office Procedure Expert System</h1>
+        <p>General Administration Department</p>
+    </header>
+    <main>
+        <div class="chat-container">
+            <div class="chat-header">
+                <div>
+                    <h2>Office Procedure Assistant</h2>
+                </div>
+                <div class="chat-controls">
+                    <select id="language-selector" class="language-selector">
+                        <option value="en">English</option>
+                        <option value="gu">Gujarati</option>
+                        <option value="hi">Hindi</option>
+                    </select>
+                    <button id="settings-btn" class="settings-btn">⚙️</button>
+                </div>
+            </div>
+            <div class="chat-messages" id="chat-messages">
+                <div class="message bot-message">
+                    Hello! I'm your Office Procedure Assistant. Ask me any questions about office procedures and rules, and I'll help you find the information you need.
+                </div>
+                <div class="system-message">
+                    Add rules in the panel to the right to customize my knowledge base.
+                </div>
+            </div>
+            <div class="chat-input">
+                <input type="text" id="user-input" placeholder="Type your question here...">
+                <button id="send-btn">
+                    <span id="loader" class="loader hidden"></span>
+                    <span id="send-text">Send</span>
+                </button>
+            </div>
+        </div>
+        <div class="rules-container">
+            <div class="rules-header">
+                <h2>Knowledge Base</h2>
+                <button id="export-rules">Export</button>
+            </div>
+            <div class="rule-form">
+                <textarea id="rule-content" placeholder="Enter a rule or procedure here..."></textarea>
+                <div class="rule-actions">
+                    <button id="add-rule" class="success">Add Rule</button>
+                    <button id="clear-form">Clear</button>
+                </div>
+            </div>
+            <div class="rules-list" id="rules-list">
+                <!-- Rules will be added here dynamically -->
+            </div>
+        </div>
+    </main>
+    <div id="settings-panel" class="settings-panel hidden">
+        <div class="settings-header">
+            <h3>Settings</h3>
+            <button id="close-settings" class="close-btn">×</button>
+        </div>
+        <div class="settings-body">
+            <div class="setting-item">
+                <label for="api-endpoint">
+                    API Endpoint
+                    <div class="tooltip">ℹ️
+                        <span class="tooltiptext">The base URL for the AI model API</span>
+                    </div>
+                </label>
+                <input type="text" id="api-endpoint" value="https://parthsadaria-lokiai.hf.space/chat/completions">
+            </div>
+            <div class="setting-item">
+                <label for="api-model">
+                    Model
+                    <div class="tooltip">ℹ️
+                        <span class="tooltiptext">The model to use for generating responses</span>
+                    </div>
+                </label>
+                <input type="text" id="api-model" value="gemini">
+            </div>
+            <div class="setting-item">
+                <label for="api-key">
+                    Authorization Key
+                    <div class="tooltip">ℹ️
+                        <span class="tooltiptext">The authorization key for API access</span>
+                    </div>
+                </label>
+                <input type="password" id="api-key" value="sigma">
+            </div>
+            <button id="save-settings" class="success">Save Settings</button>
+        </div>
+    </div>
+    <script>
+        // Initialize the app when the DOM is fully loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const chatMessages = document.getElementById('chat-messages');
+            const userInput = document.getElementById('user-input');
+            const sendBtn = document.getElementById('send-btn');
+            const loader = document.getElementById('loader');
+            const sendText = document.getElementById('send-text');
+            const ruleContent = document.getElementById('rule-content');
+            const addRuleBtn = document.getElementById('add-rule');
+            const clearFormBtn = document.getElementById('clear-form');
+            const rulesList = document.getElementById('rules-list');
+            const exportRulesBtn = document.getElementById('export-rules');
+            const languageSelector = document.getElementById('language-selector');
+            const settingsBtn = document.getElementById('settings-btn');
+            const settingsPanel = document.getElementById('settings-panel');
+            const closeSettingsBtn = document.getElementById('close-settings');
+            const saveSettingsBtn = document.getElementById('save-settings');
+            const apiEndpointInput = document.getElementById('api-endpoint');
+            const apiModelInput = document.getElementById('api-model');
+            const apiKeyInput = document.getElementById('api-key');
+            // App State
+            let rules = [];
+            let settings = {
+                apiEndpoint: "https://parthsadaria-lokiai.hf.space/chat/completions",
+                model: "gemini",
+                apiKey: "sigma"
+            };
+            // Load rules from localStorage if available
+            function loadRules() {
+                const savedRules = localStorage.getItem('chatbotRules');
+                if (savedRules) {
+                    rules = JSON.parse(savedRules);
+                    renderRules();
+                }
+            }
+            // Load settings from localStorage if available
+            function loadSettings() {
+                const savedSettings = localStorage.getItem('chatbotSettings');
+                if (savedSettings) {
+                    settings = JSON.parse(savedSettings);
+                    apiEndpointInput.value = settings.apiEndpoint;
+                    apiModelInput.value = settings.model;
+                    apiKeyInput.value = settings.apiKey;
+                }
+            }
+            // Save rules to localStorage
+            function saveRules() {
+                localStorage.setItem('chatbotRules', JSON.stringify(rules));
+            }
+            // Save settings to localStorage
+            function saveSettings() {
+                settings = {
+                    apiEndpoint: apiEndpointInput.value,
+                    model: apiModelInput.value,
+                    apiKey: apiKeyInput.value
+                };
+                localStorage.setItem('chatbotSettings', JSON.stringify(settings));
+                settingsPanel.classList.add('hidden');
+            }
+            // Render rules in the list
+            function renderRules() {
+                rulesList.innerHTML = '';
+                if (rules.length === 0) {
+                    rulesList.innerHTML = '<div class="system-message">No rules added yet. Add rules to customize the chatbot.</div>';
+                    return;
+                }
+                rules.forEach((rule, index) => {
+                    const ruleElement = document.createElement('div');
+                    ruleElement.className = 'rule-item';
+                    ruleElement.innerHTML = `
+                        <p>${rule}</p>
+                        <div class="rule-actions-inline">
+                            <button class="edit-rule" data-index="${index}">Edit</button>
+                            <button class="delete-rule danger" data-index="${index}">Delete</button>
+                        </div>
+                    `;
+                    rulesList.appendChild(ruleElement);
+                });
+                // Add event listeners to edit and delete buttons
+                document.querySelectorAll('.edit-rule').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const index = parseInt(this.getAttribute('data-index'));
+                        ruleContent.value = rules[index];
+                        // Store the index to know which rule to update
+                        ruleContent.setAttribute('data-edit-index', index);
+                        addRuleBtn.textContent = 'Update Rule';
+                    });
+                });
+                document.querySelectorAll('.delete-rule').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const index = parseInt(this.getAttribute('data-index'));
+                        if (confirm('Are you sure you want to delete this rule?')) {
+                            rules.splice(index, 1);
+                            saveRules();
+                            renderRules();
+                        }
+                    });
+                });
+            }
+            // Add a new message to the chat
+            function addMessage(message, isUser = false) {
+                const messageElement = document.createElement('div');
+                messageElement.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
+                messageElement.textContent = message;
+                chatMessages.appendChild(messageElement);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+            // Add a system message to the chat
+            function addSystemMessage(message) {
+                const messageElement = document.createElement('div');
+                messageElement.className = 'system-message';
+                messageElement.textContent = message;
+                chatMessages.appendChild(messageElement);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+            // Show loading state
+            function setLoading(isLoading) {
+                if (isLoading) {
+                    loader.classList.remove('hidden');
+                    sendText.textContent = 'Sending...';
+                    sendBtn.disabled = true;
+                    userInput.disabled = true;
+                } else {
+                    loader.classList.add('hidden');
+                    sendText.textContent = 'Send';
+                    sendBtn.disabled = false;
+                    userInput.disabled = false;
+                }
+            }
+            // Send a message to the AI API
+            async function sendToAI(message) {
+                try {
+                    const currentLanguage = languageSelector.value;
+                    // Create a prompt that includes rules and language preferences
+                    let prompt = `You are an AI assistant for the General Administration Department, specializing in office procedures and rules.
+                        The user is asking in ${currentLanguage === 'en' ? 'English' : currentLanguage === 'gu' ? 'Gujarati' : 'Hindi'}.
+                        Please respond in ${currentLanguage === 'en' ? 'English' : currentLanguage === 'gu' ? 'Gujarati' : 'Hindi'}.
+                        Here are the specific rules and procedures you should know about:\n\n`;
+                    // Add each rule to the prompt
+                    rules.forEach((rule, index) => {
+                        prompt += `Rule ${index + 1}: ${rule}\n\n`;
+                    });
+                    // Add the user's message
+                    prompt += `\nUser query: ${message}\n\nProvide a helpful, accurate response based on the rules above. If the query is not covered by these rules, politely state that you don't have that specific information.`;
+                    // Create the API request payload
+                    const payload = {
+                        model: settings.model,
+                        messages: [
+                            {
+                                role: "system",
+                                content: prompt
+                            },
+                            {
+                                role: "user",
+                                content: message
+                            }
+                        ],
+                        temperature: 0.5,
+                        max_tokens: 500
+                    };
+                    // Make the API request
+                    const response = await fetch(settings.apiEndpoint, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Authorization': `Bearer ${settings.apiKey}`
+                        },
+                        body: JSON.stringify(payload)
+                    });
+                    if (!response.ok) {
+                        throw new Error(`API request failed with status ${response.status}`);
+                    }
+                    const data = await response.json();
+                    return data.choices[0].message.content;
+                } catch (error) {
+                    console.error('Error sending message to AI:', error);
+                    return "I'm sorry, I encountered an error while processing your request. Please try again later.";
+                }
+            }
+            // Handle user sending a message
+            async function handleSendMessage() {
+                const message = userInput.value.trim();
+                if (!message) return;
+                // Add user message to chat
+                addMessage(message, true);
+                userInput.value = '';
+                // If no rules are added, show a message
+                if (rules.length === 0) {
+                    addSystemMessage("No rules have been added yet. The assistant may not provide accurate information.");
+                }
+                // Show loading indicator
+                setLoading(true);
+                // Get AI response
+                const response = await sendToAI(message);
+                // Hide loading indicator
+                setLoading(false);
+                // Add AI response to chat
+                addMessage(response);
+            }
+            // Handle adding or updating a rule
+            function handleAddRule() {
+                const content = ruleContent.value.trim();
+                if (!content) return;
+                const editIndex = ruleContent.getAttribute('data-edit-index');
+                if (editIndex !== null) {
+                    // Update existing rule
+                    rules[editIndex] = content;
+                    ruleContent.removeAttribute('data-edit-index');
+                    addRuleBtn.textContent = 'Add Rule';
+                } else {
+                    // Add new rule
+                    rules.push(content);
+                }
+                saveRules();
+                renderRules();
+                ruleContent.value = '';
+            }
+            // Export rules to a JSON file
+            function exportRules() {
+                const dataStr = JSON.stringify(rules, null, 2);
+                const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+                const exportFileDefaultName = 'chatbot-rules.json';
+                const linkElement = document.createElement('a');
+                linkElement.setAttribute('href', dataUri);
+                linkElement.setAttribute('download', exportFileDefaultName);
+                linkElement.click();
+            }
+            // Event Listeners
+            sendBtn.addEventListener('click', handleSendMessage);
+            userInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    handleSendMessage();
+                }
+            });
+            addRuleBtn.addEventListener('click', handleAddRule);
+            clearFormBtn.addEventListener('click', function() {
+                ruleContent.value = '';
+                ruleContent.removeAttribute('data-edit-index');
+                addRuleBtn.textContent = 'Add Rule';
+            });
+            exportRulesBtn.addEventListener('click', exportRules);
+            settingsBtn.addEventListener('click', function() {
+                settingsPanel.classList.toggle('hidden');
+            });
+            closeSettingsBtn.addEventListener('click', function() {
+                settingsPanel.classList.add('hidden');
+            });
+            saveSettingsBtn.addEventListener('click', saveSettings);
+            // Import rules functionality
+            document.addEventListener('dragover', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            });
+            document.addEventListener('drop', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                const file = e.dataTransfer.files[0];
+                if (file && file.type === 'application/json') {
+                    const reader = new FileReader();
+                    reader.onload = function(event) {
+                        try {
+                            const importedRules = JSON.parse(event.target.result);
+                            if (Array.isArray(importedRules)) {
+                                if (confirm(`Import ${importedRules.length} rules? This will replace existing rules.`)) {
+                                    rules = importedRules;
+                                    saveRules();
+                                    renderRules();
+                                    addSystemMessage(`Successfully imported ${importedRules.length} rules.`);
+                                }
+                            }
+                        } catch (error) {
+                            console.error('Error parsing JSON file:', error);
+                            addSystemMessage('Error importing rules. Make sure the file is a valid JSON array.');
+                        }
+                    };
+                    reader.readAsText(file);
+                } else {
+                    addSystemMessage('Please drop a valid JSON file.');
+                }
+            });
+            // Initialize the app
+            loadSettings();
+            loadRules();
+        });
+    </script>
+</body>
+</html>