Spaces:

tommytracx
/

openwebui-ollama

Sleeping

App Files Files Community

tommytracx commited on Aug 25

Commit

178cdc5

verified ·

1 Parent(s): 170a0e7

Update app.py

Browse files

Files changed (1) hide show

app.py +307 -55

app.py CHANGED Viewed

@@ -1,11 +1,12 @@
 # app.py
-from flask import Flask, request, jsonify, render_template_string
 import os
 import requests
 import json
 import logging
 from typing import Dict, Any, List
 import time
 app = Flask(__name__)
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
@@ -43,8 +44,8 @@ class OllamaManager:
         """Return the list of available models."""
         return self.available_models
-    def generate(self, model_name: str, prompt: str, **kwargs) -> Dict[str, Any]:
-        """Generate text using a model."""
         if model_name not in self.available_models:
             return {"status": "error", "message": f"Model {model_name} not available"}
@@ -52,18 +53,23 @@ class OllamaManager:
             payload = {
                 "model": model_name,
                 "prompt": prompt,
-                "stream": False,
                 **kwargs
             }
-            response = requests.post(f"{self.base_url}/api/generate", json=payload, timeout=120)
-            response.raise_for_status()
-            data = response.json()
-            return {
-                "status": "success",
-                "response": data.get('response', ''),
-                "model": model_name,
-                "usage": data.get('usage', {})
-            }
         except Exception as e:
             logging.error(f"Error generating response: {e}")
             return {"status": "error", "message": str(e)}
@@ -81,7 +87,7 @@ class OllamaManager:
 # Initialize Ollama manager
 ollama_manager = OllamaManager(OLLAMA_BASE_URL)
-# HTML template for the chat interface
 HTML_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -89,7 +95,41 @@ HTML_TEMPLATE = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OpenWebUI - Ollama Chat</title>
     <style>
         * {
             margin: 0;
             padding: 0;
@@ -97,20 +137,32 @@ HTML_TEMPLATE = '''
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
             padding: 20px;
         }
         .container {
             max-width: 1200px;
             margin: 0 auto;
-            background: white;
             border-radius: 20px;
             box-shadow: 0 20px 40px rgba(0,0,0,0.1);
             overflow: hidden;
         }
         .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             padding: 30px;
             text-align: center;
@@ -126,8 +178,8 @@ HTML_TEMPLATE = '''
         }
         .controls {
             padding: 20px 30px;
-            background: #f8f9fa;
-            border-bottom: 1px solid #e9ecef;
             display: flex;
             gap: 15px;
             align-items: center;
@@ -140,32 +192,37 @@ HTML_TEMPLATE = '''
         }
         .control-group label {
             font-weight: 600;
-            color: #495057;
             min-width: 80px;
         }
         .control-group select,
         .control-group input {
             padding: 8px 12px;
-            border: 2px solid #e9ecef;
             border-radius: 8px;
             font-size: 14px;
             transition: border-color 0.3s;
         }
         .control-group select:focus,
         .control-group input:focus {
             outline: none;
-            border-color: #667eea;
         }
         .chat-container {
             height: 500px;
             overflow-y: auto;
             padding: 20px;
-            background: #fafbfc;
         }
         .message {
             margin-bottom: 20px;
             display: flex;
             gap: 15px;
         }
         .message.user {
             flex-direction: row-reverse;
@@ -180,33 +237,53 @@ HTML_TEMPLATE = '''
             font-weight: bold;
             color: white;
             flex-shrink: 0;
         }
         .message.user .message-avatar {
-            background: #667eea;
-        }
-        .message.assistant .message-avatar {
-            background: #28a745;
         }
         .message-content {
-            background: white;
             padding: 15px 20px;
             border-radius: 18px;
             max-width: 70%;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
             line-height: 1.5;
         }
         .message.user .message-content {
-            background: #667eea;
             color: white;
         }
