joakimp/python_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fortsatta försök att få med api_endpoint genom Flask till frontend.js där den behövs

Browse Source
This commit is contained in:
Joakim Persson
2024-07-25 22:55:21 +02:00
parent ccc8e73f48
commit 20fa94f533
3 changed files with 111 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
smartassist/src/backend.py
+2 -2
View File
@@ -33,8 +33,8 @@ def index():
logger.debug("API endpoint: %s", api_endpoint)
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 (first few characters): %s", client_html) # Print to see if it's loading
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)
smartassist/src/static/js/frontend.js
+92 -6
View File
@@ -4,10 +4,80 @@ const chatbox = document.getElementById('chatbox');
const userInput = document.getElementById('userInput');
// Get API endpoint for chat from environment variable
const apiEndpoint = process.env.BE_API_ENDPOINT || 'http://localhost:5005/api/chat'; // Default if not found
console.log("The API Endpoint is:", apiEndpoint);
// const apiEndpoint = process.env.BE_API_ENDPOINT || 'http://localhost:5005/api/chat'; // Default if not found
// const apiEndpoint = '<%= api_endpoint %>'; // Templating syntax (Jinja2)
// const iframe = document.getElementById('client-frame');
// const apiEndpoint = iframe.getAttribute('data-api-endpoint');
// console.log("frontend.js - the API Endpoint is:", apiEndpoint);
// document.addEventListener('DOMContentLoaded', () => {
// const iframe = document.getElementById('client-frame');
// const iframeContentUrl = iframe.srcdoc;
// // Extract the query parameter 'apiEndpoint' from the URL
// const urlParams = new URLSearchParams(iframeContentUrl.split('?')[1]);
// const apiEndpoint = urlParams.get('apiEndpoint');
// console.log("frontend.js - The API Endpoint is:", apiEndpoint);
// });
// document.addEventListener('DOMContentLoaded', () => {
// setTimeout(() => {
// const iframe = document.getElementById('client-frame');
// if (iframe) {
// const iframeContentUrl = iframe.srcdoc;
// // Extract the query parameter 'apiEndpoint' from the URL
// const urlParams = new URLSearchParams(iframeContentUrl.split('?')[1]);
// const apiEndpoint = urlParams.get('apiEndpoint'); } else {
// console.error("Error: iframe element not found.");
// }
// }, 100); // Adjust this delay (in milliseconds) if needed
// });
// const observer = new MutationObserver(() => {
// const iframe = document.getElementById('client-frame');
// if (iframe) {
// console.log("iframe DO exist")
// if (iframe.srcdoc) {
// console.log("srcdoc exist")
// // Extract the query parameter 'apiEndpoint' from the URL
// const urlParams = new URLSearchParams(iframe.srcdoc.split('?')[1]);
// const apiEndpoint = urlParams.get('apiEndpoint');
// console.log("frontend.js - The API Endpoint is:", apiEndpoint);
// }
// else {
// console.error("Error: iframe.srcdoc not found.");
// observer.disconnect(); // Stop observing once you've extracted the data
// }
// }
// else {
// console.error("Error: iframe DOES NOT exist.");
// observer.disconnect(); // Stop observing once you've extracted the data
// }
// if (iframe && iframe.srcdoc) { // Check if iframe exists and srcdoc is populated
// const iframeContentUrl = iframe.srcdoc;
// // Extract the query parameter 'apiEndpoint' from the URL
// const urlParams = new URLSearchParams(iframeContentUrl.split('?')[1]);
// const apiEndpoint = urlParams.get('apiEndpoint');
// }
// else {
// console.error("Error: iframe element not found.");
// observer.disconnect(); // Stop observing once you've extracted the data
// }
// });
// observer.observe(document.body, { childList: true, subtree: true });
// Handle resize events
window.addEventListener('resize', () => {
chatbox.style.height = 'auto';
});
// ... other code for sending messages ...
// Define a function to send the user's message to the AI
function sendMessage() {
@@ -18,7 +88,7 @@ function sendMessage() {
if (query !== '') {
// Send a POST request to the /api/chat endpoint with the message
// fetch('http://localhost:5005/api/chat', {
fetch(apiEndpoint, {
fetch(`${apiEndpoint}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query }),
@@ -41,9 +111,6 @@ function sendMessage() {
}
}
// 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
@@ -58,3 +125,22 @@ function renderMessage(text, className) {
// Append the message element to the chatbox
chatbox.appendChild(messageElement);
}
function handleIframeLoad() {
const iframe = document.getElementById('client-frame');
if (iframe) { // Check if the iframe exists
const apiEndpoint = iframe.getAttribute('data-api-endpoint') || iframe.srcdoc.split('?')[1].split('=')[1];
console.log("The API Endpoint is:", apiEndpoint);
// Now you can use this 'apiEndpoint' for communication
} else {
setTimeout(handleIframeLoad, 200); // Retry in a short while if iframe not found yet
console.log("iframe not found yet");
}
}
window.addEventListener('load', handleIframeLoad);
smartassist/src/templates/index.html
+17 -12
View File
@@ -4,25 +4,30 @@
<!-- <title>Frontend</title> -->
</head>
<body>
<script>
// Extract apiEndpoint for use in your frontend code...
const apiEndpoint = '{{ api_endpoint }}'; // Templating syntax (Jinja2)
console.log("index.html - API Endpoint: ", apiEndpoint);
</script>
<!-- This iframe will hold the content from client.html -->
<iframe id="client-frame" style="width: 100%; height: 100vh;" srcdoc="{{ client_content }}"></iframe>
<!-- Passing the API endpoint as a query parameter to the srcdoc attribute -->
<iframe id="client-frame"
style="width: 100%; height: 100vh;"
srcdoc="{{ client_content }}?apiEndpoint={{ api_endpoint }}/">
</iframe>
<!-- Responsive scaling and some padding -->
<script>
const clientFrame = document.getElementById('client-frame');
const clientFrame = document.getElementById('client-frame');
function resizeIframe() {
clientFrame.style.height = window.innerHeight - 50 + 'px'; // Adjust the subtraction for padding/margins if needed
}
function resizeIframe() {
clientFrame.style.height = window.innerHeight - 50 + 'px'; // Adjust the subtraction for padding/margins if needed
}
window.addEventListener('resize', resizeIframe);
resizeIframe(); // Call it once on page load
window.addEventListener('resize', resizeIframe);
resizeIframe(); // Call it once on page load
</script>
<script>
const apiEndpoint = '<%= api_endpoint %>'; // Templating syntax (Jinja2)
console.log("API Endpoint:", apiEndpoint);
// Use apiEndpoint in your frontend code...
</script>
</body>
</html>