Spaces:

Shipmaster1
/

Agent_Browse

Build error

App Files Files Community

T-K-O-H commited on Apr 23, 2025

Commit

ce330ae

1 Parent(s): 1df6b88

Update HTML to reflect stock market focus

Browse files

Files changed (1) hide show

index.html +42 -38

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Assistant</title>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -17,8 +17,10 @@
             background-color: white;
             border-radius: 10px;
             padding: 20px;
             margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         .message {
             margin-bottom: 10px;
@@ -27,11 +29,11 @@
         }
         .user-message {
             background-color: #e3f2fd;
-            margin-left: 20%;
         }
         .ai-message {
-            background-color: #f5f5f5;
-            margin-right: 20%;
         }
         .input-container {
             display: flex;
@@ -54,79 +56,81 @@
         button:hover {
             background-color: #1976d2;
         }
-        .tool-info {
             background-color: #e8f5e9;
             padding: 15px;
             border-radius: 5px;
             margin-bottom: 20px;
         }
-        .tool-info h3 {
             margin-top: 0;
             color: #2e7d32;
         }
-        .tool-info ul {
             padding-left: 20px;
         }
-        .tool-info li {
-            margin-bottom: 5px;
         }
     </style>
 </head>
 <body>
-    <h1>AI Assistant</h1>
-    <div class="tool-info">
         <h3>Available Tools:</h3>
         <ul>
-            <li><strong>Weather Tool</strong>: Get current weather information for any location (e.g., "weather New York")</li>
-            <li><strong>Calculator</strong>: Perform mathematical calculations (e.g., "calculate 2+2")</li>
-            <li><strong>Image Generator</strong>: Generate images from descriptions (e.g., "generate image of a sunset")</li>
         </ul>
     </div>
-    <div class="chat-container" id="chat-container">
-        <!-- Messages will be added here -->
     </div>
     <div class="input-container">
-        <input type="text" id="user-input" placeholder="Type your message here...">
         <button onclick="sendMessage()">Send</button>
     </div>
     <script>
-        const ws = new WebSocket(`ws://${window.location.host}/ws`);
-        const chatContainer = document.getElementById('chat-container');
-        const userInput = document.getElementById('user-input');
-        // Add welcome message
-        addMessage('Welcome! I can help you with weather information, calculations, and image generation. What would you like to do?', 'ai');
         ws.onmessage = function(event) {
             const data = JSON.parse(event.data);
-            if (data.type === 'ai_message') {
-                addMessage(data.content, 'ai');
-            } else if (data.type === 'error') {
-                addMessage(`Error: ${data.content}`, 'ai');
-            }
         };
         function sendMessage() {
             const message = userInput.value.trim();
             if (message) {
-                addMessage(message, 'user');
                 ws.send(message);
                 userInput.value = '';
             }
         }
-        function addMessage(text, sender) {
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `message ${sender}-message`;
-            messageDiv.textContent = text;
-            chatContainer.appendChild(messageDiv);
-            chatContainer.scrollTop = chatContainer.scrollHeight;
-        }
         userInput.addEventListener('keypress', function(e) {
             if (e.key === 'Enter') {
                 sendMessage();

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stock Market Assistant</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             background-color: white;
             border-radius: 10px;
             padding: 20px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            height: 500px;
+            overflow-y: auto;
             margin-bottom: 20px;
         }
         .message {
             margin-bottom: 10px;
         }
         .user-message {
             background-color: #e3f2fd;
+            margin-left: 60%;
         }
         .ai-message {
+            background-color: #f1f1f1;
+            margin-right: 60%;
         }
         .input-container {
             display: flex;
         button:hover {
             background-color: #1976d2;
         }
+        .tools-info {
             background-color: #e8f5e9;
             padding: 15px;
             border-radius: 5px;
             margin-bottom: 20px;
         }
+        .tools-info h3 {
             margin-top: 0;
             color: #2e7d32;
         }
+        .tools-info ul {
             padding-left: 20px;
         }
+        .tools-info li {
+            margin-bottom: 8px;
         }
     </style>
 </head>
 <body>
+    <h1>Stock Market Assistant</h1>
+    <div class="tools-info">
         <h3>Available Tools:</h3>
         <ul>
+            <li><strong>Stock Price:</strong> Get current price for any stock symbol (e.g., "What's the price of AAPL?")</li>
+            <li><strong>Stock Info:</strong> Get detailed information about a company (e.g., "Tell me about Microsoft")</li>
+            <li><strong>Stock History:</strong> Get historical data for a stock (e.g., "Show me Tesla's performance last month")</li>
         </ul>
     </div>
+    <div class="chat-container" id="chatContainer">
+        <div class="message ai-message">
+            Hello! I'm your Stock Market Assistant. I can help you with:
+            <ul>
+                <li>Current stock prices</li>
+                <li>Company information</li>
+                <li>Historical stock data</li>
+            </ul>
+            How can I help you today?
+        </div>
     </div>
     <div class="input-container">
+        <input type="text" id="userInput" placeholder="Ask about any stock...">
         <button onclick="sendMessage()">Send</button>
     </div>
     <script>
+        const ws = new WebSocket('ws://' + window.location.host + '/ws');
+        const chatContainer = document.getElementById('chatContainer');
+        const userInput = document.getElementById('userInput');
         ws.onmessage = function(event) {
             const data = JSON.parse(event.data);
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message ' + (data.type === 'ai_message' ? 'ai-message' : 'error-message');
+            messageDiv.textContent = data.content;
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
         };
         function sendMessage() {
             const message = userInput.value.trim();
             if (message) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'message user-message';
+                messageDiv.textContent = message;
+                chatContainer.appendChild(messageDiv);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
                 ws.send(message);
                 userInput.value = '';
             }
         }
         userInput.addEventListener('keypress', function(e) {
             if (e.key === 'Enter') {
                 sendMessage();