First commit

.gitignore

@@ -0,0 +1,173 @@
+# 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
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#uv.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/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# 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/
+
+
+# Boilerplate specific ignores
+.gradio/
+.ruff_cache/

.gitlint

@@ -0,0 +1,143 @@
+# Edit this file as you like.
+#
+# All these sections are optional. Each section with the exception of [general] represents
+# one rule and each key in it is an option for that specific rule.
+#
+# Rules and sections can be referenced by their full name or by id. For example
+# section "[body-max-line-length]" could also be written as "[B1]". Full section names are
+# used in here for clarity.
+#
+# [general]
+# Ignore certain rules, this example uses both full name and id
+# ignore=title-trailing-punctuation, T3
+
+[general]
+# You HAVE to add the rule here to enable it, only configuring (such as below)
+# does NOT enable it.
+contrib=contrib-title-conventional-commits
+
+[contrib-title-conventional-commits]
+# Specify allowed commit types. For details see: https://www.conventionalcommits.org/
+types = build,chore,ci,docs,feat,fix,perf,refactor,revert,style,test
+
+# verbosity should be a value between 1 and 3, the commandline -v flags take precedence over this
+# verbosity = 2
+
+# By default gitlint will ignore merge, revert, fixup and squash commits.
+# ignore-merge-commits=true
+# ignore-revert-commits=true
+# ignore-fixup-commits=true
+# ignore-squash-commits=true
+
+# Ignore any data send to gitlint via stdin
+# ignore-stdin=true
+
+# Fetch additional meta-data from the local repository when manually passing a
+# commit message to gitlint via stdin or --commit-msg. Disabled by default.
+# staged=true
+
+# Hard fail when the target commit range is empty. Note that gitlint will
+# already fail by default on invalid commit ranges. This option is specifically
+# to tell gitlint to fail on *valid but empty* commit ranges.
+# Disabled by default.
+# fail-without-commits=true
+
+# Enable debug mode (prints more output). Disabled by default.
+# debug=true
+
+# Enable community contributed rules
+# See http://jorisroovers.github.io/gitlint/contrib_rules for details
+# contrib=contrib-title-conventional-commits,CC1
+
+# Set the extra-path where gitlint will search for user defined rules
+# See http://jorisroovers.github.io/gitlint/user_defined_rules for details
+# extra-path=examples/
+
+# This is an example of how to configure the "title-max-length" rule and
+# set the line-length it enforces to 50
+# [title-max-length]
+# line-length=50
+
+# Conversely, you can also enforce minimal length of a title with the
+# "title-min-length" rule:
+# [title-min-length]
+# min-length=5
+
+# [title-must-not-contain-word]
+# Comma-separated list of words that should not occur in the title. Matching is case
+# insensitive. It's fine if the keyword occurs as part of a larger word (so "WIPING"
+# will not cause a violation, but "WIP: my title" will.
+# words=wip
+
+# [title-match-regex]
+# python-style regex that the commit-msg title must match
+# Note that the regex can contradict with other rules if not used correctly
+# (e.g. title-must-not-contain-word).
+# regex=^US[0-9]*
+
+# [body-max-line-length]
+# line-length=72
+
+# [body-min-length]
+# min-length=5
+
+# [body-is-missing]
+# Whether to ignore this rule on merge commits (which typically only have a title)
+# default = True
+# ignore-merge-commits=false
+
+# [body-changed-file-mention]
+# List of files that need to be explicitly mentioned in the body when they are changed
+# This is useful for when developers often erroneously edit certain files or git submodules.
+# By specifying this rule, developers can only change the file when they explicitly reference
+# it in the commit message.
+# files=gitlint-core/gitlint/rules.py,README.md
+
+# [body-match-regex]
+# python-style regex that the commit-msg body must match.
+# E.g. body must end in My-Commit-Tag: foo
+# regex=My-Commit-Tag: foo$
+
+# [author-valid-email]
+# python-style regex that the commit author email address must match.
+# For example, use the following regex if you only want to allow email addresses from foo.com
+# regex=[^@][email protected]
+
+# [ignore-by-title]
+# Ignore certain rules for commits of which the title matches a regex
+# E.g. Match commit titles that start with "Release"
+# regex=^Release(.*)
+
+# Ignore certain rules, you can reference them by their id or by their full name
+# Use 'all' to ignore all rules
+# ignore=T1,body-min-length
+
+# [ignore-by-body]
+# Ignore certain rules for commits of which the body has a line that matches a regex
+# E.g. Match bodies that have a line that that contain "release"
+# regex=(.*)release(.*)
+#
+# Ignore certain rules, you can reference them by their id or by their full name
+# Use 'all' to ignore all rules
+# ignore=T1,body-min-length
+
+# [ignore-body-lines]
+# Ignore certain lines in a commit body that match a regex.
+# E.g. Ignore all lines that start with 'Co-Authored-By'
+# regex=^Co-Authored-By
+
+# [ignore-by-author-name]
+# Ignore certain rules for commits of which the author name matches a regex
+# E.g. Match commits made by dependabot
+# regex=(.*)dependabot(.*)
+#
+# Ignore certain rules, you can reference them by their id or by their full name
+# Use 'all' to ignore all rules
+# ignore=T1,body-min-length
+
+# This is a contrib rule - a community contributed rule. These are disabled by default.
+# You need to explicitly enable them one-by-one by adding them to the "contrib" option
+# under [general] section above.
+# [contrib-title-conventional-commits]
+# Specify allowed commit types. For details see: https://www.conventionalcommits.org/
+# types = bugfix,user-story,epic

