app.py

import os
import json

import gradio as gr
import numpy as np
from google.oauth2.service_account import Credentials
from google.cloud import bigquery

from theme import Seafoam

seafoam = Seafoam()

SCOPES = ["https://www.googleapis.com/auth/bigquery"]
SERVICE_ACCOUNT_INFO = os.getenv("GBQ_TOKEN")
service_account_info_dict = json.loads(SERVICE_ACCOUNT_INFO)

creds = Credentials.from_service_account_info(
        service_account_info_dict, scopes=SCOPES
    )
client = bigquery.Client(credentials=creds, project=service_account_info_dict['project_id'])

with open('achievement.html', 'r', encoding='utf-8') as file:
    html = file.read()


html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + html

css="""

#user_avatar {
    background-color: transparent !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    border-color: #fff !important;
}

#user_avatar > div > img {
}

#user_avatar_description h1{
    font-size: 2.5rem;
    text-align: center;
}

#pet_avatar_description h1{
    font-size: 2rem;
    text-align: center;
}

#badge_avatar_description h1{
    font-size: 2rem;
    text-align: center;
}

#adventure_description h1{
    font-size: 2rem;
    text-align: center;
}

#achievement_log {
    margin: 2.5rem auto 0 auto;
}

#pet_gallery .grid-wrap button  {
    margin: .5vh;
    background: transparent !important;
    border-color: transparent !important;
    height: 150px !important;
    width: 6vh !important;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#pet_gallery .grid-container {
    grid-template-columns: repeat(30, minmax(6vh, 1fr));
}

#badge_gallery .grid-wrap button {
    margin: .5vh;
    height: 150px !important;
    width: 10vh !important;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px); 
}
    
::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }

[data-testid="block-label"] {
    opacity: 0;
}

[aria-label="Share"] {
    opacity: 0;
}
"""

# start of gradio interface
with gr.Blocks(theme=seafoam, css=css) as demo:

    with gr.Row():
        with gr.Column(scale=1,):
            pet_gallery = gr.Gallery(['partner1.png', 'partner2.png', 'partner3.png', 'partner4.png'] * 2, label="夥伴", preview=False, elem_id='pet_gallery', columns=30, height=200)
            pet_description = gr.Markdown('# 夥伴', elem_id='pet_avatar_description')

            badge_gallery = gr.Gallery(['badge.png', 'badge2.png', 'badge3.png', 'badge4.png'] * 2, label="徽章", preview=False, elem_id='badge_gallery', columns=30, height=200)
            badge_description = gr.Markdown('# 徽章', elem_id='badge_avatar_description')
        with gr.Column(scale=1):
            avatar = gr.Gallery(['avatar.png', 'avatar2.png'], preview=True, elem_id='user_avatar')
            avatar_description = gr.Markdown('# 光束守護者', elem_id='user_avatar_description')
        with gr.Column(scale=1):
            description = gr.Markdown('# 冒險階段', elem_id='adventure_description')

            with open('progress_bar.html', 'r', encoding='utf-8') as file:
                progress_bar_html = file.read()
                progress_bar_html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + progress_bar_html
            progress_bar = gr.HTML(progress_bar_html,)

            with open('stage_desc.html', 'r', encoding='utf-8') as file:
                stage_desc_html = file.read()
                stage_desc_html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + stage_desc_html
            stage_desc = gr.HTML(stage_desc_html,)
    with gr.Row():
        f = gr.HTML(html, label="Achievement Log", elem_id="achievement_log")

    with gr.Row():
        i = gr.Textbox(value='0', elem_id="test1")
        o = gr.Textbox()
        b = gr.Button(elem_id="test2")
        df = gr.DataFrame()
        
    def run_query(user_id):
        QUERY = (
        'SELECT created_at, points, user_role, joined, developer FROM `datastore_backup.UserData`',
        f'WHERE user_id = {user_id}'
        )
        query_job = client.query(QUERY)
        print('Running query')
        query_result = query_job.result()
        print('Query complete')
        df = query_result.to_dataframe()
        print('Convert to dataframe')
        # Select a subset of columns
        df = df[["created_at", "points", "user_role", "joined", "developer"]]
        # Convert numeric columns to standard numpy types
        print('Convert to numpy')
        df = df.astype({"points": np.int64})
        return df
    
    b.click(run_query, i, df,)


if __name__ == "__main__":
    demo.launch()