Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <title>Pengenalan — SentiMeter</title> | |
| <meta name="description" | |
| content="Selamat datang di SentiMeter — Platform analisis sentimen teks Indonesia berbasis model IndoBERT." /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" | |
| rel="stylesheet" /> | |
| <link rel="stylesheet" href="css/style.css" /> | |
| <link rel="stylesheet" href="css/index.css" /> | |
| <link rel="icon" type="image/svg+xml" href="img/logo.svg" /> | |
| </head> | |
| <body> | |
| <div class="layout"> | |
| <div id="sidebar"></div> | |
| <div class="main"> | |
| <div class="topbar"> | |
| <div class="topbar-title">Pengenalan SentiMeter</div> | |
| <div class="topbar-sub">Panduan Lengkap Platform</div> | |
| </div> | |
| <div class="page-body"> | |
| <!-- HERO --> | |
| <section class="ih-hero" id="introHero"> | |
| <div class="ih-hero-glow"></div> | |
| <div class="ih-hero-inner"> | |
| <div class="ih-badge reveal-up" style="--d:0ms">Model IndoBERT · Bahasa Indonesia</div> | |
| <h1 class="ih-title reveal-up" style="--d:80ms"> | |
| Selamat Datang di<br> | |
| <span class="ih-grad">SentiMeter</span> | |
| </h1> | |
| <p class="ih-sub reveal-up" style="--d:180ms"> | |
| Platform analisis sentimen Twitter/X Bahasa Indonesia berbasis kecerdasan buatan.<br> | |
| Keamanan data terjamin dengan <strong>Local Storage</strong> — data Anda tetap di browser Anda. | |
| </p> | |
| <div class="ih-disclaimer reveal-up" style="--d:240ms"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> | |
| <span><strong>Mohon Maaf:</strong> Model machine learning IndoBERT saat ini masih dalam tahap pengembangan, sehingga hasil prediksi mungkin belum sepenuhnya akurat dan terkadang terjadi kesalahan klasifikasi.</span> | |
| </div> | |
| <div class="ih-hero-btns reveal-up" style="--d:300ms"> | |
| <a href="upload" class="btn btn-primary">Mulai Analisis</a> | |
| <a href="#cara-pakai" class="btn btn-ghost" id="learnMoreBtn">Pelajari cara pakai ↓</a> | |
| </div> | |
| <div class="ih-stats reveal-up" style="--d:420ms"> | |
| <div class="ih-stat"><b class="ih-stat-n" data-to="9">0</b><span>Langkah Cleaning</span></div> | |
| <div class="ih-stat-sep"></div> | |
| <div class="ih-stat"><b class="ih-stat-n" data-to="14">0</b><span>Grafik Interaktif</span></div> | |
| <div class="ih-stat-sep"></div> | |
| <div class="ih-stat"><b class="ih-stat-n" data-to="5">0</b><span>Halaman Analisis</span></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CARA PAKAI --> | |
| <section class="ih-section" id="cara-pakai"> | |
| <div class="ih-sec-head reveal-up"> | |
| <p class="ih-sec-label">Cara Penggunaan</p> | |
| <h2>Hanya 3 Langkah Mudah</h2> | |
| <p class="ih-sec-sub">Dari CSV ke insight penuh dalam hitungan menit</p> | |
| </div> | |
| <div class="ih-steps reveal-up" style="--d:100ms"> | |
| <div class="ih-step"> | |
| <div class="ih-step-num blue">01</div> | |
| <h3>Dapatkan Data</h3> | |
| <p>Gunakan tool scraping eksternal (seperti XScraper) untuk mengumpulkan data dari Twitter/X ke format CSV yang kompatibel.</p> | |
| </div> | |
| <div class="ih-step-chevron">›</div> | |
| <div class="ih-step"> | |
| <div class="ih-step-num green">02</div> | |
| <h3>Upload File CSV</h3> | |
| <p>Seret & lepas file CSV ke halaman <strong>Upload Data</strong>. Mendukung file sangat besar (1GB+) dan | |
| banyak file sekaligus.</p> | |
| <a href="upload" class="ih-step-link">Upload Sekarang →</a> | |
| </div> | |
| <div class="ih-step-chevron">›</div> | |
| <div class="ih-step"> | |
| <div class="ih-step-num purple">03</div> | |
| <h3>Analisis Mendalam</h3> | |
| <p>Jelajahi berbagai visualisasi: Dashboard, Analytics, Tabel Data, dan Cleaning Lab yang interaktif.</p> | |
| <a href="dashboard" class="ih-step-link">Mulai Eksplorasi →</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- XSCRAPER --> | |
| <section class="ih-section ih-xs-section" id="xscraper"> | |
| <div class="ih-xs-card reveal-up"> | |
| <div class="ih-xs-left"> | |
| <div class="ih-xs-badge">★ Rekomendasi Tool Scraping</div> | |
| <div class="ih-xs-brand"> | |
| <div> | |
| <h2 class="ih-xs-name">XScraper</h2> | |
| <p class="ih-xs-url">xscraper.fwh.is</p> | |
| </div> | |
| </div> | |
| <p class="ih-xs-desc"> | |
| Untuk mendapatkan data tweet yang valid dan kompatibel dengan SentiMeter, kami merekomendasikan | |
| <strong>XScraper</strong> — tools scraping Twitter/X yang ringan, cepat, dan menghasilkan file CSV | |
| siap-analisis. | |
| </p> | |
| <ul class="ih-xs-list"> | |
| <li>Scraping berdasarkan keyword / hashtag</li> | |
| <li>Output CSV kompatibel dengan SentiMeter</li> | |
| <li>Filter tanggal, jumlah tweet, bahasa</li> | |
| <li>Integrasi Google Colab — tanpa install</li> | |
| <li>Kolom <code>full_text</code>, <code>username</code>, <code>created_at</code>, metadata lengkap</li> | |
| </ul> | |
| <div class="ih-xs-actions"> | |
| <a href="https://xscraper.fwh.is" target="_blank" rel="noopener" class="btn btn-primary">Buka | |
| XScraper</a> | |
| <span class="ih-xs-url-chip">xscraper.fwh.is</span> | |
| </div> | |
| </div> | |
| <div class="ih-xs-right"> | |
| <div class="ih-csv-preview"> | |
| <div class="ih-csv-topbar"> | |
| <span class="ih-csv-dot"></span><span class="ih-csv-dot"></span><span class="ih-csv-dot"></span> | |
| <span class="ih-csv-fname">tweets_export.csv</span> | |
| </div> | |
| <div class="ih-csv-body" id="codeDemo"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FITUR --> | |
| <section class="ih-section" id="fitur"> | |
| <div class="ih-sec-head reveal-up"> | |
| <p class="ih-sec-label">Fitur Platform</p> | |
| <h2>5 Halaman Analisis Lengkap</h2> | |
| <p class="ih-sec-sub">Setiap halaman dirancang untuk kebutuhan eksplorasi data berbeda</p> | |
| </div> | |
| <div class="ih-feat-grid"> | |
| <div class="ih-feat reveal-up" style="--d:30ms"> | |
| <h3>Riwayat Analisis</h3> | |
| <p>Data Anda tersimpan dengan aman. Lihat kembali hasil analisis sebelumnya tanpa perlu re-upload.</p> | |
| <ul> | |
| <li>Persistence Local Storage</li> | |
| <li>Auto-save hasil analisis</li> | |
| <li>Hapus data sekali klik</li> | |
| <li>Keamanan data enkripsi</li> | |
| </ul> | |
| <a href="history" class="ih-feat-link">Buka Riwayat →</a> | |
| </div> | |
| <div class="ih-feat reveal-up" style="--d:60ms"> | |
| <h3>Dashboard Visual</h3> | |
| <p>Ringkasan eksekutif sentimen dengan KPI cards dan visualisasi grafik dari hasil analisis IndoBERT.</p> | |
| <ul> | |
| <li>8 KPI metrik utama</li> | |
| <li>Donut chart distribusi</li> | |
| <li>Time-series sentiment</li> | |
| <li>Visualisasi per-kategori</li> | |
| </ul> | |
| <a href="dashboard" class="ih-feat-link">Buka Dashboard →</a> | |
| </div> | |
| <div class="ih-feat reveal-up" style="--d:120ms"> | |
| <h3>Analytics</h3> | |
| <p>Eksplorasi mendalam dengan 14+ grafik interaktif. Topik, lokasi, engagement, confidence histogram.</p> | |
| <ul> | |
| <li>14+ grafik Chart.js interaktif</li> | |
| <li>Distribusi topik & lokasi</li> | |
| <li>Confidence histogram</li> | |
| <li>Radar engagement per sentimen</li> | |
| </ul> | |
| <a href="analytics" class="ih-feat-link">Buka Analytics →</a> | |
| </div> | |
| <div class="ih-feat reveal-up" style="--d:180ms"> | |
| <h3>Data & Tabel</h3> | |
| <p>Tabel data lengkap seluruh tweet dengan filter, pencarian, dan pengurutan.</p> | |
| <ul> | |
| <li>Filter multi-dimensi</li> | |
| <li>Full-text search</li> | |
| <li>Pagination cepat</li> | |
| <li>Export hasil ke JSON</li> | |
| </ul> | |
| <a href="data" class="ih-feat-link">Buka Tabel →</a> | |
| </div> | |
| <div class="ih-feat reveal-up" style="--d:240ms"> | |
| <h3>Cleaning Lab</h3> | |
| <p>Laboratorium interaktif pipeline text cleaning 9 langkah IndoBERT. Uji setiap tahap secara real-time. | |
| </p> | |
| <ul> | |
| <li>Demo teks interaktif live</li> | |
| <li>9 step cleaning toggle</li> | |
| <li>Statistik kata dihapus</li> | |
| <li>Distribusi sebelum/sesudah</li> | |
| </ul> | |
| <a href="cleaning" class="ih-feat-link">Buka Lab →</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PIPELINE --> | |
| <section class="ih-section" id="pipeline"> | |
| <div class="ih-sec-head reveal-up"> | |
| <p class="ih-sec-label">Teknologi</p> | |
| <h2>Model IndoBERT SOTA</h2> | |
| <p class="ih-sec-sub">Klasifikasi menggunakan <code>indonesia-bert-sentiment-classification</code> untuk akurasi maksimal</p> | |
| </div> | |
| <div class="ih-pipeline reveal-up" style="--d:80ms"> | |
| <div class="ih-pipe-io ih-pipe-raw">"@user RT: kunjungi https://t.co/xxx 🔥 #PemiluIndonesia Pemilu harus | |
| DIULANG!!!"</div> | |
| <div class="ih-pipe-arrow">↓</div> | |
| <div class="ih-pipe-steps"> | |
| <div class="ih-pipe-step"><span class="ih-pipe-n">1</span><b>Lowercase</b><s>Semua huruf kecil</s></div> | |
| <div class="ih-pipe-step"><span class="ih-pipe-n">2</span><b>Hapus URL</b><s>https://... hilang</s></div> | |
| <div class="ih-pipe-step"><span class="ih-pipe-n">3</span><b>Hapus Mention</b><s>@user hilang</s></div> | |
| <div class="ih-pipe-step"><span class="ih-pipe-n">4</span><b>Normalisasi Hashtag</b><s>#Tag → tag</s> | |
| </div> | |
| <div class="ih-pipe-step"><span class="ih-pipe-n">5</span><b>Hapus Emoji</b><s>🔥hilang</s></div> | |
| <div class="ih-pipe-step"><span class="ih-pipe-n">6</span><b>Karakter Khusus</b><s>Alfanumerik saja</s> | |
| </div> | |
| <div class="ih-pipe-step"><span class="ih-pipe-n">7</span><b>Hapus Angka</b><s>123, 456 hilang</s></div> | |
| <div class="ih-pipe-step"><span class="ih-pipe-n">8</span><b>Normalisasi Spasi</b><s>Spasi ekstra | |
| bersih</s></div> | |
| <div class="ih-pipe-step"><span class="ih-pipe-n">9</span><b>Hapus Stopwords</b><s>yang, dan, di, | |
| ke...</s></div> | |
| </div> | |
| <div class="ih-pipe-arrow">↓</div> | |
| <div class="ih-pipe-io ih-pipe-clean">"pemilu harus diulang"</div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="ih-cta-section reveal-up"> | |
| <div class="ih-cta-box"> | |
| <h2>Siap Menganalisis Sentimen Twitter/X?</h2> | |
| <p>Dapatkan data di XScraper, lalu upload ke SentiMeter dan mulai eksplorasi insight mendalam.</p> | |
| <div class="ih-cta-box-btns"> | |
| <a href="https://xscraper.fwh.is" target="_blank" rel="noopener" class="btn btn-ghost">Ke XScraper</a> | |
| <a href="upload" class="btn btn-primary">Mulai Upload Data</a> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/shared.js"></script> | |
| <script src="js/index.js"></script> | |
| </body> | |
| </html> |