.pre-commit-config.yaml

@@ -0,0 +1,51 @@
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v5.0.0
+    hooks:
+      - id: check-added-large-files
+      - id: check-ast
+      - id: check-case-conflict
+      - id: check-json
+      - id: check-merge-conflict
+      - id: check-toml
+      - id: end-of-file-fixer
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    # Ruff version.
+    rev: v0.8.6
+    hooks:
+      - id: ruff
+  - repo: https://github.com/pycqa/isort
+    rev: 5.13.2
+    hooks:
+      - id: isort
+        args: ["--profile", "black"]
+  - repo: https://github.com/asottile/pyupgrade
+    rev: v3.19.1
+    hooks:
+      - id: pyupgrade
+        args: ["--py310-plus"]
+  - repo: https://github.com/psf/black
+    rev: 24.10.0
+    hooks:
+      - id: black
+        args:
+          - --line-length=120
+  - repo: https://github.com/jorisroovers/gitlint
+    rev:  v0.19.1
+    hooks:
+    -   id: gitlint
+        name: gitlint
+        language: python
+        entry: gitlint
+        args: [--staged, --msg-filename]
+        stages: [commit-msg]
+  - repo: https://github.com/python-poetry/poetry
+    rev: '1.8.0'
+    hooks:
+      - id: poetry-check
+      - id: poetry-lock
+        args: [--no-update]
+        language_version: "3.10"
+      - id: poetry-export
+        name: poetry export for base requirements
+        args: [-f, requirements.txt, -o, requirements.txt, -n, --only=main, --without-hashes]

pyproject.toml

