Spaces:

DeathDaDev
/

ollama-server

Runtime error

App Files Files Community

DeathDaDev commited on Aug 19

Commit

dfd6c0b

•

1 Parent(s): 0686433

feat: create chat interface with live console output section

Browse files

Files changed (1) hide show

templates/index.html +70 -30

templates/index.html CHANGED Viewed

@@ -1,36 +1,76 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <title>Ollama Server</title>
 </head>
 <body>
-    <h1>Ollama Server Logs</h1>
-    <pre>
-        {{ logs }}
-    </pre>
-    <h1>API Endpoints</h1>
-    <ul>
-        <li><code>/generate</code>: Generate text</li>
-        <li><code>/chat</code>: Chat with the model</li>
-        <li><code>/translate</code>: Translate text</li>
-        <li><code>/summarize</code>: Summarize text</li>
-        <li><code>/question</code>: Answer a question</li>
-        <li><code>/completion</code>: Complete text</li>
-        <li><code>/embedding</code>: Get embeddings for text</li>
-    </ul>
-</body>
-</html>
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Ollama Web Interface</title>
-</head>
-<body>
-    <h1>Ollama Web Interface</h1>
-    <p>Logs: <a href="/logs">View Logs</a></p>
-    <p>API Endpoints:</p>
-    <ul>
-        <li>Generate: <a href="/api/generate">POST /api/generate</a></li>
-        </ul>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat Interface</title>
+    <style>
+        #chat-container {
+            display: flex;
+            flex-direction: column;
+            width: 300px;
+            margin: 0 auto;
+        }
+        #chat-box {
+            border: 1px solid #ccc;
+            padding: 10px;
+            height: 200px;
+            overflow-y: scroll;
+            margin-bottom: 10px;
+        }
+        #console-output {
+            border: 1px solid #ccc;
+            padding: 10px;
+            height: 200px;
+            overflow-y: scroll;
+            margin-top: 20px;
+        }
+    </style>
 </head>
 <body>
+    <h1>Chat Interface</h1>
+    <div id="chat-container">
+        <div id="chat-box"></div>
+        <input type="text" id="chat-input" placeholder="Type your message here...">
+        <button id="send-button">Send</button>
+    </div>
+    <h2>Console Output</h2>
+    <div id="console-output"></div>
+    <script>
+        const chatBox = document.getElementById('chat-box');
+        const chatInput = document.getElementById('chat-input');
+        const sendButton = document.getElementById('send-button');
+        const consoleOutput = document.getElementById('console-output');
+        sendButton.addEventListener('click', () => {
+            const message = chatInput.value;
+            if (message) {
+                fetch('/api/generate', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ prompt: message })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    const responseMessage = document.createElement('div');
+                    responseMessage.textContent = `Bot: ${data.response}`;
+                    chatBox.appendChild(responseMessage);
+                });
+                const userMessage = document.createElement('div');
+                userMessage.textContent = `You: ${message}`;
+                chatBox.appendChild(userMessage);
+                chatInput.value = '';
+            }
+        });
+        const eventSource = new EventSource('/logs');
+        eventSource.onmessage = function(event) {
+            const logMessage = document.createElement('div');
+            logMessage.textContent = event.data;
+            consoleOutput.appendChild(logMessage);
+        };
+    </script>
 </body>
 </html>