Hugging Face's logo

Spaces:
rhmnsae
/
sentimeter
Running

App Files Community
sentimeter
File size: 4,449 Bytes
04b72bb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="id">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Upload Data — SentiMeter</title>
  <meta name="description" content="Upload file CSV untuk analisis sentimen IndoBERT Bahasa Indonesia" />
  <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&display=swap"
    rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
  <link rel="stylesheet" href="css/style.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">Upload Data</div>
        <div class="topbar-sub">Langkah 1 dari 6</div>
      </div>
      <div class="page-body upload-page-body">
        <div class="upload-hero">
          <div class="upload-headline">
            <h1>Mulai Analisis Sentimen</h1>
            <p>Silakan unggah dataset Twitter/X dalam format CSV. Sistem IndoBERT kami secara otomatis akan mendeteksi
              kolom <code>full_text</code>, menerapkan 9 tahap text cleaning, dan memproses analisis sentimen secara
              komprehensif tanpa memerlukan pengaturan manual.</p>
          </div>

          <div class="upload-zone" id="uploadZone">
            <input type="file" id="csvInput" accept=".csv" multiple />
            <div class="upload-inner" id="uploadInner">
              <div class="upload-circle">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                  <polyline points="17 8 12 3 7 8" />
                  <line x1="12" y1="3" x2="12" y2="15" />
                </svg>
              </div>
              <h2 class="upload-title">Seret & Lepas file CSV</h2>
              <p class="upload-sub">atau klik area ini untuk memilih file</p>
              <button class="btn btn-primary btn-upload-trigger"
                onclick="document.getElementById('csvInput').click()">Pilih File CSV</button>
              <p class="upload-hint">Format: <code>.csv</code> — kolom <code>full_text</code> wajib ada</p>
            </div>
          </div>

          <div class="demo-trigger-wrap" style="margin-top: 24px; text-align: center;">
            <p style="font-size: 13px; color: var(--tx3); margin-bottom: 12px;">Tidak punya file CSV? Coba dengan data contoh kami.</p>
            <button class="btn btn-outline" id="btnDemoData">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
              Coba Data Demo (300 Tweet)
            </button>
          </div>

          <!-- File info preview -->
          <div id="filePreview" style="display:none" class="file-preview">
            <div class="file-info">
              <div class="file-name" id="fileName">—</div>
              <div class="file-meta" id="fileMeta">—</div>
            </div>
            <div class="file-actions">
              <button class="btn btn-primary" id="btnAnalyze">Mulai Analisis</button>
              <button class="btn btn-ghost btn-sm" id="btnCancel">Batal</button>
            </div>
          </div>

          <!-- Progress -->
          <div id="progressWrap" style="display:none" class="progress-wrap">
            <div class="progress-header">
              <span id="progressText">Memproses...</span>
              <span id="progressPct">0%</span>
            </div>
            <div class="progress-track">
              <div class="progress-bar" id="progressBar"></div>
            </div>
            <div class="progress-step" id="progressStep"></div>
          </div>
        </div>


      </div>
    </div>
  </div>
  <script src="js/shared.js"></script>
  <script src="js/demo.js"></script>
  <script src="js/upload.js"></script>
</body>

</html>