@@ -0,0 +1,61 @@
+[tool.poetry]
+name = "granite-3.1-8b-instruct"
+version = "0.1.0"
+description = "A demo of the IBM Granite 3.1 8b instruct model"
+authors = [
+    "James Sutton <[email protected]>",
+    "Graham White <[email protected]>",
+    "Michael Desmond <[email protected]>",
+]
+license = "Apache-2.0"
+readme = "README.md"
+package-mode = false
+
+[tool.poetry.dependencies]
+python = ">=3.10,<3.11"
+gradio = "5.12.0"
+torch = "2.4.0"
+spaces = "0.30.4"
+transformers = "^4.47.1"
+accelerate = "^1.2.1"
+
+
+[tool.poetry.group.dev.dependencies]
+pre-commit = "^4.0.1"
+git-lint = "^0.1.2"
+ruff = "^0.8.3"
+pytest = "^8.3.4"
+
+
+[build-system]
+requires = ["poetry-core"]
+build-backend = "poetry.core.masonry.api"
+
+
+[tool.ruff]
+select = [
+    "E",   # pycodestyle
+    "F",   # pyflakes
+    "UP",  # pyupgrade
+    "D",   # pydocstyle
+    "I",   # isort
+    "B",   # bugbear
+    "ANN", # annotations
+    "N",   # pep8-naming
+    "C4",  # Comprehensions
+    "DTZ", # DatetimeZ
+    "Q",   # Quotes
+    "SIM", # Simplify
+    "RUF", # Ruff
+]
+ignore = ["D203", "D213"]
+fixable = ["ALL"]
+unfixable = []
+line-length = 120
+
+
+[tool.black]
+line-length = 120
+
+[tool.ruff.lint.pydocstyle]
+convention = "google"

requirements.txt

