refactor: refactor folder structure

.gitignore

@@ -0,0 +1,162 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+.DS_Store

app.py

@@ -1,131 +1,91 @@
-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;
-}
-"""
+# load css
+with open("css/style.css", "r", encoding="utf-8") as file:
+    css = file.read()
 
 # 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')
+        with gr.Column(
+            scale=1,
+        ):
+            pet_gallery = gr.Gallery(
+                [
+                    "media/partner1.png",
+                    "media/partner2.png",
+                    "media/partner3.png",
+                    "media/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(
+                [
+                    "media/badge.png",
+                    "media/badge2.png",
+                    "media/badge3.png",
+                    "media/badge4.png",
+                ]
+                * 2,
+                show_share_button=True,
+                label="徽章",
+                preview=False,
+                elem_id="badge_gallery",
+                columns=30,
+                height=200,
+            )
+            badge_description = gr.Markdown("# 徽章", elem_id="badge_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')
+            avatar = gr.Gallery(
+                ["media/avatar.png", "media/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')
+            description = gr.Markdown("# 冒險階段", elem_id="adventure_description")
 
-            with open('progress_bar.html', 'r', encoding='utf-8') as file:
+            with open("htmls/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:
+                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("htmls/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,)
+                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():
+        with open("htmls/achievement.html", "r", encoding="utf-8") as file:
+            html = file.read()
+        html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + html
         f = gr.HTML(html, label="Achievement Log", elem_id="achievement_log")
 
     with gr.Row():
@@ -133,27 +93,31 @@ with gr.Blocks(theme=seafoam, css=css) as demo:
         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}'"
+            "SELECT created_at, points, user_role, joined, developer FROM `datastore_backup.UserData`"
+            f"WHERE user_id = '{user_id}'"
         )
-        print(f'Start query, user_id: {user_id}, {QUERY}')
+        print(f"Start query, user_id: {user_id}, {QUERY}")
         query_job = client.query(QUERY)
-        print('Running query')
+        print("Running query")
         query_result = query_job.result()
-        print('Query complete')
+        print("Query complete")
         df = query_result.to_dataframe()
-        print('Convert 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')
+        print("Convert to numpy")
         df = df.astype({"points": np.int64})
         return df
-    
-    b.click(run_query, i, df,)
+
+    b.click(
+        run_query,
+        i,
+        df,
+    )
 
 
 if __name__ == "__main__":

css/style.css

@@ -0,0 +1,70 @@
+.gradio-container {background: url('file=media/bg_clear.png')}
+
+#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_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;
+}

theme.py

@@ -3,6 +3,7 @@ from typing import Union, Iterable
 from gradio.themes.base import Base
 from gradio.themes.utils import colors, fonts, sizes
 
+
 class Seafoam(Base):
     def __init__(
         self,
@@ -25,9 +26,6 @@ class Seafoam(Base):
         ),
     ):
         super().__init__(
-            #primary_hue=primary_hue,
-            #secondary_hue=secondary_hue,
-            #neutral_hue=neutral_hue,
             spacing_size=spacing_size,
             radius_size=radius_size,
             text_size=text_size,
@@ -35,22 +33,15 @@ class Seafoam(Base):
             font_mono=font_mono,
         )
         super().set(
-            body_background_fill="url('file=bg_clear.png') no-repeat center center / cover",
-            body_background_fill_dark="url('file=bg_clear.png') no-repeat center center / cover",
-
             body_text_color_dark="#333",
             background_fill_primary_dark="rgba(255, 255, 255, 1)",
             background_fill_secondary_dark="rgba(255, 255, 255, 0)",
             block_background_fill_dark="rgba(255, 255, 255, 0.1)",
             block_border_color_dark="rgba(255, 255, 255, 0.1)",
-            border_color_primary_dark='trasparent',
-            # button_primary_background_fill="linear-gradient(90deg, *primary_300, *secondary_400)",
-            # button_primary_background_fill_hover="linear-gradient(90deg, *primary_200, *secondary_300)",
-            # button_primary_text_color="white",
-            # button_primary_background_fill_dark="linear-gradient(90deg, *primary_600, *secondary_800)",
+            border_color_primary_dark="trasparent",
             slider_color="*secondary_300",
             slider_color_dark="*secondary_600",
             block_title_text_weight="600",
             block_border_width="3px",
             block_shadow="*shadow_drop_lg",
-        )
+        )