does this work?

.gitignore

@@ -0,0 +1,276 @@
+# Created by https://www.toptal.com/developers/gitignore/api/linux,macos,windows,visualstudiocode,python
+# Edit at https://www.toptal.com/developers/gitignore?templates=linux,macos,windows,visualstudiocode,python
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Python ###
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+### Python Patch ###
+# Poetry local configuration file - https://python-poetry.org/docs/configuration/#local-configuration
+poetry.toml
+
+# ruff
+.ruff_cache/
+
+# LSP config files
+pyrightconfig.json
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/linux,macos,windows,visualstudiocode,python
+
+# app dir
+/app/
+
+# misc and temp for dev reasons
+/misc/
+/temp/

.vscode/settings.json

@@ -0,0 +1,58 @@
+{
+  "editor.insertSpaces": true,
+  "editor.tabSize": 4,
+  "files.trimTrailingWhitespace": true,
+  "editor.rulers": [ 100, 120 ],
+
+  "files.associations": {
+    "*.yaml": "yaml",
+    ".gitignore": "gitignore",
+    ".prettierrc": "json",
+    "requirements*.txt": "pip-requirements"
+  },
+
+  "[python]": {
+    "editor.wordBasedSuggestions": false,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "ms-python.black-formatter",
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": true
+    }
+  },
+  "python.analysis.extraPaths": [
+    "../..",
+    "../../repositories/k-diffusion",
+    "../../repositories/generative-models",
+    "../../repositories/stable-diffusion-stability-ai"
+  ],
+  "black-formatter.args": [ "--line-length=110" ],
+
+  "[json]": {
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
+    "editor.formatOnSave": true,
+    "editor.formatOnSaveMode": "file",
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "[jsonc]": {
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
+    "editor.formatOnSave": true,
+    "editor.formatOnSaveMode": "file",
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+
+  "[yaml]": {
+    "editor.detectIndentation": false,
+    "editor.tabSize": 2,
+    "editor.formatOnSave": true,
+    "editor.formatOnSaveMode": "file"
+  },
+  "yaml.format.bracketSpacing": true,
+  "yaml.format.proseWrap": "preserve",
+  "yaml.format.singleQuote": false,
+  "yaml.format.printWidth": 110,
+
+  "remote.autoForwardPorts": false,
+  "remote.autoForwardPortsSource": "process"
+}

README.md

@@ -1,8 +1,8 @@
 ---
 title: Clip Tokenizer Util
 emoji: 🏆
-colorFrom: yellow
-colorTo: pink
+colorFrom: purple
+colorTo: yellow
 sdk: gradio
 sdk_version: 3.50.2
 app_file: app.py
@@ -10,4 +10,4 @@ pinned: false
 license: bsd-3-clause
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+a gradio space for playing with CLIP's tokenizer

app.css

@@ -0,0 +1,27 @@
+.tokenizer-token {
+    cursor: pointer;
+}
+.tokenizer-token-0 {
+    background: rgba(255, 0, 0, 0.05);
+}
+.tokenizer-token-0:hover {
+    background: rgba(255, 0, 0, 0.15);
+}
+.tokenizer-token-1 {
+    background: rgba(0, 255, 0, 0.05);
+}
+.tokenizer-token-1:hover {
+    background: rgba(0, 255, 0, 0.15);
+}
+.tokenizer-token-2 {
+    background: rgba(0, 0, 255, 0.05);
+}
+.tokenizer-token-2:hover {
+    background: rgba(0, 0, 255, 0.15);
+}
+.tokenizer-token-3 {
+    background: rgba(255, 156, 0, 0.05);
+}
+.tokenizer-token-3:hover {
+    background: rgba(255, 156, 0, 0.15);
+}

app.py

@@ -0,0 +1,197 @@
+import html
+import logging
+from pathlib import Path
+
+import gradio as gr
+from gradio.themes.utils import colors
+from transformers import CLIPTokenizer
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+gr_logger = logging.getLogger("gradio")
+gr_logger.setLevel(logging.INFO)
+
+
+class ClipUtil:
+    def __init__(self):
+        logger.info("Loading ClipUtil")
+
+        self.theme = gr.themes.Base(
+            primary_hue=colors.violet,
+            secondary_hue=colors.indigo,
+            neutral_hue=colors.slate,
+            font=[gr.themes.GoogleFont("Fira Sans"), "ui-sans-serif", "system-ui", "sans-serif"],
+            font_mono=[gr.themes.GoogleFont("Fira Code"), "ui-monospace", "Consolas", "monospace"],
+        ).set(
+            slider_color_dark="*primary_500",
+        )
+
+        try:
+            self.css = Path(__file__).with_suffix(".css").read_text()
+        except Exception:
+            logger.exception("Failed to load CSS file")
+            self.css = ""
+
+        self.tokenizer: CLIPTokenizer = CLIPTokenizer.from_pretrained("openai/clip-vit-large-patch14")
+        self.vocab = {v: k for k, v in self.tokenizer.get_vocab().items()}
+
+        self.blocks = gr.Blocks(
+            title="ClipTokenizerUtil", analytics_enabled=False, theme=self.theme, css=self.css
+        )
+
+    def tokenize(self, text: str, input_ids: bool = False):
+        if input_ids:
+            tokens = [int(x.strip()) for x in text.split(",")]
+        else:
+            tokens = self.tokenizer(text, return_tensors="np").input_ids.squeeze().tolist()
+
+        code = ""
+        ids = []
+        current_ids = []
+        class_index = 0
+
+        byte_decoder = self.tokenizer.byte_decoder
+
+        def dump(last=False):
+            nonlocal code, ids, current_ids
+            words = [self.vocab.get(x, "") for x in current_ids]
+
+            def wordscode(ids, word):
+                nonlocal class_index
+                word_title = html.escape(", ".join([str(x) for x in ids]))
+                res = f"""
+                <span class='tokenizer-token tokenizer-token-{class_index % 4}' title='{word_title}'>
+                    {html.escape(word)}
+                </span>
+                """
+                class_index += 1
+                return res
+
+            try:
+                word = bytearray([byte_decoder[x] for x in "".join(words)]).decode("utf-8")
+            except UnicodeDecodeError:
+                if last:
+                    word = "❌" * len(current_ids)
+                elif len(current_ids) > 4:
+                    id = current_ids[0]
+                    ids += [id]
+                    local_ids = current_ids[1:]
+                    code += wordscode([id], "❌")
+
+                    current_ids = []
+                    for id in local_ids:
+                        current_ids.append(id)
+                        dump()
+                    return
+                else:
+                    return
+
+            # word = word.replace("</w>", " ")
+
+            code += wordscode(current_ids, word)
+            ids += current_ids
+
+            current_ids = []
+
+        for token in tokens:
+            token = int(token)
+            current_ids.append(token)
+
+            dump()
+
+        dump(last=True)
+
+        ids_html = f"""
+        <p>
+                Token count: {len(ids)}
+                <br>
+                {", ".join([str(x) for x in ids])}
+        </p>"""
+
+        return code, ids_html
+
+    def create_components(self):
+        with self.blocks:
+            # title bar
+            with gr.Row().style(equal_height=True):
+                with gr.Column(scale=12, elem_id="header_col"):
+                    self.header_title = gr.Markdown(
+                        "## CLIP Tokenizer Util",
+                        elem_id="header_title",
+                    )
+                with gr.Column(scale=1, min_width=90, elem_id="button_col"):
+                    with gr.Row(elem_id="button_row"):
+                        self.reload_btn = gr.Button(
+                            label="refresh",
+                            elem_id="refresh_btn",
+                            type="button",
+                            value="🔄",
+                            variant="primary",
+                        )
+
+            with gr.Tabs() as in_tabs:
+                with gr.Tab(label="Text Input", id="text_input_tab"):
+                    with gr.Row().style(equal_height=True):
+                        with gr.Column(scale=12, elem_id="text_input_col"):
+                            self.text_input = gr.Textbox(
+                                label="Text Input",
+                                elem_id="tokenizer_prompt",
+                                show_label=False,
+                                lines=8,
+                                placeholder="Prompt for tokenization",
+                            )
+                            self.text_button = gr.Button(
+                                label="Tokenize",
+                                elem_id="go_button",
+                                value="Go",
+                                variant="primary",
+                            )
+
+                with gr.Tab(label="Token Input", id="token_input_tab"):
+                    with gr.Row().style(equal_height=True):
+                        with gr.Column(scale=12, elem_id="text_input_col"):
+                            self.token_input = gr.Textbox(
+                                lines=5,
+                                label="Text Input",
+                                elem_id="text_input",
+                                placeholder="Enter text here",
+                            )
+                            self.token_button = gr.Button(
+                                label="Tokenize",
+                                elem_id="go_button",
+                                type="button",
+                                value="Go",
+                                variant="primary",
+                            )
+
+            with gr.Tabs():
+                with gr.Tab("Text"):
+                    tokenized_text = gr.HTML(elem_id="tokenized_text")
+                with gr.Tab("Tokens"):
+                    tokenized_ids = gr.HTML(elem_id="tokenized_ids")
+
+            self.text_button.click(
+                fn=self.tokenize,
+                inputs=[self.text_input],
+                outputs=[tokenized_text, tokenized_ids],
+            )
+            self.token_button.click(
+                fn=self.tokenize,
+                inputs=[self.token_input],
+                outputs=[tokenized_text, tokenized_ids],
+                kwargs={"input_ids": True},
+            )
+
+    def launch(self, **kwargs) -> None:
+        return self.blocks.launch(
+            server_name="0.0.0.0",
+            show_error=True,
+            enable_queue=True,
+            **kwargs,
+        )
+
+
+if __name__ == "__main__":
+    clip_util = ClipUtil()
+    clip_util._create_components()
+    clip_util.launch()

requirements.txt

@@ -0,0 +1,5 @@
+transformers
+tokenizers
+torch
+open-clip-torch==2.20.0
+gradio==3.50.2