@@ -0,0 +1,77 @@
+accelerate==1.2.1 ; python_version >= "3.10" and python_version < "3.11"
+aiofiles==23.2.1 ; python_version >= "3.10" and python_version < "3.11"
+annotated-types==0.7.0 ; python_version >= "3.10" and python_version < "3.11"
+anyio==4.8.0 ; python_version >= "3.10" and python_version < "3.11"
+certifi==2024.12.14 ; python_version >= "3.10" and python_version < "3.11"
+charset-normalizer==3.4.1 ; python_version >= "3.10" and python_version < "3.11"
+click==8.1.8 ; python_version >= "3.10" and python_version < "3.11" and sys_platform != "emscripten"
+colorama==0.4.6 ; python_version >= "3.10" and python_version < "3.11" and platform_system == "Windows"
+exceptiongroup==1.2.2 ; python_version >= "3.10" and python_version < "3.11"
+fastapi==0.115.6 ; python_version >= "3.10" and python_version < "3.11"
+ffmpy==0.5.0 ; python_version >= "3.10" and python_version < "3.11"
+filelock==3.16.1 ; python_version >= "3.10" and python_version < "3.11"
+fsspec==2024.12.0 ; python_version >= "3.10" and python_version < "3.11"
+gradio-client==1.5.4 ; python_version >= "3.10" and python_version < "3.11"
+gradio==5.12.0 ; python_version >= "3.10" and python_version < "3.11"
+h11==0.14.0 ; python_version >= "3.10" and python_version < "3.11"
+httpcore==1.0.7 ; python_version >= "3.10" and python_version < "3.11"
+httpx==0.28.1 ; python_version >= "3.10" and python_version < "3.11"
+huggingface-hub==0.27.1 ; python_version >= "3.10" and python_version < "3.11"
+idna==3.10 ; python_version >= "3.10" and python_version < "3.11"
+jinja2==3.1.5 ; python_version >= "3.10" and python_version < "3.11"
+markdown-it-py==3.0.0 ; python_version >= "3.10" and python_version < "3.11" and sys_platform != "emscripten"
+markupsafe==2.1.5 ; python_version >= "3.10" and python_version < "3.11"
+mdurl==0.1.2 ; python_version >= "3.10" and python_version < "3.11" and sys_platform != "emscripten"
+mpmath==1.3.0 ; python_version >= "3.10" and python_version < "3.11"
+networkx==3.4.2 ; python_version >= "3.10" and python_version < "3.11"
+numpy==2.2.1 ; python_version >= "3.10" and python_version < "3.11"
+nvidia-cublas-cu12==12.1.3.1 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-cuda-cupti-cu12==12.1.105 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-cuda-nvrtc-cu12==12.1.105 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-cuda-runtime-cu12==12.1.105 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-cudnn-cu12==9.1.0.70 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-cufft-cu12==11.0.2.54 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-curand-cu12==10.3.2.106 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-cusolver-cu12==11.4.5.107 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-cusparse-cu12==12.1.0.106 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-nccl-cu12==2.20.5 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-nvjitlink-cu12==12.6.85 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+nvidia-nvtx-cu12==12.1.105 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version >= "3.10" and python_version < "3.11"
+orjson==3.10.14 ; python_version >= "3.10" and python_version < "3.11"
+packaging==24.2 ; python_version >= "3.10" and python_version < "3.11"
+pandas==2.2.3 ; python_version >= "3.10" and python_version < "3.11"
+pillow==11.1.0 ; python_version >= "3.10" and python_version < "3.11"
+psutil==5.9.8 ; python_version >= "3.10" and python_version < "3.11"
+pydantic-core==2.27.2 ; python_version >= "3.10" and python_version < "3.11"
+pydantic==2.10.5 ; python_version >= "3.10" and python_version < "3.11"
+pydub==0.25.1 ; python_version >= "3.10" and python_version < "3.11"
+pygments==2.19.1 ; python_version >= "3.10" and python_version < "3.11" and sys_platform != "emscripten"
+python-dateutil==2.9.0.post0 ; python_version >= "3.10" and python_version < "3.11"
+python-multipart==0.0.20 ; python_version >= "3.10" and python_version < "3.11"
+pytz==2024.2 ; python_version >= "3.10" and python_version < "3.11"
+pyyaml==6.0.2 ; python_version >= "3.10" and python_version < "3.11"
+regex==2024.11.6 ; python_version >= "3.10" and python_version < "3.11"
+requests==2.32.3 ; python_version >= "3.10" and python_version < "3.11"
+rich==13.9.4 ; python_version >= "3.10" and python_version < "3.11" and sys_platform != "emscripten"
+ruff==0.8.6 ; python_version >= "3.10" and python_version < "3.11" and sys_platform != "emscripten"
+safehttpx==0.1.6 ; python_version >= "3.10" and python_version < "3.11"
+safetensors==0.5.2 ; python_version >= "3.10" and python_version < "3.11"
+semantic-version==2.10.0 ; python_version >= "3.10" and python_version < "3.11"
+shellingham==1.5.4 ; python_version >= "3.10" and python_version < "3.11" and sys_platform != "emscripten"
+six==1.17.0 ; python_version >= "3.10" and python_version < "3.11"
+sniffio==1.3.1 ; python_version >= "3.10" and python_version < "3.11"
+spaces==0.30.4 ; python_version >= "3.10" and python_version < "3.11"
+starlette==0.41.3 ; python_version >= "3.10" and python_version < "3.11"
+sympy==1.13.3 ; python_version >= "3.10" and python_version < "3.11"
+tokenizers==0.21.0 ; python_version >= "3.10" and python_version < "3.11"
+tomlkit==0.13.2 ; python_version >= "3.10" and python_version < "3.11"
+torch==2.4.0 ; python_version >= "3.10" and python_version < "3.11"
+tqdm==4.67.1 ; python_version >= "3.10" and python_version < "3.11"
+transformers==4.48.0 ; python_version >= "3.10" and python_version < "3.11"
+triton==3.0.0 ; platform_system == "Linux" and platform_machine == "x86_64" and python_version < "3.11" and python_version >= "3.10"
+typer==0.15.1 ; python_version >= "3.10" and python_version < "3.11" and sys_platform != "emscripten"
+typing-extensions==4.12.2 ; python_version >= "3.10" and python_version < "3.11"
+tzdata==2024.2 ; python_version >= "3.10" and python_version < "3.11"
+urllib3==2.3.0 ; python_version >= "3.10" and python_version < "3.11"
+uvicorn==0.34.0 ; python_version >= "3.10" and python_version < "3.11" and sys_platform != "emscripten"
+websockets==14.1 ; python_version >= "3.10" and python_version < "3.11"

