Deployment

.gitattributes

@@ -0,0 +1,37 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz 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
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

.github/pull_request_template.md

@@ -0,0 +1,17 @@
+<!--
+Thank you for your pull request. Please review and complete the sections below.
+-->
+
+### Description
+
+<!-- Provide a description of the change or tick the promote to stable box -->
+
+- [ ] Promote QA to Stable
+
+### Checklist
+
+<!-- For completed items, change [ ] to [x]. -->
+
+- [ ] I have installed pre-commit: `pre-commit install`
+- [ ] All pre-commit checks pass: `pre-commit run`
+- [ ] Dependencies are [compatible with ZeroGPU](https://huggingface.co/docs/hub/en/spaces-zerogpu#supported-versions)

.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=[^@]+@foo.com
+
+# [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
+        args: ['--maxkb=850']  # Set custom size limit (1MB)      - 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.11.8
+    hooks:
+      - id: ruff
+  - repo: https://github.com/pycqa/isort
+    rev: 6.0.1
+    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: 25.1.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]

DEVELOPMENT.md

@@ -0,0 +1,176 @@
+# IBM Research Hugging Face Spaces gradio template
+
+This template repository lets you quickly build a [gradio](https://www.gradio.app/) Hugging Face spaces demo for the [ibm-granite org](https://huggingface.co/ibm-granite). It is set up with the requirements, theming and analytics for the ibm-granite org as well as pre-commit hooks and linting configuration to maintain a consistent code standard across all demos.
+
+## 👩‍💻 Introduction
+
+To deploy demos to the ibm-granite org on Hugging Face, you will be working with the Research Design Technical Experiences (RDTE) team via this GitHub org. You will not gain access to the ibm-granite Hugging Face org as there are limited seats available. Hence, you will work via the RDTE team (who have write access) to create and deploy demos to Hugging Face.
+
+## 🛠️ Getting started
+
+This is the place to start when building gradio demos for IBM Granite. Complete the following steps to get a repository set up and configured for your demo as well as the deployment pipeline to validate and push it to Hugging Face spaces.
+
+1. [Raise an onboarding request](https://github.ibm.com/ibm-huggingface-space-demos/deployment/issues/new?assignees=james-sutton,gwhite&labels=onboarding%2Ctriage&projects=&template=onboarding.yaml&title=%5BOnboarding%5D%3A+). Please fill the templated onboarding request to get a new repository set up for you in this org and to give access to anything else required.
+2. Once your repository has been created, please either update it with your existing demo if you have one, or have a play with the example and modify it to create your new demo. You'll be working in the `main` branch whilst developing your demo. Your `main` branch is linked to the "QA" instance of your demo in the IBM org on Hugging Face.
+3. Make sure that you follow this development guide and use the pre-configured pre-commit hooks before every commit and push.
+4. Once you are happy with your demo and want to get it deployed into production on Hugging Face spaces in the ibm-granite org, open a pull request to merge the `main` branch into the `stable` branch. The RDTE team will validate the demo works well both from a technical and UX standpoint. If your demo needs any custom environment variables or secrets, let the RDTE team know and we will contact you directly to get them added to the Space configuration on Hugging Face.
+5. Once the Pull request has been approved, you can merge it into the `stable` branch. A deployment will then push your changes to Hugging Face spaces where it will build and become available for use. Initially, both the "QA" and "Production" versions of your demo will be marked as private and only visible to members of the ibm-research org (QA) and ibm-granite org (production) that have logged into Hugging Face. The "QA" version will always remain private in the ibm-research org. However, when the RDTE team are happy to publish the demo to stable, they will mark the "Production" version as public in the ibm-granite org.
+
+### Onboarding Process Summary
+
+The following diagram explains the onboarding process. Actions that you, the developer, take are shown in darker blue. Actions that we, the RDTE team, take are shown in lighter blue. The lighter blue steps that have darker borders are automations maintained by the RDTE team, these steps require no manual intervention.
+
+```mermaid
+flowchart TD
+    1[Developer opens onboarding ticket in GHE Org]:::developer-->2
+    2{RDTE team review the request}:::rdte--Request returned with comments-->1
+    2--Approved-->3
+    3[Developer is invited to join the ibm-research org on HF]:::rdte-->4
+    4[New git repository created from template and configured]:::rdte-->5
+    5[QA HF space created in IBM org]:::rdte-->6
+    6[Developers push commits to main branch]:::developer-->7
+    7-->6
+    7[Main branch deployed to QA space in ibm-granite org on HF]:::rdteauto-->8
+    8[Developers open/update PR to merge main branch to stable branch]:::developer-->9
+    9{PR review}:::rdte--PR Approved-->10
+    9--Changes requested-->6
+    10{Prod space exists?}:::rdte-- Yes -->12
+    10-- No -->11
+    11[Prod HF space created in ibm-granite org]:::rdte-->12
+    12[Merge PR]:::developer-->13
+    13[Stable branch deployed to prod space in ibm-granite org on HF]:::rdteauto
+    classDef rdte fill:#EDF5FF,stroke:#D0E2FF,color:#000;
+    classDef rdteauto fill:#EDF5FF,stroke:#78A9FF,color:#000;
+    classDef developer fill:#A6C8FF,stroke:#78A9FF,color:#000;
+```
+
+## 🛠️ Development guide
+
+Further information on developing the code in this repository is provided below.
+
+### Clone your code repository
+
+Once you have been notified that your code repository has been created in this org, you can clone it to your local machine and start work.
+
+If you just want to play with our template, you're welcome to [use it](https://github.ibm.com/new?template_name=gradio-template&template_owner=ibm-huggingface-space-demos) to create a new code repository in another org. Later, for deployment, you wil need to move your code to the repository created in this org.
+
+### Prerequisites
+
+Some things you will need to do on your machine before developing.
+
+#### Precommit
+
+[Precommit](https://pre-commit.com) is a tool that adds git commit hooks. You will need to [install](https://pre-commit.com/#install) it on your machine and then run within your code repository:
+
+```shell
+pre-commit install
+```
+
+You can manually run pre-commit using the following command:
+
+```shell
+# To run against staged files:
+pre-commit run
+
+# If you want to run against staged and unstaged files:
+pre-commit run --all-files
+```
+
+It is important to run the pre-commit hooks and fix any files that fail before you commit and push to the repository as the pull request build will fail any PR that does not adhere to them i.e. the RDTE team will only accept your code for deployment to Hugging Face once it has passed all of the pre-commit checks.
+
+#### Poetry
+
+[Poetry](https://python-poetry.org/) is a tool for Python packaging, dependency and virtual environment management that is used to manage the development of this project. You will need to install Poetry locally. There are several ways to install it including through the package manager of your operating system, however, the easiest way to install is likely using their installer, as follows:
+
+```shell
+curl -sSL https://install.python-poetry.org | python3 -
+```
+
+You can also use `pip` and `pipx` to install poetry, the details of which are at https://python-poetry.org/docs/
+
+Once installed, the project is configured and controlled via the `pyproject.toml` file with the current dependency tree stored in `poetry.lock`. You may also [configure poetry](https://python-poetry.org/docs/configuration/) further if you wish but there is no need to do so as the default options are sufficient. You may, however, wish to change some of the options set in this template:
+| Setting | Notes |
+| ------- | ----- |
+| name | **Update this**, to reflect the name of your demo |
+| version | **Update this**, to reflect the current version of your demo |
+| description | **Update this**, to a short description of your demo |
+| authors | **Update this**, to the list of authors of your demo |
+
+## 🛠️ Install and run locally
+
+To get set up ready to run the code in development mode:
+
+```shell
+# add the poetry shell and export plugins (you only need to do this once on your machine)
+poetry self add poetry-plugin-shell
+poetry self add poetry-plugin-export
+
+# create and activate a python virtual environment
+poetry shell
+poetry install
+
+# run the demo locally (for development with automatic reload)
+gradio src/app.py
+```
+
+## 📝 Documenting your demo
+
+If you would like to write some information/documentation about your demo that is intended for developers or other people that might want to run the demo from scratch, please use the [README.md](README.md) file, leaving the Hugging Face Spaces configuration header in place at the top of the file.
+
+### Hugging face spaces configuration settings
+
+Hugging Face allow the configuration of spaces demonstrations via the [README.md](README.md) file in the root of the project. There is a [Spaces Configuration Reference](https://huggingface.co/docs/hub/en/spaces-config-reference) guide that you can use to gain an understanding of the configuration options that can be specified here.
+
+The template has a set of initial defaults, similar to these:
+
+```
+---
+title: Granite 3.0 Chat
+colorFrom: blue
+colorTo: indigo
+sdk: gradio
+sdk_version: 5.9.1
+app_file: src/app.py
+pinned: false
+license: apache-2.0
+short_description: Chat with IBM Granite 3.0
+---
+```
+
+#### Options
+
+The default options specified above:
+| Setting | Notes |
+| ------- | ----- |
+| title | **Update this**, keep this short (recommend max 24 chars), this information is displayed in the centre of the demo description card |
+| emoji | Do not update this, our demos will use a consistent emoji character |
+| colorFrom | Do not update this, used in combination with colorTo to colourize the demo description card |
+| colorTo | see colorFrom |
+| sdk | Do not update this, our Gradio demos will always use the "gradio" setting |
+| sdk_version | Update this if necessary for your demo to function, ideally should be set to the latest gradio version |
+| app_file | Update this if necessary for your demo to function, should be set to the path of the main entry point to the demo |
+| license | Do not update this, our demos are to always be apache-2.0 licensed |
+| short_description | **Update this**, should be set to a few words that describe the demo in a little more detail than the title, this information is displayed in the bottom-right of the demo description card |
+
+Other available options:
+| Setting | Notes |
+| ------- | ----- |
+| python_version | You may optionally set this, best advice is to use the default Python version if possible (current default is Python 3.10) |
+| suggested_hardware | Do not use this, unlikely to be required as demos run on ZeroGPU |
+| suggested_storage | Do not use this, our demos do not require storage |
+| app_port | Do not use this, not relevant for gradio demos |
+| base_path | Do not use this, use the app_file setting |
+| fullWidth | Do not use this, our demos will use a consistent default width |
+| header | Do not use this, our demos will use a consistent header |
+| models | Do not use this, let their parsing discover these from our code |
+| datasets | Do not use this, let their parsing discover these from our code |
+| tags | Do not use this, we are not tagging our demos |
+| thumbnail | Do not use this, provides a thumbnail for social sharing of demos |
+| pinned | Do not use this, the RDTE team will change this setting if it's deemed necessary |
+| hf_oauth | Do not use this, we are not using OAuth |
+| hf_oauth_scopes | Do not use this, we are not using OAuth |
+| hf_oauth_expiration_minutes | Do not use this, we are not using OAuth |
+| disable_embedding | Do not use this, leave at the default that allows embedding to take place |
+| startup_duration_timeout | Do not use this, leave at the default 30 minutes |
+| custom_headers | Do not use this, we do not need to add any custom HTTP headers |
+| preload_from_hub | Do not use this, specifying this builds the models and data sets into the container image with the goal of making start up times faster due to not needing to download them each time. However, RDTE testing indicates this setting significantly increases the start up time for our relatively small Granite models |

README.md

@@ -0,0 +1,11 @@
+---
+title: granite-docling-258M demo
+emoji: 📝
+colorFrom: blue
+colorTo: indigo
+sdk: gradio
+sdk_version: 5.16.1
+app_file: src/app.py
+pinned: false
+license: apache-2.0
+---

pyproject.toml

@@ -0,0 +1,59 @@
+[tool.poetry]
+name = "huggingface-gradio-template"
+version = "0.1.0"
+description = "A boilerplate template for an IBM Granite Huggingface Spaces Gradio Demo"
+authors = ["James Sutton <james.sutton@uk.ibm.com>"]
+license = "Apache-2.0"
+readme = "README.md"
+package-mode = false
+
+[tool.poetry.dependencies]
+python = ">=3.10,<3.11"
+gradio = "5.9.1"
+torch = "2.4.0"
+spaces = "0.30.4"
+transformers = "^4.47.1"
+accelerate = "^1.2.1"
+docling_core = "^2.48.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]
+line-length = 120
+
+[tool.ruff.lint]
+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 = []
+
+
+[tool.black]
+line-length = 120
+
+[tool.ruff.lint.pydocstyle]
+convention = "google"

requirements.txt

@@ -0,0 +1,86 @@
+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"
+attrs==25.3.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"
+colorama==0.4.6 ; python_version >= "3.10" and python_version < "3.11" and platform_system == "Windows"
+docling-core==2.48.1 ; python_version >= "3.10" and python_version < "3.11"
+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.2 ; python_version >= "3.10" and python_version < "3.11"
+gradio==5.9.1 ; 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"
+jsonref==1.1.0 ; python_version >= "3.10" and python_version < "3.11"
+jsonschema-specifications==2025.9.1 ; python_version >= "3.10" and python_version < "3.11"
+jsonschema==4.25.1 ; python_version >= "3.10" and python_version < "3.11"
+latex2mathml==3.78.1 ; python_version >= "3.10" and python_version < "3.11"
+markdown-it-py==3.0.0 ; python_version >= "3.10" and python_version < "3.11"
+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"
+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.13 ; 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.4 ; 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"
+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"
+referencing==0.36.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"
+rpds-py==0.27.1 ; python_version >= "3.10" and python_version < "3.11"
+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.1 ; 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"
+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"
+tabulate==0.9.0 ; 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.47.1 ; 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"
+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,131 @@
+footer {
+    display: none !important;
+}
+.pdf_viewer .top-panel{
+    display: none !important;
+}
+.chatbot_view .top-panel {
+    display: none !important;
+}
+
+.jumping-dots span {
+  position: relative;
+  bottom: 0px;
+  animation: jump 2s infinite;
+}
+.jumping-dots .dot-1{
+  animation-delay: 200ms;
+}
+.jumping-dots .dot-2{
+  animation-delay: 400ms;
+}
+.jumping-dots .dot-3{
+  animation-delay: 600ms;
+}
+
+@keyframes jump {
+  0%   {bottom: 0px;}
+  20%  {bottom: 5px;}
+  40%  {bottom: 0px;}
+}
+
+.inactive_div {
+    pointer-events: none;
+    opacity: .5;
+}
+
+/*.gallery-container .grid-container {*/
+/*        width: 50px;*/
+/*}*/
+
+.upload_button {
+    margin-top: 10px;
+    width: 100%;
+}
+
+.upload_button button {
+    background-color: #007bff !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 12px 20px !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    transition: background-color 0.2s ease !important;
+}
+
+.upload_button button:hover {
+    background-color: #0056b3 !important;
+}
+
+/* Gallery hover effect - targeting Gradio Gallery structure */
+.preview_im_element .gallery-item {
+    position: relative !important;
+    overflow: hidden !important;
+    transition: all 0.3s ease !important;
+}
+
+.preview_im_element .gallery-item:hover {
+    transform: scale(1.05) !important;
+    z-index: 10 !important;
+}
+
+/* Semi-transparent grey overlay on hover */
+.preview_im_element .gallery-item::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    background: rgba(128, 128, 128, 0.8) !important;
+    opacity: 0 !important;
+    transition: opacity 0.3s ease !important;
+    z-index: 1 !important;
+    pointer-events: none !important;
+}
+
+.preview_im_element .gallery-item:hover::before {
+    opacity: 1 !important;
+}
+
+/* Hide all default captions and buttons */
+.preview_im_element .gallery-item .caption,
+.preview_im_element .gallery-item button,
+.preview_im_element .gallery-item [role="button"] {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+}
+
+/* Style our custom hover text */
+.preview_im_element .gallery-item .custom-hover-text {
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    color: white !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    text-align: center !important;
+    opacity: 0 !important;
+    transition: opacity 0.3s ease !important;
+    z-index: 2 !important;
+    pointer-events: none !important;
+    max-width: 85% !important;
+    line-height: 1.4 !important;
+    background: rgba(0, 0, 0, 0.7) !important;
+    padding: 8px 12px !important;
+    border-radius: 6px !important;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+    border: none !important;
+    outline: none !important;
+    display: block !important;
+}
+
+.preview_im_element .gallery-item:hover .custom-hover-text {
+    opacity: 1 !important;
+}

src/app.py

@@ -0,0 +1,598 @@
+"""Template Demo for IBM Granite Hugging Face spaces."""
+
+import html
+import os
+import random
+import re
+import time
+from pathlib import Path
+from threading import Thread
+
+import gradio as gr
+import numpy as np
+import spaces
+import torch
+from docling_core.types.doc import DoclingDocument
+from docling_core.types.doc.document import DocTagsDocument
+from PIL import Image, ImageDraw, ImageOps
+from transformers import (
+    AutoProcessor,
+    Idefics3ForConditionalGeneration,
+    TextIteratorStreamer,
+)
+
+from themes.research_monochrome import theme
+
+dir_ = Path(__file__).parent.parent
+
+TITLE = "Granite-docling-258m demo"
+
+DESCRIPTION = """
+<p>This experimental demo highlights the capabilities of granite-docling-258M for document conversion, 
+showcasing Granite Docling's various features. Explore the sample document excerpts and try the sample 
+prompts or enter your own. Keep in mind that AI can occasionally make mistakes.</p>
+"""
+
+device = torch.device("cuda" if torch.cuda.is_available() else "mps" if torch.backends.mps.is_available() else "cpu")
+
+SAMPLES_PATH = dir_ / "data" / "images"
+
+sample_data = [
+    {
+        "preview_image": str(SAMPLES_PATH / "new_arxiv.png"),
+        "prompts": [
+            "Convert this page to docling.",
+            "Does the document contain tables?",
+            "Can you extract the 2nd section header?",
+            "What element is located at <loc_84><loc_403><loc_238><loc_419>",
+            "How can effective temperature be computed?",
+            "Extract all picture elements on the page.",
+        ],
+        "image": str(SAMPLES_PATH / "new_arxiv.png"),
+        "name": "Doc Conversion",
+        "pad": False,
+    },
+    {
+        "preview_image": str(SAMPLES_PATH / "image-2.jpg"),
+        "prompts": ["Convert this table to OTSL.", "What is the Net income in 2008?"],
+        "image": str(SAMPLES_PATH / "image-2.jpg"),
+        "name": "Table Recognition",
+        "pad": True,
+    },
+    {
+        "preview_image": str(SAMPLES_PATH / "code.jpg"),
+        "prompts": ["Convert code to text."],
+        "image": str(SAMPLES_PATH / "code.jpg"),
+        "name": "Code Recognition",
+        "pad": True,
+    },
+    {
+        "preview_image": str(SAMPLES_PATH / "lake-zurich-switzerland-view-nature-landscapes-7bbda4-1024.jpg"),
+        "prompts": ["Describe this image."],
+        "image": str(SAMPLES_PATH / "lake-zurich-switzerland-view-nature-landscapes-7bbda4-1024.jpg"),
+        "name": "Image Captioning",
+        "pad": False,
+    },
+    {
+        "preview_image": str(SAMPLES_PATH / "87664.png"),
+        "prompts": ["Convert formula to latex."],
+        "image": str(SAMPLES_PATH / "87664.png"),
+        "name": "Formula Recognition",
+        "pad": True,
+    },
+    {
+        "preview_image": str(SAMPLES_PATH / "06236926002285.png"),
+        "prompts": ["Convert chart to OTSL."],
+        "image": str(SAMPLES_PATH / "06236926002285.png"),
+        "name": "Chart Extraction",
+        "pad": False,
+    },
+    {
+        "preview_image": str(SAMPLES_PATH / "ar_page_0.png"),
+        "prompts": ["Convert this page to docling."],
+        "image": str(SAMPLES_PATH / "ar_page_0.png"),
+        "name": "Arabic Conversion",
+        "pad": False,
+    },
+    {
+        "preview_image": str(SAMPLES_PATH / "japanse_4_ibm.png"),
+        "prompts": ["Convert this page to docling."],
+        "image": str(SAMPLES_PATH / "japanse_4_ibm.png"),
+        "name": "Japanese Conversion",
+        "pad": False,
+    },
+    {
+        "preview_image": str(SAMPLES_PATH / "zh_page_0.png"),
+        "prompts": ["Convert this page to docling."],
+        "image": str(SAMPLES_PATH / "zh_page_0.png"),
+        "name": "Chinese Conversion",
+        "pad": False,
+    },
+]
+
+# Initialize the model
+model_id = "ibm-granite/granite-docling-258M"
+
+if gr.NO_RELOAD:
+    processor = AutoProcessor.from_pretrained(model_id, use_auth_token=True)
+    model = Idefics3ForConditionalGeneration.from_pretrained(
+        model_id, device_map=device, torch_dtype=torch.bfloat16, use_auth_token=True
+    )
+    if not torch.cuda.is_available():
+        model = model.to(device)
+
+
+def lower_md_headers(md: str) -> str:
+    """Convert markdown headers to lower level headers."""
+    return re.sub(r"(?:^|\n)##?\s(.+)", lambda m: "\n### " + m.group(1), md)
+
+
+def add_random_padding(image: Image.Image, min_percent: float = 0.1, max_percent: float = 0.10) -> Image.Image:
+    """Add random padding to an image."""
+    image = image.convert("RGB")
+
+    width, height = image.size
+
+    pad_w_percent = random.uniform(min_percent, max_percent)
+    pad_h_percent = random.uniform(min_percent, max_percent)
+
+    pad_w = int(width * pad_w_percent)
+    pad_h = int(height * pad_h_percent)
+
+    corner_pixel = image.getpixel((0, 0))  # Top-left corner
+    padded_image = ImageOps.expand(image, border=(pad_w, pad_h, pad_w, pad_h), fill=corner_pixel)
+
+    return padded_image
+
+
+def draw_bounding_boxes(image_path: str, response_text: str, is_doctag_response: bool = False) -> Image.Image:
+    """Draw bounding boxes on the image based on loc tags and return the annotated image."""
+    try:
+        # Load the original image
+        image = Image.open(image_path).convert("RGB")
+        draw = ImageDraw.Draw(image)
+
+        # Get image dimensions
+        width, height = image.size
+
+        # Color mapping for different classes (RGB values converted to hex)
+        class_colors = {
+            "caption": "#FFCC99",  # (255, 204, 153)
+            "footnote": "#C8C8FF",  # (200, 200, 255)
+            "formula": "#C0C0C0",  # (192, 192, 192)
+            "list_item": "#9999FF",  # (153, 153, 255)
+            "page_footer": "#CCFFCC",  # (204, 255, 204)
+            "page_header": "#CCFFCC",  # (204, 255, 204)
+            "picture": "#FFCCA4",  # (255, 204, 164)
+            "chart": "#FFCCA4",  # (255, 204, 164)
+            "section_header": "#FF9999",  # (255, 153, 153)
+            "table": "#FFCCCC",  # (255, 204, 204)
+            "text": "#FFFF99",  # (255, 255, 153)
+            "title": "#FF9999",  # (255, 153, 153)
+            "document_index": "#DCDCDC",  # (220, 220, 220)
+            "code": "#7D7D7D",  # (125, 125, 125)
+            "checkbox_selected": "#FFB6C1",  # (255, 182, 193)
+            "checkbox_unselected": "#FFB6C1",  # (255, 182, 193)
+            "form": "#C8FFFF",  # (200, 255, 255)
+            "key_value_region": "#B7410E",  # (183, 65, 14)
+            "paragraph": "#FFFF99",  # (255, 255, 153)
+            "reference": "#B0E0E6",  # (176, 224, 230)
+            "grading_scale": "#FFCCCC",  # (255, 204, 204)
+            "handwritten_text": "#CCFFCC",  # (204, 255, 204)
+            "empty_value": "#DCDCDC",  # (220, 220, 220)
+        }
+
+        doctag_class_pattern = r"<([^>]+)><loc_(\d+)><loc_(\d+)><loc_(\d+)><loc_(\d+)>[^<]*</[^>]+>"
+        doctag_matches = re.findall(doctag_class_pattern, response_text)
+
+        class_pattern = r"<([^>]+)><loc_(\d+)><loc_(\d+)><loc_(\d+)><loc_(\d+)>"
+        class_matches = re.findall(class_pattern, response_text)
+        seen_coords = set()
+        all_class_matches = []
+
+        for match in doctag_matches:
+            coords = (match[1], match[2], match[3], match[4])
+            if coords not in seen_coords:
+                seen_coords.add(coords)
+                all_class_matches.append(match)
+
+        for match in class_matches:
+            coords = (match[1], match[2], match[3], match[4])
+            if coords not in seen_coords:
+                seen_coords.add(coords)
+                all_class_matches.append(match)
+
+        loc_only_pattern = r"<loc_(\d+)><loc_(\d+)><loc_(\d+)><loc_(\d+)>"
+        loc_only_matches = re.findall(loc_only_pattern, response_text)
+
+        for class_name, xmin, ymin, xmax, ymax in all_class_matches:
+            if is_doctag_response:
+                color = class_colors.get(class_name.lower(), None)
+                if color is None:
+                    for key in class_colors:
+                        if class_name.lower() in key or key in class_name.lower():
+                            color = class_colors[key]
+                            break
+                    if color is None:
+                        color = "#808080"
+            else:
+                color = "#E0115F"
+
+            x1 = int((int(xmin) / 500) * width)
+            y1 = int((int(ymin) / 500) * height)
+            x2 = int((int(xmax) / 500) * width)
+            y2 = int((int(ymax) / 500) * height)
+            draw.rectangle([x1, y1, x2, y2], outline=color, width=3)
+
+        for xmin, ymin, xmax, ymax in loc_only_matches:
+            if is_doctag_response:
+                continue
+            else:
+                color = "#808080"
+
+            x1 = int((int(xmin) / 500) * width)
+            y1 = int((int(ymin) / 500) * height)
+            x2 = int((int(xmax) / 500) * width)
+            y2 = int((int(ymax) / 500) * height)
+            draw.rectangle([x1, y1, x2, y2], outline=color, width=3)
+
+        return image
+
+    except Exception:
+        return Image.open(image_path)
+
+
+def clean_model_response(text: str) -> str:
+    """Clean up model response by removing special tokens and formatting properly."""
+    if not text:
+        return "No response generated."
+    special_tokens = [
+        "<|end_of_text|>",
+        "<|end|>",
+        "<|assistant|>",
+        "<|user|>",
+        "<|system|>",
+        "<pad>",
+        "</s>",
+        "<s>",
+    ]
+
+    cleaned = text
+    for token in special_tokens:
+        cleaned = cleaned.replace(token, "")
+    cleaned = cleaned.strip()
+
+    if not cleaned or len(cleaned) == 0:
+        return "The model generated a response, but it appears to be empty or contain only special tokens."
+    return cleaned
+
+
+@spaces.GPU()
+def generate_with_model(question: str, image_path: str, apply_padding: bool = False) -> str:
+    """Generate answer using the Granite Docling model directly on the image."""
+    if os.environ.get("NO_LLM"):
+        time.sleep(2)
+        return "This is a simulated response from the Granite Docling model."
+
+    try:
+        image = Image.open(image_path).convert("RGB")
+        if apply_padding:
+            image = add_random_padding(image)
+        messages = [
+            {
+                "role": "user",
+                "content": [
+                    {"type": "image"},
+                    {"type": "text", "text": question},
+                ],
+            }
+        ]
+        prompt = processor.apply_chat_template(messages, add_generation_prompt=True)
+        temperature = 0.0
+        inputs = processor(text=prompt, images=[image], return_tensors="pt")
+        inputs = {k: v.to(device) for k, v in inputs.items()}
+        with torch.no_grad():
+            generated_ids = model.generate(
+                **inputs,
+                max_new_tokens=4096,
+                temperature=temperature,
+                do_sample=temperature > 0,
+                pad_token_id=processor.tokenizer.eos_token_id,
+            )
+        generated_texts = processor.batch_decode(
+            generated_ids[:, inputs["input_ids"].shape[1] :],
+            skip_special_tokens=False,
+        )[0]
+        cleaned_response = clean_model_response(generated_texts)
+
+        return cleaned_response
+
+    except Exception as e:
+        return f"Error processing image: {e!s}"
+
+
+_streaming_raw_output = ""
+
+
+@spaces.GPU()
+def generate_with_model_streaming(question: str, image_path: str, apply_padding: bool = False) -> None:
+    """Generate answer using the Granite Docling model with streaming."""
+    global _streaming_raw_output
+    _streaming_raw_output = ""
+
+    try:
+        image = Image.open(image_path).convert("RGB")
+        if apply_padding:
+            image = add_random_padding(image)
+        messages = [
+            {
+                "role": "user",
+                "content": [
+                    {"type": "image"},
+                    {"type": "text", "text": question},
+                ],
+            }
+        ]
+
+        prompt = processor.apply_chat_template(messages, add_generation_prompt=True)
+        temperature = 0.0
+
+        inputs = processor(text=prompt, images=[image], return_tensors="pt")
+        inputs = {k: v.to(device) for k, v in inputs.items()}
+
+        streamer = TextIteratorStreamer(processor, skip_prompt=True, skip_special_tokens=False)
+        generation_args = dict(
+            inputs,
+            streamer=streamer,
+            max_new_tokens=4096,
+            temperature=temperature,
+            do_sample=temperature > 0,
+            pad_token_id=processor.tokenizer.eos_token_id,
+        )
+
+        thread = Thread(target=model.generate, kwargs=generation_args)
+        thread.start()
+
+        yield "..."
+        full_output = ""
+        escaped_output = ""
+
+        for new_text in streamer:
+            full_output += new_text
+            escaped_output += html.escape(new_text)
+            yield escaped_output
+
+        _streaming_raw_output = full_output
+
+    except Exception as e:
+        yield f"Error generating response: {e!s}"
+
+
+chatbot = gr.Chatbot(
+    examples=[{"text": x} for x in sample_data[0]["prompts"]],
+    type="messages",
+    label=f"Q&A about {sample_data[0]['name']}",
+    height=685,
+    group_consecutive_messages=True,
+    autoscroll=False,
+    elem_classes=["chatbot_view"],
+)
+
+
+css_file_path = Path(Path(__file__).parent / "app.css")
+head_file_path = Path(Path(__file__).parent / "app_head.html")
+
+with gr.Blocks(fill_height=True, css_paths=css_file_path, head_paths=head_file_path, theme=theme, title=TITLE) as demo:
+    is_in_edit_mode = gr.State(True)  # in block to be reactive
+    selected_doc = gr.State(0)
+    current_question = gr.State("")
+    uploaded_image_path = gr.State(None)  # Store path to uploaded image
+
+    gr.Markdown(f"# {TITLE}")
+    gr.Markdown(DESCRIPTION)
+
+    # Create gallery with captions for hover effect
+    gallery_with_captions = []
+    for sd in sample_data:
+        gallery_with_captions.append((sd["preview_image"], sd["name"]))
+
+    document_gallery = gr.Gallery(
+        gallery_with_captions,
+        label="Select a document",
+        rows=1,
+        columns=9,
+        height="125px",
+        allow_preview=False,
+        selected_index=0,
+        elem_classes=["preview_im_element"],
+        show_label=True,
+    )
+
+    with gr.Row():
+        with gr.Column(), gr.Group():
+            image_display = gr.Image(
+                sample_data[0]["image"],
+                label=f"Preview for {sample_data[0]['name']}",
+                height=700,
+                interactive=False,
+                elem_classes=["image_viewer"],
+            )
+            # Upload button for custom images
+            upload_button = gr.UploadButton(
+                "📁 Upload Image", file_types=["image"], elem_classes=["upload_button"], scale=1
+            )
+
+        with gr.Column():
+            chatbot.render()
+            with gr.Row():
+                tbb = gr.Textbox(submit_btn=True, show_label=False, placeholder="Type a message...", scale=4)
+                fb = gr.Button("Ask new question", visible=False, scale=1)
+            fb.click(lambda: [], outputs=[chatbot])
+
+    def sample_image_selected(d: gr.SelectData) -> tuple:
+        """Handle sample image selection."""
+        dx = sample_data[d.index]
+        return (
+            gr.update(examples=[{"text": x} for x in dx["prompts"]], label=f"Q&A about {dx['name']}"),
+            gr.update(value=dx["image"], label=f"Preview for {dx['name']}"),
+            d.index,
+        )
+
+    document_gallery.select(lambda: [], outputs=[chatbot])
+    document_gallery.select(sample_image_selected, inputs=[], outputs=[chatbot, image_display, selected_doc])
+
+    def update_user_chat_x(x: gr.SelectData) -> list:
+        """Update chat with user selection."""
+        return [gr.ChatMessage(role="user", content=x.value["text"])]
+
+    def question_from_selection(x: gr.SelectData) -> str:
+        """Extract question text from selection."""
+        return x.value["text"]
+
+    def handle_image_upload(uploaded_file: str | None) -> tuple:
+        """Handle uploaded image and update the display."""
+        if uploaded_file is None:
+            return None, None, None
+
+        # Update the image display with the uploaded image
+        image_update = gr.update(value=uploaded_file, label="Uploaded Image")
+
+        # Update chatbot to show it's ready for questions about the uploaded image
+        chatbot_update = gr.update(
+            examples=[{"text": "Convert this page to docling."}], label="Q&A about uploaded image"
+        )
+
+        # Clear the chat history
+        chat_update = []
+
+        return image_update, chatbot_update, chat_update, uploaded_file
+
+    # Connect upload button to handler
+    upload_button.upload(
+        handle_image_upload, inputs=[upload_button], outputs=[image_display, chatbot, chatbot, uploaded_image_path]
+    )
+
+    def send_generate(msg: str, cb: list, selected_sample: int, uploaded_img_path: str | None = None) -> None:
+        """Generate response using the model."""
+        # Use uploaded image if available, otherwise use selected sample
+        image_path = uploaded_img_path if uploaded_img_path is not None else sample_data[selected_sample]["image"]
+        original_msg = gr.ChatMessage(role="user", content=msg)
+        cb.append(original_msg)
+
+        processing_msg = gr.ChatMessage(
+            role="assistant",
+            content='<span class="jumping-dots"><span class="dot-1">.</span>  <span class="dot-2">.</span>  '
+            '<span class="dot-3">.</span></span>',
+        )
+        cb.append(processing_msg)
+        yield cb, gr.update()
+
+        # Apply padding only for sample images, not uploaded images
+        apply_padding = False if uploaded_img_path is not None else sample_data[selected_sample].get("pad", False)
+
+        first_token = True
+        try:
+            stream_gen = generate_with_model_streaming(msg.strip(), image_path, apply_padding)
+
+            for partial_answer in stream_gen:
+                if first_token:
+                    cb[-1] = gr.ChatMessage(role="assistant", content=partial_answer)
+                    first_token = False
+                else:
+                    cb[-1] = gr.ChatMessage(role="assistant", content=partial_answer)
+                yield cb, gr.update()
+
+        except Exception:
+            answer = generate_with_model(msg.strip(), image_path, apply_padding)
+            cb[-1] = gr.ChatMessage(role="assistant", content=answer)
+            yield cb, gr.update()
+
+        global _streaming_raw_output
+        answer = _streaming_raw_output if _streaming_raw_output else partial_answer
+
+        answer = html.unescape(answer)
+        answer = clean_model_response(answer)
+        class_loc_pattern = r"<([^>]+)><loc_(\d+)><loc_(\d+)><loc_(\d+)><loc_(\d+)>"
+        class_loc_matches = re.findall(class_loc_pattern, answer)
+
+        loc_only_pattern = r"<loc_(\d+)><loc_(\d+)><loc_(\d+)><loc_(\d+)>"
+        loc_only_matches = re.findall(loc_only_pattern, answer)
+
+        has_doctag = "<doctag>" in answer
+        has_loc_tags = class_loc_matches or loc_only_matches
+
+        xml_tags = ["<doctag>", "<otsl>", "<chart>", "<code>", "<loc_"]
+        if any(tag in answer for tag in xml_tags):
+            cb[-1] = gr.ChatMessage(role="assistant", content=f"```xml\n{answer}\n```")
+        else:
+            cb[-1] = gr.ChatMessage(role="assistant", content=answer)
+
+        if "convert this page to docling" in msg.lower() or ("convert" in msg.lower() and "otsl" in msg.lower()):
+            try:
+                doctags_doc = DocTagsDocument.from_doctags_and_image_pairs([answer], [Image.open(image_path)])
+                doc = DoclingDocument.load_from_doctags(doctags_doc, document_name="Document")
+                markdown_output = doc.export_to_markdown()
+                response = gr.ChatMessage(
+                    role="assistant",
+                    content=f"\nConverted to Markdown using docling.\n\n**MD Output:**\n\n{markdown_output}",
+                )
+                cb.append(response)
+            except Exception as e:
+                error_response = gr.ChatMessage(role="assistant", content=f"Error creating markdown output: {e!s}")
+                cb.append(error_response)
+        elif "convert formula to latex" in msg.lower():
+            try:
+                doctags_doc = DocTagsDocument.from_doctags_and_image_pairs([answer], [Image.open(image_path)])
+                doc = DoclingDocument.load_from_doctags(doctags_doc, document_name="Document")
+                markdown_output = doc.export_to_markdown()
+                if markdown_output.count("$$") >= 2:
+                    parts = markdown_output.split("$$", 2)
+                    formula = parts[1].strip()
+                    wrapped = f"$$\n\\begin{{aligned}}\n{formula}\n\\end{{aligned}}\n$$"
+                    markdown_output = parts[0] + wrapped + parts[2]
+                md_response = gr.ChatMessage(
+                    role="assistant",
+                    content=f"\nConverted to Markdown using docling.\n\n**LaTeX Output:**\n\n{markdown_output}",
+                )
+                cb.append(md_response)
+            except Exception as e:
+                error_response = gr.ChatMessage(role="assistant", content=f"Error creating LaTeX output: {e!s}")
+                cb.append(error_response)
+
+        if has_loc_tags:
+            try:
+                annotated_image = draw_bounding_boxes(image_path, answer, is_doctag_response=has_doctag)
+                annotated_array = np.array(annotated_image)
+                yield cb, gr.update(value=annotated_array, visible=True)
+            except Exception:
+                yield cb, gr.update(value=image_path)
+        else:
+            yield cb, gr.update(value=image_path)
+
+    chatbot.example_select(lambda: False, outputs=is_in_edit_mode)
+    chatbot.example_select(question_from_selection, inputs=[], outputs=[current_question]).then(
+        send_generate,
+        inputs=[current_question, chatbot, selected_doc, uploaded_image_path],
+        outputs=[chatbot, image_display],
+    )
+
+    def textbox_switch(e_mode: bool) -> list:
+        """Switch textbox visibility based on edit mode."""
+        if not e_mode:
+            return [gr.update(visible=False), gr.update(visible=True)]
+        else:
+            return [gr.update(visible=True), gr.update(visible=False)]
+
+    tbb.submit(lambda: False, outputs=[is_in_edit_mode])
+    fb.click(lambda: True, outputs=[is_in_edit_mode])
+    is_in_edit_mode.change(textbox_switch, inputs=[is_in_edit_mode], outputs=[tbb, fb])
+
+    tbb.submit(lambda x: x, inputs=[tbb], outputs=[current_question]).then(
+        send_generate,
+        inputs=[current_question, chatbot, selected_doc, uploaded_image_path],
+        outputs=[chatbot, image_display],
+    )
+
+if __name__ == "__main__":
+    demo.queue(max_size=20)
+    demo.launch()

src/app_head.html

@@ -0,0 +1,12 @@
+<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=gr.themes.GoogleFont("IBM Plex Sans"),  # update font
+    font_mono=gr.themes.GoogleFont("IBM Plex Mono"),  # 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
+)