[feat] simple app framework

.pdm-python

@@ -0,0 +1 @@
+/Users/ua21849/Documents/axolotl-ui/.venv/bin/python

app.py

@@ -1,151 +0,0 @@
-from pathlib import Path
-from typing import List, Dict, Tuple
-import matplotlib.colors as mpl_colors
-
-import pandas as pd
-import seaborn as sns
-import shinyswatch
-
-from shiny import App, Inputs, Outputs, Session, reactive, render, req, ui
-
-sns.set_theme()
-
-www_dir = Path(__file__).parent.resolve() / "www"
-
-df = pd.read_csv(Path(__file__).parent / "penguins.csv", na_values="NA")
-numeric_cols: List[str] = df.select_dtypes(include=["float64"]).columns.tolist()
-species: List[str] = df["Species"].unique().tolist()
-species.sort()
-
-app_ui = ui.page_fillable(
-    shinyswatch.theme.minty(),
-    ui.layout_sidebar(
-        ui.sidebar(
-            # Artwork by @allison_horst
-            ui.input_selectize(
-                "xvar",
-                "X variable",
-                numeric_cols,
-                selected="Bill Length (mm)",
-            ),
-            ui.input_selectize(
-                "yvar",
-                "Y variable",
-                numeric_cols,
-                selected="Bill Depth (mm)",
-            ),
-            ui.input_checkbox_group(
-                "species", "Filter by species", species, selected=species
-            ),
-            ui.hr(),
-            ui.input_switch("by_species", "Show species", value=True),
-            ui.input_switch("show_margins", "Show marginal plots", value=True),
-        ),
-        ui.output_ui("value_boxes"),
-        ui.output_plot("scatter", fill=True),
-        ui.help_text(
-            "Artwork by ",
-            ui.a("@allison_horst", href="https://twitter.com/allison_horst"),
-            class_="text-end",
-        ),
-    ),
-)
-
-
-def server(input: Inputs, output: Outputs, session: Session):
-    @reactive.Calc
-    def filtered_df() -> pd.DataFrame:
-        """Returns a Pandas data frame that includes only the desired rows"""
-
-        # This calculation "req"uires that at least one species is selected
-        req(len(input.species()) > 0)
-
-        # Filter the rows so we only include the desired species
-        return df[df["Species"].isin(input.species())]
-
-    @output
-    @render.plot
-    def scatter():
-        """Generates a plot for Shiny to display to the user"""
-
-        # The plotting function to use depends on whether margins are desired
-        plotfunc = sns.jointplot if input.show_margins() else sns.scatterplot
-
-        plotfunc(
-            data=filtered_df(),
-            x=input.xvar(),
-            y=input.yvar(),
-            palette=palette,
-            hue="Species" if input.by_species() else None,
-            hue_order=species,
-            legend=False,
-        )
-
-    @output
-    @render.ui
-    def value_boxes():
-        df = filtered_df()
-
-        def penguin_value_box(title: str, count: int, bgcol: str, showcase_img: str):
-            return ui.value_box(
-                title,
-                count,
-                {"class_": "pt-1 pb-0"},
-                showcase=ui.fill.as_fill_item(
-                    ui.tags.img(
-                        {"style": "object-fit:contain;"},
-                        src=showcase_img,
-                    )
-                ),
-                theme_color=None,
-                style=f"background-color: {bgcol};",
-            )
-
-        if not input.by_species():
-            return penguin_value_box(
-                "Penguins",
-                len(df.index),
-                bg_palette["default"],
-                # Artwork by @allison_horst
-                showcase_img="penguins.png",
-            )
-
-        value_boxes = [
-            penguin_value_box(
-                name,
-                len(df[df["Species"] == name]),
-                bg_palette[name],
-                # Artwork by @allison_horst
-                showcase_img=f"{name}.png",
-            )
-            for name in species
-            # Only include boxes for _selected_ species
-            if name in input.species()
-        ]
-
-        return ui.layout_column_wrap(*value_boxes, width = 1 / len(value_boxes))
-
-
-# "darkorange", "purple", "cyan4"
-colors = [[255, 140, 0], [160, 32, 240], [0, 139, 139]]
-colors = [(r / 255.0, g / 255.0, b / 255.0) for r, g, b in colors]
-
-palette: Dict[str, Tuple[float, float, float]] = {
-    "Adelie": colors[0],
-    "Chinstrap": colors[1],
-    "Gentoo": colors[2],
-    "default": sns.color_palette()[0],  # type: ignore
-}
-
-bg_palette = {}
-# Use `sns.set_style("whitegrid")` to help find approx alpha value
-for name, col in palette.items():
-    # Adjusted n_colors until `axe` accessibility did not complain about color contrast
-    bg_palette[name] = mpl_colors.to_hex(sns.light_palette(col, n_colors=7)[1])  # type: ignore
-
-
-app = App(
-    app_ui,
-    server,
-    static_assets=str(www_dir),
-)

pyproject.toml

@@ -0,0 +1,21 @@
+[project]
+name = "axolotl-ui"
+version = "0.0.1"
+description = "Default template for PDM package"
+authors = [
+    {name = "James Wade", email = "[email protected]"},
+]
+dependencies = [
+    "shiny==0.7.0",
+    "shinyswatch==0.4.2",
+    "seaborn==0.12.2",
+    "matplotlib==3.7.1",
+    "autotrain-advanced>=0.6.83",
+]
+requires-python = ">=3.9"
+readme = "README.md"
+license = {text = "Apache-2"}
+
+
+[tool.pdm]
+distribution = false

