Spaces:

Shipmaster1
/

Agent_Browse

Build error

App Files Files Community

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

Commit

c1523e3

1 Parent(s): 8d7f3c1

Update HTML

Browse files

Files changed (1) hide show

index.html +125 -28

index.html CHANGED Viewed

@@ -4,37 +4,134 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LangGraph Agent</title>
-    <link rel="stylesheet" href="static/styles.css">
 </head>
 <body>
-    <div class="container">
-        <header>
-            <h1>LangGraph Agent with Tools</h1>
-            <p>Ask me anything! I can search the web, calculate expressions, and generate image prompts.</p>
-        </header>
-        <div class="chat-container">
-            <div id="chat-messages" class="chat-messages"></div>
-            <div class="message-input">
-                <form id="message-form">
-                    <input type="text" id="user-input" placeholder="Type your message here..." autocomplete="off">
-                    <button type="submit">Send</button>
-                </form>
-            </div>
-        </div>
-        <div class="tools-info">
-            <h3>Available Tools:</h3>
-            <ul>
-                <li><strong>Search Web</strong> - Find information online</li>
-                <li><strong>Calculate</strong> - Solve mathematical expressions</li>
-                <li><strong>Generate Image Prompt</strong> - Create detailed image generation prompts</li>
-            </ul>
-        </div>
     </div>
-    <script src="static/script.js"></script>
 </body>
 </html>

 <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;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .chat-container {
+            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;
+            padding: 10px;
+            border-radius: 5px;
+        }
+        .user-message {
+            background-color: #e3f2fd;
+            margin-left: 20%;
+        }
+        .ai-message {
+            background-color: #f5f5f5;
+            margin-right: 20%;
+        }
+        .input-container {
+            display: flex;
+            gap: 10px;
+        }
+        input[type="text"] {
+            flex: 1;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #2196f3;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        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();
+            }
+        });
+    </script>
 </body>
 </html>