Update templates/index.html

templates/index.html

@@ -15,6 +15,10 @@
 	<div class="page">
 		<h1>Twitter Accounts</h1>
 		<div class="form">
+			<div class="inner">
+				<h2>Twitter Account Info (Live)</h2>
+				<iframe src="/accounts" width=850 height="250" frameborder="0"></iframe>
+			</div>
 			<label for="account">Choose the Twitter account you'd like to generate a response to your input:</label>
 			<select name="account" id="account">
 				<option value="alikarimi_ak8">alikarimi_ak8</option>
@@ -31,17 +35,14 @@
 		<div id="form">
 			<div class="tweets">
 				<h2>Tweets (Live)</h2>
-				<iframe id="tweetsFrame" width="850" height="200" frameborder="0"></iframe>
+				<iframe id="tweetsFrame" width="850" height="300" frameborder="0"></iframe>
 			</div>
 
 			<div id="summary">
-				<button id="generate-summary">Generate Summary</button>
-				<textarea id="output-summary" placeholder="Generated text will appear here..."></textarea>
-			</div>
-			<div class="inner">
-				<h2>Twitter Account Info (Live)</h2>
-				<iframe src="/accounts" width=850 height="200" frameborder="0"></iframe>
+				<button id="generateSummary">Generate Summary</button>
+				<textarea id="outputSummary" placeholder="Generated text will appear here..." style="width: 100%; height: 150px;"></textarea>
 			</div>
+
 		</div>
 		<div id="outer">
 			<h2>Twitter Account Analysis (Historical)</h2>
@@ -60,19 +61,71 @@
 
 	<script src="../static/main.js"></script>
 	<script>
+		async function fastApiRequest(path, options) {
+			try {
+				const response = await fetch(path, options);
+				const data = await response.json();
+				return data;
+			} catch (error) {
+				console.error(error);
+			}
+		}
+		function generateTweets() {
+			var account = document.getElementById("account").value;
+			var tweetsFrame = document.getElementById("tweetsFrame");
+			var outputSummary = document.getElementById("outputSummary");
+			outputSummary.value = 'Tweets being pulled and summarized...';
+
+			// Create a new text node
+			var loadingText = document.createTextNode("Loading...");
+
+			// Append the text node to the iframe element
+			tweetsFrame.appendChild(loadingText);
+			// Set the iframe element's visibility to "hidden"
+			//tweetsFrame.style.visibility = "hidden";
+
+
+			// Send an AJAX request to the server to retrieve the tweets data
+			fastApiRequest('/tweets/' + account)
+				.then(response => {
+					var tweetsHtml = response.html;
+					var tweetsData = response.data;
+
+
+					// Display the HTML version of the tweets
+					tweetsFrame.innerHTML = tweetsHtml;
+					//tweetsFrame.src = tweetsHtml;//"/tweets/" + account;
+					tweetsFrame.srcdoc = tweetsHtml;
+					// Log that tweetsFrame is being updated
+					console.log('tweetsFrame is being updated. ');
+
+					// Make a POST request to the /api/generate_summary endpoint
+					fastApiRequest('/api/generate_summary', {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify({ tweetsData: tweetsData })
+					})
+						.then(summaryResponse => {
+							console.log('Summary response:', summaryResponse);
+							// Process the summary response as needed
+							outputSummary.value = summaryResponse.tweets_summary;
+						})
+						.catch(error => {
+							console.error('Failed to generate summary:', error);
+						});
+				})
+				.catch(error => {
+					console.error('Failed to retrieve tweets:', error);
+				});
+		}
+
 		window.onload = function () {
 			generateTweets(); // Call generateTweets() when the page finishes loading
-
 		};
-      		document.getElementById("account").addEventListener("change", function () {
+
+		document.getElementById("account").addEventListener("change", function () {
 			generateTweets(); // Call generateTweets() whenever a new account is selected
 		});
-		function generateTweets() {
-			var account = document.getElementById("account").value;
-			console.log("What up")
-			var tweetsFrame = document.getElementById("tweetsFrame");
-			tweetsFrame.src = "/tweets/" + account;
-			console.log(tweetsFrame.src)
+	</script>
 
-		}</script>
 </html>