src/axolotl_ui/app.py

@@ -0,0 +1,116 @@
+from pathlib import Path
+
+import seaborn as sns
+import shinyswatch
+
+from shiny import App, Inputs, Outputs, Session, ui
+from htmltools import HTML
+
+from utils import background_img, question_circle_fill
+
+sns.set_theme()
+
+www_dir = Path(__file__).parent.resolve() / "www"
+
+project_config = ui.accordion_panel(
+    "Project Config",
+    *[
+        ui.input_text(
+            id="project_name",
+            label=ui.tooltip(
+                ui.span("Project Name ", question_circle_fill()), "Additional info"
+            ),
+            placeholder="Awesome Axolotl"
+        ),
+        ui.input_password(
+            id="hf_token",
+            label=ui.tooltip(
+                ui.span("HuggingFace Token ", question_circle_fill()), "T"
+            )
+        ),
+        ui.input_text(
+            id="base_model",
+            label=ui.tooltip(
+                ui.span("Base Model ", question_circle_fill()),
+                "This is the huggingface model that contains *.pt, *.safetensors, or *.bin files",
+            ),
+            placeholder="meta-llama/Llama-2-7b-chat-hf",
+        ),
+        ui.input_select(
+            id="model_type",
+            label=ui.tooltip(
+                ui.span("Model Type ", question_circle_fill()),
+                "If you want to specify the type of model to load, AutoModelForCausalLM is a good choice too.",
+            ),
+            choices=["AutoModelForCausalLM", "LlamaForCausalLM"],
+            selected="AutoModelForCausalLM",
+        ),
+        ui.input_select(
+            id="model_derivation",
+            label=ui.tooltip(
+                ui.span("Model Source ", question_circle_fill()),
+                'Used to identify which the model is based on. Please note that if you set this to mistral, `padding_side` will be set to "left" by default',
+            ),
+            choices=["falcon", "llama", "mistra", "qwen"],
+            selected="llama",
+        ),
+        ui.accordion(
+            ui.accordion_panel(
+                "Advanced Config",
+                ui.input_text(id="test1", label="Test 2", placeholder="placeholder"),
+            ),
+            open=False,
+        ),
+    ]
+)
+
+dataset_config = ui.accordion_panel(
+    "Datasets",
+    *[
+        ui.input_text(
+            id="dataset_path",
+            label=ui.tooltip(
+                ui.span("Dataset Path ", question_circle_fill()), "A list of one or more paths to datasets to finetune the model with. HuggingFace dataset repo | s3://,gs:// path | \"json\" for local dataset, make sure to fill data_files"
+            ),
+            placeholder="vicgalle/alpaca-gpt4"
+        ),
+        ui.input_select(
+            id="dataset_type",
+            label=ui.tooltip(
+                ui.span("Dataset Type ", question_circle_fill()), "The type of prompt to use for training. [alpaca, sharegpt, gpteacher, oasst, reflection]"
+            ),
+            choices=["alpaca", "sharegpt", "gpteacher", "oasst", "reflection"],
+            selected="alpaca"
+        )
+    ]
+)
+
+app_ui = ui.page_fillable(
+    shinyswatch.theme.minty(),
+    ui.layout_sidebar(
+        ui.sidebar(
+            ui.h3("Axolotl Laucher 🚀"),
+            ui.accordion(project_config, id="project_config"),
+            ui.accordion(dataset_config, id="dataset_config", open=False),
+            ui.input_action_button(
+                "create_space",
+                "Create HF Space",
+            ),
+            width=400,
+            class_="opacity-75"
+        ),
+        HTML(background_img(url="https://github.com/OpenAccess-AI-Collective/axolotl/raw/main/image/axolotl.png",
+                            opacity=0.1))
+    )
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session):
+    return ()
+
+
+app = App(
+    app_ui,
+    server,
+    static_assets=str(www_dir),
+)

src/axolotl_ui/utils.py

@@ -0,0 +1,48 @@
+from shiny import ui
+
+# https://icons.getbootstrap.com/icons/question-circle-fill/
+def question_circle_fill():
+    ui.HTML(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle-fill mb-1" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/></svg>'
+    )
+
+def background_img(url: str, opacity: float) -> str:
+    """
+    Generate CSS style for setting a somewhat transparent background image.
+    
+    Parameters
+    ----------
+    url : str
+        URL of the image to be used as a background.
+    opacity : float
+        Opacity level of the background image (0.0 to 1.0).
+
+    Returns
+    -------
+    str
+        A CSS style string to set the somewhat transparent background image.
+    """
+    return f"""
+    <style>
+    body, html {{
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }}
+    body::before {{
+        content: "";
+        position: fixed; /* Cover the entire page */
+        left: 0;
+        right: 0;
+        z-index: -1; /* Ensure the image stays in the background */
+        display: block;
+        background-image: url('{url}');
+        background-size: cover; /* Cover the entire page */
+        background-position: center; /* Center the background image */
+        opacity: {opacity}; /* Set the opacity for the image */
+        width: 100%;
+        height: 100%;
+    }}
+    </style>
+    """