Inläsning av apiEndpoint och useModel har flyttats hit. Funktioner och variabler från frontend.js exporteras numer via frontendApi

smartassist/src/backend.py

@@ -1,7 +1,7 @@
 
 # Import the necessary functions from ollama, Flask, requests, threading
 from ollama import Client
-from flask import Flask, request, jsonify, send_from_directory, render_template
+from flask import Flask, request, jsonify, send_from_directory, render_template, session, make_response
 from flask_cors import CORS, cross_origin # CORS stands for Cross-Origin Resource Sharing. This is necessary to allow the frontend to make requests to our backend.
 import requests
 import json
@@ -11,11 +11,8 @@ import utils
 from utils import GlobalState
 
 # Create a logger for this module
-# logger = logging.getLogger(__name__) # This logger will be used to log messages from this module
-# logger.debug("Logging level of backend logger has been configured")
 global_state = GlobalState() # Import the singleton that holds global states (e.g., logger)
 logger = global_state.getLogger(__name__)  # Logger for this module, inherit properties of the root logger
-# llm = global_state.get_llm()
 
 
 # Find out the path to current directory according to the Python interpreter (venv)
@@ -25,6 +22,15 @@ logger.debug("Current working directory: %s", os.getcwd())
 app = Flask(__name__)
 app.config['STATIC_FOLDER'] = 'static' # Adjust if needed 
 
+# Set the secret key for session management
+secret_key = os.urandom(24)
+app.config['SECRET_KEY'] = secret_key # When do I need this. How is it retained between sessions?
+
+# Optionally set other configuration options
+app.config['SESSION_PERMANENT'] = False  # Session will expire after each request
+app.config['SESSION_TYPE'] = 'filesystem'  # Store sessions on the filesystem
+
+
 logger.debug("flask app template folder: %s", app.template_folder) 
 
 @app.route('/')