-        .message.assistant .message-content {
-            background: white;
-            color: #333;
         }
         .input-container {
             padding: 20px 30px;
-            background: white;
-            border-top: 1px solid #e9ecef;
         }
         .input-form {
             display: flex;
@@ -215,21 +292,23 @@ HTML_TEMPLATE = '''
         .input-field {
             flex: 1;
             padding: 15px 20px;
-            border: 2px solid #e9ecef;
             border-radius: 25px;
             font-size: 16px;
             transition: border-color 0.3s;
             resize: none;
             min-height: 50px;
             max-height: 120px;
         }
         .input-field:focus {
             outline: none;
-            border-color: #667eea;
         }
         .send-button {
             padding: 15px 30px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             border: none;
             border-radius: 25px;
@@ -262,11 +341,15 @@ HTML_TEMPLATE = '''
         .typing-indicator {
             display: none;
             padding: 15px 20px;
-            background: white;
             border-radius: 18px;
             color: #6c757d;
             font-style: italic;
         }
         @media (max-width: 768px) {
             .controls {
                 flex-direction: column;
@@ -283,6 +366,7 @@ HTML_TEMPLATE = '''
 </head>
 <body>
     <div class="container">
         <div class="header">
             <h1>🤖 OpenWebUI</h1>
             <p>Chat with your local Ollama models through Hugging Face Spaces</p>
@@ -336,15 +420,33 @@ HTML_TEMPLATE = '''
         <div class="status" id="status"></div>
     </div>
-    <script>
         let conversationHistory = [];
         document.addEventListener('DOMContentLoaded', function() {
             loadModels();
             setupEventListeners();
             autoResizeTextarea();
         });
         async function loadModels() {
             const modelSelect = document.getElementById('model-select');
             modelSelect.innerHTML = '<option value="">Loading models...</option>';
@@ -383,6 +485,8 @@ HTML_TEMPLATE = '''
                 document.getElementById('temp-value').textContent = this.value;
             });
             document.getElementById('message-input').addEventListener('input', autoResizeTextarea);
         }
         function autoResizeTextarea() {
@@ -417,27 +521,57 @@ HTML_TEMPLATE = '''
                 const response = await fetch('/api/chat', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ model, prompt: message, temperature, max_tokens: maxTokens })
                 });
-                const data = await response.json();
                 showTypingIndicator(false);
-                if (data.status === 'success') {
-                    addMessage(data.response, 'assistant');
-                    showStatus(`Response generated using ${model}`, 'success');
-                } else {
-                    addMessage('Sorry, I encountered an error while processing your request.', 'assistant');
-                    showStatus(`Error: ${data.message}`, 'error');
                 }
             } catch (error) {
                 showTypingIndicator(false);
-                addMessage('Sorry, I encountered a network error.', 'assistant');
                 showStatus('Network error: ' + error.message, 'error');
             }
         }
