Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Political Speech Semantic Map Gallery</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| /* Adding additional styles for new analysis section */ | |
| .analysis-section { | |
| margin-top: 40px; | |
| } | |
| .analysis-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .analysis-item { | |
| background: white; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .analysis-preview { | |
| position: relative; | |
| padding-top: 56.25%; /* 16:9 aspect ratio */ | |
| height: 0; | |
| } | |
| .analysis-preview iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| /* New styles for LLM comparison section */ | |
| .llm-comparison { | |
| margin-top: 40px; | |
| } | |
| .llm-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .llm-item { | |
| background: white; | |
| border-radius: 8px; | |
| padding: 15px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .llm-item img { | |
| width: 100%; | |
| height: auto; | |
| border-radius: 4px; | |
| } | |
| .llm-item h4 { | |
| margin: 10px 0; | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Political Speech Semantic Map Gallery</h1> | |
| <p class="subtitle">Explore visual topic modeling of political speeches</p> | |
| </header> | |
| <div class="container"> | |
| <!-- Original gallery content --> | |
| <div class="gallery"> | |
| <div class="map-item"> | |
| <div class="map-preview"> | |
| <iframe src="trump_speeches.html"></iframe> | |
| <div class="map-overlay"> | |
| <a href="#" class="view-button" data-map="trump_speeches.html">View Map</a> | |
| </div> | |
| </div> | |
| <div class="map-info"> | |
| <h2>Trump Speeches Analysis</h2> | |
| <p>Visual topic modeling of Trump's speeches, with metadata about which parts of his speeches discuss each topic.</p> | |
| </div> | |
| </div> | |
| <div class="map-item"> | |
| <div class="map-preview"> | |
| <iframe src="inaugural_speeches_map.html"></iframe> | |
| <div class="map-overlay"> | |
| <a href="#" class="view-button" data-map="inaugural_speeches_map.html">View Map</a> | |
| </div> | |
| </div> | |
| <div class="map-info"> | |
| <h2>US Presidential Inaugural Speeches</h2> | |
| <p>Visual topic modeling of various US presidential inaugural speeches throughout history.</p> | |
| </div> | |
| </div> | |
| <div class="map-item"> | |
| <div class="map-preview"> | |
| <iframe src="inaugural_speeches_map_new_chunking.html"></iframe> | |
| <div class="map-overlay"> | |
| <a href="#" class="view-button" data-map="inaugural_speeches_map_new_chunking.html">View Map</a> | |
| </div> | |
| </div> | |
| <div class="map-info"> | |
| <h2>US Presidential Inaugural Speeches v2</h2> | |
| <p>Visual topic modeling of various US presidential inaugural speeches throughout history. Chunking 4|1. Model: all-mpnet-base-v2</p> | |
| </div> | |
| </div> | |
| <div class="map-item"> | |
| <div class="map-preview"> | |
| <iframe src="inaugural_unity.html"></iframe> | |
| <div class="map-overlay"> | |
| <a href="#" class="view-button" data-map="inaugural_unity.html">View Map</a> | |
| </div> | |
| </div> | |
| <div class="map-info"> | |
| <h2>US Presidential Inaugural Speeches Bourdieu Map</h2> | |
| <p>VTM with unity-division international-domestic axis. model: all-mpnet-base-v2</p> | |
| </div> | |
| </div> | |
| <div class="map-item"> | |
| <div class="map-preview"> | |
| <iframe src="topic_analysis_plot.html"></iframe> | |
| <div class="map-overlay"> | |
| <a href="#" class="view-button" data-map="topic_analysis_plot.html">View Plot</a> | |
| </div> | |
| </div> | |
| <div class="map-info"> | |
| <h2>Topic Distribution Analysis</h2> | |
| <p>Comparison of topic distributions between Trump, Republican, and Democratic speeches.</p> | |
| </div> | |
| <div class="stats"> | |
| <p><strong>Chi-square statistic:</strong> 50.52226900766782</p> | |
| <p><strong>p-value:</strong> 1.1307886006522511e-06</p> | |
| <p><strong>Interpretation:</strong> There is a statistically significant difference in topic distribution across political sides.</p> | |
| </div> | |
| </div> | |
| <!-- New Multi-President Analysis --> | |
| <div class="map-item"> | |
| <div class="map-preview"> | |
| <iframe src="multi_pres_mpnet_4prez.html"></iframe> | |
| <div class="map-overlay"> | |
| <a href="#" class="view-button" data-map="multi_pres_mpnet_4prez.html">View Map</a> | |
| </div> | |
| </div> | |
| <div class="map-info"> | |
| <h2>Multi-President Speech Analysis</h2> | |
| <p>Comparative analysis of speeches from Trump, Reagan, Obama, and Roosevelt using all-mpnet-base-v2 model with 15 clusters.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analysis Section --> | |
| <div class="analysis-section"> | |
| <h2>Trump vs Harris Speech Analysis</h2> | |
| <h3>Dimension Comparisons</h3> | |
| <div class="analysis-grid"> | |
| <div class="analysis-item"> | |
| <div class="analysis-preview"> | |
| <iframe src="comparison_power_projection_20241112_231103.html"></iframe> | |
| </div> | |
| </div> | |
| <div class="analysis-item"> | |
| <div class="analysis-preview"> | |
| <iframe src="comparison_unity_message_20241112_231103.html"></iframe> | |
| </div> | |
| </div> | |
| <div class="analysis-item"> | |
| <div class="analysis-preview"> | |
| <iframe src="comparison_future_vision_20241112_231103.html"></iframe> | |
| </div> | |
| </div> | |
| <div class="analysis-item"> | |
| <div class="analysis-preview"> | |
| <iframe src="comparison_emotional_resonance_20241112_231103.html"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <h3>Individual Speaker Analysis</h3> | |
| <div class="analysis-grid"> | |
| <div class="analysis-item"> | |
| <div class="analysis-preview"> | |
| <iframe src="speaker_trump_20241112_231103.html"></iframe> | |
| </div> | |
| </div> | |
| <div class="analysis-item"> | |
| <div class="analysis-preview"> | |
| <iframe src="speaker_harris_20241112_231103.html"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- LLM vs Human Labeling Comparison Section --> | |
| <div class="llm-comparison"> | |
| <h2>LLM vs Human Labeling Comparison</h2> | |
| <h3>Harris Defeat Speech Analysis</h3> | |
| <div class="llm-grid"> | |
| <div class="llm-item"> | |
| <img src="Unity message - Harris defeat speech.png" alt="Unity Message Analysis - Harris"> | |
| <h4>Unity Message Analysis</h4> | |
| </div> | |
| <div class="llm-item"> | |
| <img src="Emotional resonance - Harris defeat speech.png" alt="Emotional Resonance Analysis - Harris"> | |
| <h4>Emotional Resonance Analysis</h4> | |
| </div> | |
| <div class="llm-item"> | |
| <img src="Future vision - Harris defeat speech.png" alt="Future Vision Analysis - Harris"> | |
| <h4>Future Vision Analysis</h4> | |
| </div> | |
| <div class="llm-item"> | |
| <img src="Power projection - Harris defeat speech.png" alt="Power Projection Analysis - Harris"> | |
| <h4>Power Projection Analysis</h4> | |
| </div> | |
| </div> | |
| <h3>Trump Victory Speech Analysis</h3> | |
| <div class="llm-grid"> | |
| <div class="llm-item"> | |
| <img src="Unity message - Trump Victory speech.png" alt="Unity Message Analysis - Trump"> | |
| <h4>Unity Message Analysis</h4> | |
| </div> | |
| <div class="llm-item"> | |
| <img src="Pwer projection - Trump victory speech.png" alt="Power Projection Analysis - Trump"> | |
| <h4>Power Projection Analysis</h4> | |
| </div> | |
| <div class="llm-item"> | |
| <img src="Emotional resonance - Trump Victory speech.png" alt="Emotional Resonance Analysis - Trump"> | |
| <h4>Emotional Resonance Analysis</h4> | |
| </div> | |
| <div class="llm-item"> | |
| <img src="Future vision- Trump Victory speech.png" alt="Future Vision Analysis - Trump"> | |
| <h4>Future Vision Analysis</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="mapModal" class="modal"> | |
| <span class="close-modal">×</span> | |
| <div class="modal-content"> | |
| <iframe id="modalIframe" src=""></iframe> | |
| </div> | |
| </div> | |
| <script> | |
| const modal = document.getElementById('mapModal'); | |
| const modalIframe = document.getElementById('modalIframe'); | |
| const viewButtons = document.querySelectorAll('.view-button'); | |
| const closeModal = document.querySelector('.close-modal'); | |
| viewButtons.forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const mapSrc = button.getAttribute('data-map'); | |
| modalIframe.src = mapSrc; | |
| modal.style.display = 'block'; | |
| }); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| modal.style.display = 'none'; | |
| modalIframe.src = ''; | |
| }); | |
| window.addEventListener('click', (e) => { | |
| if (e.target == modal) { | |
| modal.style.display = 'none'; | |
| modalIframe.src = ''; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |