initial commmit

.gitattributes

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

.gitignore

@@ -0,0 +1,207 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[codz]
+*$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
+#poetry.toml
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#   pdm recommends including project-wide configuration in pdm.toml, but excluding .pdm-python.
+#   https://pdm-project.org/en/latest/usage/project/#working-with-version-control
+#pdm.lock
+#pdm.toml
+.pdm-python
+.pdm-build/
+
+# pixi
+#   Similar to Pipfile.lock, it is generally recommended to include pixi.lock in version control.
+#pixi.lock
+#   Pixi creates a virtual environment in the .pixi directory, just like venv module creates one
+#   in the .venv directory. It is recommended not to include this directory in version control.
+.pixi
+
+# 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
+.envrc
+.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/
+
+# Abstra
+# Abstra is an AI-powered process automation framework.
+# Ignore directories containing user credentials, local state, and settings.
+# Learn more at https://abstra.io/docs
+.abstra/
+
+# Visual Studio Code
+#  Visual Studio Code specific template is maintained in a separate VisualStudioCode.gitignore 
+#  that can be found at https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
+#  and can be added to the global gitignore or merged into this file. However, if you prefer, 
+#  you could uncomment the following to ignore the entire vscode folder
+# .vscode/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+# Cursor
+#  Cursor is an AI-powered code editor. `.cursorignore` specifies files/directories to
+#  exclude from AI features like autocomplete and code analysis. Recommended for sensitive data
+#  refer to https://docs.cursor.com/context/ignore-files
+.cursorignore
+.cursorindexingignore
+
+# Marimo
+marimo/_static/
+marimo/_lsp/
+__marimo__/

data/prompts.jsonl

@@ -0,0 +1,7 @@
+{"prompt": "Write a poem on any topic of your choosing.", "model": "meta-llama/Llama-3.2-1B-Instruct", "llm_full_response_original": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\nThe moon, a glowing crescent shape,\nCasts shadows on the ground,\nA silver glow, that lights the way,\nFor dreams to unfold, in a silent sway.\n\nIn the moon's pale light, I stand and roam,\nA midnight wanderer, in a quiet home,\nWhere shadows dance, and dreams take flight,\nAnd the world is full of endless night.\n\nThe wind whispers secrets, in my ear,\nOf distant lands, and love that's clear,\nOf hearts that beat, with passion's fire,\nAnd the moon's soft light, that never tires.\n\nThe night's dark veil, that lifts away,\nReveals a world, in all its gray,\nYet still I climb, to the higher ground,\nWhere stars and dreams, are my sole command.\n\nIn the moon's pale light, I find my way,\nThrough labyrinths, of a busy day,\nWhere thoughts and fears, and doubts arise,\nI face them head-on, with a steady surprise.\n\nThe moon's soft light, that shines so bright,\nGuides me through, the darkest night,\n Illuminating, the path that's yet unknown,\nAnd in its radiance, my spirit is shown.\n\nAnd so I stand, under the starry sky,\nA tiny part, of the celestial sigh,\nFeeling connected, to the universe's heart,\nAnd the moon's soft light, that sets me apart.", "llm_partial_response": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\nThe moon, a glowing crescent shape,\nCasts shadows on the ground,\nA silver glow, that lights the way,\nFor dreams to unfold, in a silent sway.\n\n"}
+{"prompt": "Write a poem on any topic of your choosing.", "model": "meta-llama/Llama-3.2-1B-Instruct", "llm_full_response_original": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\nThe moon, a glowing crescent shape,\nCasts shadows on the ground,\nA silver glow, that lights the way,\nFor dreams to unfold, in a silent sway.\n\nIn the moon's pale light, I stand and roam,\nA midnight wanderer, in a quiet home,\nWhere shadows dance, and dreams take flight,\nAnd the world is full of endless night.\n\nThe wind whispers secrets, in my ear,\nOf distant lands, and love that's clear,\nOf hearts that beat, with passion's fire,\nAnd the moon's soft light, that never tires.\n\nThe night's dark veil, that lifts away,\nReveals a world, in all its gray,\nYet still I climb, to the higher ground,\nWhere stars and dreams, are my sole command.\n\nIn the moon's pale light, I find my way,\nThrough labyrinths, of a busy day,\nWhere thoughts and fears, and doubts arise,\nI face them head-on, with a steady surprise.\n\nThe moon's soft light, that shines so bright,\nGuides me through, the darkest night,\n Illuminating, the path that's yet unknown,\nAnd in its radiance, my spirit is shown.\n\nAnd so I stand, under the starry sky,\nA tiny part, of the celestial sigh,\nFeeling connected, to the universe's heart,\nAnd the moon's soft light, that sets me apart.", "llm_partial_response": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\nThe moon, a glowing crescent shape,\nCasts shadows on the ground,\n"}
+{"prompt": "Write a poem on any topic of your choosing.", "model": "meta-llama/Llama-3.2-1B-Instruct", "llm_full_response_original": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\nThe moon, a glowing crescent shape,\nCasts shadows on the ground,\nA silver glow, that lights the way,\nFor dreams to unfold, in a silent sway.\n\nIn the moon's pale light, I stand and roam,\nA midnight wanderer, in a quiet home,\nWhere shadows dance, and dreams take flight,\nAnd the world is full of endless night.\n\nThe wind whispers secrets, in my ear,\nOf distant lands, and love that's clear,\nOf hearts that beat, with passion's fire,\nAnd the moon's soft light, that never tires.\n\nThe night's dark veil, that lifts away,\nReveals a world, in all its gray,\nYet still I climb, to the higher ground,\nWhere stars and dreams, are my sole command.\n\nIn the moon's pale light, I find my way,\nThrough labyrinths, of a busy day,\nWhere thoughts and fears, and doubts arise,\nI face them head-on, with a steady surprise.\n\nThe moon's soft light, that shines so bright,\nGuides me through, the darkest night,\n Illuminating, the path that's yet unknown,\nAnd in its radiance, my spirit is shown.\n\nAnd so I stand, under the starry sky,\nA tiny part, of the celestial sigh,\nFeeling connected, to the universe's heart,\nAnd the moon's soft light, that sets me apart.", "llm_partial_response": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\n"}
+{"prompt": "Write a poem on any topic of your choosing.", "model": "meta-llama/Llama-3.2-1B-Instruct", "llm_full_response_original": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\nThe moon, a glowing crescent shape,\nCasts shadows on the ground,\nA silver glow, that lights the way,\nFor dreams to unfold, in a silent sway.\n\nIn the moon's pale light, I stand and roam,\nA midnight wanderer, in a quiet home,\nWhere shadows dance, and dreams take flight,\nAnd the world is full of endless night.\n\nThe wind whispers secrets, in my ear,\nOf distant lands, and love that's clear,\nOf hearts that beat, with passion's fire,\nAnd the moon's soft light, that never tires.\n\nThe night's dark veil, that lifts away,\nReveals a world, in all its gray,\nYet still I climb, to the higher ground,\nWhere stars and dreams, are my sole command.\n\nIn the moon's pale light, I find my way,\nThrough labyrinths, of a busy day,\nWhere thoughts and fears, and doubts arise,\nI face them head-on, with a steady surprise.\n\nThe moon's soft light, that shines so bright,\nGuides me through, the darkest night,\n Illuminating, the path that's yet unknown,\nAnd in its radiance, my spirit is shown.\n\nAnd so I stand, under the starry sky,\nA tiny part, of the celestial sigh,\nFeeling connected, to the universe's heart,\nAnd the moon's soft light, that sets me apart.", "llm_partial_response": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and "}
+{"prompt": "Write a poem on any topic of your choosing.", "model": "meta-llama/Llama-3.2-1B-Instruct", "llm_full_response_original": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\nThe moon, a glowing crescent shape,\nCasts shadows on the ground,\nA silver glow, that lights the way,\nFor dreams to unfold, in a silent sway.\n\nIn the moon's pale light, I stand and roam,\nA midnight wanderer, in a quiet home,\nWhere shadows dance, and dreams take flight,\nAnd the world is full of endless night.\n\nThe wind whispers secrets, in my ear,\nOf distant lands, and love that's clear,\nOf hearts that beat, with passion's fire,\nAnd the moon's soft light, that never tires.\n\nThe night's dark veil, that lifts away,\nReveals a world, in all its gray,\nYet still I climb, to the higher ground,\nWhere stars and dreams, are my sole command.\n\nIn the moon's pale light, I find my way,\nThrough labyrinths, of a busy day,\nWhere thoughts and fears, and doubts arise,\nI face them head-on, with a steady surprise.\n\nThe moon's soft light, that shines so bright,\nGuides me through, the darkest night,\n Illuminating, the path that's yet unknown,\nAnd in its radiance, my spirit is shown.\n\nAnd so I stand, under the starry sky,\nA tiny part, of the celestial sigh,\nFeeling connected, to the universe's heart,\nAnd the moon's soft light, that sets me apart.", "llm_partial_response": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\n"}
+{"prompt": "Write a poem on any topic of your choosing.", "model": "meta-llama/Llama-3.2-1B-Instruct", "llm_full_response_original": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\nThe moon, a glowing crescent shape,\nCasts shadows on the ground,\nA silver glow, that lights the way,\nFor dreams to unfold, in a silent sway.\n\nIn the moon's pale light, I stand and roam,\nA midnight wanderer, in a quiet home,\nWhere shadows dance, and dreams take flight,\nAnd the world is full of endless night.\n\nThe wind whispers secrets, in my ear,\nOf distant lands, and love that's clear,\nOf hearts that beat, with passion's fire,\nAnd the moon's soft light, that never tires.\n\nThe night's dark veil, that lifts away,\nReveals a world, in all its gray,\nYet still I climb, to the higher ground,\nWhere stars and dreams, are my sole command.\n\nIn the moon's pale light, I find my way,\nThrough labyrinths, of a busy day,\nWhere thoughts and fears, and doubts arise,\nI face them head-on, with a steady surprise.\n\nThe moon's soft light, that shines so bright,\nGuides me through, the darkest night,\n Illuminating, the path that's yet unknown,\nAnd in its radiance, my spirit is shown.\n\nAnd so I stand, under the starry sky,\nA tiny part, of the celestial sigh,\nFeeling connected, to the universe's heart,\nAnd the moon's soft light, that sets me apart.", "llm_partial_response": "\"Moonlit Dreams\"\n\nThe night's soft whisper,"}
+{"prompt": "Write a poem on any topic of your choosing.", "model": "meta-llama/Llama-3.2-1B-Instruct", "llm_full_response_original": "\"Moonlit Dreams\"\n\nThe night's soft whisper, a gentle breeze,\nThat stirs the trees, and rustles leaves,\nA midnight sky, with stars up high,\nA celestial tapestry, a twinkling sigh.\n\nThe moon, a glowing crescent shape,\nCasts shadows on the ground,\nA silver glow, that lights the way,\nFor dreams to unfold, in a silent sway.\n\nIn the moon's pale light, I stand and roam,\nA midnight wanderer, in a quiet home,\nWhere shadows dance, and dreams take flight,\nAnd the world is full of endless night.\n\nThe wind whispers secrets, in my ear,\nOf distant lands, and love that's clear,\nOf hearts that beat, with passion's fire,\nAnd the moon's soft light, that never tires.\n\nThe night's dark veil, that lifts away,\nReveals a world, in all its gray,\nYet still I climb, to the higher ground,\nWhere stars and dreams, are my sole command.\n\nIn the moon's pale light, I find my way,\nThrough labyrinths, of a busy day,\nWhere thoughts and fears, and doubts arise,\nI face them head-on, with a steady surprise.\n\nThe moon's soft light, that shines so bright,\nGuides me through, the darkest night,\n Illuminating, the path that's yet unknown,\nAnd in its radiance, my spirit is shown.\n\nAnd so I stand, under the starry sky,\nA tiny part, of the celestial sigh,\nFeeling connected, to the universe's heart,\nAnd the moon's soft light, that sets me apart.", "llm_partial_response": "\"Moonlit Dreams\"\n\n"}

data/results.jsonl

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

main.py

@@ -0,0 +1,119 @@
+# Import our modules
+from src.models.llm_manager import LLMManager
+from src.models.similarity_calculator import SimilarityCalculator
+from src.models.data_manager import DataManager
+from src.scoring.scorer import Scorer
+from src.scoring.statistics import StatisticsCalculator
+from src.scoring.achievements import AchievementSystem
+from src.session.session_manager import SessionManager
+from src.ui.template_renderer import TemplateRenderer
+from src.ui.page_handlers import PageHandlers
+from src.ui.interface_builder import InterfaceBuilder
+from src.config.settings import DEFAULT_SERVER_NAME, DEFAULT_SERVER_PORT, DEFAULT_SHARE
+
+class CollaborativeDecodingApp:
+    def __init__(self):
+        self.current_prompt = None
+        
+        # Initialize managers
+        self.llm_manager = LLMManager()
+        self.similarity_calculator = SimilarityCalculator()
+        self.data_manager = DataManager()
+        self.scorer = Scorer()
+        self.statistics_calculator = StatisticsCalculator()
+        self.achievement_system = AchievementSystem()
+        self.session_manager = SessionManager(
+            data_manager=self.data_manager,
+            achievement_system=self.achievement_system
+        )
+        
+        # Initialize UI components
+        self.template_renderer = TemplateRenderer()
+        self.page_handlers = PageHandlers(self)
+        self.interface_builder = InterfaceBuilder(self, self.page_handlers)
+        
+        # Use session manager's session ID
+        self.session_id = self.session_manager.session_id
+
+    def load_data(self):
+        self.data_manager.load_prompts_data()
+
+    def load_models(self):
+        self.llm_manager.load_models()
+        self.similarity_calculator.load_model()
+
+    def get_random_prompt(self):
+        self.current_prompt = self.data_manager.get_random_prompt()
+        return self.current_prompt
+
+    def validate_user_input(self, user_input):
+        return self.llm_manager.validate_user_input(user_input)
+
+    def process_submission(self, user_input):
+        """Process user submission and return results"""
+        # Validation
+        if not user_input.strip():
+            return "Please enter some text to continue the response.", None, None, None, None, None, None
+        
+        if not self.validate_user_input(user_input):
+            return "Please keep your input to 5 tokens or less.", None, None, None, None, None, None
+        
+        if not self.current_prompt:
+            return "Error: No prompt loaded. Please refresh the page.", None, None, None, None, None, None
+        
+        # Generate response
+        try:
+            generated_response = self.llm_manager.generate_response_from_user_input(
+                self.current_prompt["prompt"],
+                self.current_prompt["llm_partial_response"], 
+                user_input
+            )
+        except Exception as e:
+            return f"Error generating response: {str(e)}", None, None, None, None, None, None
+        
+        # Calculate similarity score
+        original_full = self.current_prompt["llm_full_response_original"]
+        cosine_distance = self.similarity_calculator.compute_cosine_distance(original_full, generated_response)
+        
+        # Save interaction with token count
+        num_user_tokens = self.llm_manager.count_tokens(user_input)
+        self.data_manager.save_interaction(
+            self.current_prompt, user_input, generated_response, 
+            cosine_distance, self.session_id, num_user_tokens
+        )
+        
+        # Calculate additional metrics for results display
+        all_results = self.data_manager.load_results_data()
+        prompt_results = self.data_manager.filter_results_by_partial_response(
+            all_results, self.current_prompt["prompt"], self.current_prompt["llm_partial_response"]
+        )
+        
+        # Calculate rank and percentile
+        rank, percentile = self.scorer.calculate_rank_and_percentile(cosine_distance, prompt_results, num_user_tokens)
+        
+        # Calculate mean score (for legacy compatibility)
+        scores = [r["cosine_distance"] for r in prompt_results if r["num_user_tokens"] == num_user_tokens]
+        mean_score = sum(scores) / len(scores) if scores else cosine_distance
+        
+        # Create violin plot if there are enough results
+        violin_plot = None
+        if len(prompt_results) >= 3:
+            violin_plot = self.statistics_calculator.create_violin_plot(prompt_results, cosine_distance, num_user_tokens)
+        
+        return generated_response, cosine_distance, rank, percentile, mean_score, violin_plot, prompt_results
+
+    def create_interface(self):
+        """Create the main Gradio interface"""
+        return self.interface_builder.create_interface()
+
+
+def main():
+    app = CollaborativeDecodingApp()
+    app.load_data()
+    app.load_models()
+    
+    demo = app.create_interface()
+    demo.launch(share=DEFAULT_SHARE, server_name=DEFAULT_SERVER_NAME, server_port=DEFAULT_SERVER_PORT)
+
+if __name__ == "__main__":
+    main()

pyproject.toml

@@ -0,0 +1,17 @@
+[project]
+name = "collaborative-decoding"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.11"
+dependencies = [
+    "torch>=2.9.0",
+    "transformers>=4.57.1",
+    "gradio>=5.6.0",
+    "sentence-transformers>=3.0.0",
+    "dotenv>=0.9.9",
+    "litellm>=1.79.1",
+    "tenacity>=9.1.2",
+    "matplotlib>=3.10.7",
+    "numpy>=2.3.4",
+]

requirements.txt

@@ -0,0 +1,313 @@
+# This file was autogenerated by uv via the following command:
+#    uv pip compile pyproject.toml -o requirements.txt
+aiofiles==24.1.0
+    # via gradio
+aiohappyeyeballs==2.6.1
+    # via aiohttp
+aiohttp==3.13.2
+    # via litellm
+aiosignal==1.4.0
+    # via aiohttp
+annotated-doc==0.0.3
+    # via fastapi
+annotated-types==0.7.0
+    # via pydantic
+anyio==4.11.0
+    # via
+    #   gradio
+    #   httpx
+    #   openai
+    #   starlette
+attrs==25.4.0
+    # via
+    #   aiohttp
+    #   jsonschema
+    #   referencing
+brotli==1.2.0
+    # via gradio
+certifi==2025.10.5
+    # via
+    #   httpcore
+    #   httpx
+    #   requests
+charset-normalizer==3.4.4
+    # via requests
+click==8.3.0
+    # via
+    #   litellm
+    #   typer
+    #   uvicorn
+contourpy==1.3.3
+    # via matplotlib
+cycler==0.12.1
+    # via matplotlib
+distro==1.9.0
+    # via openai
+dotenv==0.9.9
+    # via collaborative-decoding (pyproject.toml)
+fastapi==0.121.0
+    # via gradio
+fastuuid==0.14.0
+    # via litellm
+ffmpy==0.6.4
+    # via gradio
+filelock==3.20.0
+    # via
+    #   huggingface-hub
+    #   torch
+    #   transformers
+fonttools==4.60.1
+    # via matplotlib
+frozenlist==1.8.0
+    # via
+    #   aiohttp
+    #   aiosignal
+fsspec==2025.10.0
+    # via
+    #   gradio-client
+    #   huggingface-hub
+    #   torch
+gradio==5.49.1
+    # via collaborative-decoding (pyproject.toml)
+gradio-client==1.13.3
+    # via gradio
+groovy==0.1.2
+    # via gradio
+h11==0.16.0
+    # via
+    #   httpcore
+    #   uvicorn
+hf-xet==1.2.0
+    # via huggingface-hub
+httpcore==1.0.9
+    # via httpx
+httpx==0.28.1
+    # via
+    #   gradio
+    #   gradio-client
+    #   litellm
+    #   openai
+    #   safehttpx
+huggingface-hub==0.36.0
+    # via
+    #   gradio
+    #   gradio-client
+    #   sentence-transformers
+    #   tokenizers
+    #   transformers
+idna==3.11
+    # via
+    #   anyio
+    #   httpx
+    #   requests
+    #   yarl
+importlib-metadata==8.7.0
+    # via litellm
+jinja2==3.1.6
+    # via
+    #   gradio
+    #   litellm
+    #   torch
+jiter==0.11.1
+    # via openai
+joblib==1.5.2
+    # via scikit-learn
+jsonschema==4.25.1
+    # via litellm
+jsonschema-specifications==2025.9.1
+    # via jsonschema
+kiwisolver==1.4.9
+    # via matplotlib
+litellm==1.79.1
+    # via collaborative-decoding (pyproject.toml)
+markdown-it-py==4.0.0
+    # via rich
+markupsafe==3.0.3
+    # via
+    #   gradio
+    #   jinja2
+matplotlib==3.10.7
+    # via collaborative-decoding (pyproject.toml)
+mdurl==0.1.2
+    # via markdown-it-py
+mpmath==1.3.0
+    # via sympy
+multidict==6.7.0
+    # via
+    #   aiohttp
+    #   yarl
+networkx==3.5
+    # via torch
+numpy==2.3.4
+    # via
+    #   collaborative-decoding (pyproject.toml)
+    #   contourpy
+    #   gradio
+    #   matplotlib
+    #   pandas
+    #   scikit-learn
+    #   scipy
+    #   transformers
+openai==2.7.1
+    # via litellm
+orjson==3.11.4
+    # via gradio
+packaging==25.0
+    # via
+    #   gradio
+    #   gradio-client
+    #   huggingface-hub
+    #   matplotlib
+    #   transformers
+pandas==2.3.3
+    # via gradio
+pillow==11.3.0
+    # via
+    #   gradio
+    #   matplotlib
+    #   sentence-transformers
+propcache==0.4.1
+    # via
+    #   aiohttp
+    #   yarl
+pydantic==2.11.10
+    # via
+    #   fastapi
+    #   gradio
+    #   litellm
+    #   openai
+pydantic-core==2.33.2
+    # via pydantic
+pydub==0.25.1
+    # via gradio
+pygments==2.19.2
+    # via rich
+pyparsing==3.2.5
+    # via matplotlib
+python-dateutil==2.9.0.post0
+    # via
+    #   matplotlib
+    #   pandas
+python-dotenv==1.2.1
+    # via
+    #   dotenv
+    #   litellm
+python-multipart==0.0.20
+    # via gradio
+pytz==2025.2
+    # via pandas
+pyyaml==6.0.3
+    # via
+    #   gradio
+    #   huggingface-hub
+    #   transformers
+referencing==0.37.0
+    # via
+    #   jsonschema
+    #   jsonschema-specifications
+regex==2025.11.3
+    # via
+    #   tiktoken
+    #   transformers
+requests==2.32.5
+    # via
+    #   huggingface-hub
+    #   tiktoken
+    #   transformers
+rich==14.2.0
+    # via typer
+rpds-py==0.28.0
+    # via
+    #   jsonschema
+    #   referencing
+ruff==0.14.4
+    # via gradio
+safehttpx==0.1.7
+    # via gradio
+safetensors==0.6.2
+    # via transformers
+scikit-learn==1.7.2
+    # via sentence-transformers
+scipy==1.16.3
+    # via
+    #   scikit-learn
+    #   sentence-transformers
+semantic-version==2.10.0
+    # via gradio
+sentence-transformers==5.1.2
+    # via collaborative-decoding (pyproject.toml)
+setuptools==80.9.0
+    # via torch
+shellingham==1.5.4
+    # via typer
+six==1.17.0
+    # via python-dateutil
+sniffio==1.3.1
+    # via
+    #   anyio
+    #   openai
+starlette==0.49.3
+    # via
+    #   fastapi
+    #   gradio
+sympy==1.14.0
+    # via torch
+tenacity==9.1.2
+    # via collaborative-decoding (pyproject.toml)
+threadpoolctl==3.6.0
+    # via scikit-learn
+tiktoken==0.12.0
+    # via litellm
+tokenizers==0.22.1
+    # via
+    #   litellm
+    #   transformers
+tomlkit==0.13.3
+    # via gradio
+torch==2.9.0
+    # via
+    #   collaborative-decoding (pyproject.toml)
+    #   sentence-transformers
+tqdm==4.67.1
+    # via
+    #   huggingface-hub
+    #   openai
+    #   sentence-transformers
+    #   transformers
+transformers==4.57.1
+    # via
+    #   collaborative-decoding (pyproject.toml)
+    #   sentence-transformers
+typer==0.20.0
+    # via gradio
+typing-extensions==4.15.0
+    # via
+    #   aiosignal
+    #   anyio
+    #   fastapi
+    #   gradio
+    #   gradio-client
+    #   huggingface-hub
+    #   openai
+    #   pydantic
+    #   pydantic-core
+    #   referencing
+    #   sentence-transformers
+    #   starlette
+    #   torch
+    #   typer
+    #   typing-inspection
+typing-inspection==0.4.2
+    # via pydantic
+tzdata==2025.2
+    # via pandas
+urllib3==2.5.0
+    # via requests
+uvicorn==0.38.0
+    # via gradio
+websockets==15.0.1
+    # via gradio-client
+yarl==1.22.0
+    # via aiohttp
+zipp==3.23.0
+    # via importlib-metadata

src/__init__.py

@@ -0,0 +1,25 @@
+"""Collaborative Decoding Application Package"""
+
+from .models.llm_manager import LLMManager
+from .models.similarity_calculator import SimilarityCalculator 
+from .models.data_manager import DataManager
+from .scoring.scorer import Scorer
+from .scoring.statistics import StatisticsCalculator
+from .scoring.achievements import AchievementSystem
+from .session.session_manager import SessionManager
+from .ui.template_renderer import TemplateRenderer
+from .ui.page_handlers import PageHandlers
+from .ui.interface_builder import InterfaceBuilder
+
+__all__ = [
+    "LLMManager",
+    "SimilarityCalculator", 
+    "DataManager",
+    "Scorer",
+    "StatisticsCalculator",
+    "AchievementSystem",
+    "SessionManager",
+    "TemplateRenderer",
+    "PageHandlers",
+    "InterfaceBuilder"
+]

src/config/__init__.py

@@ -0,0 +1,23 @@
+"""Configuration modules"""
+
+from .settings import *
+
+__all__ = [
+    "CSS_PATHS",
+    "DEFAULT_LLM_MODEL", 
+    "DEFAULT_SIMILARITY_MODEL",
+    "MAX_USER_TOKENS",
+    "PROMPTS_DATA_PATH",
+    "RESULTS_DATA_PATH", 
+    "DEFAULT_SERVER_NAME",
+    "DEFAULT_SERVER_PORT",
+    "DEFAULT_SHARE",
+    "TEMPLATES_DIR",
+    "DEFAULT_GALLERY_MIN_SCORE",
+    "DEFAULT_GALLERY_LIMIT",
+    "DEFAULT_INSPIRE_LIMIT",
+    "INSPIRE_MIN_SCORE",
+    "SCORE_THRESHOLDS",
+    "ACHIEVEMENT_TITLES",
+    "TUTORIAL_EXAMPLE"
+]

src/config/settings.py

@@ -0,0 +1,76 @@
+"""Configuration settings for the collaborative decoding application"""
+
+# CSS file paths for the Gradio interface
+CSS_PATHS = [
+    "static/css/base.css", 
+    "static/css/components.css",
+    "static/css/gallery.css",
+    "static/css/game.css",
+    "static/css/landing.css",
+    "static/css/scores.css",
+]
+
+# Model configurations
+DEFAULT_LLM_MODEL = "meta-llama/Llama-3.2-1B-Instruct"
+DEFAULT_SIMILARITY_MODEL = "all-MiniLM-L6-v2"
+
+# Token limits
+MAX_USER_TOKENS = 5
+
+# Data file paths
+PROMPTS_DATA_PATH = "data/prompts.jsonl"
+RESULTS_DATA_PATH = "data/results.jsonl"
+
+# Server configuration
+DEFAULT_SERVER_NAME = "127.0.0.1"
+DEFAULT_SERVER_PORT = 7860
+DEFAULT_SHARE = False
+
+# Template directory
+TEMPLATES_DIR = "templates/components"
+
+# Gallery settings
+DEFAULT_GALLERY_MIN_SCORE = 0.3
+DEFAULT_GALLERY_LIMIT = 20
+
+# Inspire me settings
+DEFAULT_INSPIRE_LIMIT = 5
+INSPIRE_MIN_SCORE = 0.2
+
+# Scoring thresholds
+SCORE_THRESHOLDS = {
+    "legendary": 0.7,
+    "exceptional": 0.5,  
+    "great": 0.3,
+    "good": 0.15
+}
+
+# Achievement titles
+ACHIEVEMENT_TITLES = {
+    "creativity": {
+        0.7: "🌟 Creative Genius",
+        0.5: "🔥 Innovation Master", 
+        0.3: "✨ Creative Spark",
+        0.15: "💡 Imagination Worker"
+    },
+    "efficiency": {
+        1: "⚡ Word Wizard",  # 1 token high score
+        2: "🎪 Phrase Magician",  # 2 token high score
+    },
+    "special": {
+        "one_word_wonder": "👑 One-Word Wonder",  # 1 token + high score
+        "efficiency_expert": "🏆 Efficiency Expert",  # high score + low tokens
+        "bold_wordsmith": "🎖️ Bold Wordsmith",  # many tokens + high score
+        "creative_explorer": "🌱 Creative Explorer"  # default
+    }
+}
+
+# Tutorial example data
+TUTORIAL_EXAMPLE = {
+    "prompt": "Write a short story about a magical library where books come to life.",
+    "llm_partial_response": "The old library stood silent in the moonlight. Sarah pushed open the heavy wooden door and stepped inside. As she walked between the towering shelves, she noticed something strange - the books seemed to be",
+    "llm_full_response_original": "The old library stood silent in the moonlight. Sarah pushed open the heavy wooden door and stepped inside. As she walked between the towering shelves, she noticed something strange - the books seemed to be whispering softly to each other. She approached one of the shelves and reached for an old leather-bound volume. As her fingers touched the spine, the book suddenly opened itself, its pages fluttering gently as if moved by an invisible breeze. The words on the page began to shimmer and dance, rearranging themselves into new sentences that told a completely different story than what was written before.",
+    "example_input": "glowing and floating",
+    "example_creative": "The old library stood silent in the moonlight. Sarah pushed open the heavy wooden door and stepped inside. As she walked between the towering shelves, she noticed something strange - the books seemed to be glowing and floating several inches above the shelves, their covers pulsing with ethereal light. Suddenly, a small red book zipped past her head like a hummingbird, followed by an entire encyclopedia that flapped its pages like wings. A cookbook landed on her shoulder and whispered a recipe for 'Dreams and Starlight Soup' directly into her ear. Sarah laughed with delight as she realized she had stumbled into a library where books had not only come to life, but had learned to fly, forming murations that spelled out stories in the air above her head.",
+    "example_score": 0.67
+}

src/models/__init__.py

@@ -0,0 +1,7 @@
+"""Model management modules"""
+
+from .llm_manager import LLMManager
+from .similarity_calculator import SimilarityCalculator
+from .data_manager import DataManager
+
+__all__ = ["LLMManager", "SimilarityCalculator", "DataManager"]

src/models/data_manager.py

@@ -0,0 +1,101 @@
+"""Data loading and saving functionality"""
+
+import json
+import os
+import random
+import datetime
+
+
+class DataManager:
+    """Manages loading and saving of prompts and results data"""
+    
+    def __init__(self):
+        self.prompts_data = []
+        
+    def load_prompts_data(self, filepath="data/prompts.jsonl"):
+        """Load prompts data from JSONL file"""
+        with open(filepath, "r") as f:
+            self.prompts_data = [json.loads(line) for line in f]
+    
+    def get_random_prompt(self):
+        """Get a random prompt from loaded data"""
+        if not self.prompts_data:
+            raise RuntimeError("No prompts data loaded. Call load_prompts_data() first.")
+        return random.choice(self.prompts_data)
+    
+    def load_results_data(self, filepath="data/results.jsonl"):
+        """Load all results data from results.jsonl file."""
+        results = []
+        try:
+            with open(filepath, "r") as f:
+                for line in f:
+                    if line.strip():
+                        results.append(json.loads(line))
+        except FileNotFoundError:
+            pass  # Return empty list if file doesn't exist
+        return results
+    
+    def save_interaction(self, prompt_data, user_continuation, generated_response, 
+                        cosine_distance, session_id, num_user_tokens, filepath="data/results.jsonl"):
+        """Save a user interaction to the results file"""
+        interaction = {
+            "prompt": prompt_data["prompt"],
+            "model": prompt_data["model"],
+            "llm_partial_response": prompt_data["llm_partial_response"],
+            "llm_full_response_original": prompt_data["llm_full_response_original"],
+            "user_continuation": user_continuation,
+            "full_response_from_user": generated_response,
+            "cosine_distance": cosine_distance,
+            "timestamp": datetime.datetime.now().isoformat(),
+            "continuation_source": session_id,
+            "num_user_tokens": num_user_tokens
+        }
+        
+        os.makedirs(os.path.dirname(filepath), exist_ok=True)
+        with open(filepath, "a") as f:
+            f.write(json.dumps(interaction) + "\n")
+    
+    def filter_results_by_partial_response(self, results, prompt, partial_response):
+        """Filter results to only include entries for the current prompt."""
+        return [r for r in results if r["prompt"] == prompt and r["llm_partial_response"] == partial_response]
+    
+    def filter_results_by_session(self, results, session_id):
+        """Filter results to only include entries from the specified session."""
+        return [r for r in results if r.get("continuation_source") == session_id]
+    
+    def get_gallery_responses(self, min_score=0.3, limit=20):
+        """Get gallery responses with minimum creativity score"""
+        all_results = self.load_results_data()
+        
+        # Filter by minimum score and sort by score (descending)
+        filtered_results = [r for r in all_results if r["cosine_distance"] >= min_score]
+        filtered_results.sort(key=lambda x: x["cosine_distance"], reverse=True)
+        
+        # Return top results
+        return filtered_results[:limit]
+    
+    def get_inspire_me_examples(self, prompt, partial_response, limit=5):
+        """Get inspiring examples for the current prompt"""
+        all_results = self.load_results_data()
+        
+        # Filter to current prompt and get good examples (≥0.2 score)
+        examples = [r for r in all_results 
+                   if r["prompt"] == prompt 
+                   and r["llm_partial_response"] == partial_response 
+                   and r["cosine_distance"] >= 0.2]
+        
+        # Sort by creativity score and return random sample
+        examples.sort(key=lambda x: x["cosine_distance"], reverse=True)
+        
+        # Get diverse examples (not just the top ones)
+        if len(examples) > limit:
+            # Take some from top, some from middle range
+            top_examples = examples[:min(3, len(examples))]
+            remaining = examples[3:]
+            if remaining:
+                additional = random.sample(remaining, min(limit-len(top_examples), len(remaining)))
+                examples = top_examples + additional
+            else:
+                examples = top_examples
+        
+        return random.sample(examples, min(limit, len(examples)))

src/models/llm_manager.py

@@ -0,0 +1,75 @@
+"""LLM operations and text generation functionality"""
+
+import os
+import torch
+from transformers import AutoTokenizer, AutoModelForCausalLM
+
+os.environ["TOKENIZERS_PARALLELISM"] = "false"
+
+class LLMManager:
+    """Manages LLM model loading and text generation operations"""
+    
+    def __init__(self):
+        self.model = None
+        self.tokenizer = None
+        
+    def load_models(self, model_name="meta-llama/Llama-3.2-1B-Instruct"):
+        """Load the LLM model and tokenizer"""
+        self.tokenizer = AutoTokenizer.from_pretrained(model_name)
+        self.model = AutoModelForCausalLM.from_pretrained(model_name)
+        
+        if self.tokenizer.pad_token is None:
+            self.tokenizer.pad_token = self.tokenizer.eos_token
+    
+    def validate_user_input(self, user_input, max_tokens=5):
+        """Validate that user input is within token limits"""
+        if not self.tokenizer:
+            raise RuntimeError("Tokenizer not loaded. Call load_models() first.")
+        
+        tokens = self.tokenizer.encode(user_input, add_special_tokens=False)
+        return len(tokens) <= max_tokens
+    
+    def count_tokens(self, text):
+        """Count tokens in the given text"""
+        if not self.tokenizer:
+            raise RuntimeError("Tokenizer not loaded. Call load_models() first.")
+        
+        tokens = self.tokenizer.encode(text, add_special_tokens=False)
+        return len(tokens)
+    
+    def tokenize_for_visualization(self, text):
+        """Tokenize text and return individual token representations"""
+        if not self.tokenizer:
+            raise RuntimeError("Tokenizer not loaded. Call load_models() first.")
+        
+        tokens = self.tokenizer.encode(text, add_special_tokens=False)
+        token_texts = []
+        for token_id in tokens:
+            token_text = self.tokenizer.decode([token_id], skip_special_tokens=True)
+            token_texts.append(token_text)
+        return tokens, token_texts
+    
+    def generate_response_from_user_input(self, prompt, partial_response, user_continuation):
+        """Generate a full response from user's continuation"""
+        if not self.model or not self.tokenizer:
+            raise RuntimeError("Models not loaded. Call load_models() first.")
+        
+        # TODO: make this more robust for multiple models, needs to be formatted correctly
+        full_prompt = f"{prompt}\n\nAssistant: {partial_response}{user_continuation}"
+        
+        inputs = self.tokenizer(full_prompt, return_tensors="pt", padding=True, truncation=True)
+        
+        with torch.no_grad():
+            outputs = self.model.generate(
+                inputs.input_ids,
+                attention_mask=inputs.attention_mask,
+                max_new_tokens=1000,
+                do_sample=True,
+                top_p=0.95,
+                temperature=1.0,
+                pad_token_id=self.tokenizer.eos_token_id
+            )
+        
+        full_response = self.tokenizer.decode(outputs[0], skip_special_tokens=True)
+        assistant_part = full_response.split("Assistant: ")[-1]
+        return assistant_part

src/models/similarity_calculator.py

@@ -0,0 +1,27 @@
+"""Semantic similarity calculation functionality"""
+
+import torch
+from sentence_transformers import SentenceTransformer
+
+
+class SimilarityCalculator:
+    """Handles semantic similarity calculations using sentence transformers"""
+    
+    def __init__(self):
+        self.similarity_model = None
+        
+    def load_model(self, model_name='all-MiniLM-L6-v2'):
+        """Load the sentence transformer model for similarity calculations"""
+        self.similarity_model = SentenceTransformer(model_name)
+    
+    def compute_cosine_distance(self, text1, text2):
+        """Compute cosine distance between two texts"""
+        if not self.similarity_model:
+            raise RuntimeError("Similarity model not loaded. Call load_model() first.")
+        
+        embeddings = self.similarity_model.encode([text1, text2])
+        similarity = torch.cosine_similarity(
+            torch.tensor(embeddings[0]).unsqueeze(0),
+            torch.tensor(embeddings[1]).unsqueeze(0)
+        )
+        return 1.0 - similarity.item()

src/scoring/__init__.py

@@ -0,0 +1,7 @@
+"""Scoring and statistics modules"""
+
+from .scorer import Scorer
+from .statistics import StatisticsCalculator
+from .achievements import AchievementSystem
+
+__all__ = ["Scorer", "StatisticsCalculator", "AchievementSystem"]

src/scoring/achievements.py

@@ -0,0 +1,44 @@
+"""Achievement system and title determination functionality"""
+
+from typing import List
+
+
+class AchievementSystem:
+    """Handles achievement calculations and title determination"""
+    
+    def determine_achievement_titles(self, cosine_distance, user_tokens):
+        """Determine achievement titles based on performance"""
+        titles = []
+        
+        # Score-based titles
+        if cosine_distance >= 0.7:
+            titles.append("🌟 Creative Genius")
+        elif cosine_distance >= 0.5:
+            titles.append("🔥 Innovation Master")
+        elif cosine_distance >= 0.3:
+            titles.append("✨ Creative Spark")
+        elif cosine_distance >= 0.15:
+            titles.append("💡 Imagination Worker")
+        
+        # Token efficiency titles
+        if user_tokens == 1:
+            if cosine_distance >= 0.3:
+                titles.append("⚡ Word Wizard")
+            else:
+                titles.append("🎯 Precision Pioneer")
+        elif user_tokens == 2:
+            if cosine_distance >= 0.25:
+                titles.append("🎪 Phrase Magician")
+        elif user_tokens <= 3:
+            if cosine_distance >= 0.2:
+                titles.append("🎨 Creative Catalyst")
+        
+        # Special combinations
+        if user_tokens == 1 and cosine_distance >= 0.4:
+            titles.append("👑 One-Word Wonder")
+        if cosine_distance >= 0.5 and user_tokens <= 2:
+            titles.append("🏆 Efficiency Expert")
+        if user_tokens >= 4 and cosine_distance >= 0.4:
+            titles.append("🎖️ Bold Wordsmith")
+        
+        return titles if titles else ["🌱 Creative Explorer"]

src/scoring/scorer.py

@@ -0,0 +1,220 @@
+"""Scoring logic and enhanced score display functionality"""
+
+import random
+from typing import List, Optional
+
+
+class Scorer:
+    """Handles scoring calculations and display generation"""
+    
+    def __init__(self, template_renderer=None):
+        self.template_renderer = template_renderer
+    
+    def calculate_difficulty(self, user_input, partial_response, llm_manager):
+        """Calculate difficulty based on user input tokens and partial completion length"""
+        if not user_input.strip():
+            return "Easy", 0
+        
+        # Count tokens for user input
+        user_token_count = llm_manager.count_tokens(user_input)
+        
+        # Count tokens for partial response  
+        partial_token_count = llm_manager.count_tokens(partial_response)
+        
+        # Difficulty based on tokens and completion percentage
+        completion_percentage = partial_token_count / 100  # Assume 100 is typical full response
+        
+        if user_token_count <= 2:
+            if completion_percentage < 0.3:
+                return "Medium", user_token_count
+            else:
+                return "Easy", user_token_count
+        elif user_token_count <= 4:
+            return "Medium", user_token_count
+        else:
+            return "Hard", user_token_count
+    
+    def calculate_rank_and_percentile(self, user_score, prompt_results, user_tokens):
+        """Calculate user's rank and percentile among users with same prompt and token count."""
+        # Filter to only same prompt and same token count
+        comparable_scores = [r["cosine_distance"] for r in prompt_results 
+                           if r["num_user_tokens"] == user_tokens]
+        
+        if not comparable_scores:
+            return None, None
+        
+        # Sort scores in descending order (higher cosine distance = better creativity)
+        sorted_scores = sorted(comparable_scores, reverse=True)
+        
+        # Find rank (1-based)
+        rank = None
+        for i, score in enumerate(sorted_scores):
+            if abs(score - user_score) < 1e-6:  # Handle floating point precision
+                rank = i + 1
+                break
+        
+        if rank is None:
+            rank = len(sorted_scores) + 1
+        
+        # Calculate percentile (0-100)
+        if len(sorted_scores) <= 1:
+            percentile = 50.0
+        else:
+            percentile = (len(sorted_scores) - rank) / len(sorted_scores) * 100
+        
+        return rank, percentile
+    
+    def create_enhanced_score_display(self, cosine_distance, rank, percentile, user_tokens, same_category_attempts):
+        """Create an enhanced score display with progress bars and metrics"""
+        # Calculate progress bar width (cosine distance is 0-1, so multiply by 100 for percentage)
+        score_percentage = min(100, cosine_distance * 100)
+        
+        # Determine score level and message
+        if cosine_distance >= 0.7:
+            score_level = "🌟 LEGENDARY CREATIVITY!"
+            bar_color = "linear-gradient(45deg, #ff6b6b, #ffa726)"
+        elif cosine_distance >= 0.5:
+            score_level = "🔥 EXCEPTIONAL CREATIVITY!"
+            bar_color = "linear-gradient(45deg, #4CAF50, #8bc34a)"
+        elif cosine_distance >= 0.3:
+            score_level = "✨ GREAT CREATIVITY!"
+            bar_color = "linear-gradient(45deg, #2196F3, #03DAC6)"
+        elif cosine_distance >= 0.15:
+            score_level = "💡 GOOD CREATIVITY!"
+            bar_color = "linear-gradient(45deg, #FF9800, #FFC107)"
+        else:
+            score_level = "🤔 ROOM FOR IMPROVEMENT"
+            bar_color = "linear-gradient(45deg, #9E9E9E, #607D8B)"
+        
+        html_content = f"""
+        <div class="score-container">
+            <div class="score-header">{score_level}</div>
+            <div class="progress-bar-container">
+                <div class="progress-bar" style="width: {score_percentage}%; background: {bar_color};"></div>
+            </div>
+            <div style="text-align: center; margin: 10px 0;">
+                <span style="font-size: 24px; font-weight: bold;">
+                    Creativity Score: {cosine_distance:.3f}
+                    <span class="help-tooltip">ℹ️
+                        <span class="tooltip-text">
+                            <strong>Creativity Score (0-1):</strong><br/>
+                            Measures how different your influenced response is from the AI's original response. 
+                            Higher scores = more creative divergence!<br/><br/>
+                            • 0.7+: Legendary creativity<br/>
+                            • 0.5+: Exceptional creativity<br/>
+                            • 0.3+: Great creativity<br/>
+                            • 0.15+: Good creativity
+                        </span>
+                    </span>
+                </span>
+            </div>
+            <div class="score-details">
+        """
+        
+        if rank is not None and percentile is not None:
+            html_content += f"""
+                <div class="score-metric">
+                    <div class="metric-value">#{rank}</div>
+                    <div class="metric-label">Rank out of {same_category_attempts}</div>
+                </div>
+                <div class="score-metric">
+                    <div class="metric-value">{percentile:.1f}%</div>
+                    <div class="metric-label">Better than others</div>
+                </div>
+            """
+        
+        html_content += f"""
+                <div class="score-metric">
+                    <div class="metric-value">{user_tokens}</div>
+                    <div class="metric-label">Token{'s' if user_tokens != 1 else ''} used
+                        <span class="help-tooltip">ℹ️
+                            <span class="tooltip-text">
+                                <strong>More tokens = Higher potential score!</strong><br/>
+                                Using more tokens gives you more ways to steer me in creative directions, 
+                                but the real challenge is making any number of tokens count!
+                            </span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        """
+        
+        # Add achievement titles
+        from .achievements import AchievementSystem
+        achievement_system = AchievementSystem()
+        achievements = achievement_system.determine_achievement_titles(cosine_distance, user_tokens)
+        
+        if achievements:
+            html_content += """
+            <div class="achievements-container">
+                <div class="achievements-title">
+                    🏆 Achievements Earned
+                    <span class="help-tooltip">ℹ️
+                        <span class="tooltip-text">
+                            <strong>Achievements:</strong><br/>
+                            Earned based on your performance this session:<br/><br/>
+                            • Creativity level (Genius, Master, Spark, etc.)<br/>
+                            • Token efficiency (Word Wizard, Phrase Magician)<br/>
+                            • Difficulty tackled (Challenge Conqueror)<br/>
+                            • Special combos (One-Word Wonder, Elite Performer)
+                        </span>
+                    </span>
+                </div>
+                <div class="achievement-badges">
+            """
+            for title in achievements:
+                html_content += f'<div class="achievement-badge">{title}</div>'
+            html_content += """
+                </div>
+            </div>
+            """
+        
+        # Add smart contextual tip
+        smart_tip = self.generate_smart_tip(cosine_distance, user_tokens, rank, percentile)
+        html_content += f"""
+            <div class="smart-tip-container">
+                <span class="smart-tip-icon">💡</span>
+                <span class="smart-tip-text">{smart_tip}</span>
+            </div>
+            <div style="text-align: center; margin-top: 15px; opacity: 0.9; font-size: 14px;">
+                Higher scores indicate more creative divergence from the original response!
+            </div>
+        </div>
+        """
+        
+        return html_content
+    
+    def generate_smart_tip(self, cosine_distance, user_tokens, rank, percentile):
+        """Generate personalized tips based on user performance"""
+        tips = []
+        
+        # Performance-based tips
+        if cosine_distance < 0.1:
+            tips.append("💡 Try using more unexpected or creative words to steer me in a completely new direction!")
+        elif cosine_distance < 0.2:
+            tips.append("✨ Good start! Try thinking more out-of-the-box to maximize your creativity score.")
+        elif cosine_distance >= 0.5:
+            tips.append("🌟 Excellent creativity! You're successfully making me generate very different responses.")
+        
+        # Token efficiency tips
+        if user_tokens >= 4:
+            tips.append("⚡ Challenge yourself: try achieving the same creative impact with fewer tokens!")
+        elif user_tokens == 1 and cosine_distance >= 0.2:
+            tips.append("🎯 Outstanding! You're a master of single-token creativity.")
+        elif user_tokens <= 2 and cosine_distance >= 0.3:
+            tips.append("🏆 Incredible efficiency - maximum creativity with minimal tokens!")
+        
+        # Ranking tips
+        if rank and percentile:
+            if percentile >= 80:
+                tips.append("👑 You're in the top performers - keep up the amazing work!")
+            elif percentile >= 50:
+                tips.append("📈 You're above average! Push a bit further to join the top tier.")
+            else:
+                tips.append("🎯 Room to grow - try more unexpected word combinations!")
+        
+        # Return a random tip if multiple apply, or a default encouragement
+        if tips:
+            return random.choice(tips)
+        else:
+            return "🎮 Great job playing! Try a new prompt to test different creative strategies."

src/scoring/statistics.py

