aus10powell's picture
Update templates/index.html
17fc7b7
<!DOCTYPE html>
<html>
<head>
<title>Twitter Accounts</title>
<meta charset="UTF-8">
<meta name="description" content="This is a simple webpage that is included in my Twitter Account Project">
<link rel="stylesheet" type="text/css" href="../static/style.css">
<link rel="shortcut icon" type="image/x-icon" href="../static/tweepy.ico">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<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>
<option value="elonmusk">elonmusk</option>
<option value="BarackObama">BarackObama</option>
<option value="taylorlorenz">taylorlorenz</option>
<option value="cathiedwood">cathiedwood</option>
<option value="ylecun">ylecun</option>
</select>
<textarea id="input" placeholder="Enter text here...">I am Lorde Ya Ya Ya</textarea>
<button id="generate">Generate</button>
<textarea id="output" placeholder="Generated text will appear here (takes 30-40seconds)..."></textarea>
</div>
<div id="form">
<div class="tweets">
<h2>Tweets (Live)</h2>
<iframe id="tweetsFrame" width="850" height="300" frameborder="0"></iframe>
</div>
<div id="summary">
<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>
<div class="inner">
<p align="center"><iframe src="/examples1" width=850 height="450" frameborder="0"></iframe></p>
</div>
<div class="inner">
<p align="center"><iframe src="/examples2" width=900 height="550" frameborder="0"></iframe></p>
</div>
</div>
</div>
<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 () {
generateTweets(); // Call generateTweets() whenever a new account is selected
});
</script>
</html>