src/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
+    }
+}

src/app.py

@@ -0,0 +1,392 @@
+from collections.abc import Iterator
+from datetime import datetime
+from pathlib import Path
+from threading import Thread
+
+import gradio as gr
+import spaces
+import torch
+from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
+
+# Vision model imports
+from transformers import LlavaNextProcessor, LlavaNextForConditionalGeneration
+import random
+
+from themes.research_monochrome import theme
+
+today_date = datetime.today().strftime("%B %-d, %Y")  # noqa: DTZ002
+
+SYS_PROMPT = f"""Knowledge Cutoff Date: April 2024.
+Today's Date: {today_date}.
+You are Granite, developed by IBM. You are a helpful AI assistant"""
+TITLE = "IBM Granite 3.1 8b Instruct & Vision Preview"
+DESCRIPTION = """
+<p>Granite 3.1 8b instruct is an open-source LLM supporting a 128k context window and Granite Vision 3.1 2B Preview for vision-language capabilities. Start with one of the sample prompts
+or enter your own. Upload an image to use the vision model. Keep in mind that AI can occasionally make mistakes.
+<span class="gr_docs_link">
+<a href="https://www.ibm.com/granite/docs/">View Granite Instruct Documentation <i class="fa fa-external-link"></i></a>
+</span>
+<span class="gr_docs_link">
+<a href="https://www.ibm.com/granite/vision/docs/">View Granite Vision Documentation <i class="fa fa-external-link"></i></a>
+</span>
+</p>
+"""
+MAX_INPUT_TOKEN_LENGTH = 128_000
+MAX_NEW_TOKENS = 1024
+TEMPERATURE = 0.7
+TOP_P = 0.85
+TOP_K = 50
+REPETITION_PENALTY = 1.05
+
+VISION_TEMPERATURE = 0.2
+VISION_TOP_P = 0.95
+VISION_TOP_K = 50
+VISION_MAX_TOKENS = 128
+
+
+if not torch.cuda.is_available():
+    print("This demo may not work on CPU.")
+
+# Text model loading
+text_model = AutoModelForCausalLM.from_pretrained(
+    "ibm-granite/granite-3.1-8b-instruct", torch_dtype=torch.float16, device_map="auto"
+)
+text_tokenizer = AutoTokenizer.from_pretrained("ibm-granite/granite-3.1-8b-instruct")
+text_tokenizer.use_default_system_prompt = False
+
+# Vision model loading
+vision_model_path = "ibm-granite/granite-vision-3.1-2b-preview"
+vision_processor = LlavaNextProcessor.from_pretrained(vision_model_path, use_fast=True)
+vision_model = LlavaNextForConditionalGeneration.from_pretrained(vision_model_path, torch_dtype="auto", device_map="auto")
+
+
+@spaces.GPU
+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 text chat demo."""
+    # Build messages
+    conversation = []
+    conversation.append({"role": "system", "content": SYS_PROMPT})
+    conversation += chat_history
+    conversation.append({"role": "user", "content": message})
+
+    # Convert messages to prompt format
+    input_ids = text_tokenizer.apply_chat_template(
+        conversation,
+        return_tensors="pt",
+        add_generation_prompt=True,
+        truncation=True,
+        max_length=MAX_INPUT_TOKEN_LENGTH - max_new_tokens,
+    )
+
+    input_ids = input_ids.to(text_model.device)
+    streamer = TextIteratorStreamer(text_tokenizer, skip_prompt=True, skip_special_tokens=True)
+    generate_kwargs = dict(
+        {"input_ids": input_ids},
+        streamer=streamer,
+        max_new_tokens=max_new_tokens,
+        do_sample=True,
+        top_p=top_p,
+        top_k=top_k,
+        temperature=temperature,
+        num_beams=1,
+        repetition_penalty=repetition_penalty,
+    )
+
+    t = Thread(target=text_model.generate, kwargs=generate_kwargs)
+    t.start()
+
+    outputs = []
+    for text in streamer:
+        outputs.append(text)
+        yield "".join(outputs)
+
+
+def get_text_from_content(content):
+    texts = []
+    for item in content:
+        if item["type"] == "text":
+            texts.append(item["text"])
+        elif item["type"] == "image":
+            texts.append("[Image]")
+    return " ".join(texts)
+
+@spaces.GPU
+def chat_inference(image, text, conversation, temperature=VISION_TEMPERATURE, top_p=VISION_TOP_P, top_k=VISION_TOP_K, max_tokens=VISION_MAX_TOKENS):
+    if conversation is None:
+        conversation = []
+
+    user_content = []
+    if image is not None:
+        user_content.append({"type": "image", "image": image})
+    if text and text.strip():
+        user_content.append({"type": "text", "text": text.strip()})
+    if not user_content:
+        return conversation_display(conversation), conversation
+
+    conversation.append({
+        "role": "user",
+        "content": user_content
+    })
+
+    inputs = vision_processor.apply_chat_template(
+        conversation,
+        add_generation_prompt=True,
+        tokenize=True,
+        return_dict=True,
+        return_tensors="pt"
+    ).to("cuda")
+
+    torch.manual_seed(random.randint(0, 10000))
+
+    generation_kwargs = {
+        "max_new_tokens": max_tokens,
+        "temperature": temperature,
+        "top_p": top_p,
+        "top_k": top_k,
+        "do_sample": True,
+    }
+
+    output = vision_model.generate(**inputs, **generation_kwargs)
+    assistant_response = vision_processor.decode(output[0], skip_special_tokens=True)
+
+    conversation.append({
+        "role": "assistant",
+        "content": [{"type": "text", "text": assistant_response.strip()}]
+    })
+
+    return conversation_display(conversation), conversation
+
+def conversation_display(conversation):
+    chat_history = []
+    for msg in conversation:
+        if msg["role"] == "user":
+            user_text = get_text_from_content(msg["content"])
+            chat_history.append({"role": "user", "content": user_text})
+        elif msg["role"] == "assistant":
+            assistant_text = msg["content"][0]["text"].split("<|assistant|>")[-1].strip()
+            chat_history.append({"role": "assistant", "content": assistant_text})
+    return chat_history
+
+def clear_chat():
+    return [], [], "", None, [] # Cleared state for both text and vision
+
+css_file_path = Path(Path(__file__).parent / "app.css")
+head_file_path = Path(Path(__file__).parent / "app_head.html")
+
+# Advanced settings (displayed in Accordion) - Text Model
+text_temperature_slider = gr.Slider(
+    minimum=0, maximum=1.0, value=TEMPERATURE, step=0.1, label="Text Temperature", elem_classes=["gr_accordion_element"]
+)
+text_top_p_slider = gr.Slider(
+    minimum=0, maximum=1.0, value=TOP_P, step=0.05, label="Text Top P", elem_classes=["gr_accordion_element"]
+)
+text_top_k_slider = gr.Slider(
+    minimum=0, maximum=100, value=TOP_K, step=1, label="Text Top K", elem_classes=["gr_accordion_element"]
+)
+text_repetition_penalty_slider = gr.Slider(
+    minimum=0,
+    maximum=2.0,
+    value=REPETITION_PENALTY,
+    step=0.05,
+    label="Text Repetition Penalty",
+    elem_classes=["gr_accordion_element"],
+)
+text_max_new_tokens_slider = gr.Slider(
+    minimum=1,
+    maximum=2000,
+    value=MAX_NEW_TOKENS,
+    step=1,
+    label="Text Max New Tokens",
+    elem_classes=["gr_accordion_element"],
+)
+text_chat_interface_accordion = gr.Accordion(label="Text Model Advanced Settings", open=False)
+
+# Advanced settings (displayed in Accordion) - Vision Model
+vision_temperature_slider = gr.Slider(
+    minimum=0.0, maximum=2.0, value=VISION_TEMPERATURE, step=0.01, label="Vision Temperature", elem_classes=["gr_accordion_element"]
+)
+vision_top_p_slider = gr.Slider(
+    minimum=0.0, maximum=1.0, value=VISION_TOP_P, step=0.01, label="Vision Top p", elem_classes=["gr_accordion_element"]
+)
+vision_top_k_slider = gr.Slider(
+    minimum=0, maximum=100, value=VISION_TOP_K, step=1, label="Vision Top k", elem_classes=["gr_accordion_element"]
+)
+vision_max_tokens_slider = gr.Slider(
+    minimum=10, maximum=300, value=VISION_MAX_TOKENS, step=1, label="Vision Max Tokens", elem_classes=["gr_accordion_element"]
+)
+vision_chat_interface_accordion = gr.Accordion(label="Vision Model Advanced Settings", open=False)
+
+
+with gr.Blocks(fill_height=True, css_paths=css_file_path, head_paths=head_file_path, theme=theme, title=TITLE) as demo:
+    gr.HTML(f"<h1>{TITLE}</h1>", elem_classes=["gr_title"])
+    gr.HTML(DESCRIPTION)
+
+    chatbot = gr.Chatbot(label="Chat History", elem_id="chatbot", height=500, type='messages')
+    text_input = gr.Textbox(lines=2, placeholder="Enter your message here", label="Message")
+    image_input = gr.Image(type="pil", label="Upload Image (optional)")
+
+    with text_chat_interface_accordion:
+        text_temperature_slider
+        text_top_p_slider
+        text_top_k_slider
+        text_repetition_penalty_slider
+        text_max_new_tokens_slider
+
+    with vision_chat_interface_accordion:
+        vision_temperature_slider
+        vision_top_p_slider
+        vision_top_k_slider
+        vision_max_tokens_slider
+
+
+    clear_button = gr.Button("Clear Chat")
+    send_button = gr.Button("Send Message") # Changed from "Chat" to "Send Message" for clarity
+
+    text_state = gr.State([]) # State for text chatbot history
+    vision_state = gr.State([]) # State for vision chatbot history
+    chatbot_type_state = gr.State("text") # State to track which chatbot is in use
+
+    def send_message(image_input, text_input, chatbot_type_state, text_state, vision_state,
+                     text_temperature, text_repetition_penalty, text_top_p, text_top_k, text_max_new_tokens,
+                     vision_temperature, vision_top_p, vision_top_k, vision_max_tokens):
+        if image_input:
+            chatbot_type_state = "vision"
+            history = vision_state
+            gen_kwargs_vision = {
+                "temperature": vision_temperature,
+                "top_p": vision_top_p,
+                "top_k": vision_top_k,
+                "max_tokens": vision_max_tokens,
+                "conversation": history
+            }
+            chat_output, updated_vision_state = chat_inference(image=image_input, text=text_input, **gen_kwargs_vision)
+            return chat_output, updated_vision_state, chatbot_type_state, gr.ChatInterface.update(visible=False), gr.Chatbot.update(visible=True) # Hide text interface, show vision chatbot
+
+        else:
+            chatbot_type_state = "text"
+            history = text_state
+            gen_kwargs_text = {
+                "temperature": text_temperature,
+                "repetition_penalty": text_repetition_penalty,
+                "top_p": text_top_p,
+                "top_k": text_top_k,
+                "max_new_tokens": text_max_new_tokens,
+                "message": text_input,
+                "chat_history": history
+            }
+
+            chat_output_iterator = generate(**gen_kwargs_text)
+            output_text = ""
+            for text_chunk in chat_output_iterator:
+                output_text = text_chunk
+
+            updated_text_state = history + [{"role": "user", "content": text_input}, {"role": "assistant", "content": output_text}]
+            text_chatbot_history = updated_text_state # format for chatbot display
+            formatted_history = []
+            for message in text_chatbot_history:
+                formatted_history.append((message["content"] if message["role"] == "user" else None, message["content"] if message["role"] == "assistant" else None))
+
+
+            return formatted_history, updated_text_state, chatbot_type_state, gr.ChatInterface.update(visible=True), gr.Chatbot.update(visible=False) # Show text interface, hide vision chatbot
+
+
+    send_button.click(
+        send_message,
+        inputs=[image_input, text_input, chatbot_type_state, text_state, vision_state,
+                text_temperature_slider, text_repetition_penalty_slider, text_top_p_slider, text_top_k_slider, text_max_new_tokens_slider,
+                vision_temperature_slider, vision_top_p_slider, vision_top_k_slider, vision_max_tokens_slider],
+        outputs=[chatbot, vision_state, chatbot_type_state, gr.ChatInterface(), gr.Chatbot()] # Dummy ChatInterface output, real Chatbot output
+    )
+
+    clear_button.click(
+        clear_chat,
+        inputs=None,
+        outputs=[chatbot, vision_state, text_input, image_input, text_state] # Added text_state to clear
+    )
+
+
+    gr.Examples(
+        examples=[
+            ["Explain the concept of quantum computing to someone with no background in physics or computer science.", None],
+            ["What is OpenShift?", None],
+            ["What's the importance of low latency inference?", None],
+            ["Help me boost productivity habits.", None],
+            [
+                """Explain the following code in a concise manner:
+
+```java
+import java.util.ArrayList;
+import java.util.List;
+
+public class Main {
+
+    public static void main(String[] args) {
+        int[] arr = {1, 5, 3, 4, 2};
+        int diff = 3;
+        List<Pair> pairs = findPairs(arr, diff);
+        for (Pair pair : pairs) {
+            System.out.println(pair.x + " " + pair.y);
+        }
+    }
+
+    public static List<Pair> findPairs(int[] arr, int diff) {
+        List<Pair> pairs = new ArrayList<>();
+        for (int i = 0; i < arr.length; i++) {
+            for (int j = i + 1; j < arr.length; j++) {
+                if (Math.abs(arr[i] - arr[j]) < diff) {
+                    pairs.add(new Pair(arr[i], arr[j]));
+                }
+            }
+        }
+
+        return pairs;
+    }
+}
+
+class Pair {
+    int x;
+    int y;
+    public Pair(int x, int y) {
+        this.x = x;
+        this.y = y;
+    }
+}
+```""", None
+            ],
+            [
+                """Generate a Java code block from the following explanation:
+
+The code in the Main class finds all pairs in an array whose absolute difference is less than a given value.
+
+The findPairs method takes two arguments: an array of integers and a difference value. It iterates over the array and compares each element to every other element in the array. If the absolute difference between the two elements is less than the difference value, a new Pair object is created and added to a list.
+
+The Pair class is a simple data structure that stores two integers.
+
+The main method creates an array of integers, initializes the difference value, and calls the findPairs method to find all pairs in the array. Finally, the code iterates over the list of pairs and prints each pair to the console.""" , None # noqa: E501
+            ],
+            ["What is in this image?", "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"] # Vision example
+        ],
+        inputs=[text_input, image_input],
+        example_labels=[
+            "Explain quantum computing",
+            "What is OpenShift?",
+            "Importance of low latency inference",
+            "Boosting productivity habits",
+            "Explain and document your code",
+            "Generate Java Code",
+            "Vision Example: What is in this image?"
+        ],
+        cache_examples=False,
+    )
+
+
+if __name__ == "__main__":
+    demo.queue().launch()

src/app_head.html

@@ -0,0 +1,16 @@
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+/>
+<script
+  async
+  src="https://www.googletagmanager.com/gtag/js?id=G-C6LFT227RC"
+></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag("js", new Date());
+  gtag("config", "G-C6LFT227RC");
+</script>

src/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
+)

src/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
+)