Gemini API frontend

[NolanYu1111]

1. Establishing API Communication
   You defined pythonURI dynamically to determine whether the application is running locally or on a server:

javascript
Copy
Edit
var pythonURI;
if (location.hostname === "localhost") {
pythonURI = "http://localhost:8202";
} else if (location.hostname === "127.0.0.1") {
pythonURI = "http://127.0.0.1:8202";
} else {
pythonURI = "https://cantella.stu.nighthawkcodingsociety.com";
}
This ensures that API calls are routed correctly depending on the deployment environment.

2. Handling User Input and Sending Questions to the Backend
   The sendQuestion(question) function is responsible for:

Taking user input.
Displaying it in the chatbox.
Sending an API request to fetch a response from your Gemini chatbot.
Dynamically displaying the chatbot’s response.
javascript
Copy
Edit
async function sendQuestion(question) {
const chatBox = document.getElementById("chat-box");

// Display user's question
chatBox.innerHTML += <div data-q="${question}"> <strong>You:</strong> <span class="question-text">${question}</span> <button onclick="deleteQ('${question}')">Delete</button> <button onclick="updateQ('${question}')">Update</button> </div>;

// Send request to backend
const response = await fetch(${pythonURI}/api/ai/help, {
...fetchOptions,
method: "POST",
body: JSON.stringify({ question }),
});

// Get chatbot response and display it
const data = await response.json();
const aiResponse = data.response || "Error: Unable to fetch response.";

chatBox.innerHTML += <div data-r="${question}"> <strong>CanTeach:</strong> <span class="response-text">${aiResponse}</span> </div>;

document.getElementById("question").value = ""; // Clear input field
chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll
}