File size: 2,719 Bytes
e4f497e
 
 
0bd316f
e4f497e
 
 
 
a8fb881
e4f497e
 
 
 
 
 
76acd0c
 
 
 
a3a46fb
 
 
76acd0c
 
 
e4f497e
 
0bd316f
180b43f
0bd316f
 
 
 
 
 
 
 
 
 
e4f497e
6826406
 
 
 
e4f497e
 
0bd316f
e4f497e
 
0bd316f
e4f497e
 
0bd316f
e4f497e
 
 
0bd316f
e4f497e
 
180b43f
0bd316f
e4f497e
180b43f
0bd316f
ce060dc
 
e4f497e
 
0bd316f
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
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()