Sa-m/manifesto-explainer
4
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Manifesto Explainer</title>7 <!-- Fonts -->8 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">9 <!-- Chart.js & WordCloud extension -->10 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>11 <script src="https://unpkg.com/chartjs-chart-wordcloud@4.0.0/build/index.umd.js"></script>12 <!-- Marked.js for Markdown parsing -->13 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>14 <!-- Custom CSS -->15 <link rel="stylesheet" href="style.css">16</head>17<body>18 <div class="background-shapes">19 <div class="shape shape-1"></div>20 <div class="shape shape-2"></div>21 <div class="shape shape-3"></div>22 </div>23 24 <div class="container">25 <header>26 <h1>🏛️ Manifesto Analysis Platform</h1>27 <p>Gain insights into political manifestos securely and quickly. Upload a PDF and extract concise summaries, contextual topics, and advanced metrics.</p>28 </header>29 30 <main>31 <section class="glass-panel input-section">32 <form id="uploadForm">33 <div class="form-group">34 <label for="pdfFile">Upload Manifesto PDF</label>35 <input type="file" id="pdfFile" accept=".pdf">36 </div>37 <div class="form-group">38 <label for="searchTerm">Search Term</label>39 <input type="text" id="searchTerm" placeholder="e.g. government, healthcare..." value="government" required>40 </div>41 <button type="submit" id="analyzeBtn">42 <span class="btn-text">Analyze Manifesto</span>43 <span class="spinner hidden"></span>44 </button>45 </form>46 47 <div class="examples-section">48 <h3>Try these examples:</h3>49 <div class="examples-list">50 <button class="example-btn" data-file="Example/AAP_Manifesto_2019.pdf" data-search="government">AAP Manifesto (2019) - "government"</button>51 <button class="example-btn" data-file="Example/Bjp_Manifesto_2019.pdf" data-search="environment">BJP Manifesto (2019) - "environment"</button>52 <button class="example-btn" data-file="Example/Congress_Manifesto_2019.pdf" data-search="safety">Congress Manifesto (2019) - "safety"</button>53 </div>54 </div>55 </section>56 57 <div id="resultsArea" class="hidden">58 <div class="tabs">59 <button class="tab-btn active" data-tab="summary">Executive Summary</button>60 <button class="tab-btn" data-tab="search">Search Results</button>61 <button class="tab-btn" data-tab="topics">Key Topics</button>62 <button class="tab-btn" data-tab="visualizations">Visualizations</button>63 <button class="back-btn" onclick="showInputForm()">← Analyze Another</button>64 </div>65 66 <div class="tab-content">67 <div id="summary" class="tab-pane active glass-panel">68 <h2>Executive Summary</h2>69 <div id="summaryContent" class="markdown-body"></div>70 </div>71 72 <div id="search" class="tab-pane glass-panel">73 <h2>Context Based Search Results</h2>74 <div id="searchContent" class="markdown-body"></div>75 </div>76 77 <div id="topics" class="tab-pane glass-panel">78 <h2>Most Relevant Topics</h2>79 <div class="topics-grid" id="topicsContent"></div>80 </div>81 82 <div id="visualizations" class="tab-pane">83 <div class="viz-grid">84 <div class="glass-panel chart-container">85 <h3>Sentiment Analysis</h3>86 <canvas id="sentimentChart"></canvas>87 </div>88 <div class="glass-panel chart-container">89 <h3>Subjectivity Analysis</h3>90 <canvas id="subjectivityChart"></canvas>91 </div>92 <div class="glass-panel chart-container">93 <h3>Word Cloud</h3>94 <canvas id="wordCloudChart"></canvas>95 </div>96 <div class="glass-panel chart-container">97 <h3>Frequency Distribution</h3>98 <canvas id="frequencyChart"></canvas>99 </div>100 <div class="glass-panel chart-container full-width">101 <h3>Dispersion Plot</h3>102 <canvas id="dispersionChart"></canvas>103 </div>104 </div>105 </div>106 </div>107 </div>108 </main>109 </div>110 111 <!-- If deploying frontend separately (e.g. Cloudflare), set your backend URL here -->112 <script>window.BACKEND_URL = "https://sa-m-manifesto-explainer-cc1d45d.hf.space";</script>113 <script src="script.js"></script>114</body>115</html>116