Update index.html

Updated

Author: aimtyaem

index.html

@@ -5,223 +5,234 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AGO Chatbot</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <style>
         :root {
             --primary-color: #2E7D32;
             --secondary-color: #81C784;
-            --background: #F1F8E9;
+            --background: #F5F5F5;
         }
 
         body {
             font-family: 'Segoe UI', sans-serif;
             margin: 0;
             padding: 20px;
-            background-color: var(--background);
+            background: var(--background);
         }
 
-        .chat-container {
-            max-width: 800px;
+        .container {
+            max-width: 1200px;
             margin: 0 auto;
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            gap: 20px;
+        }
+
+        .chat-container {
             background: white;
             border-radius: 10px;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-
-        .chat-header {
-            background: var(--primary-color);
-            color: white;
             padding: 20px;
-            border-radius: 10px 10px 0 0;
+            height: 80vh;
+            display: flex;
+            flex-direction: column;
         }
 
         .chat-messages {
-            height: 500px;
+            flex: 1;
             overflow-y: auto;
-            padding: 20px;
+            padding: 10px;
+            border-bottom: 1px solid #eee;
         }
 
         .message {
             margin: 10px 0;
-            padding: 15px;
-            border-radius: 8px;
-            max-width: 70%;
+            padding: 12px;
+            border-radius: 15px;
+            max-width: 80%;
         }
 
         .user-message {
             background: var(--secondary-color);
             margin-left: auto;
         }
 
-        .system-message {
-            background: #E8F5E9;
-            margin-right: auto;
-        }
-
-        .file-input-container {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            padding: 20px;
-            border-top: 1px solid #ddd;
+        .bot-message {
+            background: var(--primary-color);
+            color: white;
         }
 
-        .input-container {
+        .input-section {
             padding: 20px;
-            border-top: 1px solid #ddd;
             display: flex;
             gap: 10px;
         }
 
-        .chat-input {
-            flex: 1;
-            padding: 12px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            font-size: 16px;
-        }
-
-        .send-button {
-            padding: 12px 24px;
+        button {
             background: var(--primary-color);
             color: white;
             border: none;
+            padding: 10px 20px;
             border-radius: 5px;
             cursor: pointer;
-            transition: background 0.3s;
         }
 
-        .send-button:hover {
-            background: #1B5E20;
+        .visualization {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
 
-        .thinking-indicator {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: #666;
-            font-style: italic;
+        .menu {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
 
-        .dot-flashing {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background-color: #2E7D32;
-            animation: dotFlashing 1s infinite linear;
+        .menu-item {
+            padding: 15px;
+            margin: 10px 0;
+            background: var(--background);
+            border-radius: 5px;
+            cursor: pointer;
         }
 
-        @keyframes dotFlashing {
-            0% { opacity: 0.2; }
-            50% { opacity: 1; }
-            100% { opacity: 0.2; }
+        .file-input {
+            margin: 10px 0;
         }
     </style>
 </head>
 <body>
-    <div class="chat-container">
-        <div class="chat-header">
-            <h2>AGO chatbot</h2>
-            <p>Ask questions about energy efficiency and carbon footprint analysis</p>
+    <div class="container">
+        <div class="menu">
+            <div class="menu-item" onclick="showSection('goal')">🏁 Set Sustainability Goal</div>
+            <div class="menu-item" onclick="showSection('bill')">📊 Process Energy Bill</div>
+            <div class="menu-item" onclick="showSection('recommendations')">💡 View Recommendations</div>
+            <input type="file" id="fileInput" class="file-input" hidden>
         </div>
-        
-        <div class="chat-messages" id="chatMessages"></div>
-        
-        <div class="input-container">
-            <input type="text" 
-                   class="chat-input" 
-                   id="userInput" 
-                   placeholder="Type your sustainability question...">
-            <button class="send-button" onclick="handleUserInput()">Send</button>
-        </div>
-    </div>
-
-    <script type="module">
-        import { AzureOpenAI } from "openai";
-        import dotenv from "dotenv";
 
-        dotenv.config();
-
-        // Azure OpenAI Configuration
-        const endpoint = process.env["https://ago.openai.azure.com/"] || "https://ago.openai.azure.com/";
-        const apiKey = process.env["895wldthT3YtWIfqrJVloEuSW5C3mA7Q14qq00iEpNvJYDfsfTeTJQQJ99BDACHYHv6XJ3w3AAABACOGT1IT"] || "<REPLACE_YOUR_API_KEY>";
-        const apiVersion = "2024-05-01-preview";
-        const deployment = "gpt-4o";
-
-        const client = new AzureOpenAI({ endpoint, apiKey, apiVersion, deployment });
+        <div class="chat-container">
+            <div class="chat-messages" id="chatMessages"></div>
+            <div class="input-section">
+                <input type="text" id="userInput" placeholder="Type your question...">
+                <button onclick="sendMessage()">Send</button>
+            </div>
+        </div>
 
-        // Function to handle user input
-        async function handleUserInput() {
-            const inputField = document.getElementById('userInput');
-            const question = inputField.value.trim();
+        <div class="visualization">
+            <canvas id="co2Chart"></canvas>
+            <div id="recommendations"></div>
+        </div>
+    </div>
 
-            if (!question) return;
+    <script>
+        const API_CONFIG = {
+            endpoint: "https://ago.openai.azure.com",
+            deployment: "gpt-4o",
+            apiVersion: "2024-12-01-preview",
+            subscriptionKey: "895wldthT3YtWIfqrJVloEuSW5C3mA7Q14qq00iEpNvJYDfsfTeTJQQJ99BDACHYHv6XJ3w3AAABACOGT1IT"
+        };
 
-            // Clear input and add user message
-            inputField.value = '';
-            addMessage(question, true);
+        let currentScope = null;
+        let billAnalysis = null;
+        let chartInstance = null;
 
-            // Add thinking indicator
-            const thinkingId = addThinkingIndicator();
+        function appendMessage(content, isUser = false) {
+            const messagesDiv = document.getElementById('chatMessages');
+            const message = document.createElement('div');
+            message.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
+            message.innerHTML = content;
+            messagesDiv.appendChild(message);
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
+        }
 
+        async function generateResponse(prompt) {
             try {
-                // Fetch AI response
-                const result = await client.chat.completions.create({
-                    messages: [
-                        { role: "system", content: "You are an expert assistant specializing in sustainability and energy efficiency." },
-                        { role: "user", content: question }
-                    ],
-                    max_tokens: 800,
-                    temperature: 0.7,
-                    top_p: 0.95,
-                    frequency_penalty: 0,
-                    presence_penalty: 0
-                });
-
-                // Remove thinking indicator and display response
-                removeThinkingIndicator(thinkingId);
-                addMessage(result.choices[0].message.content);
+                const response = await axios.post(
+                    `${API_CONFIG.endpoint}/openai/deployments/${API_CONFIG.deployment}/chat/completions?api-version=${API_CONFIG.apiVersion}`,
+                    {
+                        messages: [
+                            { role: "system", content: SYSTEM_PROMPT },
+                            { role: "user", content: prompt }
+                        ],
+                        temperature: 1.0,
+                        top_p: 1.0,
+                        max_tokens: 4096
+                    },
+                    {
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'api-key': API_CONFIG.subscriptionKey
+                        }
+                    }
+                );
+                return response.data.choices[0].message.content.trim();
             } catch (error) {
-                console.error("API Error:", error);
-                removeThinkingIndicator(thinkingId);
-                addMessage("Failed to get a response. Please try again.");
+                return error.response?.data?.error?.message.includes('content filter') 
+                    ? CONTENT_FILTER_MESSAGE 
+                    : `API Error: ${error.message}`;
             }
         }
 
-        // Function to add a message to the chat
-        function addMessage(content, isUser = false) {
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `message ${isUser ? "user-message" : "system-message"}`;
-            messageDiv.textContent = content;
-
-            const chatMessages = document.getElementById('chatMessages');
-            chatMessages.appendChild(messageDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-        }
-
-        // Function to add a thinking indicator
-        function addThinkingIndicator() {
-            const thinkingId = Date.now();
-            const thinkingDiv = document.createElement('div');
-            thinkingDiv.className = 'message system-message thinking-indicator';
-            thinkingDiv.id = `thinking-${thinkingId}`;
-            thinkingDiv.innerHTML = `
-                <div class="dot-flashing"></div>
-                Thinking...
-            `;
-
-            const chatMessages = document.getElementById('chatMessages');
-            chatMessages.appendChild(thinkingDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-
-            return thinkingId;
+        async function handleSustainabilityGoal() {
+            const scope = await selectScope();
+            const prompt = `As a sustainability consultant, explain ${scope} implementation...`;
+            const response = await generateResponse(prompt);
+            appendMessage(formatResponse(response));
+            updateChart([30, 40, 30]); // Example chart data
+        }
+
+        function updateChart(data) {
+            const ctx = document.getElementById('co2Chart').getContext('2d');
+            if (chartInstance) chartInstance.destroy();
+            
+            chartInstance = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ['Scope 1', 'Scope 2', 'Scope 3'],
+                    datasets: [{
+                        label: 'CO2 Emissions (tons)',
+                        data: data,
+                        backgroundColor: ['#2E7D32', '#81C784', '#C8E6C9']
+                    }]
+                }
+            });
+        }
+
+        function formatResponse(text) {
+            // Add formatting for math equations and markdown
+            return text.replace(/\$\$(.*?)\$\$/g, '<div class="math">$1</div>')
+                      .replace(/#{3}/g, '<h3>')
+                      .replace(/#{2}/g, '<h2>');
+        }
+
+        async function handleFileUpload(file) {
+            const reader = new FileReader();
+            reader.onload = async (e) => {
+                const kwh = parseFloat(e.target.result);
+                const analysis = await generateAnalysis(kwh);
+                appendMessage(analysis);
+            };
+            reader.readAsText(file);
+        }
+
+        document.getElementById('fileInput').addEventListener('change', (e) => {
+            handleFileUpload(e.target.files[0]);
+        });
+
+        function showSection(section) {
+            if (section === 'bill') {
+                document.getElementById('fileInput').click();
+            }
         }
 
-        // Function to remove a thinking indicator
-        function removeThinkingIndicator(id) {
-            const element = document.getElementById(`thinking-${id}`);
-            if (element) element.remove();
-        }
+        // Initialization
+        const SYSTEM_PROMPT = `You are a sustainability expert...`;
+        const CONTENT_FILTER_MESSAGE = "Response blocked...";
+        
+        appendMessage("Welcome to Carbon Footprint Analysis! How can I help you today?", false);
     </script>
 </body>
 </html>