File size: 4,373 Bytes
8158335
 
15ffbd1
8158335
1261d76
8158335
1261d76
8158335
 
b6ab90a
15ffbd1
8158335
15ffbd1
8158335
 
70fef7d
8158335
25ee46d
 
 
 
8158335
 
15ffbd1
 
 
 
 
 
8158335
15ffbd1
c34bc94
8158335
 
1261d76
8ba48e6
 
25ee46d
1261d76
8ba48e6
1261d76
25ee46d
 
1261d76
25ee46d
8ba48e6
b6ab90a
1261d76
b6ab90a
15ffbd1
8ba48e6
b6ab90a
 
15ffbd1
8ba48e6
b6ab90a
15ffbd1
b6ab90a
8158335
b6ab90a
 
8158335
8ba48e6
25ee46d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8ba48e6
 
 
25ee46d
 
30403c7
 
25ee46d
15ffbd1
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!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...">Hello world...!?</textarea>
			<button id="generate">Generate</button>
			<textarea id="output" placeholder="Generated text will appear here..."></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>