app.py

import streamlit as st
from datasets import load_dataset
import pandas as pd
import math

# Fungsi untuk membaca data dari Hugging Face dataset
@st.cache_resource
def load_data():
    dataset = load_dataset("damand2061/id_cs_journal_articles", token=True)
    data = pd.DataFrame(dataset['train'])
    return data

# Fungsi untuk menampilkan card
def display_card(article_name, journal_name, article_url):
    return f"""
    <div style="border:1px solid #ccc; padding: 20px; margin: 15px 0; border-radius: 5px; width: 100%; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); text-align: justify;">
        <h5 style="margin: 0; font-size: 1.2em;">{article_name}</h5>
        <p style="margin: 5px 0; text-align: justify;">{journal_name}</p>
            <a href="{article_url}" target="_blank">
                <button style="background-color: #4CAF50; color: white; border: none; padding: 5px 9px; margin-top: 5px; border-radius: 5px; font-size: 0.9em;">
                    Kunjungi Artikel
                </button>
            </a>
    </div>

    """

# Fungsi untuk menampilkan data secara row-wise
def display_data(data, start_index, end_index):
    # Buat 3 kolom
    for i in range(start_index, end_index, 3):
        cols = st.columns(3)  # Selalu buat 3 kolom
        for j in range(3):
            if i + j < end_index:
                article_name = data.iloc[i + j]['article_name']
                journal_name = data.iloc[i + j]['journal_name']
                article_url = data.iloc[i + j]['article_url']
                # Menampilkan setiap data di kolom yang sesuai
                cols[j].markdown(display_card(article_name, journal_name, article_url), unsafe_allow_html=True)

# Fungsi untuk menambah data yang ditampilkan
def show_more():
    st.session_state.num_displayed += 18

# Main app
def main():
    st.set_page_config(page_title="ID CS Journal Aggregator", layout="wide")  # Set layout lebar
    # Judul terpusat
    st.markdown("<h1 style='text-align: center;'>Indonesian Computer Science<br>Journal Aggregator</h1>", unsafe_allow_html=True)

    # Load data dari Hugging Face dataset
    data = load_data()

    # Inisialisasi jumlah data yang ditampilkan
    if 'num_displayed' not in st.session_state:
        st.session_state.num_displayed = 18  # Jumlah card yang ditampilkan awalnya

    # Tampilkan data
    end_index = min(st.session_state.num_displayed, len(data))
    display_data(data, 0, end_index)

    # Tombol "Show More"
    if st.session_state.num_displayed < len(data):
        col1, col2, col3 = st.columns([1, 2, 1])
        with col2:
            st.button("Show More", on_click=show_more, key="show_more", use_container_width=True)

if __name__ == "__main__":
    main()