Hugging Face's logo

Spaces:
Alcime
/
trump_maps
Running

App Files Community
Alcime commited on
Commit
6649eca
•
1 Parent(s): 08932e9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +74 -1
index.html CHANGED
@@ -6,6 +6,36 @@
6
  <title>Political Speech Semantic Map Gallery</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body>
11
  <header>
@@ -13,6 +43,7 @@
13
  <p class="subtitle">Explore visual topic modeling of political speeches</p>
14
  </header>
15
  <div class="container">
 
16
  <div class="gallery">
17
  <div class="map-item">
18
  <div class="map-preview">
@@ -38,7 +69,7 @@
38
  <p>Visual topic modeling of various US presidential inaugural speeches throughout history.</p>
39
  </div>
40
  </div>
41
- <div class="map-item">
42
  <div class="map-preview">
43
  <iframe src="inaugural_speeches_map_new_chunking.html"></iframe>
44
  <div class="map-overlay">
@@ -80,6 +111,48 @@
80
  </div>
81
  </div>
82
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  </div>
84
 
85
  <div id="mapModal" class="modal">
 
6
  <title>Political Speech Semantic Map Gallery</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
9
+ <style>
10
+ /* Adding additional styles for new analysis section */
11
+ .analysis-section {
12
+ margin-top: 40px;
13
+ }
14
+ .analysis-grid {
15
+ display: grid;
16
+ grid-template-columns: repeat(2, 1fr);
17
+ gap: 20px;
18
+ margin-bottom: 20px;
19
+ }
20
+ .analysis-item {
21
+ background: white;
22
+ border-radius: 8px;
23
+ overflow: hidden;
24
+ }
25
+ .analysis-preview {
26
+ position: relative;
27
+ padding-top: 56.25%; /* 16:9 aspect ratio */
28
+ height: 0;
29
+ }
30
+ .analysis-preview iframe {
31
+ position: absolute;
32
+ top: 0;
33
+ left: 0;
34
+ width: 100%;
35
+ height: 100%;
36
+ border: none;
37
+ }
38
+ </style>
39
  </head>
40
  <body>
41
  <header>
 
43
  <p class="subtitle">Explore visual topic modeling of political speeches</p>
44
  </header>
45
  <div class="container">
46
+ <!-- Original gallery content -->
47
  <div class="gallery">
48
  <div class="map-item">
49
  <div class="map-preview">
 
69
  <p>Visual topic modeling of various US presidential inaugural speeches throughout history.</p>
70
  </div>
71
  </div>
72
+ <div class="map-item">
73
  <div class="map-preview">
74
  <iframe src="inaugural_speeches_map_new_chunking.html"></iframe>
75
  <div class="map-overlay">
 
111
  </div>
112
  </div>
113
  </div>
114
+
115
+ <!-- New Analysis Section -->
116
+ <div class="analysis-section">
117
+ <h2>Trump vs Harris Speech Analysis</h2>
118
+ <h3>Dimension Comparisons</h3>
119
+ <div class="analysis-grid">
120
+ <div class="analysis-item">
121
+ <div class="analysis-preview">
122
+ <iframe src="comparison_power_projection_20241112_231103.html"></iframe>
123
+ </div>
124
+ </div>
125
+ <div class="analysis-item">
126
+ <div class="analysis-preview">
127
+ <iframe src="comparison_unity_message_20241112_231103.html"></iframe>
128
+ </div>
129
+ </div>
130
+ <div class="analysis-item">
131
+ <div class="analysis-preview">
132
+ <iframe src="comparison_future_vision_20241112_231103.html"></iframe>
133
+ </div>
134
+ </div>
135
+ <div class="analysis-item">
136
+ <div class="analysis-preview">
137
+ <iframe src="comparison_emotional_resonance_20241112_231103.html"></iframe>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <h3>Individual Speaker Analysis</h3>
143
+ <div class="analysis-grid">
144
+ <div class="analysis-item">
145
+ <div class="analysis-preview">
146
+ <iframe src="speaker_trump_20241112_231103.html"></iframe>
147
+ </div>
148
+ </div>
149
+ <div class="analysis-item">
150
+ <div class="analysis-preview">
151
+ <iframe src="speaker_harris_20241112_231103.html"></iframe>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
  </div>
157
 
158
  <div id="mapModal" class="modal">