Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Manifesto Explainer</title> | |
| <!-- Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Chart.js & WordCloud extension --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://unpkg.com/chartjs-chart-wordcloud@4.0.0/build/index.umd.js"></script> | |
| <!-- Marked.js for Markdown parsing --> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <!-- Custom CSS --> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="background-shapes"> | |
| <div class="shape shape-1"></div> | |
| <div class="shape shape-2"></div> | |
| <div class="shape shape-3"></div> | |
| </div> | |
| <div class="container"> | |
| <header> | |
| <h1>🏛️ Manifesto Analysis Platform</h1> | |
| <p>Gain insights into political manifestos securely and quickly. Upload a PDF and extract concise summaries, contextual topics, and advanced metrics.</p> | |
| </header> | |
| <main> | |
| <section class="glass-panel input-section"> | |
| <form id="uploadForm"> | |
| <div class="form-group"> | |
| <label for="pdfFile">Upload Manifesto PDF</label> | |
| <input type="file" id="pdfFile" accept=".pdf"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="searchTerm">Search Term</label> | |
| <input type="text" id="searchTerm" placeholder="e.g. government, healthcare..." value="government" required> | |
| </div> | |
| <button type="submit" id="analyzeBtn"> | |
| <span class="btn-text">Analyze Manifesto</span> | |
| <span class="spinner hidden"></span> | |
| </button> | |
| </form> | |
| <div class="examples-section"> | |
| <h3>Try these examples:</h3> | |
| <div class="examples-list"> | |
| <button class="example-btn" data-file="Example/AAP_Manifesto_2019.pdf" data-search="government">AAP Manifesto (2019) - "government"</button> | |
| <button class="example-btn" data-file="Example/Bjp_Manifesto_2019.pdf" data-search="environment">BJP Manifesto (2019) - "environment"</button> | |
| <button class="example-btn" data-file="Example/Congress_Manifesto_2019.pdf" data-search="safety">Congress Manifesto (2019) - "safety"</button> | |
| </div> | |
| </div> | |
| </section> | |
| <div id="resultsArea" class="hidden"> | |
| <div class="tabs"> | |
| <button class="tab-btn active" data-tab="summary">Executive Summary</button> | |
| <button class="tab-btn" data-tab="search">Search Results</button> | |
| <button class="tab-btn" data-tab="topics">Key Topics</button> | |
| <button class="tab-btn" data-tab="visualizations">Visualizations</button> | |
| <button class="back-btn" onclick="showInputForm()">← Analyze Another</button> | |
| </div> | |
| <div class="tab-content"> | |
| <div id="summary" class="tab-pane active glass-panel"> | |
| <h2>Executive Summary</h2> | |
| <div id="summaryContent" class="markdown-body"></div> | |
| </div> | |
| <div id="search" class="tab-pane glass-panel"> | |
| <h2>Context Based Search Results</h2> | |
| <div id="searchContent" class="markdown-body"></div> | |
| </div> | |
| <div id="topics" class="tab-pane glass-panel"> | |
| <h2>Most Relevant Topics</h2> | |
| <div class="topics-grid" id="topicsContent"></div> | |
| </div> | |
| <div id="visualizations" class="tab-pane"> | |
| <div class="viz-grid"> | |
| <div class="glass-panel chart-container"> | |
| <h3>Sentiment Analysis</h3> | |
| <canvas id="sentimentChart"></canvas> | |
| </div> | |
| <div class="glass-panel chart-container"> | |
| <h3>Subjectivity Analysis</h3> | |
| <canvas id="subjectivityChart"></canvas> | |
| </div> | |
| <div class="glass-panel chart-container"> | |
| <h3>Word Cloud</h3> | |
| <canvas id="wordCloudChart"></canvas> | |
| </div> | |
| <div class="glass-panel chart-container"> | |
| <h3>Frequency Distribution</h3> | |
| <canvas id="frequencyChart"></canvas> | |
| </div> | |
| <div class="glass-panel chart-container full-width"> | |
| <h3>Dispersion Plot</h3> | |
| <canvas id="dispersionChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- If deploying frontend separately (e.g. Cloudflare), set your backend URL here --> | |
| <script>window.BACKEND_URL = "https://sa-m-manifesto-explainer-cc1d45d.hf.space";</script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |