Upload 12 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/images/ikn.png filter=lfs diff=lfs merge=lfs -text
+static/images/whoosh.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,35 @@
+# Gunakan Python 3.9 sebagai dasar
+FROM python:3.9
+
+# Set working directory
+WORKDIR /code
+
+# Copy requirements.txt ke dalam container
+COPY ./requirements.txt /code/requirements.txt
+
+# Install dependencies
+# --no-cache-dir agar image tidak terlalu besar
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+# Buat user baru 'user' dengan ID 1000 (Syarat keamanan Hugging Face)
+RUN useradd -m -u 1000 user
+
+# Ganti user ke 'user'
+USER user
+
+# Set environment variables
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Pindah ke direktori kerja user
+WORKDIR $HOME/app
+
+# Copy semua file proyek ke dalam container dengan izin user yang benar
+COPY --chown=user . $HOME/app
+
+# Buat folder uploads agar tidak error saat upload file
+RUN mkdir -p $HOME/app/uploads
+
+# Jalankan aplikasi menggunakan Gunicorn pada port 7860
+# Port 7860 adalah port wajib untuk Hugging Face Spaces
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,110 @@
+from flask import Flask, render_template, request, url_for, flash, redirect
+from model import predict_sentiment, analyze_sentiment_from_file, get_sentiment_counts, generate_wordcloud_base64
+import os
+from werkzeug.utils import secure_filename
+
+# Konfigurasi folder upload
+UPLOAD_FOLDER = 'uploads'
+ALLOWED_EXTENSIONS = {'csv', 'xlsx'}
+
+app = Flask(__name__)
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['SECRET_KEY'] = 'gantidenganyangaman' 
+
+# Pastikan folder upload ada
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+def allowed_file(filename):
+    """Memeriksa apakah ekstensi file diizinkan."""
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+@app.route('/')
+def home():
+    """Merender halaman home."""
+    return render_template('home.html')
+
+@app.route('/dashboard')
+def dashboard():
+    """
+    Merender halaman dashboard dengan data visualisasi IKN dan Whoosh.
+    """
+    # Data Hardcoded sesuai permintaan
+    dashboard_data = {
+        'ikn': {
+            'title': 'Sentimen Masyarakat terhadap IKN',
+            'counts': {'Positif': 633, 'Netral': 387, 'Negatif': 452},
+            'image': 'ikn.png' # Pastikan file ini ada di static/images/
+        },
+        'whoosh': {
+            'title': 'Sentimen Masyarakat terhadap Whoosh',
+            'counts': {'Positif': 1122, 'Netral': 4270, 'Negatif': 2108},
+            'image': 'whoosh.png' # Pastikan file ini ada di static/images/
+        }
+    }
+    
+    return render_template('dashboard.html', dashboard_data=dashboard_data)
+
+@app.route('/analysis', methods=['GET', 'POST'])
+def analysis():
+    """
+    Merender halaman analisis. Menangani analisis teks tunggal DAN upload file.
+    """
+    prediction_result = None
+    input_text = "" 
+    results_table = None
+    wordcloud = None 
+    sentiment_counts = None 
+
+    if request.method == 'POST':
+        if 'text_input' in request.form:
+            input_text = request.form.get('text_input', '')
+            if input_text:
+                prediction_result = predict_sentiment(input_text)
+        
+        elif 'file' in request.files:
+            file = request.files['file']
+            text_column = request.form.get('text_column')
+
+            if file.filename == '':
+                flash('Tidak ada file yang dipilih', 'danger')
+                return redirect(url_for('analysis'))
+            
+            if not text_column:
+                flash('Nama kolom teks tidak boleh kosong', 'danger')
+                return redirect(url_for('analysis'))
+
+            if file and allowed_file(file.filename):
+                filename = secure_filename(file.filename)
+                file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+                file.save(file_path)
+
+                df, error = analyze_sentiment_from_file(file_path, text_column)
+
+                if error:
+                    flash(error, 'danger')
+                    os.remove(file_path) 
+                    return redirect(url_for('analysis'))
+
+                sentiment_counts = get_sentiment_counts(df)
+                wordcloud = generate_wordcloud_base64(df, text_column)
+                results_table = df.to_html(classes='table table-striped table-hover', index=False, border=0)
+                os.remove(file_path)
+            else:
+                flash('Format file tidak diizinkan. Gunakan .csv atau .xlsx', 'danger')
+                return redirect(url_for('analysis'))
+            
+    return render_template('analysis.html', 
+                           prediction=prediction_result, 
+                           text=input_text,
+                           sentiment_counts=sentiment_counts, 
+                           results_table=results_table,
+                           wordcloud=wordcloud)
+
+@app.route('/about')
+def about():
+    """Merender halaman about."""
+    return render_template('about.html')
+
+if __name__ == '__main__':
+    app.run(debug=True)

model.py

@@ -0,0 +1,173 @@
+import torch
+from transformers import AutoTokenizer, AutoModelForSequenceClassification
+import pandas as pd
+import matplotlib
+matplotlib.use('Agg') # Gunakan backend 'Agg' agar tidak error di server
+import matplotlib.pyplot as plt
+import io
+import base64
+import re
+from wordcloud import WordCloud, STOPWORDS
+
+# --- Bagian 1: Pemuatan Model IndoBERT ---
+
+MODEL_NAME = "crypter70/IndoBERT-Sentiment-Analysis"
+tokenizer = None
+model = None
+
+def load_model():
+    """
+    Lazy-load the tokenizer and model. This avoids long blocking downloads during module import
+    and prevents the Flask app from hanging when importing `model.py`.
+    """
+    global tokenizer, model
+    if tokenizer is not None and model is not None:
+        return
+    try:
+        tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+        model = AutoModelForSequenceClassification.from_pretrained(MODEL_NAME)
+        model.eval()
+        print(f"Model {MODEL_NAME} loaded successfully.")
+    except Exception as e:
+        print(f"Error loading model {MODEL_NAME}: {e}")
+        print("Model and tokenizer set to None. Predictions will not work.")
+        tokenizer = None
+        model = None
+
+# Definisikan label berdasarkan konfigurasi model
+labels = ['Positif', 'Netral', 'Negatif']
+
+def predict_sentiment(text):
+    """
+    Memprediksi sentimen dari satu string teks.
+    """
+    # Pastikan model dimuat secara lazy jika belum
+    if model is None or tokenizer is None:
+        load_model()
+    if not model or not tokenizer:
+        print("Model or tokenizer is not loaded. Cannot predict.")
+        return "Error: Model not loaded."
+        
+    try:
+        # Ubah input menjadi string jika bukan (penting untuk data dari file)
+        text = str(text)
+        
+        # Tokenisasi teks
+        inputs = tokenizer(text, return_tensors="pt", truncation=True, max_length=512, padding=True)
+        
+        # Dapatkan prediksi model
+        with torch.no_grad(): # Nonaktifkan perhitungan gradien untuk inferensi
+            outputs = model(**inputs)
+        
+        # Dapatkan probabilitas (logits) dan cari ID kelas dengan prob tertinggi
+        logits = outputs.logits
+        predicted_class_id = torch.argmax(logits, dim=1).item()
+        
+        # Petakan ID ke label yang sesuai
+        return labels[predicted_class_id]
+
+    except Exception as e:
+        print(f"Error during prediction: {e}")
+        return "Error: Prediction failed."
+
+# --- Bagian 2: Analisis File ---
+
+def analyze_sentiment_from_file(file_path, text_column_name):
+    """
+    Membaca file (CSV atau XLSX), menerapkan prediksi sentimen ke kolom yang ditentukan.
+    """
+    try:
+        # Baca file berdasarkan ekstensinya
+        if file_path.endswith('.csv'):
+            df = pd.read_csv(file_path)
+        elif file_path.endswith('.xlsx'):
+            df = pd.read_excel(file_path)
+        else:
+            return None, "Error: Unsupported file format."
+
+        # Cek apakah kolom yang diminta ada di DataFrame
+        if text_column_name not in df.columns:
+            return None, f"Error: Column '{text_column_name}' not found in the file."
+            
+        # Pastikan kolom teks adalah string (untuk menghindari error .apply())
+        df[text_column_name] = df[text_column_name].astype(str)
+
+        # Terapkan fungsi prediksi sentimen ke kolom yang ditentukan
+        # Membuat kolom baru 'Sentiment_Prediction'
+        df['Sentiment_Prediction'] = df[text_column_name].apply(predict_sentiment)
+
+        return df, None # Kembalikan DataFrame dan tidak ada error
+
+    except FileNotFoundError:
+        return None, "Error: File not found."
+    except Exception as e:
+        print(f"Error processing file: {e}")
+        return None, "Error: Could not process the file."
+
+# --- Bagian 3: Visualisasi (DIPERBARUI) ---
+
+def get_sentiment_counts(df, sentiment_column='Sentiment_Prediction'):
+    """
+    Menghitung jumlah sentimen dan mengembalikannya sebagai kamus (dictionary).
+    Siap untuk digunakan oleh Chart.js.
+    """
+    if sentiment_column not in df.columns:
+        print(f"Error: Sentiment column '{sentiment_column}' not found.")
+        return {}
+    
+    sentiment_counts = df[sentiment_column].value_counts()
+    
+    # Pastikan semua label ada, bahkan jika jumlahnya 0
+    all_labels = ['Positif', 'Netral', 'Negatif']
+    for label in all_labels:
+        if label not in sentiment_counts:
+            sentiment_counts[label] = 0
+            
+    # Mengembalikan sebagai kamus standar
+    return sentiment_counts.to_dict()
+
+def generate_wordcloud_base64(df, text_column_name):
+    """
+    Menghasilkan Word Cloud dari kolom teks dan mengembalikannya sebagai string base64.
+    """
+    wordcloud_base64 = None
+    try:
+        if text_column_name in df.columns:
+            # Gabungkan semua teks menjadi satu string besar
+            text = " ".join(review for review in df[text_column_name].astype(str))
+
+            # Tambahkan stopwords dasar bahasa Indonesia
+            stopwords_indonesia = set(STOPWORDS)
+            stopwords_indonesia.update([
+                'yg', 'dg', 'rt', 'dgn', 'ny', 'd', 'k', 'ke', 'di', 'dari', 'dan', 'ini', 'itu',
+                'atau', 'pada', 'untuk', 'juga', 'dengan', 'yang', 'ke', 'ya', 'ga', 'gak', 'tidak',
+                'ada', 'adalah', 'saya', 'dia', 'kamu', 'kita', 'mereka', 'saja', 'seperti',
+                'telah', 'akan', 'tapi', 'namun', 'karena', 'oleh', 'saat', 'sebagai', 'bahwa'
+            ])
+            
+            # Bersihkan teks (opsional, tapi disarankan)
+            text = re.sub(r'http\S+', '', text) # Hapus URL
+            text = re.sub(r'[^a-zA-Z\s]', '', text.lower()) # Hapus non-alfabet
+
+            # Buat Word Cloud
+            wordcloud = WordCloud(
+                width=800, 
+                height=400, 
+                background_color='white', 
+                stopwords=stopwords_indonesia,
+                min_font_size=10,
+                colormap='viridis' # Ganti palet warna
+            ).generate(text)
+
+            # Simpan ke buffer
+            buf_wc = io.BytesIO()
+            wordcloud.to_image().save(buf_wc, format='PNG')
+            buf_wc.seek(0)
+            wordcloud_base64 = base64.b64encode(buf_wc.getvalue()).decode('utf-8')
+            plt.close()
+            
+    except Exception as e:
+        print(f"Error creating word cloud: {e}")
+        wordcloud_base64 = None
+
+    return wordcloud_base64

requirements.txt

@@ -0,0 +1,9 @@
+flask
+torch
+transformers
+pandas
+matplotlib
+openpyxl
+werkzeug
+wordcloud
+gunicorn

static/css/style.css

@@ -0,0 +1,481 @@
+/* --- 1. Import Font & Variabel Global Neo-Brutalism --- */
+:root {
+    /* Palette Warna Neo-Brutalism */
+    --bg-color: #f0f0f0;         /* Abu-abu sangat muda untuk background */
+    --card-bg: #ffffff;          /* Putih untuk kartu */
+    --border-color: #000000;     /* Hitam pekat untuk border */
+    
+    --primary-color: #FFEB3B;    /* Kuning Terang (Main Action) */
+    --secondary-color: #FF90E8;  /* Pink Neon (Accent) */
+    --accent-color: #23A6D5;     /* Cyan (Accent 2) */
+    --success-color: #00E676;    /* Hijau Neon */
+    --danger-color: #FF5252;     /* Merah Terang */
+    
+    --text-main: #000000;
+    --text-muted: #444444;
+
+    /* Dimensi Brutal */
+    --border-width: 3px;
+    --shadow-offset: 5px;
+    --radius: 0px;               /* Sudut tajam (bisa diubah ke 4px-8px jika ingin sedikit lengkung) */
+    
+    --navbar-height: 80px;
+    --transition-speed: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* --- 2. Reset & Setup Global --- */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--bg-color);
+    background-image: radial-gradient(#000 1px, transparent 1px); /* Pola titik-titik halus */
+    background-size: 20px 20px;
+    color: var(--text-main);
+    line-height: 1.6;
+}
+
+h1, h2, h3 {
+    font-family: 'Space Grotesk', sans-serif;
+    color: var(--text-main);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: -0.5px;
+}
+
+a {
+    text-decoration: none;
+    color: var(--text-main);
+    font-weight: 600;
+}
+
+/* --- 3. Navbar Neo-Brutal --- */
+.navbar {
+    width: 100%;
+    height: var(--navbar-height);
+    background-color: var(--card-bg);
+    border-bottom: var(--border-width) solid var(--border-color);
+    padding: 0 30px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+}
+
+.navbar-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.navbar-brand {
+    font-family: 'Space Grotesk', sans-serif;
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: var(--text-main);
+    background-color: var(--primary-color);
+    padding: 5px 15px;
+    border: var(--border-width) solid var(--border-color);
+    box-shadow: 4px 4px 0px var(--border-color);
+    transition: transform 0.1s;
+}
+
+.navbar-brand:hover {
+    transform: translate(2px, 2px);
+    box-shadow: 2px 2px 0px var(--border-color);
+}
+
+.navbar-nav {
+    list-style-type: none;
+    display: flex;
+    gap: 20px;
+}
+
+.navbar-nav li a {
+    font-family: 'Space Grotesk', sans-serif;
+    padding: 8px 16px;
+    border: var(--border-width) solid transparent; /* Invisible border untuk layout */
+    transition: all var(--transition-speed);
+    font-size: 1.1rem;
+}
+
+.navbar-nav li a:hover {
+    background-color: var(--secondary-color);
+    border: var(--border-width) solid var(--border-color);
+    box-shadow: 4px 4px 0px var(--border-color);
+    transform: translate(-2px, -2px);
+}
+
+/* --- 4. Layout Konten --- */
+.content-wrapper {
+    margin-top: var(--navbar-height);
+    padding: 40px 20px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.page-header {
+    margin-bottom: 30px;
+    background-color: var(--accent-color);
+    border: var(--border-width) solid var(--border-color);
+    box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--border-color);
+    padding: 20px;
+    display: inline-block;
+}
+
+.page-header h1 {
+    margin: 0;
+    font-size: 2.5rem;
+    color: #fff;
+    text-shadow: 2px 2px 0px var(--border-color);
+}
+
+/* --- 5. Komponen Card (Kotak) --- */
+.card {
+    background: var(--card-bg);
+    border: var(--border-width) solid var(--border-color);
+    padding: 30px;
+    margin-bottom: 40px;
+    box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--border-color);
+    transition: transform var(--transition-speed);
+}
+
+.card:hover {
+    /* Efek hover halus */
+    transform: translate(-2px, -2px);
+    box-shadow: 7px 7px 0px var(--border-color);
+}
+
+.card h2 {
+    font-size: 1.8rem;
+    margin-bottom: 1.5rem;
+    border-bottom: var(--border-width) solid var(--border-color);
+    padding-bottom: 10px;
+    display: inline-block;
+    background-color: var(--primary-color);
+    padding: 5px 15px;
+}
+
+/* --- 6. Form & Input --- */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: 700;
+    font-family: 'Space Grotesk', sans-serif;
+    font-size: 1.1rem;
+}
+
+.form-control, .form-control-file {
+    width: 100%;
+    padding: 15px;
+    font-size: 1rem;
+    font-family: 'Inter', sans-serif;
+    border: var(--border-width) solid var(--border-color);
+    background-color: #fff;
+    border-radius: 0; /* Kotak tajam */
+    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
+    transition: all 0.2s;
+}
+
+.form-control:focus {
+    outline: none;
+    box-shadow: 6px 6px 0px var(--border-color);
+    background-color: #fffef0;
+    transform: translate(-2px, -2px);
+}
+
+textarea.form-control {
+    min-height: 150px;
+    resize: vertical;
+}
+
+/* Kustomisasi Input File Button */
+.form-control-file::file-selector-button {
+    padding: 8px 15px;
+    margin-right: 15px;
+    border: var(--border-width) solid var(--border-color);
+    background-color: var(--secondary-color);
+    color: var(--text-main);
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: 2px 2px 0px var(--border-color);
+    transition: all 0.1s;
+}
+
+.form-control-file::file-selector-button:hover {
+    transform: translate(1px, 1px);
+    box-shadow: 1px 1px 0px var(--border-color);
+}
+
+/* --- 7. Tombol (Buttons) --- */
+.btn {
+    padding: 12px 30px;
+    font-size: 1.1rem;
+    font-weight: 700;
+    font-family: 'Space Grotesk', sans-serif;
+    text-transform: uppercase;
+    border: var(--border-width) solid var(--border-color);
+    cursor: pointer;
+    display: inline-block;
+    text-align: center;
+    box-shadow: 5px 5px 0px var(--border-color);
+    transition: all 0.1s;
+    position: relative;
+}
+
+.btn:active {
+    transform: translate(4px, 4px);
+    box-shadow: 1px 1px 0px var(--border-color);
+}
+
+.btn-primary {
+    background-color: var(--primary-color); /* Kuning */
+    color: var(--text-main);
+}
+
+.btn-primary:hover {
+    background-color: #ffe600;
+    transform: translate(-2px, -2px);
+    box-shadow: 7px 7px 0px var(--border-color);
+}
+
+.btn-success {
+    background-color: var(--success-color); /* Hijau */
+    color: var(--text-main);
+}
+
+.btn-success:hover {
+    background-color: #00c853;
+    transform: translate(-2px, -2px);
+    box-shadow: 7px 7px 0px var(--border-color);
+}
+
+/* --- 8. Alerts / Flash Messages --- */
+.alert {
+    padding: 20px;
+    margin-bottom: 30px;
+    border: var(--border-width) solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+    box-shadow: 5px 5px 0px var(--border-color);
+}
+
+.alert-danger {
+    background-color: var(--danger-color);
+    color: #fff;
+}
+
+.alert-success {
+    background-color: var(--success-color);
+    color: #000;
+}
+
+.alert-close {
+    background: none;
+    border: 2px solid currentColor;
+    width: 30px;
+    height: 30px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.alert-close:hover {
+    background-color: rgba(0,0,0,0.1);
+}
+
+/* --- 9. Visualisasi & Hasil --- */
+.result-block {
+    padding: 20px;
+    background-color: #fff;
+    border: var(--border-width) solid var(--border-color);
+    margin-top: 2rem;
+    box-shadow: 4px 4px 0px var(--border-color);
+    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0), linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
+    background-size: 20px 20px;
+    background-position: 0 0, 10px 10px;
+}
+
+.result-block h3 {
+    background-color: #fff;
+    border: var(--border-width) solid var(--border-color);
+    padding: 10px;
+    display: inline-block;
+    margin: 0;
+    font-size: 2rem;
+}
+
+.charts-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    margin-bottom: 30px;
+}
+
+.chart-box {
+    flex: 1;
+    min-width: 300px;
+    padding: 20px;
+    border: var(--border-width) solid var(--border-color);
+    box-shadow: 5px 5px 0px var(--border-color);
+    text-align: center;
+    background: #fff;
+}
+
+.chart-box h3 {
+    background-color: var(--accent-color);
+    color: #fff;
+    display: inline-block;
+    padding: 5px 10px;
+    border: 2px solid var(--border-color);
+    margin-bottom: 20px;
+    font-size: 1.2rem;
+}
+
+.table-responsive {
+    max-height: 500px;
+    overflow-y: auto;
+    border: var(--border-width) solid var(--border-color);
+    box-shadow: 5px 5px 0px var(--border-color);
+}
+
+/* Table Styling */
+.table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.table th, .table td {
+    border: 2px solid var(--border-color);
+    padding: 12px;
+    text-align: left;
+}
+.table th {
+    background-color: var(--primary-color);
+    font-family: 'Space Grotesk', sans-serif;
+    text-transform: uppercase;
+}
+.table-striped tbody tr:nth-of-type(odd) {
+    background-color: #f9f9f9;
+}
+
+/* --- 10. Spinner --- */
+.spinner-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.9);
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+}
+
+.spinner-container {
+    text-align: center;
+    background: var(--primary-color);
+    padding: 40px;
+    border: var(--border-width) solid var(--border-color);
+    box-shadow: 10px 10px 0px var(--border-color);
+}
+
+.spinner-container p {
+    margin-top: 20px;
+    font-weight: 800;
+    font-family: 'Space Grotesk', sans-serif;
+}
+
+.spinner {
+    width: 60px;
+    height: 60px;
+    border: 8px solid #fff;
+    border-left-color: var(--border-color);
+    border-bottom-color: var(--border-color);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 0 auto;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.hidden { display: none !important; }
+
+/* --- 11. Responsive Mobile --- */
+.hamburger-btn {
+    display: none;
+    background: var(--secondary-color);
+    border: var(--border-width) solid var(--border-color);
+    color: var(--text-main);
+    font-size: 1.5rem;
+    padding: 5px 10px;
+    box-shadow: 3px 3px 0px var(--border-color);
+    cursor: pointer;
+}
+
+.hamburger-btn:active {
+    transform: translate(2px, 2px);
+    box-shadow: 1px 1px 0px var(--border-color);
+}
+
+@media (max-width: 768px) {
+    .hamburger-btn { display: block; }
+    
+    .navbar-container { padding: 0 20px; }
+    
+    .navbar-nav-container {
+        position: absolute;
+        top: var(--navbar-height);
+        left: 0;
+        width: 100%;
+        background-color: var(--card-bg);
+        border-bottom: var(--border-width) solid var(--border-color);
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease-out;
+    }
+
+    .navbar-nav-container.active {
+        max-height: 300px;
+        border-top: var(--border-width) solid var(--border-color);
+    }
+
+    .navbar-nav {
+        flex-direction: column;
+        padding: 20px;
+        gap: 10px;
+    }
+
+    .navbar-nav li a {
+        display: block;
+        border: 2px solid var(--border-color);
+        text-align: center;
+        background-color: #f9f9f9;
+    }
+    
+    .page-header h1 { font-size: 1.8rem; }
+    
+    .charts-grid { flex-direction: column; }
+}

templates/about.html

@@ -0,0 +1,33 @@
+{% extends 'layout.html' %}
+
+{% block title %}Tentang Sentimenter{% endblock %}
+
+<!-- TAMBAHKAN BLOCK INI untuk mengisi H1 yang sudah diperbaiki -->
+{% block page_title %}Tentang Sentimenter{% endblock %}
+
+{% block content %}
+    <div class="card">
+        <p style="font-size: 1.1em; margin-bottom: 25px;">
+            Aplikasi ini adalah prototipe untuk mendemonstrasikan kekuatan model pemrosesan bahasa alami (NLP) 
+            dalam menganalisis sentimen teks berbahasa Indonesia.
+        </p>
+
+        <h2>Teknologi yang Digunakan</h2>
+        <ul style="list-style-type: none; padding-left: 0;">
+            <li style="margin-bottom: 10px; font-size: 1.1em;"><i class="fab fa-python" style="color: #3498db; margin-right: 10px; width: 20px;"></i> <strong>Backend:</strong> Flask (Python)</li>
+            <li style="margin-bottom: 10px; font-size: 1.1em;"><i class="fab fa-html5" style="color: #e74c3c; margin-right: 10px; width: 20px;"></i> <strong>Frontend:</strong> HTML & CSS Kustom</li>
+            <li style="margin-bottom: 10px; font-size: 1.1em;"><i class="fas fa-brain" style="color: #9b59b6; margin-right: 10px; width: 20px;"></i> <strong>Model ML:</strong> IndoBERT (Transformers)</li>
+            <li style="margin-bottom: 10px; font-size: 1.1em;"><i class="fas fa-database" style="color: #f39c12; margin-right: 10px; width: 20px;"></i> <strong>Analisis Data:</strong> Pandas</li>
+            <li style="margin-bottom: 10px; font-size: 1.1em;"><i class="fas fa-chart-pie" style="color: #2ecc71; margin-right: 10px; width: 20px;"></i> <strong>Visualisasi:</strong> Matplotlib, WordCloud</li>
+        </ul>
+    </div>
+
+    <div class="card">
+        <h2>Profil Developer (BRIN devs)</h2>
+        <p>
+            Website ini dikembangkan oleh BRIN devs, sekumpulan mahasiswa Sains Data yang kepo tentang data science, machine learning, dan AI. 
+            Kami bersemangat untuk mengeksplorasi bagaimana teknologi ini dapat digunakan untuk menciptakan solusi inovatif. 
+            Ikuti terus perjalanan kami di media sosial dan GitHub untuk update terbaru tentang proyek-proyek kami!
+        </p>
+    </div>
+{% endblock %}

templates/analysis.html

@@ -0,0 +1,228 @@
+{% extends 'layout.html' %}
+
+{% block title %}Analisis Sentimen{% endblock %}
+
+{% block page_title %}Analisis Sentimen{% endblock %}
+
+{% block content %}
+    <p style="font-size: 1.1em; margin-top: -1rem; margin-bottom: 2rem; font-weight: 500;">
+        Gunakan bagian ini untuk menganalisis sentimen dari teks tunggal atau mengunggah file untuk analisis massal.
+    </p>
+
+    <!-- Menampilkan Flash Messages -->
+    {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+            {% for category, message in messages %}
+                <div class="alert alert-{{ category }}" role="alert">
+                    <div>
+                        <i class="alert-icon fas {% if category == 'danger' %}fa-exclamation-triangle{% else %}fa-check-circle{% endif %}"></i>
+                        {{ message }}
+                    </div>
+                    <button type="button" class="alert-close">&times;</button>
+                </div>
+            {% endfor %}
+        {% endif %}
+    {% endwith %}
+
+    {# Embed JSON data #}
+    <script id="sentiment-data" type="application/json">{% if sentiment_counts %}{{ sentiment_counts | tojson | safe }}{% else %}null{% endif %}</script>
+
+    <!-- Bagian 1: Analisis Teks Tunggal -->
+    <div class="card">
+        <h2>Analisis Teks Tunggal</h2>
+        <p>Masukkan sebuah kalimat atau paragraf dalam bahasa Indonesia untuk dianalisis.</p>
+
+        <form method="POST" action="{{ url_for('analysis') }}">
+            <div class="form-group">
+                <label for="text_input_area">Teks Anda:</label>
+                <textarea name="text_input" id="text_input_area" rows="6" class="form-control"
+                          placeholder="Ketik atau tempel teks Anda di sini...">{{ text }}</textarea>
+            </div>
+            <button type="submit" class="btn btn-primary">
+                <i class="fas fa-bolt"></i> Analisis Teks
+            </button>
+        </form>
+
+        <!-- Hasil Prediksi -->
+        {% if prediction %}
+            <div class="result-block">
+                <h2 style="font-size: 1.2rem; margin-bottom: 1rem; border: none; background: none; padding: 0;">HASIL ANALISIS:</h2>
+                <h3>{{ prediction }}</h3>
+            </div>
+        {% endif %}
+    </div>
+
+    <!-- Bagian 2: Analisis File Massal -->
+    <div class="card">
+        <h2>Analisis File (CSV/XLSX)</h2>
+        <p>Upload file untuk analisis sentimen massal.</p>
+        
+        <form method="POST" enctype="multipart/form-data" action="{{ url_for('analysis') }}" id="file-analysis-form">
+            <div class="form-group">
+                <label for="file">Pilih File:</label>
+                <input type="file" name="file" id="file" class="form-control-file" required>
+            </div>
+            <div class="form-group">
+                <label for="text_column">Nama Kolom Teks:</label>
+                <input type="text" name="text_column" id="text_column" class="form-control" placeholder="Contoh: 'tweet_text'" required>
+            </div>
+            <button type="submit" class="btn btn-success">
+                <i class="fas fa-file-upload"></i> Upload & Proses
+            </button>
+        </form>
+
+        {% if sentiment_counts %}
+            <div class="results-container" style="margin-top: 3rem;">
+                <h2 style="font-size: 2rem; margin-bottom: 20px; text-decoration: underline;">VISUALISASI HASIL</h2>
+                <div class="charts-grid">
+                    
+                    <!-- Bar Chart -->
+                    <div class="chart-box">
+                        <h3>Distribusi Sentimen</h3>
+                        <canvas id="barChartCanvas"></canvas>
+                    </div>
+                    
+                    <!-- Pie Chart -->
+                    <div class="chart-box">
+                        <h3>Proporsi Sentimen</h3>
+                        <div style="position: relative; max-height: 400px; margin: auto;">
+                            <canvas id="pieChartCanvas"></canvas>
+                        </div>
+                    </div>
+                </div>
+
+                {% if wordcloud %}
+                <div class="chart-box" style="width: 100%; margin-bottom: 30px;">
+                    <h3>Word Cloud</h3>
+                    <img src="data:image/png;base64,{{ wordcloud }}" alt="Word Cloud" style="max-width: 100%; border: 2px solid #000;">
+                </div>
+                {% endif %}
+
+                <h2 style="font-size: 1.5rem; margin-top: 2rem;">Data Tabel</h2>
+                <div class="table-responsive">
+                    {{ results_table|safe }}
+                </div>
+            </div>
+        {% endif %}
+    </div>
+
+{% endblock %}
+
+<!-- Script Khusus untuk Chart Neo-Brutalism -->
+{% block scripts %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const fileForm = document.getElementById('file-analysis-form');
+        const spinnerOverlay = document.getElementById('spinner-overlay');
+
+        if (fileForm) {
+            fileForm.addEventListener('submit', function() {
+                const fileInput = document.getElementById('file');
+                const columnInput = document.getElementById('text_column');
+                if (fileInput.value && columnInput.value && spinnerOverlay) {
+                    spinnerOverlay.style.display = 'flex'; // Gunakan flex agar center
+                    spinnerOverlay.classList.remove('hidden');
+                }
+            });
+        }
+
+        const countsEl = document.getElementById('sentiment-data');
+        let counts = null;
+
+        if (countsEl) {
+            try {
+                counts = JSON.parse(countsEl.textContent || 'null');
+            } catch (e) {
+                console.error("Gagal mem-parsing data sentimen:", e);
+                counts = null;
+            }
+        }
+        
+        if (counts && Object.keys(counts).length > 0) {
+            // Setup Data
+            const labels = ['Positif', 'Netral', 'Negatif'];
+            const data = [
+                counts['Positif'] || 0,
+                counts['Netral'] || 0,
+                counts['Negatif'] || 0
+            ];
+            
+            // Warna Neo-Brutalism
+            const bgColors = [
+                '#00E676', // Hijau
+                '#d1d1d1', // Abu
+                '#FF5252'  // Merah
+            ];
+            
+            const borderColors = '#000000'; // Border Hitam Pekat
+            const borderWidth = 3;          // Border Tebal
+
+            // Config Font
+            Chart.defaults.font.family = "'Space Grotesk', sans-serif";
+            Chart.defaults.color = '#000';
+
+            // 4. Buat Bar Chart
+            const barCtx = document.getElementById('barChartCanvas');
+            if (barCtx) {
+                new Chart(barCtx, {
+                    type: 'bar',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: 'Jumlah',
+                            data: data,
+                            backgroundColor: bgColors,
+                            borderColor: borderColors,
+                            borderWidth: borderWidth,
+                            hoverOffset: 4
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: { display: false }
+                        },
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                grid: { color: '#000', lineWidth: 1 },
+                                ticks: { color: '#000', font: { weight: 'bold' } }
+                            },
+                            x: {
+                                grid: { display: false },
+                                ticks: { color: '#000', font: { weight: 'bold' } }
+                            }
+                        }
+                    }
+                });
+            }
+
+            // 5. Buat Pie Chart
+            const pieCtx = document.getElementById('pieChartCanvas');
+            if (pieCtx) {
+                new Chart(pieCtx, {
+                    type: 'pie',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            data: data,
+                            backgroundColor: bgColors,
+                            borderColor: borderColors,
+                            borderWidth: borderWidth
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                                labels: { color: '#000', font: { weight: 'bold' } }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    });
+</script>
+{% endblock %}

templates/dashboard.html

@@ -0,0 +1,142 @@
+{% extends 'layout.html' %}
+
+{% block title %}Dashboard Sentimen{% endblock %}
+
+{% block page_title %}DASHBOARD SENTIMEN{% endblock %}
+
+{% block content %}
+    <p style="font-size: 1.1em; margin-top: -1rem; margin-bottom: 2rem; font-weight: 500;">
+        Analisis sentimen terkini mengenai topik-topik hangat di Indonesia.
+    </p>
+
+    <div id="dashboard-container">
+        <!-- Loop data dari Flask -->
+        {% for key, data in dashboard_data.items() %}
+        <div class="card" style="border-width: 4px; box-shadow: 8px 8px 0px #000;">
+            <div style="background-color: var(--primary-color); border-bottom: 4px solid #000; padding: 15px; margin: -30px -30px 20px -30px;">
+                <h2 style="margin: 0; border: none; font-size: 1.5rem; padding: 0; background: none;">{{ data.title }}</h2>
+            </div>
+
+            <div class="charts-grid" style="margin-top: 30px;">
+                <!-- Bar Chart Container -->
+                <div class="chart-box">
+                    <h3>Distribusi</h3>
+                    <canvas id="bar-{{ key }}"></canvas>
+                </div>
+
+                <!-- Pie Chart Container -->
+                <div class="chart-box">
+                    <h3>Proporsi</h3>
+                    <div style="position: relative; max-height: 300px; margin: auto;">
+                        <canvas id="pie-{{ key }}"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Word Cloud Image Section -->
+            <div class="chart-box" style="width: 100%; margin-top: 30px; border: 3px solid #000;">
+                <h3>Word Cloud</h3>
+                <!-- Menggunakan url_for static -->
+                <img src="{{ url_for('static', filename='images/' + data.image) }}" 
+                     alt="Word Cloud {{ data.title }}" 
+                     style="max-width: 100%; height: auto; display: block; margin: 0 auto;"
+                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                
+                <!-- Fallback jika gambar tidak ditemukan -->
+                <div style="display: none; padding: 40px; color: #666;">
+                    <i class="fas fa-image" style="font-size: 3rem; margin-bottom: 10px;"></i><br>
+                    Simpan file <strong>{{ data.image }}</strong> di folder <code>static/images/</code>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // 1. Ambil data lengkap dari Flask
+        const dashboardData = {{ dashboard_data | tojson }};
+
+        // Konfigurasi Font & Warna Neo-Brutalism
+        Chart.defaults.font.family = "'Space Grotesk', sans-serif";
+        Chart.defaults.color = '#000';
+        
+        const bgColors = ['#00E676', '#d1d1d1', '#FF5252']; // Hijau, Abu, Merah
+        const borderColors = '#000000';
+        const borderWidth = 3;
+
+        // 2. Loop setiap topik (IKN, Whoosh)
+        for (const [key, item] of Object.entries(dashboardData)) {
+            const counts = item.counts;
+            const labels = ['Positif', 'Netral', 'Negatif'];
+            const dataValues = [
+                counts['Positif'] || 0,
+                counts['Netral'] || 0,
+                counts['Negatif'] || 0
+            ];
+
+            // Render Bar Chart
+            const barCtx = document.getElementById(`bar-${key}`);
+            if (barCtx) {
+                new Chart(barCtx, {
+                    type: 'bar',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: 'Jumlah',
+                            data: dataValues,
+                            backgroundColor: bgColors,
+                            borderColor: borderColors,
+                            borderWidth: borderWidth
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: { legend: { display: false } },
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                grid: { color: '#000', lineWidth: 1 },
+                                ticks: { color: '#000', font: { weight: 'bold' } }
+                            },
+                            x: {
+                                grid: { display: false },
+                                ticks: { color: '#000', font: { weight: 'bold' } }
+                            }
+                        }
+                    }
+                });
+            }
+
+            // Render Pie Chart
+            const pieCtx = document.getElementById(`pie-${key}`);
+            if (pieCtx) {
+                new Chart(pieCtx, {
+                    type: 'pie',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            data: dataValues,
+                            backgroundColor: bgColors,
+                            borderColor: borderColors,
+                            borderWidth: borderWidth
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                                labels: { color: '#000', font: { weight: 'bold' } }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    });
+</script>
+{% endblock %}

templates/home.html

@@ -0,0 +1,50 @@
+{% extends 'layout.html' %}
+
+{% block title %}Home{% endblock %}
+
+{% block page_title %}{% endblock %} <!-- Kosongkan default title, kita gunakan Hero section -->
+
+{% block content %}
+    <!-- Hero Section -->
+    <div style="text-align: center; padding: 60px 20px; margin-bottom: 40px; background: linear-gradient(180deg, rgba(52,152,219,0.05) 0%, rgba(255,255,255,0) 100%); border-radius: 20px;">
+        <h1 style="font-size: 3.5rem; margin-bottom: 20px; background: -webkit-linear-gradient(#2980b9, #3498db); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+            Sentimenter AI
+        </h1>
+        <p style="font-size: 1.3rem; max-width: 700px; margin: 0 auto 40px auto; color: #7f8c8d;">
+            Pahami emosi di balik kata-kata dengan kekuatan Artificial Intelligence. 
+            Analisis ulasan pelanggan, komentar media sosial, dan dokumen teks secara instan.
+        </p>
+        <a href="{{ url_for('analysis') }}" class="btn btn-primary" style="padding: 16px 40px; font-size: 1.1rem; border-radius: 50px;">
+            Mulai Analisis <i class="fas fa-arrow-right" style="margin-left: 10px;"></i>
+        </a>
+    </div>
+
+    <!-- Features Grid -->
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
+        
+        <div class="card" style="text-align: center;">
+            <div style="width: 60px; height: 60px; background: rgba(52, 152, 219, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto;">
+                <i class="fas fa-bolt" style="font-size: 1.5rem; color: #3498db;"></i>
+            </div>
+            <h3>Cepat & Akurat</h3>
+            <p>Didukung oleh model IndoBERT yang telah dilatih khusus untuk memahami konteks bahasa Indonesia, termasuk bahasa gaul.</p>
+        </div>
+
+        <div class="card" style="text-align: center;">
+            <div style="width: 60px; height: 60px; background: rgba(46, 204, 113, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto;">
+                <i class="fas fa-layer-group" style="font-size: 1.5rem; color: #2ecc71;"></i>
+            </div>
+            <h3>Analisis Massal</h3>
+            <p>Hemat waktu dengan mengunggah file CSV atau Excel. Proses ribuan baris data hanya dalam sekali klik.</p>
+        </div>
+
+        <div class="card" style="text-align: center;">
+            <div style="width: 60px; height: 60px; background: rgba(231, 76, 60, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto;">
+                <i class="fas fa-chart-bar" style="font-size: 1.5rem; color: #e74c3c;"></i>
+            </div>
+            <h3>Visualisasi Data</h3>
+            <p>Dapatkan wawasan mendalam melalui grafik interaktif dan Word Cloud yang estetis dan mudah dipahami.</p>
+        </div>
+
+    </div>
+{% endblock %}

templates/layout.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Sentimenter{% endblock %} - Analisis Sentimen</title>
+    
+    <!-- 1. Google Font: Space Grotesk (Judul) & Inter (Body) -->
+    <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@400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
+    
+    <!-- 2. Font Awesome (untuk Ikon) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" 
+          xintegrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" 
+          crossorigin="anonymous" referrerpolicy="no-referrer" />
+          
+    <!-- 3. Link ke File CSS Eksternal -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    
+</head>
+<body>
+
+    <!-- 5. Loading Spinner (Neo-Brutalism Style) -->
+    <div class_alias="spinner-overlay" id="spinner-overlay" class="hidden">
+        <div class="spinner-container">
+            <div class="spinner"></div>
+            <p>MEMPROSES DATA...</p>
+        </div>
+    </div>
+
+    <!-- 4. Navbar Atas -->
+    <nav class="navbar">
+        <div class="navbar-container">
+            <a href="{{ url_for('home') }}" class="navbar-brand">
+                <i class="fas fa-robot"></i> SENTIMENTER
+            </a>
+            
+            <button class="hamburger-btn" id="hamburger-btn">
+                <i class="fas fa-bars"></i>
+            </button>
+            
+            <div class="navbar-nav-container" id="navbar-nav-container">
+                <ul class="navbar-nav">
+                    <li><a href="{{ url_for('home') }}">Home</a></li>
+                    <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
+                    <li><a href="{{ url_for('analysis') }}">Analysis</a></li>
+                    <li><a href="{{ url_for('about') }}">About</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 6. Konten Utama -->
+    <div class="content-wrapper">
+        <!-- Judul Halaman -->
+        <div class="page-header">
+            <h1>{% block page_title %}{% endblock %}</h1>
+        </div>
+        
+        <!-- 7. Blok Konten Utama -->
+        {% block content %}{% endblock %}
+    </div>
+
+    <!-- 8. JavaScript untuk Toggle Navbar & Alert Close -->
+    <script>
+        // Toggle Navbar Mobile
+        const hamburgerBtn = document.getElementById('hamburger-btn');
+        const navContainer = document.getElementById('navbar-nav-container');
+
+        hamburgerBtn.addEventListener('click', () => {
+            navContainer.classList.toggle('active');
+        });
+
+        // Tutup Alert
+        document.body.addEventListener('click', function(event) {
+            if (event.target.classList.contains('alert-close')) {
+                event.target.closest('.alert').style.display = 'none';
+            }
+        });
+    </script>
+    
+    <!-- 9. Tambahkan CDN Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <!-- 10. Blok Skrip Khusus Halaman -->
+    {% block scripts %}{% endblock %}
+
+</body>
+</html>