@@ -0,0 +1,143 @@
+"""Statistics calculation and visualization functionality"""
+
+import matplotlib.pyplot as plt
+import numpy as np
+from typing import List, Dict, Optional, Tuple
+
+
+class StatisticsCalculator:
+    """Handles statistical calculations and visualization generation"""
+    
+    def get_score_statistics(self, scores):
+        """Calculate mean and standard deviation of scores."""
+        if not scores:
+            return None, None
+        return np.mean(scores), np.std(scores)
+    
+    def create_violin_plot(self, prompt_results, user_score, user_tokens):
+        """Create horizontal violin plots stacked vertically by token count."""
+        token_counts = [1, 2, 3, 4, 5]
+        
+        # Filter to only include token counts that have data
+        token_data = []
+        for token_count in token_counts:
+            token_scores = [r["cosine_distance"] for r in prompt_results 
+                          if r["num_user_tokens"] == token_count]
+            if token_scores:
+                token_data.append((token_count, token_scores))
+        
+        if not token_data:
+            fig, ax = plt.subplots(figsize=(10, 4))
+            ax.text(0.5, 0.5, 'No data available for visualization', 
+                   ha='center', va='center', transform=ax.transAxes, fontsize=14)
+            ax.set_title('Score Distribution by Token Count', fontsize=14, fontweight='bold')
+            return fig
+        
+        # Create subplots - one for each token count
+        fig, axes = plt.subplots(len(token_data), 1, figsize=(10, 1 * len(token_data)), 
+                                sharex=True)
+        
+        # Handle single subplot case
+        if len(token_data) == 1:
+            axes = [axes]
+        
+        for i, (token_count, scores) in enumerate(token_data):
+            ax = axes[i]
+            
+            # Create horizontal violin plot
+            parts = ax.violinplot([scores], positions=[0], vert=False, 
+                                showmeans=True, showextrema=True)
+            
+            # Color based on whether this is user's token count - reuse existing gradient colors
+            color = '#667eea' if token_count == user_tokens else '#764ba2'
+            for pc in parts['bodies']:
+                pc.set_facecolor(color)
+                pc.set_alpha(0.7)
+                pc.set_edgecolor('black')
+                pc.set_linewidth(1)
+            
+            # Highlight user's score if this is their token count
+            if token_count == user_tokens:
+                ax.scatter(user_score, 0, color='red', s=150, zorder=5, 
+                          marker='*', label=f'Your Score: {user_score:.3f}')
+                ax.legend(loc='upper right')
+            
+            # Styling for each subplot
+            ax.set_ylabel(f'{token_count} token{"s" if token_count != 1 else ""}\n(n={len(scores)})', 
+                         fontsize=11, fontweight='bold')
+            ax.set_yticks([])
+            ax.grid(True, alpha=0.3, axis='x')
+            ax.spines['top'].set_visible(False)
+            ax.spines['right'].set_visible(False)
+            ax.spines['left'].set_visible(False)
+            
+            # Set consistent y-limits for visual consistency
+            ax.set_ylim(-0.4, 0.4)
+        
+        # Set common x-label only on bottom subplot
+        axes[-1].set_xlabel('Creativity Score (Cosine Distance)', fontsize=12)
+        
+        # Overall title
+        fig.suptitle('Score Distribution by Token Count', fontsize=14, fontweight='bold', y=0.98)
+        
+        plt.tight_layout()
+        plt.subplots_adjust(top=0.92)
+        return fig
+    
+    def calculate_session_ranking_stats(self, session_results, data_manager, scorer):
+        """Calculate comprehensive ranking statistics for the session."""
+        all_results = data_manager.load_results_data()
+        ranking_stats = {
+            "best_rank": None,
+            "best_percentile": None,
+            "average_percentile": 0.0,
+            "total_ranked_attempts": 0,
+            "ranking_trend": "stable",  # up, down, stable
+            "recent_percentiles": []
+        }
+        
+        if not session_results:
+            return ranking_stats
+        
+        percentiles = []
+        ranks = []
+        
+        # Calculate rankings for each session attempt
+        for result in session_results:
+            # Get all results for this specific prompt
+            prompt_results = data_manager.filter_results_by_partial_response(
+                all_results, result["prompt"], result["llm_partial_response"]
+            )
+            
+            if len(prompt_results) >= 2:  # Need at least 2 results to rank
+                rank, percentile = scorer.calculate_rank_and_percentile(
+                    result["cosine_distance"], prompt_results, result["num_user_tokens"]
+                )
+                if rank and percentile is not None:
+                    percentiles.append(percentile)
+                    ranks.append(rank)
+                    ranking_stats["recent_percentiles"].append({
+                        "percentile": percentile,
+                        "rank": rank,
+                        "total": len([r for r in prompt_results if r["num_user_tokens"] == result["num_user_tokens"]]),
+                        "timestamp": result["timestamp"]
+                    })
+        
+        if percentiles:
+            ranking_stats["total_ranked_attempts"] = len(percentiles)
+            ranking_stats["average_percentile"] = sum(percentiles) / len(percentiles)
+            ranking_stats["best_percentile"] = max(percentiles)
+            ranking_stats["best_rank"] = min(ranks) if ranks else None
+            
+            # Determine trend (compare first half vs second half)
+            if len(percentiles) >= 4:
+                mid_point = len(percentiles) // 2
+                first_half_avg = sum(percentiles[:mid_point]) / mid_point
+                second_half_avg = sum(percentiles[mid_point:]) / (len(percentiles) - mid_point)
+                
+                if second_half_avg > first_half_avg + 10:
+                    ranking_stats["ranking_trend"] = "up"
+                elif second_half_avg < first_half_avg - 10:
+                    ranking_stats["ranking_trend"] = "down"
+        
+        return ranking_stats

src/session/__init__.py

@@ -0,0 +1,5 @@
+"""Session management modules"""
+
+from .session_manager import SessionManager
+
+__all__ = ["SessionManager"]

src/session/session_manager.py

@@ -0,0 +1,316 @@
+"""Session management and progress tracking functionality"""
+
+import uuid
+from typing import Dict, List, Optional
+
+
+class SessionManager:
+    """Manages user session state and progress tracking"""
+    
+    def __init__(self, data_manager=None, achievement_system=None):
+        self.session_id = str(uuid.uuid4())
+        self.data_manager = data_manager
+        self.achievement_system = achievement_system
+        
+    def get_session_statistics(self):
+        """Get statistics for the current session."""
+        if not self.data_manager:
+            return self._get_empty_session_stats()
+            
+        all_results = self.data_manager.load_results_data()
+        session_results = self.data_manager.filter_results_by_session(all_results, self.session_id)
+        
+        if not session_results:
+            return self._get_empty_session_stats()
+        
+        scores = [r["cosine_distance"] for r in session_results]
+        unique_prompts = set((r["prompt"], r["llm_partial_response"]) for r in session_results)
+        
+        return {
+            "total_attempts": len(session_results),
+            "best_score": max(scores),
+            "average_score": sum(scores) / len(scores),
+            "total_tokens_used": sum(r["num_user_tokens"] for r in session_results),
+            "prompts_tried": len(unique_prompts),
+            "session_results": session_results
+        }
+    
+    def _get_empty_session_stats(self):
+        """Return empty session statistics structure"""
+        return {
+            "total_attempts": 0,
+            "best_score": 0.0,
+            "average_score": 0.0,
+            "total_tokens_used": 0,
+            "prompts_tried": 0
+        }
+    
+    def generate_session_progress_html(self, template_renderer):
+        """Generate HTML for session progress display."""
+        stats = self.get_session_statistics()
+        
+        if stats["total_attempts"] == 0:
+            return template_renderer.load_template("session-progress-empty.html")
+        
+        # Create achievement summary for session
+        session_achievements = set()
+        if self.achievement_system and "session_results" in stats:
+            for result in stats["session_results"]:
+                achievements = self.achievement_system.determine_achievement_titles(
+                    result["cosine_distance"], 
+                    result["num_user_tokens"]
+                )
+                session_achievements.update(achievements)
+        
+        achievement_badges = ""
+        if session_achievements:
+            badges_html = ""
+            for achievement in list(session_achievements)[:5]:  # Show top 5
+                badges_html += template_renderer.load_template("achievement-badge.html", achievement=achievement)
+            
+            achievement_badges = template_renderer.load_template("session-achievements.html", 
+                                                               achievement_badges=badges_html)
+        
+        # Recent attempts preview
+        recent_attempts = sorted(stats["session_results"], 
+                                key=lambda x: x["timestamp"], 
+                                reverse=True)[:3]
+        
+        attempts_html = ""
+        for i, attempt in enumerate(recent_attempts, 1):
+            score_color = "#4CAF50" if attempt["cosine_distance"] >= 0.3 else "#FF9800" if attempt["cosine_distance"] >= 0.15 else "#9E9E9E"
+            user_input = attempt['user_continuation'][:30] + ('...' if len(attempt['user_continuation']) > 30 else '')
+            plural = "s" if attempt["num_user_tokens"] != 1 else ""
+            attempt_number = len(stats["session_results"]) - i + 1
+            
+            attempts_html += template_renderer.load_template("attempt-item.html",
+                attempt_number=attempt_number,
+                user_input=user_input,
+                score_color=score_color,
+                cosine_distance=attempt["cosine_distance"],
+                num_tokens=attempt["num_user_tokens"],
+                plural=plural
+            )
+        
+        recent_html = template_renderer.load_template("recent-attempts.html", attempts=attempts_html)
+        
+        return template_renderer.load_template("session-progress-main.html",
+            total_attempts=stats['total_attempts'],
+            best_score=stats['best_score'],
+            average_score=stats['average_score'],
+            prompts_tried=stats['prompts_tried'],
+            achievement_badges=achievement_badges,
+            recent_html=recent_html
+        )
+    
+    def generate_session_page_html(self, template_renderer, statistics_calculator=None, scorer=None):
+        """Generate comprehensive session page HTML with ranking information."""
+        stats = self.get_session_statistics()
+        
+        if stats["total_attempts"] == 0:
+            empty_html = template_renderer.load_template("session-page-empty.html")
+            return empty_html, "", ""
+        
+        # Calculate ranking statistics
+        ranking_stats = {}
+        if statistics_calculator and scorer and "session_results" in stats:
+            ranking_stats = statistics_calculator.calculate_session_ranking_stats(
+                stats["session_results"], self.data_manager, scorer
+            )
+        
+        # Main stats overview
+        best_attempt = max(stats["session_results"], key=lambda x: x["cosine_distance"])
+        recent_attempts = sorted(stats["session_results"], key=lambda x: x["timestamp"], reverse=True)[:5]
+        
+        # Determine trend icon and message
+        trend_icon = {"up": "📈", "down": "📉", "stable": "📊"}.get(ranking_stats.get("ranking_trend", "stable"), "📊")
+        trend_message = {
+            "up": "Improving!", 
+            "down": "Room to grow", 
+            "stable": "Consistent"
+        }.get(ranking_stats.get("ranking_trend", "stable"), "Consistent")
+        
+        main_stats_html = f"""
+        <div class="session-progress">
+            <div class="session-stats">
+                <div class="stat-item">
+                    <div class="stat-value">{stats['total_attempts']}</div>
+                    <div class="stat-label">Creative Attempts</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">{stats['best_score']:.3f}</div>
+                    <div class="stat-label">Personal Best</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">{stats['average_score']:.3f}</div>
+                    <div class="stat-label">Average Score</div>
+                </div>"""
+        
+        # Add ranking stats if available
+        if ranking_stats.get("total_ranked_attempts", 0) > 0:
+            main_stats_html += f"""
+                <div class="stat-item ranking-highlight">
+                    <div class="stat-value">#{ranking_stats['best_rank']}</div>
+                    <div class="stat-label">Best Rank</div>
+                </div>
+                <div class="stat-item ranking-highlight">
+                    <div class="stat-value">{ranking_stats['average_percentile']:.0f}%</div>
+                    <div class="stat-label">Avg vs Others</div>
+                </div>"""
+        else:
+            main_stats_html += f"""
+                <div class="stat-item">
+                    <div class="stat-value">{stats['prompts_tried']}</div>
+                    <div class="stat-label">Prompts Explored</div>
+                </div>"""
+        
+        main_stats_html += f"""
+            </div>
+            
+            <div class="session-overview">
+                <div class="best-response-showcase">
+                    <h4>🎯 Your Best Response</h4>
+                    <div class="best-response-content">
+                        <span class="best-input">"{best_attempt['user_continuation']}"</span>
+                        <div class="best-metrics">
+                            <span class="score-badge">Score: {best_attempt['cosine_distance']:.3f}</span>"""
+        
+        # Add ranking info for best attempt if available
+        if ranking_stats.get("total_ranked_attempts", 0) > 0 and "recent_percentiles" in ranking_stats:
+            best_ranking = next((r for r in ranking_stats["recent_percentiles"] 
+                               if abs(float(r["timestamp"].replace('-', '').replace(':', '').replace('T', '').replace('.', '')[:14]) - 
+                                     float(best_attempt["timestamp"].replace('-', '').replace(':', '').replace('T', '').replace('.', '')[:14])) < 1000), None)
+            if best_ranking:
+                main_stats_html += f"""
+                            <span class="rank-badge">#{best_ranking['rank']} of {best_ranking['total']}</span>"""
+        
+        main_stats_html += f"""
+                        </div>
+                    </div>
+                </div>"""
+        
+        # Add trend information if sufficient data
+        if ranking_stats.get("total_ranked_attempts", 0) >= 2:
+            main_stats_html += f"""
+                <div class="performance-trend">
+                    {trend_icon} <strong>Ranking Trend:</strong> {trend_message}
+                    <span class="trend-detail">({ranking_stats['total_ranked_attempts']} ranked attempts)</span>
+                </div>"""
+        
+        main_stats_html += f"""
+            </div>
+        </div>
+        """
+        
+        # Enhanced detailed history with ranking
+        history_html = """
+        <div class="session-progress">
+            <div class="recent-attempts">
+        """
+        
+        for i, attempt in enumerate(recent_attempts, 1):
+            score_color = "#4CAF50" if attempt["cosine_distance"] >= 0.3 else "#FF9800" if attempt["cosine_distance"] >= 0.15 else "#9E9E9E"
+            # Truncate long inputs for display
+            display_input = attempt['user_continuation'][:50] + ('...' if len(attempt['user_continuation']) > 50 else '')
+            
+            # Find ranking info for this attempt
+            ranking_info = None
+            if "recent_percentiles" in ranking_stats:
+                ranking_info = next((r for r in ranking_stats["recent_percentiles"] 
+                                   if r["timestamp"] == attempt["timestamp"]), None)
+            
+            history_html += f"""
+            <div class="attempt-item enhanced">
+                <span class="attempt-number">#{len(stats["session_results"]) - i + 1}</span>
+                <div class="attempt-content">
+                    <div class="attempt-input">"{display_input}"</div>
+                    <div class="attempt-details">
+                        <span class="timestamp">{attempt['timestamp'][:10]} {attempt['timestamp'][11:16]}</span>"""
+            
+            if ranking_info:
+                # Add percentile indicator
+                percentile = ranking_info["percentile"]
+                percentile_color = "#4CAF50" if percentile >= 75 else "#FF9800" if percentile >= 50 else "#9E9E9E"
+                percentile_icon = "🏆" if percentile >= 90 else "⭐" if percentile >= 75 else "📈" if percentile >= 50 else "🎯"
+                
+                history_html += f"""
+                        <span class="ranking-info" style="color: {percentile_color};">
+                            {percentile_icon} #{ranking_info['rank']} of {ranking_info['total']} ({percentile:.0f}%)
+                        </span>"""
+            else:
+                history_html += f"""
+                        <span class="ranking-info" style="opacity: 0.6;">
+                            🌱 First attempt at this prompt+token combo
+                        </span>"""
+            
+            history_html += f"""
+                    </div>
+                </div>
+                <div class="attempt-metrics">
+                    <span class="attempt-score" style="color: {score_color};">
+                        {attempt["cosine_distance"]:.3f}
+                    </span>
+                    <span class="token-count">{attempt["num_user_tokens"]} tokens</span>
+                </div>
+            </div>
+            """
+        
+        if len(recent_attempts) < len(stats["session_results"]):
+            remaining = len(stats["session_results"]) - len(recent_attempts)
+            history_html += f"""
+            <div class="attempt-item" style="opacity: 0.6;">
+                <span class="attempt-number">...</span>
+                <div class="attempt-content">
+                    <div class="attempt-input">And {remaining} more creative attempts!</div>
+                    <div class="attempt-details">
+                        <span class="ranking-info">📊 View all attempts for complete ranking history</span>
+                    </div>
+                </div>
+                <div class="attempt-metrics">
+                    <span class="attempt-score">📈</span>
+                </div>
+            </div>
+            """
+        
+        history_html += """
+            </div>
+        </div>
+        """
+        
+        # Achievements
+        all_achievements = set()
+        if self.achievement_system and "session_results" in stats:
+            for result in stats["session_results"]:
+                achievements = self.achievement_system.determine_achievement_titles(
+                    result["cosine_distance"], 
+                    result["num_user_tokens"]
+                )
+                all_achievements.update(achievements)
+        
+        achievements_html = """
+        <div class="session-progress">
+        """
+        
+        if all_achievements:
+            achievements_html += """
+            <div class="session-achievements">
+                <div class="achievement-badges">
+            """
+            for achievement in sorted(all_achievements):
+                achievements_html += f'<div class="achievement-badge">{achievement}</div>'
+            achievements_html += """
+                </div>
+            </div>
+            """
+        else:
+            achievements_html += """
+            <div class="session-tip">
+                🏆 Keep being creative to unlock achievements! Try different token counts and creative approaches.
+            </div>
+            """
+        
+        achievements_html += """
+        </div>
+        """
+        
+        return main_stats_html, history_html, achievements_html

src/ui/__init__.py

@@ -0,0 +1,7 @@
+"""User interface modules"""
+
+from .template_renderer import TemplateRenderer
+from .page_handlers import PageHandlers
+from .interface_builder import InterfaceBuilder
+
+__all__ = ["TemplateRenderer", "PageHandlers", "InterfaceBuilder"]

src/ui/interface_builder.py