@@ -33,9 +39,11 @@ def index():
     This route serves index.html to connecting clients
     """
 
+    session['chat_history'] = []   # The session object (actually, a dictonary) holds the chat session
     logger.debug("Entering route '/'")
-    api_endpoint = os.environ['BE_API_ENDPOINT']  # Retrieve the environment variable 
-    logger.debug("API endpoint: %s", api_endpoint)
+    # api_endpoint = os.environ['BE_API_ENDPOINT']  # Retrieve the environment variable 
+    api_endpoint = global_state.get_backend_api_ep()  # Retrieve the environment variable 
+    logger.debug("Backend API endpoint: %s", api_endpoint)
     use_model = global_state.get_llm()
     with open('smartassist/src/html/client.html', 'r') as f:
         client_html = f.read()
@@ -44,6 +52,23 @@ def index():
 
     return render_template('index.html', api_endpoint=api_endpoint, use_model = use_model, client_content=client_html)
 
+@app.route('/set_session')
+def set_session():
+    resp = make_response()
+    resp.set_cookie('session', 'some-value', samesite='None', secure=True) # Add SameSite attribute here
+    return resp
+
+@app.route('/profile')
+def profile():
+    # Retrieve data from the session
+    user_id = session.get('user_id')
+
+    if user_id:
+        return f'User ID: {user_id}'
+    else:
+        return 'No user ID found'
+    
+
 @app.route('/<path:filename>')
 def serve_static(filename):
     return send_from_directory(app.config['STATIC_FOLDER'], filename)
@@ -61,6 +86,7 @@ CORS(app, resources={
         "origins": "*"    
     }
 })
+    
 
 @app.route('/api/chat', methods=['POST'])
 def chat(url_server = "http://localhost:11434/api/generate", model = "phi3:mini"):
@@ -75,28 +101,36 @@ def chat(url_server = "http://localhost:11434/api/generate", model = "phi3:mini"
     message = data.get('query')
     url_server = data.get('url_server', url_server)  # Use provided URL or default
     model = data.get('model', model)  # Use provided model or default
-    logger.debug("data = %s\nmessage = %s", str(data), str(message))
+    
+    # Get chat history from session storage (e.g., a dictionary)
+    chat_history = session.get('chat_history', [])
+    
+    # Add the new message to the chat history
+    chat_history.append({'role': 'user', 'message': message})
+    
+    # Update the session with the new chat history
+    session['chat_history'] = chat_history
+    
+    # Create the data dictionary with chat history
+    data_to_send = {
+        "model": model,
+        'prompt': '\n'.join([f"{item['role']}: {item['message']}" for item in chat_history]),
+        "stream": False           
+    }
+    
     try:
         url = url_server
-        model_to_use = model
-        data = {
-            "model": model_to_use,
-            'prompt': message,
-            "stream": False           
-        }
         headers = {
                     "Content-Type": "application/json",
         }
-        # With API key
-        # headers = {
-        #             "Content-Type": "application/json",
-        #             "Authorization": "Bearer YOUR_API_KEY"  # Replace with your API key
-        # }
-
+        
         response = requests.post(url,
                                  headers=headers, 
-                                 data=json.dumps(data))
+                                 data=json.dumps(data_to_send))
         response.raise_for_status()  # Raise an exception for bad status codes
+        llm_response = response.json()['response']   # Assuming the LLM's response is under 'response' key
+        chat_history.append({'role': 'assistant', 'message': llm_response})  # Add assistant response to chat history
+        logger.debug(f"Chat History: {chat_history}")
         return response.json()
     except requests.exceptions.RequestException as e:
         logger.error("Request Exception: %s", str(e))        
@@ -106,6 +140,7 @@ def chat(url_server = "http://localhost:11434/api/generate", model = "phi3:mini"
         return jsonify({'error': 'Invalid JSON response from server'}), 500
 
 
+
 @app.route('/smartassist', methods=["POST"])
 def smartassist():
     # Extract the query from the incoming JSON data

smartassist/src/html/client.html

@@ -14,22 +14,48 @@
     <textarea id="userInput" placeholder="Type your message..." rows="5"></textarea>
     <button id="sendButton" onclick="sendMessage()">Send</button>
 
-    <!-- Get the apiEndpoint -->
-    <script>
+    <!-- Get the apiEndpoint and the useModel -->
+    <!-- <script>
         const apiEndpoint = window.apiEndpoint;
         const useModel = window.useModel;
-    </script>
+        console.log("client.html - API Endpoint: ", apiEndpoint);
+        console.log("client.html - use model: ", useModel);
+    </script> -->
+
+    <!-- <script>
+        let apiEndpoint; // Make variable available outside of the scope of the event listener
+        let useModel; // Make variable available outside of the scope of the event listener
+        window.addEventListener('message', function(event) {
+            if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin
+                const { apiEndpoint, useModel } = event.data;
+                console.log("client.html - API Endpoint: ", apiEndpoint);
+                console.log("client.html - use model: ", useModel);
+                window.apiEndpoint  = apiEndpoint; 
+                window.useModel  = useModel;
+            }   
+        });
+    </script> -->
+
+    <!-- Marked-it for markdown rendering -->
+    <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/markdown-it@14/dist/markdown-it.min.js"></script>
+
 
-    <!-- Marked for markdown rendering -->
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 
     <!-- Include MathJax library to render mathematical notation -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script>
+        window.MathJax = {
+          loader: { load: ['input/tex', 'output/chtml'] },
+          tex: {
+            packages: ['base', 'ams'],
+            inlineMath: [['$', '$']]
+          }
+        };
+    </script>
+
 
 
-    <!-- Get the javascript handling communication with the backend -->
-    <script src="/js/frontend.js"></script>
 
     <script>
         const chatContainer = document.getElementById('chatbox');
@@ -47,7 +73,7 @@
                 event.preventDefault(); 
                 userInputElement.value += '\n';
             } else if (event.key === 'Enter') {  // Enter to send message
-                sendMessage();
+                window.frontendApi.sendMessage();
                 userInputElement.value = ''; // Clear the input field after sending
                 event.preventDefault();
             }
@@ -55,6 +81,8 @@
 
     </script>
 
+    <!-- Get the javascript handling communication with the backend -->
+    <script src="/js/frontend.js"></script>
 </body>
 </html>
 

smartassist/src/startservices.py

@@ -52,18 +52,19 @@ def configure():
             logger.debug("configure(): This logger now has effective log level %s", logger.getEffectiveLevel())
 
     ####################################
-    # Extract and export API endpoint as 
-    # envrionment variable
+    # Extract and export backend API
+    # endpoint as global state variable
     ####################################
-    backend_api_ep = 'http://localhost:5005/api/chat'  # Default API endpoint
     if isinstance(updated_config.get('backend'), dict): # Look for 'backend' key
         if isinstance(updated_config['backend'].get('url'), str): # Look for 'url' key
             url = updated_config['backend'].get('url')
             if isinstance(updated_config['backend'].get('api'), str): # Look for 'api' key
                 api = updated_config['backend'].get('api')
-                backend_api_ep = url+api # Extract API endpoint if defined
-    logger.debug("BE_API_ENDPOINT is set to '{}'".format(backend_api_ep))
-    os.environ['BE_API_ENDPOINT'] = backend_api_ep # Look into alternative way to share this with backend.py
+                # backend_api_ep = url+api # Extract API endpoint if defined
+                logger.debug(f"Constructing endpoint address as url+api: {url+api}")
+                global_state.set_backend_api_ep(url+api) # Extract API endpoint if defined and set in global_state 
+                logger.debug(f"Backend API endpoint is set to {global_state.get_backend_api_ep()}")
+    # os.environ['BE_API_ENDPOINT'] = backend_api_ep # Look into alternative way to share this with backend.py
 
     ####################################
     # Extract Ollama parameters (url, api_key, model)

smartassist/src/static/css/clientstyle.css

@@ -16,13 +16,16 @@ h1 {
 #chatbox {
     width: calc(50% - 60px); /* Adjust width for input and button */
     /* max-width: 500px; */
-    height: 80px;
-    background-color: #e1dcccb8;
+    height: 600px;
+    /* background-color: #fff8bc; */
+    background-color: #ffffff;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     overflow: auto; /* Allow horizontal and vertical scrolling of the chatbox */
     resize: both; /* Allow resizing vertically */
+    border: 1px solid #ccc; /* Add a thin grey border around chatbox */
+    margin-bottom: 20px; /* Add some space between chatbox and userInput */
 }
 
 .message {
@@ -38,7 +41,7 @@ h1 {
 
 .ai-response {
     /* background-color: #f0f8ff; */
-    background-color: #e1dcccb8;
+    background-color: #f5ecd0;
     padding: 10px 15px;
     border-radius: 10px;
     text-align: left; /* Align AI responses to the left */

smartassist/src/static/js/frontend.js

@@ -1,81 +1,192 @@
 
+// // Get the user input element from the DOM
+// const chatbox = document.getElementById('chatbox');
+// const userInput = document.getElementById('userInput');
+
+// const parser = window.markdownit({
+//   linkify: true,
+//   strikethrough: true,
+// });
+
+// parser.enable(['table']);
+
+// // const apiEndpoint  = window.apiEndpoint;  // Get the API endpoint
+// // const useModel  = window.useModel;      // Get whether to use a model or not
+// // console.log("frontend.js - API Endpoint:  ", window.apiEndpoint);
+// // console.log("frontend.js - Use model:  ", window.useModel);
+
+// let apiEndpoint; // Make variable available outside of the scope of the event listener
+// let useModel; // Make variable available outside of the scope of the event listener
+// window.addEventListener('message', function(event) {
+//     if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin
+//         const { apiEndpoint, useModel } = event.data;
+//         console.log("client.html - API Endpoint: ", apiEndpoint);
+//         console.log("client.html - use model: ", useModel);
+//         window.apiEndpoint  = apiEndpoint; 
+//         window.useModel  = useModel;
+//     }   
+// });
+
+// console.log("frontend.js  - API Endpoint:  ", window.apiEndpoint);
+// console.log("frontend.js  - Use model:  ", window.useModel);
+
+// // Define a function to send the user's message to the AI
+// function sendMessage() {
+//   // Get the user's input message and trim any whitespace
+//     const query = userInput.value.trim();
+
+//     // Check if the message is not empty
+//     if (query !== '') {
+ 
+//         // fetch(`${apiEndpoint}`, {
+//         fetch(apiEndpoint, {
+//             method: 'POST',
+//             headers: { 'Content-Type': 'application/json' },
+//             body: JSON.stringify({ query, model: useModel }), // Add these parameters here
+//             // body: JSON.stringify({ query, url_server: "http://your-custom-url", model: "phi3:mini" }), // Add these parameters here
+//         })
+//         .then(response => response.json())
+//         .then(data => {
+//             // Get the AI's response from the API data
+//             const aiResponse = data.response;
+
+//             // Render the user's original message in the chatbox
+//             renderMessage(query, 'user-message');
+
+//             // Render the AI's response in the chatbox
+//             renderMessage(aiResponse, 'ai-response');
+
+//             // Clear the user input field for the next message
+//             userInput.value = '';
+//         })
+//         .catch(error => console.error('Error sending message:', error));
+//     }
+// }
+
+
+
+// // Define a function to render a message in the chatbox with a specific class name
+// function renderMessage(text, className) {
+//     // Create a new div element to hold the message
+//     const messageElement = document.createElement('div');
+
+//     // Add the specified class name to the element
+//     messageElement.className = className;
+
+//     // // Set the text content of the element to the message text
+//     // messageElement.textContent = text;
+
+//     // Use the markdown-it parser
+//     const html = parser.render(text);
+//     messageElement.innerHTML = html;
+
+//     // Append the message element to the chatbox immediately
+//     // chatbox.appendChild(messageElement);
+
+//     // Typeset math in the message element
+//     MathJax.typesetPromise([messageElement]).then(() => {
+//         // No need to append anything here, it's already appended above
+//         chatbox.appendChild(messageElement);
+
+//     });
+// }
+
+// // Make the button toggle colour when user presses Enter on keyboard
+// const sendButton = document.getElementById('sendButton');
+
+// document.addEventListener('keydown', function(event) {
+//     if (event.key === 'Enter') {
+//         sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed
+//     }
+// });
+
+// document.addEventListener('keyup', function() {
+//     sendButton.style.backgroundColor = ''; // Restore the original style when any key is released
+// });
+
+
+
 // Get the user input element from the DOM
 const chatbox = document.getElementById('chatbox');
 const userInput = document.getElementById('userInput');
+const parser = window.markdownit({
+  linkify: true,
+  strikethrough: true,
+});
+parser.enable(['table']);
 
-// // Check for Marked
-// if (typeof marked === 'undefined') {
-//     console.log('Marked is not defined');
-//     const script = document.createElement('script');
-//     script.src = "https://cdn.jsdelivr.net/npm/marked/marked.min.js";
-//     script.onload = initializeChatbot;
-//     document.body.appendChild(script);
-//     console.log('Marked is now defined');
-// }
+let apiEndpoint; // Make variable available outside of the scope of the event listener
+let useModel; // Make variable available outside of the scope of the event listener
 
-
-// Define a function to send the user's message to the AI
-function sendMessage() {
-  // Get the user's input message and trim any whitespace
+const frontendApi = {
+  // Define a function to send the user's message to the AI
+  sendMessage: function() {
+    if (!window.apiEndpoint || !window.useModel) { // Check if we're ready before proceeding
+      console.error("Not ready yet. Please wait for apiEndpoint and useModel to be set.");
+      return;
+    }
+    
+    // Get the user's input message and trim any whitespace
     const query = userInput.value.trim();
-
     // Check if the message is not empty
     if (query !== '') {
- 
-        fetch(`${apiEndpoint}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query, model: `${useModel}` }), // Add these parameters here
-            // body: JSON.stringify({ query, url_server: "http://your-custom-url", model: "phi3:mini" }), // Add these parameters here
-        })
-        .then(response => response.json())
-        .then(data => {
-            // Get the AI's response from the API data
-            const aiResponse = data.response;
-
-            // Render the user's original message in the chatbox
-            renderMessage(query, 'user-message');
-
-            // Render the AI's response in the chatbox
-            renderMessage(aiResponse, 'ai-response');
-
-            // Clear the user input field for the next message
-            userInput.value = '';
-        })
-        .catch(error => console.error('Error sending message:', error));
+      fetch(window.apiEndpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query, model: window.useModel }), // Add these parameters here
+      })
+      .then(response => response.json())
+      .then(data => {
+        // Get the AI's response from the API data
+        const aiResponse = data.response;
+        // Render the user's original message in the chatbox
+        this.renderMessage(query, 'user-message');
+        // Render the AI's response in the chatbox
+        this.renderMessage(aiResponse, 'ai-response');
+        // Clear the user input field for the next message
+        userInput.value = '';
+      })
+      .catch(error => console.error('Error sending message:', error));
     }
-}
-
-// Define a function to render a message in the chatbox with a specific class name
-function renderMessage(text, className) {
+  },
+  // Define a function to render a message in the chatbox with a specific class name
+  renderMessage: function(text, className) {
     // Create a new div element to hold the message
     const messageElement = document.createElement('div');
-
     // Add the specified class name to the element
     messageElement.className = className;
-
-    // // Set the text content of the element to the message text
-    // messageElement.textContent = text;
-
-    // Parse Markdown text into HTML and set it as the innerHTML of the element
-    messageElement.innerHTML = marked.parse(text);
-
-    // Typeset math
-    MathJax.typesetPromise([messageElement]);
-
-    // Append the message element to the chatbox
+    // Use the markdown-it parser
+    const html = parser.render(text);
+    messageElement.innerHTML = html;
+    // Append the message element to the chatbox immediately
     chatbox.appendChild(messageElement);
-}
+  },
+};
+
+// Wait for the event listener to set apiEndpoint and useModel
+window.addEventListener('message', function(event) {
+  if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin
+    const { apiEndpoint, useModel } = event.data;
+    console.log("fronend.js - API Endpoint: ", apiEndpoint);
+    console.log("fronend.js - use model: ", useModel);
+    window.apiEndpoint = apiEndpoint;
+    window.useModel = useModel;
+  }
+});
+
+// Wait for the DOM to be fully loaded before making the API available
+document.addEventListener('DOMContentLoaded', function() {
+  window.frontendApi = frontendApi;
+});
+
 
 // Make the button toggle colour when user presses Enter on keyboard
 const sendButton = document.getElementById('sendButton');
-
 document.addEventListener('keydown', function(event) {
-    if (event.key === 'Enter') {
-        sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed
-    }
+  if (event.key === 'Enter') {
+    sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed
+  }
 });
-
 document.addEventListener('keyup', function() {
-    sendButton.style.backgroundColor = ''; // Restore the original style when any key is released
+  sendButton.style.backgroundColor = ''; // Restore the original style when any key is released
 });

smartassist/src/templates/index.html

@@ -15,15 +15,27 @@
             srcdoc="{{ client_content }}">
     </iframe>
 
-    <script>
+    <!-- <script>
         // Extract apiEndpoint for use in your frontend code...
         const apiEndpoint = '{{ api_endpoint }}';  // Templating syntax (Jinja2)
         const useModel = '{{ use_model }}';  // Templating syntax (Jinja2)
-        // Tell the iframe about the apiEndpoing
+        // Tell the iframe about the apiEndpoint
         document.getElementById('client-frame').contentWindow.apiEndpoint = apiEndpoint;
         document.getElementById('client-frame').contentWindow.useModel = useModel;
         console.log("index.html - API Endpoint: ", apiEndpoint);
         console.log("index.html - use model: ", useModel);
+    </script> -->
+
+    <script>
+        // Extract apiEndpoint for use in frontend.js
+        const apiEndpoint = '{{ api_endpoint }}';  // Templating syntax (Jinja2)
+        const useModel = '{{ use_model }}';  // Templating syntax (Jinja2)
+        window.addEventListener('load', function() {
+            const clientFrame = document.getElementById('client-frame').contentWindow;
+            clientFrame.postMessage({ apiEndpoint, useModel }, '*'); // Send the data to the iframe
+        });
+        console.log("index.html - API Endpoint: ", apiEndpoint);
+        console.log("index.html - use model: ", useModel);
     </script>
 
     <!-- Responsive scaling and some padding -->

smartassist/src/utils.py

@@ -25,6 +25,7 @@ class GlobalState:
             cls._instance.logger.setLevel(getattr(logging, cls._instance.log_level))  # Initialize root logger level
             cls._instance.logger.info(" __new__(cls): Logger in GlobalState created: %s", cls._instance.logger)
             cls._instance.llm = "phi3:mini" # Default LLM for queries. TODO: Check with ollama server that it actually exists
+            cls._instance.backend_api_ep = "http://localhost:5005/api/chat" # Default backend API endpoint
         return cls._instance
 
     def configure_logging(self, level=None):
@@ -49,7 +50,7 @@ class GlobalState:
         """Getter for effective log level of loggerattribute."""
         return self.logger.getEffectiveLevel()
     
-    def getLogger(self, module_name=None):
+    def getLogger(self, module_name = None):
         """Return a logger based on the module name."""
         if module_name is None:
             module_name = __name__
@@ -64,3 +65,11 @@ class GlobalState:
         """Getter for which LLM is used for queries"""
         return self.llm
     
+    def set_backend_api_ep(self, be_api_ep=None):
+        """Set backend API endpoint"""
+        self.backend_api_ep = be_api_ep
+
+    def get_backend_api_ep(self):
+        """Getter for backend API endpoint"""
+        return self.backend_api_ep
+