first release with pure C

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+llama-server filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,12 +1,12 @@
 ---
-title: BPP Gemma3 1b
-emoji: 🦀
-colorFrom: purple
-colorTo: purple
-sdk: static
+title: Gemma3 1B IT IQ4NL via local GGUF
+emoji: 📝
+colorFrom: blue
+colorTo: indigo
+sdk: gradio
+sdk_version: 5.16.2
+app_file: app.py
 pinned: false
-license: gemma
-short_description: Gemma3 1B IT IQ4NL using BPP
+license: apache-2.0
+short_description: Chat with Local GGUF server
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.css

@@ -0,0 +1,75 @@
+/* Hide the standard Gradio footer */
+footer {
+    display: none !important;
+}
+/* Make the text in the input box and chat label bigger */
+textarea, .wrapper > label {
+    font-size: var(--text-md)
+}
+.input-container {
+    align-items: center;
+}
+/* Make the chat label bold */
+.wrapper > label {
+    font-weight: 600;
+}
+/* Limit the overall width of the demo */
+.gradio-container {
+    max-width: 1024px !important;
+    margin: 5vh auto !important;
+}
+/* Theme anchor links with Carbon coloring */
+.gr_docs_link a, .gr_docs_link a > i {
+    color: #78A9FF;
+    text-decoration: none;
+}
+/* Title alignment with the Granite icon */
+.gr_title {
+    display: flex;
+    align-items: center;
+    margin-bottom: -0.5rem;
+}
+.gr_title img {
+    height: 42px;
+    width: 42px;
+    margin-right: 1rem;
+    filter: invert(0%) sepia(0%) saturate(7459%) hue-rotate(154deg) brightness(96%) contrast(100%);
+}
+.gr_title h1 {
+    margin: auto !important;
+    font-size: 36px;
+    font-weight: 600;
+}
+/* Only one form on the page, within the Accordion component */
+.form {
+    flex-direction: row;
+    background-color: var(--block-background-fill);
+}
+.gr_accordion_element {
+    width: 50%;
+    margin: 0px;
+}
+/* Color the example background */
+.example:hover {
+    background-color: #D0E2FF
+}
+/* Centre the example text within the example box */
+.example-text-content {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+/* Centre the values in advanced settings */
+.tab-like-container  {
+    align-items: center;
+}
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+    /* Color the Granite icon in white */
+    .gr_title img {
+        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(101%) contrast(104%);
+    }
+    /* Color the example background */
+    .example:hover {
+        background-color: #4589FF
+    }
+}

app.py

