Compare commits
26 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9203641e6a | |||
| 14eaf57335 | |||
| 9ae5840e8b | |||
| 659b0937d3 | |||
| 7bc8a129c6 | |||
| a12c11c058 | |||
| 5771e52c49 | |||
| d038f1ac24 | |||
| 86374c91fe | |||
| 0adbb9c222 | |||
| c3d7f3ba4f | |||
| d864d7529a | |||
| 0b971dffc4 | |||
| ecf45bd2e7 | |||
| b88e573761 | |||
| ecf2ddf46e | |||
| b4a35bafef | |||
| de3e59afea | |||
| 9f5bdddb8f | |||
| 854ebbdd94 | |||
| 7d954e7380 | |||
| d843a2b74c | |||
| ab94c06e75 | |||
| 1757542077 | |||
| 941b426574 | |||
| 534874e810 |
@@ -11,12 +11,12 @@ backend:
|
||||
ollama:
|
||||
url: "http://localhost:11434"
|
||||
api_key: "${OLLAMA_API_KEY}" # Refer to environment variable
|
||||
# model: "phi3:mini" # Select a model supported by the Ollama server
|
||||
model: "phi3:mini" # Select a model supported by the Ollama server
|
||||
# model: "llama3:70b" # Select a model supported by the Ollama server
|
||||
# model: "llama3:latest" # Select a model supported by the Ollama server
|
||||
# model: "mannix/llama3-8b-ablitered-v3:latest" # Select a model supported by the Ollama server
|
||||
# model: "mistral-nemo:latest" # Select a model supported by the Ollama server
|
||||
model: "gemma2:27b"
|
||||
# model: "gemma2:27b"
|
||||
|
||||
# Logging – comment out the whole section for default level which is INFO
|
||||
logging:
|
||||
|
||||
+64
-25
@@ -1,17 +1,19 @@
|
||||
|
||||
# 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
|
||||
import logging
|
||||
import os
|
||||
# from utils import set_local_logger
|
||||
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
|
||||
|
||||
|
||||
# Find out the path to current directory according to the Python interpreter (venv)
|
||||
logger.debug("Current working directory: %s", os.getcwd())
|
||||
@@ -20,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('/')
|
||||
@@ -28,15 +39,35 @@ 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()
|
||||
logger.debug("Client HTML (first few characters): %s", client_html[:50]) # Print to see if it's loading
|
||||
# logger.debug("Client HTML (all characters): %s", client_html) # Print to see if it's loading
|
||||
|
||||
return render_template('index.html', api_endpoint=api_endpoint, client_content=client_html)
|
||||
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):
|
||||
@@ -56,6 +87,7 @@ CORS(app, resources={
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@app.route('/api/chat', methods=['POST'])
|
||||
def chat(url_server = "http://localhost:11434/api/generate", model = "phi3:mini"):
|
||||
"""
|
||||
@@ -69,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))
|
||||
try:
|
||||
url = url_server
|
||||
model_to_use = model
|
||||
data = {
|
||||
"model": model_to_use,
|
||||
'prompt': 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
|
||||
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))
|
||||
@@ -100,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
|
||||
@@ -114,13 +155,11 @@ def smartassist():
|
||||
return jsonify({"response": response})
|
||||
|
||||
def get_response(user_query):
|
||||
# Create a client object for interacting with OLLAMA API
|
||||
client = Client()
|
||||
# Generate and retrieve the response based on user's query
|
||||
response = client.generate_response(user_query)
|
||||
# Return the generated response
|
||||
client = Client() # Create a client object for interacting with OLLAMA API
|
||||
response = client.generate_response(user_query) # Generate and retrieve the response based on user's query
|
||||
return response
|
||||
|
||||
|
||||
def run_flask(fport=5005):
|
||||
"""
|
||||
Starts the Flask server
|
||||
|
||||
@@ -12,22 +12,50 @@
|
||||
<!-- messages will be rendered here -->
|
||||
</div>
|
||||
<textarea id="userInput" placeholder="Type your message..." rows="5"></textarea>
|
||||
<button onclick="sendMessage()">Send</button>
|
||||
<button id="sendButton" onclick="sendMessage()">Send</button>
|
||||
|
||||
<!-- Get the apiEndpoint -->
|
||||
<script>
|
||||
<!-- Get the apiEndpoint and the useModel -->
|
||||
<!-- <script>
|
||||
const apiEndpoint = window.apiEndpoint;
|
||||
// Debugging – log messages
|
||||
// if (apiEndpoint) {
|
||||
// console.log("client.html - apiEndpoint: ", apiEndpoint);
|
||||
// }
|
||||
// else {
|
||||
// console.log("client.html - cannot find apiEndpoint");
|
||||
// }
|
||||
const useModel = window.useModel;
|
||||
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>
|
||||
|
||||
|
||||
|
||||
<!-- Include MathJax library to render mathematical notation -->
|
||||
<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 backene -->
|
||||
<script src="/js/frontend.js"></script>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const chatContainer = document.getElementById('chatbox');
|
||||
@@ -45,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();
|
||||
}
|
||||
@@ -53,6 +81,8 @@
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Get the javascript handling communication with the backend -->
|
||||
<script src="/js/frontend.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -52,42 +52,52 @@ 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 in config file
|
||||
if isinstance(updated_config['backend'].get('url'), str): # Look for 'url' key in config file
|
||||
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 in config file
|
||||
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)
|
||||
####################################
|
||||
if isinstance(updated_config.get('ollama'), dict): # Look for 'ollama' key
|
||||
if isinstance(updated_config['ollama'].get('model'), str): # Look for 'model' key
|
||||
model_to_use = updated_config['ollama'].get('model')
|
||||
global_state.set_llm(model_to_use)
|
||||
logger.debug("configure(): LLM is set to: %s",global_state.get_llm())
|
||||
|
||||
return updated_config
|
||||
|
||||
|
||||
def start_frontend(config):
|
||||
parsed_url = urllib.parse.urlparse(config['frontend']['url'])
|
||||
hostname = parsed_url.netloc.split(':')[0] # Split by ':' and take the first part, i.e., 'localhost', IP, or domain name
|
||||
port = parsed_url.port # This is the server port
|
||||
# def start_frontend(config):
|
||||
# parsed_url = urllib.parse.urlparse(config['frontend']['url'])
|
||||
# hostname = parsed_url.netloc.split(':')[0] # Split by ':' and take the first part, i.e., 'localhost', IP, or domain name
|
||||
# port = parsed_url.port # This is the server port
|
||||
|
||||
# Use the socket module in Python to check whether a port is in use,
|
||||
# which would indicate that a server is already running on that port.
|
||||
with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
|
||||
try:
|
||||
s.bind((hostname, port))
|
||||
logger.debug("No server is running on %s -— starting one.", parsed_url.netloc)
|
||||
# Start frontend (web server) as a separate process
|
||||
subprocess.Popen(["python", "-m", "http.server", str(port)])
|
||||
except socket.error as e:
|
||||
if e.errno == 48:
|
||||
logger.debug("A server is already running on %s -— will use this.", parsed_url.netloc)
|
||||
else:
|
||||
raise # Unexpected error, re-raise it so we can see the traceback
|
||||
except Exception as e:
|
||||
logger.error("Failed to start frontend: %s", str(e)) # Corresponds to print(f"Failed to start frontend: {e}")
|
||||
# # Use the socket module in Python to check whether a port is in use,
|
||||
# # which would indicate that a server is already running on that port.
|
||||
# with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
|
||||
# try:
|
||||
# s.bind((hostname, port))
|
||||
# logger.debug("No server is running on %s -— starting one.", parsed_url.netloc)
|
||||
# # Start frontend (web server) as a separate process
|
||||
# subprocess.Popen(["python", "-m", "http.server", str(port)])
|
||||
# except socket.error as e:
|
||||
# if e.errno == 48:
|
||||
# logger.debug("A server is already running on %s -— will use this.", parsed_url.netloc)
|
||||
# else:
|
||||
# raise # Unexpected error, re-raise it so we can see the traceback
|
||||
# except Exception as e:
|
||||
# logger.error("Failed to start frontend: %s", str(e)) # Corresponds to print(f"Failed to start frontend: {e}")
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -14,14 +14,18 @@ h1 {
|
||||
}
|
||||
|
||||
#chatbox {
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
background-color: #fff;
|
||||
width: calc(50% - 60px); /* Adjust width for input and button */
|
||||
/* max-width: 500px; */
|
||||
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 {
|
||||
@@ -36,7 +40,8 @@ h1 {
|
||||
}
|
||||
|
||||
.ai-response {
|
||||
background-color: #f0f8ff;
|
||||
/* background-color: #f0f8ff; */
|
||||
background-color: #f5ecd0;
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
text-align: left; /* Align AI responses to the left */
|
||||
@@ -48,6 +53,7 @@ h1 {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Courier New', Courier, monospace; /* Fixed width typeface */
|
||||
}
|
||||
|
||||
#userInput:focus {
|
||||
@@ -66,4 +72,14 @@ button[onclick="sendMessage()"] {
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s; /* Smooth transition effect */
|
||||
}
|
||||
|
||||
button[onclick="sendMessage()"]:hover {
|
||||
background-color: #b2b2b2; /* Light Grey on hover */
|
||||
}
|
||||
|
||||
button[onclick="sendMessage()"]:active {
|
||||
background-color: #6f6f6f; /* Dark Grey when clicked */
|
||||
}
|
||||
|
||||
|
||||
@@ -1,51 +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']);
|
||||
|
||||
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
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// 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(window.apiEndpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query, model: "phi3:mini" }), // Add these parameters here
|
||||
// body: JSON.stringify({ query, url_server: "http://your-custom-url", model: "phi3:mini" }), // Add these parameters here
|
||||
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
|
||||
renderMessage(query, 'user-message');
|
||||
|
||||
this.renderMessage(query, 'user-message');
|
||||
// Render the AI's response in the chatbox
|
||||
renderMessage(aiResponse, 'ai-response');
|
||||
|
||||
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;
|
||||
|
||||
// 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
|
||||
}
|
||||
});
|
||||
document.addEventListener('keyup', function() {
|
||||
sendButton.style.backgroundColor = ''; // Restore the original style when any key is released
|
||||
});
|
||||
|
||||
@@ -15,12 +15,27 @@
|
||||
srcdoc="{{ client_content }}">
|
||||
</iframe>
|
||||
|
||||
<script>
|
||||
<!-- <script>
|
||||
// Extract apiEndpoint for use in your frontend code...
|
||||
const apiEndpoint = '{{ api_endpoint }}'; // Templating syntax (Jinja2)
|
||||
// Tell the iframe about the apiEndpoing
|
||||
const useModel = '{{ use_model }}'; // Templating syntax (Jinja2)
|
||||
// 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 -->
|
||||
|
||||
@@ -24,6 +24,8 @@ class GlobalState:
|
||||
cls._instance.logger.addHandler(handler)
|
||||
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):
|
||||
@@ -48,9 +50,26 @@ 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__
|
||||
logger = logging.getLogger(module_name)
|
||||
return logger
|
||||
|
||||
def set_llm(self, model_name="phi3:mini"):
|
||||
"""Set LLM for queries"""
|
||||
self.llm = model_name
|
||||
|
||||
def get_llm(self):
|
||||
"""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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user