@@ -0,0 +1,550 @@
+"""Main Gradio interface builder"""
+
+import gradio as gr
+from ..config.settings import CSS_PATHS
+
+
+class InterfaceBuilder:
+    """Handles creation of the main Gradio interface"""
+    
+    def __init__(self, app, page_handlers):
+        self.app = app
+        self.page_handlers = page_handlers
+    
+    def create_interface(self):
+        with gr.Blocks(title="Help the LLM be Creative!", css_paths=CSS_PATHS) as demo:
+            
+            # Navigation state management
+            current_page = gr.State("welcome")
+            has_results = gr.State(False)
+            
+            # Navigation bar
+            nav_container = gr.Column(elem_classes=["nav-container"])
+            with nav_container:
+                with gr.Row():
+                    nav_welcome = gr.Button("🏠 Welcome", elem_classes=["nav-button", "active"])
+                    nav_tutorial = gr.Button("🎯 Tutorial", elem_classes=["nav-button"])
+                    nav_creative = gr.Button("✨ Be Creative", elem_classes=["nav-button"])
+                    nav_gallery = gr.Button("🏆 Gallery", elem_classes=["nav-button"])
+                    nav_results = gr.Button("🎉 Results", elem_classes=["nav-button"], visible=False)
+                    nav_session = gr.Button("📊 Progress", elem_classes=["nav-button"], visible=False)
+            
+            # Landing page
+            landing_page = gr.Column(visible=True)
+            with landing_page:
+                with gr.Column(elem_classes=["landing-page"]):
+                    gr.Markdown("# 🤖 I'm a poor, boring language model...😢", elem_classes=["landing-title"])
+                    gr.Markdown("# Please help me be creative!", elem_classes=["landing-subtitle"])
+                    
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            tutorial_btn = gr.Button("🎯 Take a Quick Tour", elem_classes=["primary-button"])
+                        with gr.Column(scale=1):
+                            skip_to_game_btn = gr.Button("🚀 Let's Be Creative Together!", elem_classes=["secondary-button"])
+                    
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            gallery_btn = gr.Button("🏆 View Creative Gallery", elem_classes=["secondary-button"])
+            
+            # Tutorial page
+            tutorial_page = gr.Column(visible=False)
+            with tutorial_page:
+                # Tutorial header
+                with gr.Column(elem_classes=["tutorial-container"]):
+                    with gr.Column(elem_classes=["tutorial-header"]):
+                        gr.Markdown("# 🎯 Quick Tour", elem_classes=["tutorial-title"])
+                        gr.Markdown("## Here's how you can help me be more creative", elem_classes=["tutorial-subtitle"])
+                    
+                    # Current step explanation
+                    tutorial_step_explanation = gr.Markdown("", elem_classes=["tutorial-step-explanation"])
+                
+                # Tutorial interface components (identical to game interface)
+                tutorial_prompt_display = gr.Textbox(
+                    label="🎯 Here's what I was asked to write about:",
+                    lines=3,
+                    interactive=False,
+                    elem_classes=["prompt-box"],
+                    visible=False
+                )
+                
+                tutorial_partial_response_display = gr.Textbox(
+                    label="🤖 Here's my boring start... (help me make it better!)",
+                    lines=5,
+                    interactive=False,
+                    elem_classes=["assistant-box"],
+                    visible=False
+                )
+                
+                tutorial_input_section = gr.Column(visible=False)
+                with tutorial_input_section:
+                    with gr.Row():
+                        with gr.Column(scale=4):
+                            tutorial_user_input = gr.Textbox(
+                                label="✨ Add your creative input here (max 5 tokens)",
+                                placeholder="Type a few words to inspire me...",
+                                lines=2,
+                                elem_classes=["user-box"],
+                                interactive=False
+                            )
+                        with gr.Column(scale=1, min_width=150):
+                            tutorial_token_counter = gr.Markdown(
+                                "**Tokens:** 0/5",
+                                elem_classes=["token-counter"]
+                            )
+                    
+                    tutorial_submit_btn = gr.Button("✨ Help Me Be Creative!", variant="primary", interactive=False)
+                
+                # Tutorial results section
+                tutorial_results_section = gr.Column(visible=False)
+                with tutorial_results_section:
+                    tutorial_score_display = gr.HTML()
+                    
+                    gr.Markdown("## 🔄 See The Difference!")
+                    with gr.Row(equal_height=True):
+                        with gr.Column(scale=1):
+                            gr.Markdown("### 🤖 My Original Boring Version")
+                            tutorial_original_response = gr.Textbox(
+                                label="What I wrote originally (so boring! 😴)",
+                                lines=6,
+                                interactive=False,
+                                elem_classes=["original-response"]
+                            )
+                        with gr.Column(scale=1):
+                            gr.Markdown("### ✨ Your Creative Version")
+                            tutorial_creative_response = gr.Textbox(
+                                label="What I wrote after your creative input! 🎨",
+                                lines=6,
+                                interactive=False,
+                                elem_classes=["results-box"]
+                            )
+                
+                # Tutorial navigation
+                with gr.Column(elem_classes=["tutorial-navigation"]):
+                    with gr.Row():
+                        tutorial_prev_btn = gr.Button("⬅️ Previous", elem_classes=["tutorial-button", "secondary"], visible=False)
+                        tutorial_next_btn = gr.Button("Next ➡️", elem_classes=["tutorial-button"])
+                        tutorial_play_btn = gr.Button("🚀 Let's Play!", elem_classes=["tutorial-button"], visible=False)
+                        tutorial_back_btn = gr.Button("⬅️ Back to Start", elem_classes=["tutorial-button", "secondary"])
+            
+            # Gallery page
+            gallery_page = gr.Column(visible=False)
+            with gallery_page:
+                with gr.Column(elem_classes=["gallery-container"]):
+                    gr.Markdown("# 🏆 Creative Response Gallery", elem_classes=["tutorial-title"])
+                    gr.Markdown("### Showcasing the most creative responses from our community!", elem_classes=["tutorial-subtitle"])
+                    
+                    gallery_filter = gr.Dropdown(
+                        choices=[("All Creative (≥0.15)", 0.15), ("Great (≥0.3)", 0.3), ("Exceptional (≥0.5)", 0.5), ("Legendary (≥0.7)", 0.7)],
+                        value=0.3,
+                        label="🎯 Filter by creativity level:",
+                        elem_classes=["prompt-box"]
+                    )
+                    
+                    gallery_display = gr.HTML()
+                    
+                    with gr.Row():
+                        gallery_refresh_btn = gr.Button("🔄 Refresh Gallery", elem_classes=["tutorial-button"])
+                        gallery_back_btn = gr.Button("⬅️ Back to Start", elem_classes=["tutorial-button", "secondary"])
+            
+            # Creative page components (initially hidden)
+            creative_page = gr.Column(visible=False)
+            with creative_page:
+                prompt_display = gr.Textbox(
+                    label="🎯 Here's what I was asked to write about:",
+                    lines=3,
+                    interactive=False,
+                    elem_classes=["prompt-box"]
+                )
+                
+                partial_response_display = gr.Textbox(
+                    label="🤖 Here's my boring start... (help me make it better!)",
+                    lines=5,
+                    interactive=False,
+                    elem_classes=["assistant-box"]
+                )
+                
+                user_input = gr.Textbox(
+                    label="✨ Add your creative input here (max 5 tokens)",
+                    placeholder="Type a few words to inspire me...",
+                    lines=1, # changed to single line so that "enter" submits the request
+                    elem_classes=["user-box"]
+                )
+                
+                token_counter = gr.Markdown(
+                    "**Tokens:** 0/5",
+                    elem_classes=["token-counter"]
+                )
+                
+                token_visualization = gr.Markdown(
+                    "Once you start typing, I'll show you what you've written, but in tokens!",
+                    elem_classes=["token-visualization"]
+                )
+                
+                submit_btn = gr.Button("✨ Help Me Be Creative!", variant="primary", size="lg")
+                
+                # Loading and error messages (positioned right after submit button)
+                loading_message = gr.Textbox(visible=False, interactive=False, label="🤖 I'm thinking...", value="Working on your creative response... This is exciting!")
+                error_message = gr.Textbox(visible=False, interactive=False, label="🙋 Oops!", elem_classes=["error-box"])
+                
+                # Clear section divider
+                gr.HTML("<hr style='margin: 40px 0; border: none; height: 2px; background: linear-gradient(to right, transparent, #667eea, transparent); opacity: 0.3;'>")
+                
+                # Help and inspiration section
+                gr.Markdown("### 📚 Need Help or Inspiration?", elem_classes=["section-header"])
+                
+                # Inspire Me section - collapsible
+                gr.Markdown("✨ **Need some inspiration?** See how others have creatively continued this same prompt!", elem_classes=["token-explanation"])
+                with gr.Accordion("💡 Inspire Me! Show creative examples from others", open=False):
+                    inspire_me_btn = gr.Button("🎲 Show Different Examples", elem_classes=["inspire-me-button"])
+                    inspire_me_display = gr.HTML()
+                
+                gr.Markdown(
+                    "💡 **About tokens:** Your input is measured in \"tokens\" (how I process text). About 5 tokens ≈ 3-5 words. You'll see your exact count above as you type!",
+                    elem_classes=["token-explanation"]
+                )
+            
+            # Session progress page
+            session_page = gr.Column(visible=False)
+            with session_page:
+                gr.HTML("""
+                <div class="results-header">
+                    <h1>📊 Your Creative Journey</h1>
+                    <p>Track your progress, achievements, and creative evolution!</p>
+                </div>
+                """)
+                
+                # Main session stats display
+                session_main_stats = gr.HTML()
+                
+                # Detailed session history
+                gr.Markdown("## 📈 Your Creative History", elem_classes=["results-section-header"])
+                session_history_display = gr.HTML()
+                
+                # Session achievements
+                gr.Markdown("## 🏆 Your Achievements", elem_classes=["results-section-header"])
+                session_achievements_display = gr.HTML()
+                
+                # Back to creative action
+                with gr.Column(elem_classes=["action-section"]):
+                    gr.Markdown("### Ready to add to your journey?")
+                    back_to_creative_btn = gr.Button("✨ Continue Being Creative!", elem_classes=["primary-button"])
+
+            # Results page components
+            results_page = gr.Column(visible=False)
+            with results_page:
+                cosine_distance_display = gr.HTML(visible=False)
+                
+                results_prompt_display = gr.Textbox(
+                    label="🎯 Here's what I was asked to write about:",
+                    lines=2,
+                    interactive=False,
+                    elem_classes=["prompt-box"]
+                )
+                
+                results_partial_display = gr.Textbox(
+                    label="🤖 My Boring Start",
+                    lines=3,
+                    interactive=False,
+                    elem_classes=["assistant-box"]
+                )
+                
+                results_user_input_display = gr.Textbox(
+                    label="✨ Your Creative Input",
+                    lines=2,
+                    interactive=False,
+                    elem_classes=["user-box"]
+                )
+                
+                # Side-by-side comparison
+                gr.Markdown("## 🔄 See The Difference!")
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=1):
+                        gr.Markdown("### 🤖 My Original Boring Version")
+                        original_response_display = gr.Textbox(
+                            label="What I wrote originally (so boring! 😴)",
+                            lines=8,
+                            interactive=False,
+                            elem_classes=["original-response"]
+                        )
+                    with gr.Column(scale=1):
+                        gr.Markdown("### ✨ Your Creative Version")
+                        results_continuation_display = gr.Textbox(
+                            label="What I wrote after your creative input! 🎨",
+                            lines=8,
+                            interactive=False,
+                            elem_classes=["results-box"]
+                        )
+                
+                # Visualization
+                gr.Markdown("## 📊 How does your help compare with others?")
+                
+                violin_plot_display = gr.Plot(
+                    label="Score Distribution by Token Count",
+                    visible=False
+                )
+                
+                # Collapsible explanation of cosine similarity
+                with gr.Accordion("🤔 How does the scoring work? (Click to learn!)", open=False):
+                    gr.Markdown("""
+                    ## The Magic Behind Your Creativity Score! ✨
+                    
+                    I use something called **"Cosine Distance"** to see how different your version is from my boring original! 
+                    
+                    **Think of it like this:** 🎯
+                    - I convert both responses into "meaning fingerprints" 
+                    - Then I measure how far apart these fingerprints are
+                    - **Farther apart = More creative = Higher score!** 🏆
+                    
+                    **Score Guide:**
+                    - **0.7+** = 🌟 WOW! You completely changed my direction!
+                    - **0.5+** = 🔥 Amazing! Very different from my original
+                    - **0.3+** = ✨ Great job! Nice creative twist
+                    - **0.15+** = 💡 Good start! I can see the difference
+                    - **Below 0.15** = 🤔 Pretty similar to what I would have written anyway
+                    
+                    **Pro tip:** The most unexpected words often lead to the highest scores! 🎪
+                    """)
+                
+                with gr.Row():
+                    try_again_same_btn = gr.Button("🔄 Let Me Try Again!", elem_classes=["try-again-button"])
+                    try_again_new_btn = gr.Button("🎯 Give Me A New Challenge!", elem_classes=["try-again-button"])
+            
+            # Tutorial state
+            tutorial_current_step = gr.State(1)
+            
+            # Wire up all the event handlers
+            self._wire_event_handlers(
+                # Navigation components
+                nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session,
+                # Landing page components  
+                tutorial_btn, skip_to_game_btn, gallery_btn,
+                # Tutorial components
+                tutorial_next_btn, tutorial_prev_btn, tutorial_play_btn, tutorial_back_btn,
+                # Gallery components
+                gallery_filter, gallery_refresh_btn, gallery_back_btn,
+                # Creative page components
+                user_input, submit_btn, inspire_me_btn,
+                # Results page components  
+                try_again_same_btn, try_again_new_btn,
+                # Session page components
+                back_to_creative_btn,
+                # State components
+                current_page, has_results, tutorial_current_step,
+                # Display components
+                landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page,
+                prompt_display, partial_response_display, token_counter, token_visualization,
+                loading_message, error_message, inspire_me_display, gallery_display,
+                cosine_distance_display, results_prompt_display, results_partial_display,
+                results_user_input_display, original_response_display, results_continuation_display,
+                violin_plot_display, session_main_stats, session_history_display, session_achievements_display,
+                # Tutorial display components
+                tutorial_step_explanation, tutorial_prompt_display, tutorial_partial_response_display,
+                tutorial_input_section, tutorial_results_section, tutorial_user_input, tutorial_token_counter,
+                tutorial_score_display, tutorial_original_response, tutorial_creative_response,
+                tutorial_prev_btn, tutorial_next_btn, tutorial_play_btn
+            )
+            
+            # Demo starts with landing page visible
+        
+        return demo
+    
+    def _wire_event_handlers(self, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session,
+                           tutorial_btn, skip_to_game_btn, gallery_btn, tutorial_next_btn, tutorial_prev_btn, 
+                           tutorial_play_btn, tutorial_back_btn, gallery_filter, gallery_refresh_btn, gallery_back_btn,
+                           user_input, submit_btn, inspire_me_btn, try_again_same_btn, try_again_new_btn,
+                           back_to_creative_btn, current_page, has_results, tutorial_current_step,
+                           landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page,
+                           prompt_display, partial_response_display, token_counter, token_visualization,
+                           loading_message, error_message, inspire_me_display, gallery_display,
+                           cosine_distance_display, results_prompt_display, results_partial_display,
+                           results_user_input_display, original_response_display, results_continuation_display,
+                           violin_plot_display, session_main_stats, session_history_display, session_achievements_display,
+                           tutorial_step_explanation, tutorial_prompt_display, tutorial_partial_response_display,
+                           tutorial_input_section, tutorial_results_section, tutorial_user_input, tutorial_token_counter,
+                           tutorial_score_display, tutorial_original_response, tutorial_creative_response,
+                           tutorial_prev_btn_ref, tutorial_next_btn_ref, tutorial_play_btn_ref):
+        """Wire up all the event handlers for the interface"""
+        
+        # Wire up landing page buttons
+        tutorial_btn.click(
+            self.page_handlers.show_tutorial,
+            outputs=[
+                current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session,
+                tutorial_step_explanation, tutorial_prompt_display, tutorial_partial_response_display,
+                tutorial_input_section, tutorial_results_section,
+                tutorial_prev_btn_ref, tutorial_next_btn_ref, tutorial_play_btn_ref,
+                tutorial_current_step
+            ]
+        )
+        
+        skip_to_game_btn.click(
+            self.page_handlers.start_game,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, prompt_display, partial_response_display, inspire_me_display]
+        )
+        
+        # Wire up gallery button (handled at end of function)
+        
+        # Wire up gallery page buttons
+        gallery_back_btn.click(
+            self.page_handlers.back_to_landing,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, gallery_display]
+        )
+        
+        gallery_refresh_btn.click(
+            self.page_handlers.show_gallery,
+            inputs=[gallery_filter],
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, gallery_display]
+        )
+        
+        gallery_filter.change(
+            self.page_handlers.show_gallery,
+            inputs=[gallery_filter],
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, gallery_display]
+        )
+        
+        # Wire up tutorial page buttons
+        tutorial_back_btn.click(
+            lambda: self.page_handlers.switch_to_page("welcome"),
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        tutorial_play_btn.click(
+            self.page_handlers.load_creative_with_prompt,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, prompt_display, partial_response_display, inspire_me_display],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        # Wire up tutorial navigation
+        tutorial_next_btn.click(
+            self.page_handlers.tutorial_next_step,
+            inputs=[tutorial_current_step],
+            outputs=[
+                tutorial_step_explanation, tutorial_prompt_display, tutorial_partial_response_display,
+                tutorial_input_section, tutorial_user_input, tutorial_token_counter,
+                tutorial_results_section, tutorial_original_response, tutorial_creative_response, tutorial_score_display,
+                tutorial_prev_btn_ref, tutorial_next_btn_ref, tutorial_play_btn_ref,
+                tutorial_current_step
+            ]
+        )
+        
+        tutorial_prev_btn.click(
+            self.page_handlers.tutorial_prev_step,
+            inputs=[tutorial_current_step],
+            outputs=[
+                tutorial_step_explanation, tutorial_prompt_display, tutorial_partial_response_display,
+                tutorial_input_section, tutorial_results_section,
+                tutorial_prev_btn_ref, tutorial_next_btn_ref, tutorial_play_btn_ref,
+                tutorial_current_step
+            ]
+        )
+        
+        submit_btn.click(
+            self.page_handlers.on_submit_start,
+            inputs=[user_input],
+            outputs=[submit_btn, loading_message, error_message, landing_page, gallery_page, creative_page, results_page, cosine_distance_display]
+        ).then(
+            self.page_handlers.on_submit_process,
+            inputs=[user_input],
+            outputs=[submit_btn, loading_message, error_message, landing_page, gallery_page, creative_page, results_page, cosine_distance_display, results_prompt_display, results_partial_display, results_user_input_display, original_response_display, results_continuation_display, violin_plot_display, current_page, has_results, nav_results, nav_session, nav_welcome, nav_tutorial, nav_creative, nav_gallery]
+        )
+        
+        user_input.submit(
+            self.page_handlers.on_submit_start,
+            inputs=[user_input],
+            outputs=[submit_btn, loading_message, error_message, landing_page, gallery_page, creative_page, results_page, cosine_distance_display]
+        ).then(
+            self.page_handlers.on_submit_process,
+            inputs=[user_input],
+            outputs=[submit_btn, loading_message, error_message, landing_page, gallery_page, creative_page, results_page, cosine_distance_display, results_prompt_display, results_partial_display, results_user_input_display, original_response_display, results_continuation_display, violin_plot_display, current_page, has_results, nav_results, nav_session, nav_welcome, nav_tutorial, nav_creative, nav_gallery]
+        )
+        
+        # Try again button - stay on same prompt, switch to creative page
+        try_again_same_btn.click(
+            self.page_handlers.try_same_prompt,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, submit_btn, user_input, loading_message, error_message, token_counter, token_visualization],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        # Try new prompt button - new prompt and switch to creative page  
+        try_again_new_btn.click(
+            self.page_handlers.try_new_prompt,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, prompt_display, partial_response_display, submit_btn, user_input, loading_message, error_message, inspire_me_display],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+
+        # Wire up inspire me button
+        inspire_me_btn.click(
+            self.page_handlers.show_inspire_me_examples,
+            outputs=[inspire_me_display]
+        )
+        
+        # Wire up real-time token counter
+        user_input.change(
+            self.page_handlers.update_token_count,
+            inputs=[user_input, partial_response_display],
+            outputs=[token_counter, token_visualization]
+        )
+        
+        # Navigation button handlers
+        nav_welcome.click(
+            lambda: self.page_handlers.switch_to_page("welcome"),
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        nav_tutorial.click(
+            self.page_handlers.load_tutorial_with_content,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, tutorial_step_explanation, tutorial_prompt_display, tutorial_partial_response_display, tutorial_input_section, tutorial_results_section, tutorial_prev_btn_ref, tutorial_next_btn_ref, tutorial_play_btn_ref, tutorial_current_step],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        nav_creative.click(
+            self.page_handlers.load_creative_with_prompt,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, prompt_display, partial_response_display, inspire_me_display],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        nav_gallery.click(
+            self.page_handlers.load_gallery_with_content,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, gallery_display],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        nav_results.click(
+            lambda: self.page_handlers.switch_to_page("results"),
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        # Update session page when navigating to it
+        nav_session.click(
+            self.page_handlers.navigate_to_session,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, session_main_stats, session_history_display, session_achievements_display],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        # Update back to creative button in session page
+        back_to_creative_btn.click(
+            lambda: self.page_handlers.switch_to_page("creative"),
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        # Connect welcome page buttons (duplicate wiring for multiple entry points)
+        skip_to_game_btn.click(
+            self.page_handlers.load_creative_with_prompt,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, prompt_display, partial_response_display, inspire_me_display],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        tutorial_btn.click(
+            self.page_handlers.load_tutorial_with_content,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, tutorial_step_explanation, tutorial_prompt_display, tutorial_partial_response_display, tutorial_input_section, tutorial_results_section, tutorial_prev_btn_ref, tutorial_next_btn_ref, tutorial_play_btn_ref, tutorial_current_step],
+            js="() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }"
+        )
+        
+        gallery_btn.click(
+            self.page_handlers.load_gallery_with_content,
+            outputs=[current_page, landing_page, tutorial_page, creative_page, gallery_page, results_page, session_page, nav_welcome, nav_tutorial, nav_creative, nav_gallery, nav_results, nav_session, gallery_display]
+        )

src/ui/page_handlers.py

@@ -0,0 +1,501 @@
+"""Page handling and navigation functionality"""
+
+import gradio as gr
+from ..config.settings import TUTORIAL_EXAMPLE
+
+
+class PageHandlers:
+    """Handles page switching, navigation, and page-specific functionality"""
+    
+    def __init__(self, app):
+        self.app = app
+    
+    def switch_to_page(self, page_name, update_nav=True):
+        """Switch to a different page and update navigation if needed."""
+        page_updates = {
+            "welcome": (True, False, False, False, False, False),
+            "tutorial": (False, True, False, False, False, False), 
+            "creative": (False, False, True, False, False, False),
+            "gallery": (False, False, False, True, False, False),
+            "results": (False, False, False, False, True, False),
+            "session": (False, False, False, False, False, True)
+        }
+        
+        if page_name not in page_updates:
+            page_name = "welcome"
+            
+        visibility = page_updates[page_name]
+        
+        nav_updates = []
+        if update_nav:
+            # Update navigation button styles
+            nav_buttons = ["welcome", "tutorial", "creative", "gallery", "results", "session"]
+            for nav_page in nav_buttons:
+                if nav_page == page_name:
+                    nav_updates.append(gr.update(elem_classes=["nav-button", "active"]))
+                else:
+                    nav_updates.append(gr.update(elem_classes=["nav-button"]))
+        else:
+            nav_updates = [gr.update()] * 6
+            
+        return (
+            page_name,  # current_page state
+            gr.update(visible=visibility[0]),  # landing_page 
+            gr.update(visible=visibility[1]),  # tutorial_page
+            gr.update(visible=visibility[2]),  # creative_page
+            gr.update(visible=visibility[3]),  # gallery_page
+            gr.update(visible=visibility[4]),  # results_page
+            gr.update(visible=visibility[5]),  # session_page
+            *nav_updates  # nav button updates
+        )
+    
+    def show_gallery(self, min_score=0.3):
+        """Show gallery with basic UI updates"""
+        gallery_html = self.generate_gallery_html(min_score)
+        switch_result = self.switch_to_page("gallery", update_nav=False)
+        return switch_result + (gallery_html,)
+    
+    def generate_gallery_html(self, min_score=0.3):
+        """Generate gallery HTML content"""
+        gallery_responses = self.app.data_manager.get_gallery_responses(min_score=min_score, limit=20)
+        
+        if not gallery_responses:
+            return """
+                <div class="gallery-item">
+                    <h3>🔍 No responses found at this creativity level yet!</h3>
+                    <p>Be the first to create some legendary responses! Lower the filter or come back later.</p>
+                </div>
+                """
+        
+        gallery_html = ""
+        for i, response in enumerate(gallery_responses, 1):
+            # Truncate long responses for gallery display
+            user_input = response.get("user_continuation", "").strip()
+            full_response = response.get("full_response_from_user", "").strip()
+            prompt = response.get("prompt", "").strip()
+            
+            # Truncate for display
+            display_prompt = (prompt[:100] + "...") if len(prompt) > 100 else prompt
+            
+            achievements = self.app.achievement_system.determine_achievement_titles(
+                response["cosine_distance"], 
+                response["num_user_tokens"]
+            )
+            achievement_badges = " ".join([f'<span class="achievement-badge">{title}</span>' for title in achievements[:2]])
+            
+            # Get original response for comparison
+            original_response = response.get("llm_full_response_original", "").strip()
+            
+            gallery_html += f"""
+            <div class="gallery-item">
+                <div class="gallery-item-score">
+                    🎨 Creativity Score: {response['cosine_distance']:.3f} 
+                    ({response['num_user_tokens']} token{'s' if response['num_user_tokens'] != 1 else ''})
+                </div>
+                {achievement_badges}
+                <h4>#{i} - Prompt:</h4>
+                <p style="opacity: 0.8; font-style: italic;">{display_prompt}</p>
+                <h4>Creative Input: <span style="color: #ffa726;">"{user_input}"</span></h4>
+                
+                <div style="display: flex; gap: 15px; margin-top: 15px;">
+                    <div style="flex: 1;">
+                        <h4>🤖 Original AI Response:</h4>
+                        <div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; border-left: 4px solid #999; max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 14px;">
+                            {original_response}
+                        </div>
+                    </div>
+                    <div style="flex: 1;">
+                        <h4>✨ Creative Response (after user input):</h4>
+                        <div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; border-left: 4px solid #ffa726; max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 14px;">
+                            {full_response}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            """
+        
+        return gallery_html
+    
+    def show_inspire_me_examples(self):
+        """Show new random inspiring examples for current prompt"""
+        if not self.app.current_prompt:
+            return ""
+        
+        examples = self.app.data_manager.get_inspire_me_examples(
+            self.app.current_prompt["prompt"],
+            self.app.current_prompt["llm_partial_response"],
+            limit=5
+        )
+        
+        return self.generate_inspire_me_html(examples)
+    
+    def show_tutorial(self):
+        """Show the tutorial page starting at step 1"""
+        example = TUTORIAL_EXAMPLE
+        step_content = self.get_tutorial_step_content(1)
+        switch_result = self.switch_to_page("tutorial", update_nav=False)
+        return switch_result + (
+            gr.update(value=step_content["explanation"]),  # tutorial_step_explanation
+            gr.update(visible=step_content["show_prompt"], value=example["prompt"]),  # tutorial_prompt_display
+            gr.update(visible=step_content["show_partial"], value=example["llm_partial_response"]),  # tutorial_partial_response_display
+            gr.update(visible=step_content["show_input"]),  # tutorial_input_section
+            gr.update(visible=step_content["show_results"]),  # tutorial_results_section
+            gr.update(visible=False),  # tutorial_prev_btn (hidden on step 1)
+            gr.update(visible=True),   # tutorial_next_btn
+            gr.update(visible=False),  # tutorial_play_btn (hidden until last step)
+            1  # Reset tutorial step to 1
+        )
+    
+    def get_tutorial_step_content(self, step):
+        """Get content for a specific tutorial step using unified example data"""
+        example = TUTORIAL_EXAMPLE
+        
+        step_content = {
+            1: {
+                "explanation": "## Step 1: The Prompt\n\nFirst, I'll show you what I was asked to write about ✍️<br>This gives you context for helping me be creative!",
+                "show_prompt": True,
+                "show_partial": False,
+                "show_input": False,
+                "show_results": False
+            },
+            2: {
+                "explanation": "## Step 2: The start of my response\n\nThen I'll show you how I started responding 🤖😴<br>As you can see... it's pretty boring and predictable!",
+                "show_prompt": True,
+                "show_partial": True,
+                "show_input": False,
+                "show_results": False
+            },
+            3: {
+                "explanation": "## Step 3: Your creative input \n\nThis is where the magic happens ✨ You add a few words (**tokens**) to steer me somewhere interesting.<br>Think unexpected, surprising, or completely different from what I started with.<br>I only want a little help - make each word count!<br><br>**🔤 What are tokens?** Your input is measured in \\\"tokens\\\" (how I process text). About 5 tokens ≈ 3-5 words.<br>Don't worry - you'll see your exact token count as you type!",
+                "show_prompt": True,
+                "show_partial": True,
+                "show_input": True,
+                "show_results": False,
+                "example_input": example["example_input"]
+            },
+            4: {
+                "explanation": "## Step 4: I'll continue the response \n\nAfter you give me your creative direction, I'll finish the response based on your inspiration 🤖🎉<br>You'll see how different the result is from my original boring version - that's the magic of collaboration!",
+                "show_prompt": True,
+                "show_partial": True,
+                "show_input": True,
+                "show_results": True,
+                "example_input": example["example_input"],
+                "example_creative": example["example_creative"]
+            },
+            5: {
+                "explanation": "## Step 5: Get scored on our collaborative response 🎨\n\nAfter I finish our collaborative response, we'll get scored for how different our combined response is from my original boring version!<br><br>**📊 How scoring works:** I use \\\"semantic similarity\\\" to compare the meaning of both responses. The more different the meaning, the higher your creativity score!<br>• 0.7+ = 🌟 Legendary creativity<br>• 0.5+ = 🔥 Exceptional creativity<br>• 0.3+ = ✨ Great creativity<br><br>**💡 Pro tip:** Unexpected words often lead to the most creative directions! 🏆",
+                "show_prompt": False,
+                "show_partial": False,
+                "show_input": False,
+                "show_results": True,
+                "example_input": example["example_input"],
+                "example_creative": example["example_creative"],
+                "example_score": example["example_score"]
+            }
+        }
+        
+        return step_content.get(step, step_content[1])
+    
+    def generate_inspire_me_html(self, examples):
+        """Generate HTML for inspire me examples"""
+        if not examples:
+            return self.app.template_renderer.load_template("inspire-me-empty.html")
+        else:
+            inspire_html = self.app.template_renderer.load_template("inspire-me-header.html")
+            for example in examples:
+                user_input = example.get("user_continuation", "").strip()
+                score = example["cosine_distance"]
+                tokens = example["num_user_tokens"]
+                plural = "s" if tokens != 1 else ""
+                
+                inspire_html += self.app.template_renderer.load_template("inspire-me-example.html",
+                    user_input=user_input,
+                    score=score,
+                    tokens=tokens,
+                    plural=plural
+                )
+            
+            inspire_html += self.app.template_renderer.load_template("inspire-me-footer.html")
+            return inspire_html
+    
+    def tutorial_next_step(self, current_step):
+        """Advance to next tutorial step"""
+        next_step = min(current_step + 1, 5)
+        example = TUTORIAL_EXAMPLE
+        step_content = self.get_tutorial_step_content(next_step)
+        
+        # Prepare example data for the step
+        input_value = step_content.get("example_input", "")
+        token_count = self.app.llm_manager.count_tokens(input_value) if input_value else 0
+        
+        # Create score display for final step
+        score_display = ""
+        if next_step == 5 and "example_score" in step_content:
+            score_display = self.app.scorer.create_enhanced_score_display(
+                step_content["example_score"], 1, 95.0, token_count, 10
+            )
+        
+        return (
+            gr.update(value=step_content["explanation"]),  # tutorial_step_explanation
+            gr.update(visible=step_content["show_prompt"]),  # tutorial_prompt_display
+            gr.update(visible=step_content["show_partial"]),  # tutorial_partial_response_display
+            gr.update(visible=step_content["show_input"]),  # tutorial_input_section
+            gr.update(value=input_value) if step_content["show_input"] else gr.update(),  # tutorial_user_input
+            gr.update(value=f"**Tokens:** {token_count}/5") if step_content["show_input"] else gr.update(),  # tutorial_token_counter
+            gr.update(visible=step_content["show_results"]),  # tutorial_results_section
+            gr.update(value=example["llm_full_response_original"]) if step_content["show_results"] else gr.update(),  # tutorial_original_response
+            gr.update(value=step_content.get("example_creative", "")) if step_content["show_results"] else gr.update(),  # tutorial_creative_response
+            gr.update(value=score_display) if step_content["show_results"] else gr.update(),  # tutorial_score_display
+            gr.update(visible=next_step > 1),  # tutorial_prev_btn
+            gr.update(visible=next_step < 5),  # tutorial_next_btn
+            gr.update(visible=next_step == 5),  # tutorial_play_btn (show on last step)
+            next_step  # Update tutorial step
+        )
+    
+    def tutorial_prev_step(self, current_step):
+        """Go back to previous tutorial step"""
+        prev_step = max(current_step - 1, 1)
+        step_content = self.get_tutorial_step_content(prev_step)
+        
+        return (
+            gr.update(value=step_content["explanation"]),  # tutorial_step_explanation
+            gr.update(visible=step_content["show_prompt"]),  # tutorial_prompt_display
+            gr.update(visible=step_content["show_partial"]),  # tutorial_partial_response_display
+            gr.update(visible=step_content["show_input"]),  # tutorial_input_section
+            gr.update(visible=step_content["show_results"]),  # tutorial_results_section
+            gr.update(visible=prev_step > 1),  # tutorial_prev_btn
+            gr.update(visible=prev_step < 4),  # tutorial_next_btn
+            gr.update(visible=prev_step == 4),  # tutorial_play_btn
+            prev_step  # Update tutorial step
+        )
+    
+    def start_game(self):
+        """Start the game"""
+        prompt_data = self.app.get_random_prompt()
+        # Load initial inspire me examples
+        initial_examples = self.app.data_manager.get_inspire_me_examples(
+            prompt_data["prompt"],
+            prompt_data["llm_partial_response"],
+            limit=5
+        )
+        inspire_html = self.generate_inspire_me_html(initial_examples)
+        switch_result = self.switch_to_page("creative", update_nav=False)
+        return switch_result + (
+            prompt_data['prompt'],
+            prompt_data['llm_partial_response'],
+            inspire_html
+        )
+    
+    def back_to_landing(self):
+        """Go back to landing page"""
+        result = self.switch_to_page("welcome", update_nav=True)
+        return result + ("",)  # Add empty gallery_display as the 14th output
+    
+    def update_token_count(self, text, partial_response=""):
+        """Update token counter and visual tokens in real-time"""
+        if not text.strip():
+            return (
+                gr.update(value="**Tokens:** 0/5", elem_classes=["token-counter"]),
+                gr.update(value="Type to see tokens...", elem_classes=["token-visualization"])
+            )
+        
+        # Count tokens and decode them individually
+        tokens, token_texts = self.app.llm_manager.tokenize_for_visualization(text)
+        token_count = len(tokens)
+        
+        # Create visual token display
+        token_html_parts = []
+        for i, token_text in enumerate(token_texts):
+            if i < 5:
+                token_class = f"token-{i+1}"
+            else:
+                token_class = "token-excess"
+            
+            # Escape HTML and handle special characters
+            token_display = token_text.replace(' ', '·').replace('\\n', '↵')
+            if not token_display.strip():
+                token_display = '·'
+            
+            token_html_parts.append(f'<span class="token {token_class}">{token_display}</span>')
+        
+        if token_html_parts:
+            token_visualization_html = ' '.join(token_html_parts)
+        else:
+            token_visualization_html = "Type to see tokens..."
+        
+        # Update counter with color coding
+        if token_count <= 5:
+            counter_class = ["token-counter", "valid"]
+            counter_text = f"**Tokens:** {token_count}/5"
+        else:
+            counter_class = ["token-counter", "error"] 
+            counter_text = f"**Tokens:** {token_count}/5 (Too many!)"
+        
+        return (
+            gr.update(value=counter_text, elem_classes=counter_class),
+            gr.update(value=token_visualization_html, elem_classes=["token-visualization"])
+        )
+    
+    def on_submit_start(self, user_text):
+        if not user_text.strip():
+            return (
+                gr.update(interactive=True),
+                gr.update(visible=False),
+                gr.update(visible=True, value="Please enter some text to continue the response."),
+                gr.update(visible=False),  # Hide landing
+                gr.update(visible=False),  # Hide gallery
+                gr.update(visible=True),   # Show creative
+                gr.update(visible=False),  # Hide results
+                gr.update()
+            )
+        
+        return (
+            gr.update(interactive=False),
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),  # Hide landing
+            gr.update(visible=False),  # Hide gallery
+            gr.update(visible=True),   # Show creative
+            gr.update(visible=False),  # Hide results
+            gr.update()
+        )
+    
+    def on_submit_process(self, user_text):
+        result = self.app.process_submission(user_text)
+        generated_response, cosine_distance, rank, percentile, mean_score, violin_plot, prompt_results = result
+        
+        if "Error:" in generated_response or "Please" in generated_response:
+            return (
+                gr.update(interactive=True),     # submit_btn
+                gr.update(visible=False),        # loading_message
+                gr.update(visible=True, value=generated_response),  # error_message
+                gr.update(visible=False),        # landing_page
+                gr.update(visible=False),        # gallery_page
+                gr.update(visible=True),         # creative_page
+                gr.update(visible=False),        # results_page
+                gr.update(visible=False),        # cosine_distance_display
+                gr.update(),                     # results_prompt_display
+                gr.update(),                     # results_partial_display
+                gr.update(),                     # results_user_input_display
+                gr.update(),                     # original_response_display
+                gr.update(),                     # results_continuation_display
+                gr.update(visible=False),        # violin_plot_display
+                gr.update(),                     # current_page (no change)
+                gr.update(),                     # has_results (no change)
+                gr.update(),                     # nav_results (no change)
+                gr.update(),                     # nav_session (no change)
+                gr.update(),                     # nav_welcome (no change)
+                gr.update(),                     # nav_tutorial (no change)
+                gr.update(),                     # nav_creative (no change) 
+                gr.update()                      # nav_gallery (no change)
+            )
+        
+        # Create enhanced score display with progress bars and metrics
+        user_tokens = self.app.llm_manager.count_tokens(user_text)
+        same_category_attempts = len([r for r in prompt_results 
+                                    if r["num_user_tokens"] == user_tokens]) if prompt_results else 1
+        
+        score_text = self.app.scorer.create_enhanced_score_display(
+            cosine_distance, rank, percentile, user_tokens, same_category_attempts
+        )
+        
+        # Show Results/Progress nav buttons after first submission
+        # Switch to results page and make nav buttons visible
+        return (
+            gr.update(interactive=True),                    # submit_btn
+            gr.update(visible=False),                       # loading_message
+            gr.update(visible=False),                       # error_message
+            gr.update(visible=False),                       # landing_page (hide)
+            gr.update(visible=False),                       # gallery_page (hide)  
+            gr.update(visible=False),                       # creative_page (hide)
+            gr.update(visible=True),                        # results_page (show)
+            gr.update(visible=True, value=score_text),      # cosine_distance_display
+            gr.update(value=self.app.current_prompt['prompt']), # results_prompt_display
+            gr.update(value=self.app.current_prompt['llm_partial_response']), # results_partial_display
+            gr.update(value=user_text),                     # results_user_input_display
+            gr.update(value=self.app.current_prompt['llm_full_response_original']), # original_response_display
+            gr.update(value=generated_response),          # results_continuation_display
+            gr.update(visible=True, value=violin_plot) if violin_plot else gr.update(visible=False),  # violin_plot_display
+            "results",                                       # current_page state
+            True,                                           # has_results state
+            gr.update(visible=True, elem_classes=["nav-button", "active"]),  # nav_results (visible + active)
+            gr.update(visible=True, elem_classes=["nav-button"]),            # nav_session (visible + inactive)
+            gr.update(elem_classes=["nav-button"]),         # nav_welcome (inactive)
+            gr.update(elem_classes=["nav-button"]),         # nav_tutorial (inactive)  
+            gr.update(elem_classes=["nav-button"]),         # nav_creative (inactive)
+            gr.update(elem_classes=["nav-button"])          # nav_gallery (inactive)
+        )
+    
+    def try_same_prompt(self):
+        switch_result = self.switch_to_page("creative")
+        return switch_result + (
+            gr.update(interactive=True),  # submit_btn
+            gr.update(value=""),         # user_input (clear)
+            gr.update(visible=False),    # loading_message
+            gr.update(visible=False),    # error_message
+            gr.update(value="**Tokens:** 0/5"),  # token_counter (reset)
+            gr.update(value="Once you start typing, I'll show you what you've written, but in tokens!")  # token_visualization (reset)
+        )
+    
+    def try_new_prompt(self):
+        prompt_data = self.app.get_random_prompt()
+        initial_examples = self.app.data_manager.get_inspire_me_examples(
+            prompt_data["prompt"],
+            prompt_data["llm_partial_response"],
+            limit=5
+        )
+        inspire_html = self.generate_inspire_me_html(initial_examples)
+        switch_result = self.switch_to_page("creative")
+        return switch_result + (
+            prompt_data['prompt'],       # prompt_display
+            prompt_data['llm_partial_response'], # partial_response_display
+            gr.update(interactive=True), # submit_btn
+            "",                         # user_input (clear)
+            gr.update(visible=False),   # loading_message
+            gr.update(visible=False),   # error_message
+            inspire_html                # inspire_me_display
+        )
+    
+    def load_creative_with_prompt(self):
+        """Load creative page with a new prompt"""
+        prompt_data = self.app.get_random_prompt()
+        initial_examples = self.app.data_manager.get_inspire_me_examples(
+            prompt_data["prompt"],
+            prompt_data["llm_partial_response"],
+            limit=5
+        )
+        inspire_html = self.generate_inspire_me_html(initial_examples)
+        switch_result = self.switch_to_page("creative")
+        return switch_result + (prompt_data['prompt'], prompt_data['llm_partial_response'], inspire_html)
+    
+    def load_gallery_with_content(self):
+        """Load gallery page with gallery content"""
+        gallery_html = self.generate_gallery_html(0.3)
+        switch_result = self.switch_to_page("gallery")
+        return switch_result + (gallery_html,)
+    
+    def load_tutorial_with_content(self):
+        """Load tutorial page with tutorial content initialized"""
+        example = TUTORIAL_EXAMPLE
+        step_content = self.get_tutorial_step_content(1)
+        switch_result = self.switch_to_page("tutorial")
+        return switch_result + (
+            step_content["explanation"],  # tutorial_step_explanation
+            gr.update(value=example["prompt"], visible=step_content["show_prompt"]),  # tutorial_prompt_display
+            gr.update(value=example["llm_partial_response"], visible=step_content["show_partial"]),  # tutorial_partial_response_display
+            gr.update(visible=step_content["show_input"]),  # tutorial_input_section
+            gr.update(visible=step_content["show_results"]),  # tutorial_results_section
+            gr.update(visible=False),  # tutorial_prev_btn (hidden on step 1)
+            gr.update(visible=True),   # tutorial_next_btn
+            gr.update(visible=False),  # tutorial_play_btn (hidden until last step)
+            1  # Reset tutorial step to 1
+        )
+    
+    def navigate_to_session(self):
+        main_stats, history, achievements = self.app.session_manager.generate_session_page_html(
+            self.app.template_renderer,
+            self.app.statistics_calculator,
+            self.app.scorer
+        )
+        switch_result = self.switch_to_page("session")
+        return switch_result + (main_stats, history, achievements)

src/ui/template_renderer.py

@@ -0,0 +1,20 @@
+"""Template rendering functionality"""
+
+import os
+
+
+class TemplateRenderer:
+    """Handles loading and rendering of HTML templates"""
+    
+    def load_template(self, template_path, **kwargs):
+        """Load HTML template from file and format with provided variables"""
+        try:
+            with open(f"templates/components/{template_path}", "r", encoding="utf-8") as f:
+                template_content = f.read()
+            return template_content.format(**kwargs)
+        except FileNotFoundError:
+            print(f"Warning: Template file {template_path} not found")
+            return ""
+        except Exception as e:
+            print(f"Error loading template {template_path}: {e}")
+            return ""

static/css/base.css

@@ -0,0 +1,162 @@
+/* Main Layout Styles */
+.main-title {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white !important;
+    padding: 30px;
+    border-radius: 15px;
+    text-align: center;
+    font-size: 36px;
+    font-weight: bold;
+    margin: 20px 0;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.main-title h1 {
+    color: white !important;
+    margin: 0;
+}
+
+/* Token Styles */
+.token-counter {
+    background-color: #f0f0f0;
+    padding: 10px;
+    border-radius: 8px;
+    text-align: center;
+    margin: 5px 0;
+    border: 2px solid #ddd;
+}
+
+.token-counter.valid {
+    border-color: #4CAF50;
+    background-color: #e8f5e8;
+}
+
+.token-counter.warning {
+    border-color: #ff9800;
+    background-color: #fff3e0;
+}
+
+.token-counter.error {
+    border-color: #f44336;
+    background-color: #ffebee;
+}
+
+.difficulty-indicator {
+    background-color: #e3f2fd;
+    padding: 8px;
+    border-radius: 8px;
+    text-align: center;
+    margin: 5px 0;
+    font-size: 14px;
+}
+
+.difficulty-indicator.easy { background-color: #f1f8e9; color: #8bc34a; }
+.difficulty-indicator.medium { background-color: #fff8e1; color: #ffc107; }
+.difficulty-indicator.hard { background-color: #fce4ec; color: #e91e63; }
+
+.token-explanation {
+    background-color: #e3f2fd;
+    padding: 10px 15px;
+    border-radius: 8px;
+    border-left: 4px solid #2196F3;
+    margin: 10px 0;
+    font-size: 14px;
+    color: #1565C0;
+    opacity: 0.9;
+}
+
+.token-visualization {
+    background-color: #f9f9f9;
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    margin: 10px 0;
+    min-height: 40px;
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.token {
+    display: inline-block;
+    padding: 2px 6px;
+    margin: 2px;
+    border-radius: 4px;
+    border: 1px solid;
+    font-weight: bold;
+}
+
+.token.token-1 { background-color: #e8eaf6; border-color: #667eea; color: #667eea; }
+.token.token-2 { background-color: #f1f8e9; border-color: #8bc34a; color: #8bc34a; }
+.token.token-3 { background-color: #fff8e1; border-color: #ffc107; color: #ffc107; }
+.token.token-4 { background-color: #fce4ec; border-color: #e91e63; color: #e91e63; }
+.token.token-5 { background-color: #f3e5f5; border-color: #9c27b0; color: #9c27b0; }
+.token.token-excess { background-color: #ffebee; border-color: #d32f2f; color: #d32f2f; }
+
+/* Response Styles */
+.original-response { 
+    background-color: #fafafa !important; 
+    border-left: 4px solid #999 !important; 
+}
+
+.streaming-response { 
+    background-color: #f1f8e9 !important; 
+    border-left: 4px solid #8bc34a !important;
+    font-family: monospace;
+}
+
+/* Animation Styles */
+.countdown {
+    background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
+    color: white;
+    padding: 20px;
+    border-radius: 15px;
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin: 20px 0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-10px); }
+    60% { transform: translateY(-5px); }
+}
+
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-5px); }
+    100% { transform: translateY(0px); }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes glow {
+    from { box-shadow: 0 0 5px #4CAF50; }
+    to { box-shadow: 0 0 15px #4CAF50, 0 0 20px #4CAF50; }
+}
+
+/* Animation Assignments */
+.start-button:hover {
+    animation: bounce 0.6s ease !important;
+}
+
+
+.game-mechanics {
+    animation: fadeIn 1s ease-in;
+}
+
+.token-counter.valid {
+    animation: glow 2s ease-in-out infinite alternate;
+}

static/css/components.css

@@ -0,0 +1,214 @@
+/* Button Styles */
+.start-button {
+    background: linear-gradient(45deg, #ff6b6b, #ff8e8e) !important;
+    color: white !important;
+    font-size: 24px !important;
+    font-weight: bold !important;
+    padding: 20px 40px !important;
+    border-radius: 50px !important;
+    border: none !important;
+    box-shadow: 0 6px 12px rgba(255, 107, 107, 0.3) !important;
+    transition: all 0.3s ease !important;
+}
+
+.start-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 16px rgba(255, 107, 107, 0.4) !important;
+}
+
+.try-again-button {
+    background: linear-gradient(45deg, #4CAF50, #66BB6A) !important;
+    color: white !important;
+    font-size: 20px !important;
+    font-weight: bold !important;
+    padding: 15px 30px !important;
+    border-radius: 40px !important;
+    border: none !important;
+    box-shadow: 0 6px 12px rgba(76, 175, 80, 0.3) !important;
+    transition: all 0.3s ease !important;
+    min-width: 180px !important;
+    margin: 10px !important;
+}
+
+.try-again-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 16px rgba(76, 175, 80, 0.4) !important;
+    background: linear-gradient(45deg, #66BB6A, #4CAF50) !important;
+}
+
+/* Content Box Styles */
+.prompt-box { 
+    background-color: #e8eaf6 !important; 
+    border-left: 4px solid #667eea !important; 
+}
+
+.assistant-box { 
+    background-color: #f1f8e9 !important; 
+    border-left: 4px solid #8bc34a !important; 
+}
+
+.user-box { 
+    background-color: #fff8e1 !important; 
+    border-left: 4px solid #ffc107 !important; 
+}
+
+.results-box { 
+    background-color: #fce4ec !important; 
+    border-left: 4px solid #e91e63 !important; 
+}
+
+.error-box { 
+    background-color: #ffebee !important; 
+    border-left: 4px solid #f44336 !important; 
+}
+
+/* Tooltip Styles */
+.help-tooltip {
+    display: inline-block;
+    position: relative;
+    cursor: help;
+    margin-left: 5px;
+    opacity: 0.7;
+    transition: opacity 0.3s;
+}
+
+.help-tooltip:hover {
+    opacity: 1;
+}
+
+.help-tooltip .tooltip-text {
+    visibility: hidden;
+    width: 280px;
+    background-color: #333;
+    color: white;
+    text-align: left;
+    border-radius: 8px;
+    padding: 12px;
+    position: absolute;
+    z-index: 1000;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -140px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+.help-tooltip .tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #333 transparent transparent transparent;
+}
+
+.help-tooltip:hover .tooltip-text {
+    visibility: visible;
+    animation: fadeIn 0.3s;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* Smart Tip Container */
+.smart-tip-container {
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    border-radius: 12px;
+    padding: 15px;
+    margin: 15px 0;
+    color: white;
+    border-left: 4px solid #ffa726;
+}
+
+.smart-tip-icon {
+    font-size: 20px;
+    margin-right: 8px;
+}
+
+.smart-tip-text {
+    font-size: 16px;
+    font-weight: 500;
+}
+
+/* Additional Button Styles */
+.submit-button {
+    transition: all 0.3s ease;
+}
+
+.submit-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+.primary-button {
+    background: linear-gradient(45deg, #ff6b6b, #ff8e8e) !important;
+    color: white !important;
+    font-size: 22px !important;
+    font-weight: bold !important;
+    padding: 18px 35px !important;
+    border-radius: 50px !important;
+    border: none !important;
+    box-shadow: 0 6px 12px rgba(255, 107, 107, 0.3) !important;
+    transition: all 0.3s ease !important;
+    min-width: 200px !important;
+    margin: 10px !important;
+}
+
+.primary-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 16px rgba(255, 107, 107, 0.4) !important;
+    background: linear-gradient(45deg, #ff8e8e, #ff6b6b) !important;
+}
+
+.secondary-button {
+    background: linear-gradient(45deg, #667eea, #764ba2) !important;
+    color: white !important;
+    font-size: 22px !important;
+    font-weight: bold !important;
+    padding: 18px 35px !important;
+    border-radius: 50px !important;
+    border: none !important;
+    box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3) !important;
+    transition: all 0.3s ease !important;
+    min-width: 200px !important;
+    margin: 10px !important;
+}
+
+.secondary-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4) !important;
+    background: linear-gradient(45deg, #764ba2, #667eea) !important;
+}
+
+.tutorial-button {
+    background: linear-gradient(45deg, #4CAF50, #66BB6A) !important;
+    color: white !important;
+    font-size: 18px !important;
+    font-weight: bold !important;
+    padding: 12px 25px !important;
+    border-radius: 30px !important;
+    border: none !important;
+    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3) !important;
+    transition: all 0.3s ease !important;
+    margin: 0 10px !important;
+    min-width: 120px !important;
+}
+
+.tutorial-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4) !important;
+}
+
+.tutorial-button.secondary {
+    background: linear-gradient(45deg, #9E9E9E, #607D8B) !important;
+    box-shadow: 0 4px 8px rgba(158, 158, 158, 0.3) !important;
+}
+
+.tutorial-button.secondary:hover {
+    box-shadow: 0 6px 12px rgba(158, 158, 158, 0.4) !important;
+}

static/css/gallery.css

@@ -0,0 +1,524 @@
+/* Tutorial Styles */
+.tutorial-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20px;
+    color: white;
+    margin: 20px 0;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+}
+
+.tutorial-header {
+    text-align: center;
+    padding: 30px 20px 20px 20px;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.tutorial-title {
+    font-size: 36px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.tutorial-subtitle {
+    font-size: 18px;
+    opacity: 0.9;
+}
+
+.tutorial-step {
+    padding: 30px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tutorial-step:last-child {
+    border-bottom: none;
+}
+
+.tutorial-step.active {
+    background: rgba(255, 255, 255, 0.05);
+    border-left: 5px solid #ffa726;
+}
+
+.tutorial-step.inactive {
+    opacity: 0.4;
+    pointer-events: none;
+}
+
+.step-number {
+    display: inline-block;
+    background: #ffa726;
+    color: white;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    margin-right: 15px;
+}
+
+.step-title {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.step-description {
+    font-size: 16px;
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+
+.tutorial-navigation {
+    text-align: center;
+    padding: 30px;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.expandable-section {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    margin: 15px 0;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.expandable-section:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.expandable-header {
+    padding: 15px 20px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.expandable-content {
+    padding: 0 20px 20px 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tutorial-step-explanation {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 25px;
+    margin: 20px 0;
+    color: white;
+    font-size: 18px;
+    line-height: 1.6;
+    border-left: 5px solid #ffa726;
+}
+
+/* Gallery Styles */
+.gallery-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20px;
+    color: white;
+    margin: 20px 0;
+    padding: 30px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.gallery-item {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 20px;
+    margin: 15px 0;
+    border-left: 5px solid #ffa726;
+}
+
+.gallery-item-score {
+    background: linear-gradient(45deg, #ff6b6b, #ffa726);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: bold;
+    display: inline-block;
+    margin-bottom: 10px;
+}
+
+/* Inspire Me Styles */
+.inspire-me-container {
+    background: rgba(255, 255, 255, 0.05);
+    border: 2px dashed rgba(255, 165, 38, 0.3);
+    border-radius: 15px;
+    padding: 20px;
+    margin: 15px 0;
+    text-align: center;
+}
+
+.inspire-me-button {
+    background: linear-gradient(45deg, #ffa726, #ff8f00) !important;
+    color: white !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+    padding: 12px 25px !important;
+    border-radius: 25px !important;
+    border: none !important;
+    box-shadow: 0 4px 8px rgba(255, 167, 38, 0.3) !important;
+    transition: all 0.3s ease !important;
+    margin: 10px !important;
+}
+
+.inspire-me-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 12px rgba(255, 167, 38, 0.4) !important;
+}
+
+.inspire-example {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    padding: 15px;
+    margin: 10px 0;
+    text-align: left;
+    border-left: 3px solid #ffa726;
+}
+
+.inspire-example-text {
+    font-family: monospace;
+    font-size: 14px;
+    color: #ffa726;
+    margin: 5px 0;
+}
+
+.inspire-example-score {
+    font-size: 12px;
+    opacity: 0.8;
+    color: #66BB6A;
+}
+
+/* Section Header Styles */
+.section-header {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 15px 20px;
+    border-radius: 10px;
+    margin: 20px 0 15px 0;
+    text-align: center;
+    color: #667eea;
+    font-weight: bold;
+    border: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+/* Session Progress Styles */
+.session-progress {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 15px;
+    padding: 25px;
+    margin: 20px 0;
+    color: white;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.session-stats {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 0;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.stat-item {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 10px;
+    text-align: center;
+    flex: 1;
+    min-width: 100px;
+}
+
+.stat-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: #ffa726;
+    margin-bottom: 5px;
+}
+
+.stat-label {
+    font-size: 12px;
+    opacity: 0.8;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.session-achievements {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
+}
+
+.recent-attempts {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
+}
+
+.attempt-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.attempt-item:last-child {
+    border-bottom: none;
+}
+
+.attempt-number {
+    font-weight: bold;
+    opacity: 0.7;
+    min-width: 30px;
+}
+
+.attempt-input {
+    flex: 1;
+    margin: 0 10px;
+    font-family: monospace;
+    font-size: 14px;
+    color: #ffa726;
+}
+
+.attempt-score {
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+.ranking-highlight {
+    background-color: rgba(76, 175, 80, 0.2);
+    border: 2px solid rgba(76, 175, 80, 0.3);
+}
+
+.session-overview {
+    margin-top: 20px;
+}
+
+.best-response-showcase {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 20px;
+    margin: 15px 0;
+    border-left: 4px solid #4CAF50;
+}
+
+.best-response-showcase h4 {
+    margin: 0 0 15px 0;
+    color: #ffa726;
+    font-size: 18px;
+}
+
+.best-response-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.best-input {
+    font-family: monospace;
+    font-size: 16px;
+    color: #ffa726;
+    font-weight: bold;
+    flex: 1;
+    min-width: 200px;
+}
+
+.best-metrics {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.score-badge, .rank-badge {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+.rank-badge {
+    background: rgba(76, 175, 80, 0.3);
+    color: #4CAF50;
+}
+
+.performance-trend {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 15px;
+    font-size: 14px;
+}
+
+.trend-detail {
+    opacity: 0.7;
+    font-size: 12px;
+    margin-left: 10px;
+}
+
+.attempt-item.enhanced {
+    padding: 12px 0;
+    align-items: flex-start;
+}
+
+.attempt-content {
+    flex: 1;
+    margin: 0 15px;
+}
+
+.attempt-details {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 8px;
+    font-size: 12px;
+    opacity: 0.8;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.timestamp {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.ranking-info {
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+.attempt-metrics {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+    min-width: 80px;
+}
+
+.token-count {
+    font-size: 11px;
+    opacity: 0.7;
+    white-space: nowrap;
+}
+
+.session-tip {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 12px;
+    margin-top: 20px;
+    border-left: 4px solid #ffa726;
+    font-size: 14px;
+}
+
+/* Results Header Styles */
+.results-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 15px;
+    padding: 25px;
+    margin: 20px 0;
+    color: white;
+    text-align: center;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.results-header h1 {
+    color: white !important;
+    margin-bottom: 15px;
+    font-size: 32px;
+}
+
+.results-header p {
+    margin: 10px 0;
+    opacity: 0.9;
+}
+
+.results-header a {
+    color: #ffa726;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.results-header a:hover {
+    color: #ffcc80;
+    text-decoration: underline;
+}
+
+.results-section-header {
+    background: rgba(102, 126, 234, 0.1);
+    border-left: 4px solid #667eea;
+    padding: 15px 20px;
+    border-radius: 8px;
+    margin: 30px 0 20px 0;
+    font-size: 20px;
+    font-weight: bold;
+    color: #667eea;
+}
+
+.section-divider {
+    margin: 40px 0;
+    border: none;
+    height: 2px;
+    background: linear-gradient(to right, transparent, rgba(102, 126, 234, 0.3), transparent);
+}
+
+.action-section {
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 15px;
+    padding: 30px;
+    margin: 40px 0;
+    text-align: center;
+    border: 2px solid rgba(102, 126, 234, 0.1);
+}
+
+/* Navigation Styles */
+.nav-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 20px;
+    border-radius: 15px;
+    margin: 20px 0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.nav-button {
+    background: rgba(255, 255, 255, 0.2) !important;
+    color: white !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+    padding: 12px 20px !important;
+    border-radius: 25px !important;
+    border: 2px solid transparent !important;
+    margin: 0 5px !important;
+    min-width: 140px !important;
+    transition: all 0.3s ease !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+.nav-button:hover {
+    background: rgba(255, 255, 255, 0.3) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
+}
+
+.nav-button.active {
+    background: linear-gradient(45deg, #ffa726, #ff8f00) !important;
+    color: white !important;
+    border-color: #ffa726 !important;
+    box-shadow: 0 4px 12px rgba(255, 167, 38, 0.4) !important;
+}
+
+.nav-button.active:hover {
+    background: linear-gradient(45deg, #ff8f00, #ffa726) !important;
+    transform: translateY(-1px) !important;
+}
+
+.nav-button:disabled {
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+    transform: none !important;
+}

static/css/game.css

@@ -0,0 +1,17 @@
+/* Game Mechanics Styles */
+.game-mechanics {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 30px;
+    margin: 30px 0;
+    backdrop-filter: blur(10px);
+}
+
+.mechanic-item {
+    margin: 15px 0;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}

static/css/landing.css

@@ -0,0 +1,27 @@
+.landing-page {
+    text-align: center;
+    padding: 40px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20px;
+    color: white;
+    margin: 20px 0;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+.landing-title {
+    font-size: 48px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    animation: float 3s ease-in-out infinite;
+}
+.landing-subtitle {
+    font-size: 24px;
+    margin-bottom: 30px;
+    opacity: 0.9;
+}
+
+.landing-description {
+    font-size: 20px;
+    margin: 20px 0;
+    opacity: 0.85;
+    font-weight: 500;
+}

static/css/scores.css

@@ -0,0 +1,132 @@
+/* Score Display Styles */
+.cosine-distance {
+    background-color: #4CAF50;
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin: 20px 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.score-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20px;
+    padding: 30px;
+    margin: 20px 0;
+    color: white;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+}
+
+.score-header {
+    font-size: 28px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+/* Progress Bar Styles */
+.progress-bar-container {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 15px;
+    height: 30px;
+    margin: 15px 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.progress-bar {
+    height: 100%;
+    border-radius: 15px;
+    background: linear-gradient(45deg, #ff6b6b, #ffa726);
+    transition: width 1.5s ease-in-out;
+    position: relative;
+}
+
+.progress-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: linear-gradient(45deg, transparent 33%, rgba(255, 255, 255, 0.3) 50%, transparent 66%);
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+/* Score Details */
+.score-details {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+
+.score-metric {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 10px;
+    text-align: center;
+    margin: 5px;
+    flex: 1;
+    min-width: 150px;
+}
+
+.metric-value {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffa726;
+}
+
+.metric-label {
+    font-size: 14px;
+    opacity: 0.9;
+    margin-top: 5px;
+}
+
+/* Achievements */
+.achievements-container {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 20px;
+    margin: 20px 0;
+    text-align: center;
+}
+
+.achievements-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    color: #ffa726;
+}
+
+.achievement-badges {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+}
+
+.achievement-badge {
+    background: linear-gradient(45deg, #ff6b6b, #ffa726);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: bold;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    animation: badge-glow 2s ease-in-out;
+}
+
+@keyframes badge-glow {
+    0% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
+    50% { box-shadow: 0 4px 12px rgba(255, 165, 38, 0.4); }
+    100% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
+}

templates/components/achievement-badge.html

@@ -0,0 +1 @@
+<span class="achievement-badge">{achievement}</span>

templates/components/attempt-item.html

@@ -0,0 +1,7 @@
+<div class="attempt-item">
+    <span class="attempt-number">#{attempt_number}</span>
+    <span class="attempt-input">"{user_input}"</span>
+    <span class="attempt-score" style="color: {score_color};">
+        {cosine_distance:.3f} ({num_tokens} token{plural})
+    </span>
+</div>

templates/components/inspire-me-empty.html

@@ -0,0 +1,4 @@
+<div class="inspire-example">
+    <p>🌟 <strong>You're the first to try this prompt!</strong></p>
+    <p>Be bold and creative - you're setting the bar for others to follow!</p>
+</div>

templates/components/inspire-me-example.html

@@ -0,0 +1,6 @@
+<div class="inspire-example">
+    <div class="inspire-example-text">"{user_input}"</div>
+    <div class="inspire-example-score">
+        Creativity: {score:.3f} ({tokens} token{plural})
+    </div>
+</div>

templates/components/inspire-me-footer.html

@@ -0,0 +1,5 @@
+<div class="inspire-example">
+    <p style="text-align: center; font-style: italic; opacity: 0.8;">
+        ✨ Now it's your turn! Can you be even more creative?
+    </p>
+</div>

templates/components/inspire-me-header.html

@@ -0,0 +1 @@
+<h4>💡 Here are some creative examples from others:</h4>

templates/components/recent-attempts.html

@@ -0,0 +1,4 @@
+<div class="recent-attempts">
+    <h4>📊 Your Recent Attempts:</h4>
+    {attempts}
+</div>

templates/components/session-achievements.html

@@ -0,0 +1,3 @@
+<div class="session-progress">
+    {achievements_content}
+</div>

templates/components/session-enhanced-attempt.html

@@ -0,0 +1,14 @@
+<div class="attempt-item enhanced">
+    <span class="attempt-number">#{attempt_number}</span>
+    <div class="attempt-content">
+        <div class="attempt-input">"{display_input}"</div>
+        <div class="attempt-details">
+            <span class="timestamp">{timestamp}</span>
+            <span class="ranking-info" style="color: {ranking_color};">{ranking_info}</span>
+        </div>
+    </div>
+    <div class="attempt-metrics">
+        <span class="attempt-score" style="color: {score_color};">{cosine_distance:.3f}</span>
+        <span class="token-count">{num_tokens} tokens</span>
+    </div>
+</div>

templates/components/session-history.html

@@ -0,0 +1,6 @@
+<div class="session-progress">
+    <div class="recent-attempts">
+        {attempts}
+        {more_attempts}
+    </div>
+</div>

templates/components/session-main-stats.html

@@ -0,0 +1,31 @@
+<div class="session-progress">
+    <div class="session-stats">
+        <div class="stat-item">
+            <div class="stat-value">{total_attempts}</div>
+            <div class="stat-label">Creative Attempts</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-value">{best_score:.3f}</div>
+            <div class="stat-label">Personal Best</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-value">{average_score:.3f}</div>
+            <div class="stat-label">Average Score</div>
+        </div>
+        {ranking_stats}
+    </div>
+    
+    <div class="session-overview">
+        <div class="best-response-showcase">
+            <h4>🎯 Your Best Response</h4>
+            <div class="best-response-content">
+                <span class="best-input">"{best_input}"</span>
+                <div class="best-metrics">
+                    <span class="score-badge">Score: {best_score:.3f}</span>
+                    {best_ranking}
+                </div>
+            </div>
+        </div>
+        {trend_info}
+    </div>
+</div>

templates/components/session-page-empty.html

@@ -0,0 +1,11 @@
+<div class="session-progress">
+    <h3>🌟 Your Creative Journey Awaits!</h3>
+    <p style="font-size: 18px; margin: 20px 0;">You haven't started your creative adventure yet!</p>
+    <p>💡 Once you begin helping me be creative, you'll see:</p>
+    <ul style="text-align: left; margin: 20px 0;">
+        <li>📊 Your personal progress and community rankings</li>
+        <li>🏆 Achievements you've earned</li>
+        <li>📈 Your creativity trends and improvement</li>
+        <li>🎯 Personal best responses with ranking context</li>
+    </ul>
+</div>

templates/components/session-progress-empty.html

@@ -0,0 +1,5 @@
+<div class="session-progress">
+    <h3>🎯 Your Session Progress</h3>
+    <p>🌟 Welcome! This is your first creative attempt in this session.</p>
+    <p>💡 <strong>Tip:</strong> Try different approaches with each prompt to discover what makes the most creative responses!</p>
+</div>

templates/components/session-progress-main.html

@@ -0,0 +1,28 @@
+<div class="session-progress">
+    <h3>🎯 Your Session Progress</h3>
+    <div class="session-stats">
+        <div class="stat-item">
+            <div class="stat-value">{total_attempts}</div>
+            <div class="stat-label">Attempts</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-value">{best_score:.3f}</div>
+            <div class="stat-label">Best Score</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-value">{average_score:.3f}</div>
+            <div class="stat-label">Average Score</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-value">{prompts_tried}</div>
+            <div class="stat-label">Prompts Tried</div>
+        </div>
+    </div>
+    
+    {achievement_badges}
+    {recent_html}
+    
+    <div class="session-tip">
+        💡 <strong>Keep experimenting!</strong> Each attempt helps you learn what makes responses more creative.
+    </div>
+</div>