@@ -0,0 +1,180 @@
+from collections.abc import Iterator
+from datetime import datetime
+from pathlib import Path
+from threading import Thread
+from huggingface_hub import hf_hub_download
+from themes.research_monochrome import theme
+from typing import Iterator, List, Dict
+
+import requests
+import json
+import subprocess
+import gradio as gr
+
+today_date = datetime.today().strftime("%B %-d, %Y")  # noqa: DTZ002
+
+SYS_PROMPT = f"""Today's Date: {today_date}.
+You are Gemma, developed by Google. You are a helpful AI assistant"""
+TITLE = "Gemma3 1b instruct IQ4_NL from local GGUF server"
+DESCRIPTION = """
+<p>Gemma3 1b instruct is an open-source LLM supporting a 128k context window. This demo uses only 2K context.
+</p>
+"""
+LLAMA_CPP_SERVER = "http://127.0.0.1:8081"
+MAX_NEW_TOKENS = 1024
+TEMPERATURE = 0.7
+TOP_P = 0.85
+TOP_K = 50
+REPETITION_PENALTY = 1.05
+
+# download GGUF into local directory
+gguf_path = hf_hub_download(
+            repo_id="bartowski/google_gemma-3-1b-it-GGUF",
+            filename="google_gemma-3-1b-it-IQ4_NL.gguf",
+            local_dir="."
+        )
+
+# start llama-server
+subprocess.run(["chmod", "+x", "llama-server"])
+command = ["./llama-server", "-m", "google_gemma-3-1b-it-IQ4_NL.gguf", "-ngl", "0", "--temp", "0.0", "-c", "2048", "-t", "8", "--port", "8081"]
+process = subprocess.Popen(command)
+print(f"Llama-server process started with PID {process.pid}")
+
+
+def generate(
+    message: str,
+    chat_history: List[Dict],
+    temperature: float = TEMPERATURE,
+    repetition_penalty: float = REPETITION_PENALTY,
+    top_p: float = TOP_P,
+    top_k: float = TOP_K,
+    max_new_tokens: int = MAX_NEW_TOKENS,
+) -> Iterator[str]:
+    """Generate function for chat demo using Llama.cpp server."""
+
+    # Build messages
+    conversation = []
+    conversation.append({"role": "system", "content": SYS_PROMPT})
+    conversation += chat_history
+    conversation.append({"role": "user", "content": message})
+
+    # Prepare the prompt for the Llama.cpp server
+    prompt = ""
+    for item in conversation:
+      if item["role"] == "system":
+        prompt += f"<|system|>\n{item['content']}\n<|file_separator|>\n"
+      elif item["role"] == "user":
+        prompt += f"<|user|>\n{item['content']}\n<|file_separator|>\n"
+      elif item["role"] == "assistant":
+        prompt += f"<|model|>\n{item['content']}\n<|file_separator|>\n"
+    prompt += "<|model|>\n"  # Add the beginning token for the assistant
+
+
+    # Construct the request payload
+    payload = {
+        "prompt": prompt,
+        "stream": True,  # Enable streaming
+        "max_tokens": max_new_tokens,
+        "temperature": temperature,
+        "repeat_penalty": repetition_penalty,
+        "top_p": top_p,
+        "top_k": top_k,
+        "stop": ["<|file_separator|>"], #stops after it sees this
+    }
+
+    try:
+        # Make the request to the Llama.cpp server
+        with requests.post(f"{LLAMA_CPP_SERVER}/completion", json=payload, stream=True, timeout=60) as response:
+            response.raise_for_status()  # Raise HTTPError for bad responses (4xx or 5xx)
+
+            # Stream the response from the server
+            outputs = []
+            for line in response.iter_lines():
+                if line:
+                    # Decode the line
+                    decoded_line = line.decode('utf-8')
+                    # Remove 'data: ' prefix if present
+                    if decoded_line.startswith("data: "):
+                        decoded_line = decoded_line[6:]
+
+                    # Handle potential JSON decoding errors
+                    try:
+                        json_data = json.loads(decoded_line)
+                        text = json_data.get("content", "")  # Extract content field. crucial.
+                        if text:
+                            outputs.append(text)
+                            yield "".join(outputs)
+
+                    except json.JSONDecodeError:
+                        print(f"JSONDecodeError: {decoded_line}")
+                        # Handle the error, potentially skipping the line or logging it.
+
+    except requests.exceptions.RequestException as e:
+        print(f"Request failed: {e}")
+        yield f"Error: {e}"  # Yield an error message to the user
+    except Exception as e:
+        print(f"An unexpected error occurred: {e}")
+        yield f"Error: {e}" # Yield error message
+
+
+css_file_path = Path(Path(__file__).parent / "app.css")
+
+# advanced settings (displayed in Accordion)
+temperature_slider = gr.Slider(
+    minimum=0, maximum=1.0, value=TEMPERATURE, step=0.1, label="Temperature", elem_classes=["gr_accordion_element"]
+)
+top_p_slider = gr.Slider(
+    minimum=0, maximum=1.0, value=TOP_P, step=0.05, label="Top P", elem_classes=["gr_accordion_element"]
+)
+top_k_slider = gr.Slider(
+    minimum=0, maximum=100, value=TOP_K, step=1, label="Top K", elem_classes=["gr_accordion_element"]
+)
+repetition_penalty_slider = gr.Slider(
+    minimum=0,
+    maximum=2.0,
+    value=REPETITION_PENALTY,
+    step=0.05,
+    label="Repetition Penalty",
+    elem_classes=["gr_accordion_element"],
+)
+max_new_tokens_slider = gr.Slider(
+    minimum=1,
+    maximum=2000,
+    value=MAX_NEW_TOKENS,
+    step=1,
+    label="Max New Tokens",
+    elem_classes=["gr_accordion_element"],
+)
+chat_interface_accordion = gr.Accordion(label="Advanced Settings", open=False)
+
+with gr.Blocks(fill_height=True, css_paths=css_file_path, theme=theme, title=TITLE) as demo:
+    gr.HTML(f"<h2>{TITLE}</h2>", elem_classes=["gr_title"])
+    gr.HTML(DESCRIPTION)
+    chat_interface = gr.ChatInterface(
+        fn=generate,
+        examples=[
+            ["Explain the concept of quantum computing to someone with no background in physics or computer science."],
+            ["What is OpenShift?"],
+            ["What's the importance of low latency inference?"],
+            ["Help me boost productivity habits."],
+        ],
+        example_labels=[
+            "Explain quantum computing",
+            "What is OpenShift?",
+            "Importance of low latency inference",
+            "Boosting productivity habits",
+        ],
+        cache_examples=False,
+        type="messages",
+        additional_inputs=[
+            temperature_slider,
+            repetition_penalty_slider,
+            top_p_slider,
+            top_k_slider,
+            max_new_tokens_slider,
+        ],
+        additional_inputs_accordion=chat_interface_accordion,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()

index.html

@@ -1,19 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

llama-server

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fbd926bad47fcff408ed4065ef70ce6f468d519494bab31c80d0e3400cf449f1
+size 2220844

requirements.txt

@@ -0,0 +1,3 @@
+gradio-client
+gradio
+huggingface-hub

themes/carbon.py

@@ -0,0 +1,147 @@
+"""IBM Carbon theme for gradio demos.
+
+This version builds on top of the Carbon theme to make it more playful with rounded corners, a larger font family to
+enhance readability, and the IBM Cool Gray color palette for better consistency with other IBM Research demos, such as
+Bee.
+"""
+
+import gradio as gr
+from gradio.themes.utils import sizes
+
+theme = gr.themes.Base(
+    primary_hue=gr.themes.Color(
+        c100="#EDF5FF",
+        c200="#D0E2FF",
+        c300="#A6C8FF",
+        c400="#78A9FF",
+        c50="#F9F9FB",
+        c500="#4589FF",
+        c600="#0F62FE",
+        c700="#0043CE",
+        c800="#002D9C",
+        c900="#001D6C",
+        c950="#001141",
+    ),
+    secondary_hue=gr.themes.Color(
+        c100="#EDF5FF",
+        c200="#D0E2FF",
+        c300="#A6C8FF",
+        c400="#78A9FF",
+        c50="#F9F9FB",
+        c500="#4589FF",
+        c600="#0F62FE",
+        c700="#0043CE",
+        c800="#002D9C",
+        c900="#001D6C",
+        c950="#001141",
+    ),
+    neutral_hue=gr.themes.Color(
+        c100="#F2F4F8",
+        c200="#DDE1E6",
+        c300="#C1C7CD",
+        c400="#A2A9B0",
+        c50="#F9F9FB",
+        c500="#878D96",
+        c600="#697077",
+        c700="#4D5358",
+        c800="#393939",
+        c900="#21272A",
+        c950="#121619",
+    ),
+    spacing_size=sizes.spacing_md,  # change spacing to default size
+    radius_size=sizes.radius_md,  # change spacing to default size and Keep Radius to make demo feel more playful
+    text_size=sizes.text_lg,  # change fontsize to default size
+    #   spacing_size: sizes.Size | str = sizes.spacing_md,  #change spacing to default size
+    #         radius_size: sizes.Size | str = sizes.radius_md, #change spacing to default size and Keep Radius to make
+    #                                                           demo feel more playful
+    #         text_size: sizes.Size | str = sizes.text_lg, #change fontsize to default size
+    font=["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"],  # update font
+    font_mono=["IBM Plex Mono", "ui-monospace", "Consolas", "monospace"],  # update font
+).set(
+    # Colors
+    background_fill_primary="*neutral_100",  # Coolgray10 background
+    background_fill_primary_dark="*neutral_950",  # Coolgray95 background for dark mode
+    slider_color="*primary_600",  # Blue60
+    slider_color_dark="*primary_500",  # Blue50
+    # Shadows
+    shadow_drop="0 1px 4px 0 rgb(0 0 0 / 0.1)",
+    shadow_drop_lg="0 2px 5px 0 rgb(0 0 0 / 0.1)",
+    # Block Labels
+    block_background_fill="white",
+    block_label_background_fill="white",  # same color as blockback gound fill
+    block_label_radius="*radius_md",
+    block_label_text_size="*text_md",
+    block_label_text_weight="600",
+    block_label_text_color="black",
+    block_label_text_color_dark="white",
+    block_title_radius="*block_label_radius",
+    block_title_background_fill="*block_label_background_fill",
+    block_title_text_weight="600",
+    block_title_text_color="black",
+    block_title_text_color_dark="white",
+    block_label_margin="*spacing_md",
+    # Inputs
+    input_background_fill="white",
+    input_background_fill_dark="*block-background-fill",
+    input_border_color="*neutral_100",
+    input_shadow="*shadow_drop",
+    input_shadow_focus="*shadow_drop_lg",
+    checkbox_shadow="none",
+    # Buttons
+    shadow_spread="6px",
+    button_primary_shadow="*shadow_drop_lg",
+    button_primary_shadow_hover="*shadow_drop_lg",
+    button_primary_shadow_active="*shadow_inset",
+    button_secondary_shadow="*shadow_drop_lg",
+    button_secondary_shadow_hover="*shadow_drop_lg",
+    button_secondary_shadow_active="*shadow_inset",
+    checkbox_label_shadow="*shadow_drop_lg",
+    button_primary_background_fill="*primary_600",
+    button_primary_background_fill_hover="*primary_500",
+    button_primary_background_fill_hover_dark="*primary_500",
+    button_primary_text_color="white",
+    button_secondary_background_fill="white",
+    button_secondary_background_fill_hover="*neutral_100",
+    button_secondary_background_fill_dark="*neutral_800",  # Secondary cool gray 80
+    button_secondary_background_fill_hover_dark="*primary_500",
+    button_secondary_text_color="*neutral_800",
+    button_cancel_background_fill="*button_secondary_background_fill",
+    button_cancel_background_fill_hover="*button_secondary_background_fill_hover",
+    button_cancel_background_fill_hover_dark="*button_secondary_background_fill_hover",
+    button_cancel_text_color="*button_secondary_text_color",
+    checkbox_label_background_fill_selected="*primary_200",
+    checkbox_label_background_fill_selected_dark="*primary_500",
+    checkbox_border_width="1px",
+    checkbox_border_color="*neutral_200",
+    checkbox_background_color_dark="*neutral_700",  # Jan 18 test to fix checkbox, radio button background color
+    checkbox_background_color_selected="*primary_600",
+    checkbox_background_color_selected_dark="*primary_500",
+    checkbox_border_color_focus="*primary_600",
+    checkbox_border_color_focus_dark="*primary_500",
+    checkbox_border_color_selected="*primary_600",
+    checkbox_border_color_selected_dark="*primary_500",
+    checkbox_label_text_color_selected="black",
+    # Borders
+    block_border_width="1px",  # test example border
+    panel_border_width="1px",
+    # Chatbubble related colors
+    # light
+    # color_accent = "*secondary_400",
+    border_color_accent_subdued="*color_accent_soft",  # chatbubble human border color, use Blue 20 as an accent color
+    color_accent_soft="*secondary_200",  # chatbubble human color
+    # darkmode
+    # chatbubble human border color in darkmode, use Blue 20 as an accent color
+    border_color_accent_subdued_dark="*secondary_500",
+    color_accent_soft_dark="*secondary_500",  # chatbubble human color in dark mode
+    # Chatbot related font
+    chatbot_text_size="*text_md",  # make it larger
+    # additional dark mode related tweaks:
+    # block_background_fill_dark="*neutral_950", # Jan 18 test coolgray95 background for dark mode
+    block_label_background_fill_dark="*neutral_800",  # same color as blockback gound fill
+    block_title_background_fill_dark="*block_label_background_fill",
+    # input_background_fill_dark="*neutral_800", #This attribute help match fill color cool gray 80 to match background
+    #                                             however cause the problem for the general theme.
+    #  input_shadow_dark="*shadow_drop", #Test if it could make the border without the color
+    # input_border_color_dark="*neutral_200",#add attribute for border Jan 18
+    checkbox_border_color_dark="*neutral_600",  # Jan 18 test to fix border
+)

themes/research_monochrome.py

@@ -0,0 +1,152 @@
+"""IBM Research Monochrome theme for gradio demos.
+
+This version is a variation of CarbonSoft style, where the primary button is dark gray to create monochrome style. This
+version uses the style from Research demos such as Bee to make it more playful with rounded corners, a larger font
+family to enhance readability, and the IBM Cool Gray color palette for better consistency with other IBM Research demos,
+such as Bee.
+"""
+
+import gradio as gr
+from gradio.themes.utils import sizes
+
+theme = gr.themes.Base(
+    primary_hue=gr.themes.Color(
+        c100="#EDF5FF",
+        c200="#D0E2FF",
+        c300="#A6C8FF",
+        c400="#78A9FF",
+        c50="#F9F9FB",
+        c500="#4589FF",
+        c600="#0F62FE",
+        c700="#0043CE",
+        c800="#002D9C",
+        c900="#001D6C",
+        c950="#001141",
+    ),
+    secondary_hue=gr.themes.Color(
+        c100="#EDF5FF",
+        c200="#D0E2FF",
+        c300="#A6C8FF",
+        c400="#78A9FF",
+        c50="#F9F9FB",
+        c500="#4589FF",
+        c600="#0F62FE",
+        c700="#0043CE",
+        c800="#002D9C",
+        c900="#001D6C",
+        c950="#001141",
+    ),
+    neutral_hue=gr.themes.Color(
+        c100="#F2F4F8",
+        c200="#DDE1E6",
+        c300="#C1C7CD",
+        c400="#A2A9B0",
+        c50="#F9F9FB",
+        c500="#878D96",
+        c600="#697077",
+        c700="#4D5358",
+        c800="#393939",
+        c900="#21272A",
+        c950="#121619",
+    ),
+    spacing_size=sizes.spacing_md,  # change spacing to default size
+    radius_size=sizes.radius_md,  # change spacing to default size and Keep Radius to make demo feel more playful
+    text_size=sizes.text_md,  # change fontsize to default size
+    #   spacing_size: sizes.Size | str = sizes.spacing_md,  #change spacing to default size
+    #         radius_size: sizes.Size | str = sizes.radius_md, #change spacing to default size and Keep Radius to make
+    #                                                           demo feel more playful
+    #         text_size: sizes.Size | str = sizes.text_lg, #change fontsize to default size
+    font=["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"],  # update font
+    font_mono=["IBM Plex Mono", "ui-monospace", "Consolas", "monospace"],  # update font
+).set(
+    # Colors
+    background_fill_primary="*neutral_100",  # Coolgray10 background
+    background_fill_primary_dark="*neutral_950",  # Coolgray95 background for dark mode
+    # Change blue to black to create monochrome style
+    slider_color="*neutral_900",
+    slider_color_dark="*primary_500",
+    # Shadows
+    shadow_drop="0 1px 4px 0 rgb(0 0 0 / 0.1)",
+    shadow_drop_lg="0 2px 5px 0 rgb(0 0 0 / 0.1)",
+    # Block Labels
+    block_background_fill="white",
+    block_label_background_fill="white",  # same color as blockback gound fill
+    block_label_radius="*radius_md",
+    block_label_text_size="*text_md",
+    block_label_text_weight="600",
+    block_label_text_color="black",
+    block_label_text_color_dark="white",
+    block_title_radius="*block_label_radius",
+    block_title_background_fill="*block_label_background_fill",
+    block_title_text_weight="400",
+    block_title_text_color="black",
+    block_title_text_color_dark="white",
+    block_label_margin="*spacing_md",
+    # Inputs
+    input_background_fill="white",
+    input_background_fill_dark="*block-background-fill",
+    input_border_color="*neutral_100",
+    input_shadow="*shadow_drop",
+    input_shadow_dark="0 1px 4px #000",
+    input_shadow_focus="*shadow_drop_lg",
+    checkbox_shadow="none",
+    # Buttons
+    shadow_spread="6px",
+    button_primary_shadow="*shadow_drop_lg",
+    button_primary_shadow_hover="*shadow_drop_lg",
+    button_primary_shadow_active="*shadow_inset",
+    button_secondary_shadow="*shadow_drop_lg",
+    button_secondary_shadow_hover="*shadow_drop_lg",
+    button_secondary_shadow_active="*shadow_inset",
+    checkbox_label_shadow="*shadow_drop_lg",
+    # Change blue to black to create monochrome style
+    button_primary_background_fill="*neutral_900",
+    button_primary_background_fill_dark="*neutral_600",
+    button_primary_background_fill_hover="*neutral_700",
+    button_primary_background_fill_hover_dark="*primary_500",  # hover to be blue
+    button_primary_text_color="white",
+    button_secondary_background_fill="white",
+    button_secondary_background_fill_hover="*neutral_100",
+    button_secondary_background_fill_dark="*neutral_800",  # Secondary cool gray 80
+    button_secondary_background_fill_hover_dark="*primary_500",
+    button_secondary_text_color="*neutral_800",
+    button_cancel_background_fill="*button_secondary_background_fill",
+    button_cancel_background_fill_hover="*button_secondary_background_fill_hover",
+    button_cancel_background_fill_hover_dark="*button_secondary_background_fill_hover",
+    button_cancel_text_color="*button_secondary_text_color",
+    checkbox_label_background_fill_selected="*primary_200",
+    checkbox_label_background_fill_selected_dark="*primary_500",
+    checkbox_border_width="1px",
+    checkbox_border_color="*neutral_200",
+    checkbox_background_color_dark="*neutral_700",  # Jan 18 test to fix checkbox, radio button background color
+    checkbox_background_color_selected="*primary_600",
+    checkbox_background_color_selected_dark="*primary_500",
+    checkbox_border_color_focus="*primary_600",
+    checkbox_border_color_focus_dark="*primary_500",
+    checkbox_border_color_selected="*primary_600",
+    checkbox_border_color_selected_dark="*primary_500",
+    checkbox_label_text_color_selected="black",
+    # Borders
+    block_border_width="1px",  # test example border
+    panel_border_width="1px",
+    # Chatbubble related colors
+    # light
+    # color_accent = "*secondary_400",
+    border_color_accent_subdued="*color_accent_soft",  # chatbubble human border color, use Blue 20 as an accent color
+    color_accent_soft="*secondary_200",  # chatbubble human color
+    # darkmode
+    # chatbubble human border color in darkmode, use Blue 20 as an accent color
+    border_color_accent_subdued_dark="*secondary_500",
+    color_accent_soft_dark="*secondary_500",  # chatbubble human color in dark mode
+    # Chatbot related font
+    chatbot_text_size="*text_md",  # make it larger
+    # additional dark mode related tweaks:
+    # block_background_fill_dark="*neutral_950", # Jan 18 test coolgray95 background for dark mode
+    block_label_background_fill_dark="*neutral_800",  # same color as blockback gound fill
+    block_title_background_fill_dark="*block_label_background_fill",
+    # input_background_fill_dark="*neutral_800", #This attribute help match fill color cool gray 80 to match background
+    #                                             however cause the problem for the general theme.
+    #  input_shadow_dark="*shadow_drop", #Test if it could make the border without the color
+    # input_border_color_dark="*neutral_200",#add attribute for border Jan 18
+    checkbox_border_color_dark="*neutral_600",  # Jan 18 test to fix border
+)