-        function addMessage(content, sender) {
             const chatContainer = document.getElementById('chat-container');
             const messageDiv = document.createElement('div');
             messageDiv.className = `message ${sender}`;
@@ -455,7 +589,117 @@ HTML_TEMPLATE = '''
             chatContainer.appendChild(messageDiv);
             chatContainer.scrollTop = chatContainer.scrollHeight;
-            conversationHistory.push({ role: sender, content: content });
         }
         function showTypingIndicator(show) {
@@ -488,7 +732,7 @@ def home():
 @app.route('/api/chat', methods=['POST'])
 def chat():
-    """Chat API endpoint."""
     try:
         data = request.get_json()
         if not data or 'prompt' not in data or 'model' not in data:
@@ -498,9 +742,17 @@ def chat():
         model = data['model']
         temperature = data.get('temperature', TEMPERATURE)
         max_tokens = data.get('max_tokens', MAX_TOKENS)
-        result = ollama_manager.generate(model, prompt, temperature=temperature, max_tokens=max_tokens)
-        return jsonify(result), 200 if result["status"] == "success" else 500
     except Exception as e:
         logging.error(f"Chat endpoint error: {e}")
         return jsonify({"status": "error", "message": str(e)}), 500

 # app.py
+from flask import Flask, request, jsonify, render_template_string, Response
 import os
 import requests
 import json
 import logging
 from typing import Dict, Any, List
 import time
+import re
 app = Flask(__name__)
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
         """Return the list of available models."""
         return self.available_models
+    def generate(self, model_name: str, prompt: str, stream: bool = False, **kwargs) -> Any:
+        """Generate text using a model, with optional streaming."""
         if model_name not in self.available_models:
             return {"status": "error", "message": f"Model {model_name} not available"}
             payload = {
                 "model": model_name,
                 "prompt": prompt,
+                "stream": stream,
                 **kwargs
             }
+            if stream:
+                response = requests.post(f"{self.base_url}/api/generate", json=payload, stream=True, timeout=120)
+                response.raise_for_status()
+                return response
+            else:
+                response = requests.post(f"{self.base_url}/api/generate", json=payload, timeout=120)
+                response.raise_for_status()
+                data = response.json()
+                return {
+                    "status": "success",
+                    "response": data.get('response', ''),
+                    "model": model_name,
+                    "usage": data.get('usage', {})
+                }
         except Exception as e:
             logging.error(f"Error generating response: {e}")
             return {"status": "error", "message": str(e)}
 # Initialize Ollama manager
 ollama_manager = OllamaManager(OLLAMA_BASE_URL)
+# HTML template for the chat interface with improved UI and Sandpack
 HTML_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="en">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OpenWebUI - Ollama Chat</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/",
+          "@codesandbox/sandpack-react": "https://esm.sh/@codesandbox/sandpack-react@latest"
+        }
+      }
+    </script>
     <style>
+        :root {
+            --primary-color: #667eea;
+            --secondary-color: #764ba2;
+            --text-color: #333;
+            --bg-color: #fafbfc;
+            --message-bg-user: var(--primary-color);
+            --message-bg-assistant: white;
+            --avatar-user: var(--primary-color);
+            --avatar-assistant: #28a745;
+            --border-color: #e9ecef;
+            --input-bg: white;
+        }
+        .dark-mode {
+            --primary-color: #3b4a8c;
+            --secondary-color: #4a2e6b;
+            --text-color: #f0f0f0;
+            --bg-color: #1a1a1a;
+            --message-bg-user: var(--primary-color);
+            --message-bg-assistant: #2a2a2a;
+            --avatar-user: var(--primary-color);
+            --avatar-assistant: #1a7a3a;
+            --border-color: #4a4a4a;
+            --input-bg: #3a3a3a;
+        }
         * {
             margin: 0;
             padding: 0;
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            color: var(--text-color);
             min-height: 100vh;
             padding: 20px;
         }
         .container {
             max-width: 1200px;
             margin: 0 auto;
+            background: var(--bg-color);
             border-radius: 20px;
             box-shadow: 0 20px 40px rgba(0,0,0,0.1);
             overflow: hidden;
+            position: relative;
+        }
+        .theme-toggle {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 1.2rem;
+            color: white;
         }
         .header {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
             color: white;
             padding: 30px;
             text-align: center;
         }
         .controls {
             padding: 20px 30px;
+            background: var(--bg-color);
+            border-bottom: 1px solid var(--border-color);
             display: flex;
             gap: 15px;
             align-items: center;
         }
         .control-group label {
             font-weight: 600;
+            color: var(--text-color);
             min-width: 80px;
         }
         .control-group select,
         .control-group input {
             padding: 8px 12px;
+            border: 2px solid var(--border-color);
             border-radius: 8px;
             font-size: 14px;
             transition: border-color 0.3s;
+            background: var(--input-bg);
+            color: var(--text-color);
         }
         .control-group select:focus,
         .control-group input:focus {
             outline: none;
+            border-color: var(--primary-color);
         }
         .chat-container {
             height: 500px;
             overflow-y: auto;
             padding: 20px;
+            background: var(--bg-color);
+            transition: background 0.3s;
         }
         .message {
             margin-bottom: 20px;
             display: flex;
             gap: 15px;
+            position: relative;
+            animation: fadeIn 0.3s ease-in;
         }
         .message.user {
             flex-direction: row-reverse;
             font-weight: bold;
             color: white;
             flex-shrink: 0;
+            background: var(--avatar-assistant);
         }
         .message.user .message-avatar {
+            background: var(--avatar-user);
         }
         .message-content {
+            background: var(--message-bg-assistant);
             padding: 15px 20px;
             border-radius: 18px;
             max-width: 70%;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
             line-height: 1.5;
+            color: var(--text-color);
         }
         .message.user .message-content {
+            background: var(--message-bg-user);
             color: white;
         }
+        .code-actions {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            display: flex;
+            gap: 5px;
+        }
+        .code-button {
+            background: rgba(0,0,0,0.1);
+            border: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 12px;
+            color: var(--text-color);
+        }
+        .code-button:hover {
+            background: rgba(0,0,0,0.2);
+        }
+        .sandbox-container {
+            margin-top: 10px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            overflow: hidden;
         }
         .input-container {
             padding: 20px 30px;
+            background: var(--bg-color);
+            border-top: 1px solid var(--border-color);
         }
         .input-form {
             display: flex;
         .input-field {
             flex: 1;
             padding: 15px 20px;
+            border: 2px solid var(--border-color);
             border-radius: 25px;
             font-size: 16px;
             transition: border-color 0.3s;
             resize: none;
             min-height: 50px;
             max-height: 120px;
+            background: var(--input-bg);
+            color: var(--text-color);
         }
         .input-field:focus {
             outline: none;
+            border-color: var(--primary-color);
         }
         .send-button {
             padding: 15px 30px;
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
             color: white;
             border: none;
             border-radius: 25px;
         .typing-indicator {
             display: none;
             padding: 15px 20px;
+            background: var(--message-bg-assistant);
             border-radius: 18px;
             color: #6c757d;
             font-style: italic;
         }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
         @media (max-width: 768px) {
             .controls {
                 flex-direction: column;
 </head>
 <body>
     <div class="container">
+        <button class="theme-toggle" id="theme-toggle">🌙</button>
         <div class="header">
             <h1>🤖 OpenWebUI</h1>
             <p>Chat with your local Ollama models through Hugging Face Spaces</p>
         <div class="status" id="status"></div>
     </div>
+    <script type="module">
+        import { Sandpack } from 'https://esm.sh/@codesandbox/sandpack-react@latest';
         let conversationHistory = [];
+        let currentMessageDiv = null;
+        let currentCodeBlocks = [];
         document.addEventListener('DOMContentLoaded', function() {
             loadModels();
             setupEventListeners();
             autoResizeTextarea();
         });
+        function toggleTheme() {
+            document.body.classList.toggle('dark-mode');
+            const themeToggle = document.getElementById('theme-toggle');
+            themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';
+            localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
+        }
+        function loadTheme() {
+            if (localStorage.getItem('theme') === 'dark') {
+                document.body.classList.add('dark-mode');
+                document.getElementById('theme-toggle').textContent = '☀️';
+            }
+        }
         async function loadModels() {
             const modelSelect = document.getElementById('model-select');
             modelSelect.innerHTML = '<option value="">Loading models...</option>';
                 document.getElementById('temp-value').textContent = this.value;
             });
             document.getElementById('message-input').addEventListener('input', autoResizeTextarea);
+            document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+            loadTheme();
         }
         function autoResizeTextarea() {
                 const response = await fetch('/api/chat', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ model, prompt: message, temperature, max_tokens: maxTokens, stream: true })
                 });
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
                 showTypingIndicator(false);
+                currentMessageDiv = addMessage('', 'assistant', true);
+                currentCodeBlocks = [];
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let accumulatedResponse = '';
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+                    for (const line of lines) {
+                        if (line.trim()) {
+                            try {
+                                const data = JSON.parse(line);
+                                if (data.response) {
+                                    accumulatedResponse += data.response;
+                                    updateMessage(currentMessageDiv, accumulatedResponse);
+                                }
+                            } catch (e) {
+                                console.error('Error parsing chunk:', e);
+                            }
+                        }
+                    }
                 }
+                processCodeBlocks(currentMessageDiv, accumulatedResponse);
+                showStatus(`Response generated using ${model}`, 'success');
             } catch (error) {
                 showTypingIndicator(false);
+                if (currentMessageDiv) {
+                    updateMessage(currentMessageDiv, 'Sorry, I encountered a network error.');
+                } else {
+                    addMessage('Sorry, I encountered a network error.', 'assistant');
+                }
                 showStatus('Network error: ' + error.message, 'error');
             }
         }
+        function addMessage(content, sender, isStreaming = false) {
             const chatContainer = document.getElementById('chat-container');
             const messageDiv = document.createElement('div');
             messageDiv.className = `message ${sender}`;
             chatContainer.appendChild(messageDiv);
             chatContainer.scrollTop = chatContainer.scrollHeight;
+            if (!isStreaming) {
+                conversationHistory.push({ role: sender, content: content });
+            }
+            return messageDiv;
+        }
+        function updateMessage(messageDiv, content) {
+            const messageContent = messageDiv.querySelector('.message-content');
+            messageContent.textContent = content;
+            const chatContainer = document.getElementById('chat-container');
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        function processCodeBlocks(messageDiv, content) {
+            const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+            let match;
+            let lastIndex = 0;
+            const messageContent = messageDiv.querySelector('.message-content');
+            const fragments = [];
+            while ((match = codeBlockRegex.exec(content)) !== null) {
+                const language = match[1] || 'javascript';
+                const code = match[2].trim();
+                const startIndex = match.index;
+                // Add text before the code block
+                if (startIndex > lastIndex) {
+                    fragments.push({ type: 'text', content: content.slice(lastIndex, startIndex) });
+                }
+                // Add code block
+                fragments.push({ type: 'code', language, content: code });
+                currentCodeBlocks.push({ language, content: code });
+                lastIndex = codeBlockRegex.lastIndex;
+            }
+            // Add remaining text
+            if (lastIndex < content.length) {
+                fragments.push({ type: 'text', content: content.slice(lastIndex) });
+            }
+            // Clear message content and rebuild with fragments
+            messageContent.innerHTML = '';
+            fragments.forEach((fragment, index) => {
+                if (fragment.type === 'text') {
+                    const textSpan = document.createElement('span');
+                    textSpan.textContent = fragment.content;
+                    messageContent.appendChild(textSpan);
+                } else if (fragment.type === 'code') {
+                    const codeContainer = document.createElement('div');
+                    codeContainer.className = 'sandbox-container';
+                    const actions = document.createElement('div');
+                    actions.className = 'code-actions';
+                    const copyButton = document.createElement('button');
+                    copyButton.className = 'code-button';
+                    copyButton.textContent = 'Copy';
+                    copyButton.onclick = () => {
+                        navigator.clipboard.writeText(fragment.content);
+                        showStatus('Code copied to clipboard', 'success');
+                    };
+                    const downloadButton = document.createElement('button');
+                    downloadButton.className = 'code-button';
+                    downloadButton.textContent = 'Download';
+                    downloadButton.onclick = () => {
+                        const blob = new Blob([fragment.content], { type: 'text/plain' });
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = `code.${fragment.language || 'txt'}`;
+                        a.click();
+                        URL.revokeObjectURL(url);
+                    };
+                    actions.appendChild(copyButton);
+                    actions.appendChild(downloadButton);
+                    messageContent.appendChild(actions);
+                    const script = document.createElement('script');
+                    script.type = 'module';
+                    script.textContent = `
+                        import { Sandpack } from '@codesandbox/sandpack-react';
+                        import { createRoot } from 'react-dom';
+                        const root = createRoot(document.getElementById('sandpack-${index}'));
+                        root.render(
+                            React.createElement(Sandpack, {
+                                template: "${fragment.language === 'javascript' ? 'react' : fragment.language}",
+                                files: {
+                                    '/App.${fragment.language === 'javascript' ? 'jsx' : fragment.language}': \`${fragment.content.replace(/`/g, '\\`')}\`
+                                },
+                                options: {
+                                    showNavigator: false,
+                                    showTabs: true,
+                                    showLineNumbers: true,
+                                    editorHeight: 300
+                                }
+                            })
+                        );
+                    `;
+                    const sandboxDiv = document.createElement('div');
+                    sandboxDiv.id = `sandpack-${index}`;
+                    codeContainer.appendChild(sandboxDiv);
+                    codeContainer.appendChild(script);
+                    messageContent.appendChild(codeContainer);
+                }
+            });
+            conversationHistory.push({ role: 'assistant', content: content });
         }
         function showTypingIndicator(show) {
 @app.route('/api/chat', methods=['POST'])
 def chat():
+    """Chat API endpoint with streaming support."""
     try:
         data = request.get_json()
         if not data or 'prompt' not in data or 'model' not in data:
         model = data['model']
         temperature = data.get('temperature', TEMPERATURE)
         max_tokens = data.get('max_tokens', MAX_TOKENS)
+        stream = data.get('stream', False)
+        result = ollama_manager.generate(model, prompt, stream=stream, temperature=temperature, max_tokens=max_tokens)
+        if stream and isinstance(result, requests.Response):
+            def generate_stream():
+                for chunk in result.iter_content(chunk_size=None):
+                    yield chunk
+            return Response(generate_stream(), content_type='application/json')
+        else:
+            return jsonify(result), 200 if result["status"] == "success" else 500
     except Exception as e:
         logging.error(f"Chat endpoint error: {e}")
         return jsonify({"status": "error", "message": str(e)}), 500