Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

README.md

@@ -1,12 +1,344 @@
+
 ---
-title: Gradio Aicontext
-emoji: 👀
-colorFrom: pink
-colorTo: green
+title: Gradio AI Context
 sdk: gradio
-sdk_version: 5.49.1
+sdk_version: 5.49.0
 app_file: app.py
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# `gradio_aicontext`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Custom gradio component to visualize your ai context by colours and tokens' size.
+
+## Installation
+
+```bash
+pip install gradio_aicontext
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_aicontext import AIContext
+import json
+import tiktoken
+
+
+def count_tokens(message: dict) -> int:
+    encoding = tiktoken.encoding_for_model("gpt-4")
+    return encoding.encode(json.dumps([message])).__len__()
+
+
+initial_messages = [
+    {
+        "role": "system",
+        "content": "You are a helpful AI assistant skilled in Python programming and data analysis."
+    },
+    {
+        "role": "user", 
+        "content": "Can you help me write a function to calculate the factorial of a number?"
+    },
+    {
+        "role": "assistant",
+        "content": "I'll help you create a factorial function. Here are two approaches:\n\n```python\n# Recursive approach\ndef factorial_recursive(n):\n    if n <= 1:\n        return 1\n    return n * factorial_recursive(n - 1)\n\n# Iterative approach  \ndef factorial_iterative(n):\n    result = 1\n    for i in range(1, n + 1):\n        result *= i\n    return result\n\n# Example usage\nprint(factorial_recursive(5))  # 120\nprint(factorial_iterative(5))  # 120\n```\n\nBoth functions work well, but the iterative version is more memory efficient for large numbers."
+    },
+    {
+        "role": "user",
+        "content": "What about using math.factorial()?"
+    },
+    {
+        "role": "assistant", 
+        "content": "Great point! Python's built-in `math.factorial()` is the most efficient option:\n\n```python\nimport math\n\nresult = math.factorial(5)  # 120\n```\n\nIt's optimized, handles edge cases, and is the recommended approach for production code. Use custom implementations mainly for learning or when you need specific behavior."
+    },
+    {
+        "role": "user",
+        "content": "What's the weather like in New York today?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather",
+        "call_id": "call_weather_123",
+        "arguments": "{\"location\": \"New York, NY\", \"units\": \"fahrenheit\"}"
+    },
+    {
+        "type": "function_call_output", 
+        "call_id": "call_weather_123",
+        "output": "{\"location\": \"New York, NY\", \"temperature\": 72, \"condition\": \"Partly Cloudy\", \"humidity\": 65, \"wind_speed\": 8, \"visibility\": 10, \"uv_index\": 6, \"feels_like\": 75}"
+    },
+    {
+        "role": "assistant",
+        "content": "The weather in New York today is quite pleasant! Here are the details:\n\n🌤️ **Partly Cloudy** - 72°F (feels like 75°F)\n💨 Wind: 8 mph\n💧 Humidity: 65%\n👁️ Visibility: 10 miles\n☀️ UV Index: 6 (moderate)\n\nIt's a nice day to be outside!"
+    },
+    {
+        "role": "user",
+        "content": "Can you also check the forecast for tomorrow and send me an email reminder?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather_forecast",
+        "call_id": "call_forecast_456",
+        "arguments": "{\"location\": \"New York, NY\", \"days\": 1}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_forecast_456", 
+        "output": "{\"location\": \"New York, NY\", \"forecast\": [{\"date\": \"2024-10-17\", \"high\": 68, \"low\": 58, \"condition\": \"Light Rain\", \"precipitation_chance\": 80, \"wind_speed\": 12}]}"
+    },
+    {
+        "type": "function_call",
+        "name": "send_email",
+        "call_id": "call_email_789",
+        "arguments": "{\"to\": \"user@example.com\", \"subject\": \"Weather Reminder: Bring an Umbrella Tomorrow!\", \"body\": \"Tomorrow's forecast for New York: Light rain expected with 80% chance of precipitation. High: 68°F, Low: 58°F. Don't forget your umbrella!\"}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_email_789",
+        "output": "{\"status\": \"sent\", \"message_id\": \"msg_12345\", \"delivered_at\": \"2024-10-16T20:45:30Z\"}"
+    }
+]
+
+with gr.Blocks(title="AI Context Visualization Demo") as demo:
+    gr.Markdown("# AI Context Component Demo")
+    gr.Markdown("Shows token visualization for OpenAI-style conversation messages")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            json_editor = gr.JSON(
+                value=initial_messages,
+                label="Raw Messages (Editable)",
+                show_label=True
+            )
+        
+        with gr.Column(scale=1):
+            context_viz = AIContext(
+                value=initial_messages, 
+                count_tokens_fn=count_tokens
+            )
+    
+    json_editor.change(
+        fn=lambda x: x,
+        inputs=[json_editor],
+        outputs=[context_viz]
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `AIContext`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list | dict | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">list of messages or dict containing messages. If a function is provided, the function will be called each time the app loads to set the initial value of this component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>count_tokens_fn</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Callable[[Any], int] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">function to count tokens in a message. If None, uses character count / 4 heuristic.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | I18nData | None
+```
+
+</td>
+<td align="left"><code>"AI Context"</code></td>
+<td align="left">the label for this component, displayed above the component if `show_label` is `True`.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise).</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise).</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">if True, will be rendered as interactive; if False, will be read-only.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | Literal["hidden"]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, ...] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the AIContext changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, passes the data through unchanged.
+- **As input:** Should return, messages list or dict containing messages.
+
+ ```python
+ def predict(
+     value: typing.Any
+ ) -> typing.Any:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,106 @@
+import gradio as gr
+from gradio_aicontext import AIContext
+import json
+import tiktoken
+
+
+def count_tokens(message: dict) -> int:
+    encoding = tiktoken.encoding_for_model("gpt-4")
+    return encoding.encode(json.dumps([message])).__len__()
+
+
+initial_messages = [
+    {
+        "role": "system",
+        "content": "You are a helpful AI assistant skilled in Python programming and data analysis."
+    },
+    {
+        "role": "user", 
+        "content": "Can you help me write a function to calculate the factorial of a number?"
+    },
+    {
+        "role": "assistant",
+        "content": "I'll help you create a factorial function. Here are two approaches:\n\n```python\n# Recursive approach\ndef factorial_recursive(n):\n    if n <= 1:\n        return 1\n    return n * factorial_recursive(n - 1)\n\n# Iterative approach  \ndef factorial_iterative(n):\n    result = 1\n    for i in range(1, n + 1):\n        result *= i\n    return result\n\n# Example usage\nprint(factorial_recursive(5))  # 120\nprint(factorial_iterative(5))  # 120\n```\n\nBoth functions work well, but the iterative version is more memory efficient for large numbers."
+    },
+    {
+        "role": "user",
+        "content": "What about using math.factorial()?"
+    },
+    {
+        "role": "assistant", 
+        "content": "Great point! Python's built-in `math.factorial()` is the most efficient option:\n\n```python\nimport math\n\nresult = math.factorial(5)  # 120\n```\n\nIt's optimized, handles edge cases, and is the recommended approach for production code. Use custom implementations mainly for learning or when you need specific behavior."
+    },
+    {
+        "role": "user",
+        "content": "What's the weather like in New York today?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather",
+        "call_id": "call_weather_123",
+        "arguments": "{\"location\": \"New York, NY\", \"units\": \"fahrenheit\"}"
+    },
+    {
+        "type": "function_call_output", 
+        "call_id": "call_weather_123",
+        "output": "{\"location\": \"New York, NY\", \"temperature\": 72, \"condition\": \"Partly Cloudy\", \"humidity\": 65, \"wind_speed\": 8, \"visibility\": 10, \"uv_index\": 6, \"feels_like\": 75}"
+    },
+    {
+        "role": "assistant",
+        "content": "The weather in New York today is quite pleasant! Here are the details:\n\n🌤️ **Partly Cloudy** - 72°F (feels like 75°F)\n💨 Wind: 8 mph\n💧 Humidity: 65%\n👁️ Visibility: 10 miles\n☀️ UV Index: 6 (moderate)\n\nIt's a nice day to be outside!"
+    },
+    {
+        "role": "user",
+        "content": "Can you also check the forecast for tomorrow and send me an email reminder?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather_forecast",
+        "call_id": "call_forecast_456",
+        "arguments": "{\"location\": \"New York, NY\", \"days\": 1}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_forecast_456", 
+        "output": "{\"location\": \"New York, NY\", \"forecast\": [{\"date\": \"2024-10-17\", \"high\": 68, \"low\": 58, \"condition\": \"Light Rain\", \"precipitation_chance\": 80, \"wind_speed\": 12}]}"
+    },
+    {
+        "type": "function_call",
+        "name": "send_email",
+        "call_id": "call_email_789",
+        "arguments": "{\"to\": \"user@example.com\", \"subject\": \"Weather Reminder: Bring an Umbrella Tomorrow!\", \"body\": \"Tomorrow's forecast for New York: Light rain expected with 80% chance of precipitation. High: 68°F, Low: 58°F. Don't forget your umbrella!\"}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_email_789",
+        "output": "{\"status\": \"sent\", \"message_id\": \"msg_12345\", \"delivered_at\": \"2024-10-16T20:45:30Z\"}"
+    }
+]
+
+with gr.Blocks(title="AI Context Visualization Demo") as demo:
+    gr.Markdown("# AI Context Component Demo")
+    gr.Markdown("Shows token visualization for OpenAI-style conversation messages")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            json_editor = gr.JSON(
+                value=initial_messages,
+                label="Raw Messages (Editable)",
+                show_label=True
+            )
+        
+        with gr.Column(scale=1):
+            context_viz = AIContext(
+                value=initial_messages, 
+                count_tokens_fn=count_tokens
+            )
+    
+    json_editor.change(
+        fn=lambda x: x,
+        inputs=[json_editor],
+        outputs=[context_viz]
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

space.py

@@ -0,0 +1,228 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'AIContext': {'description': 'Creates an AI context visualization component showing message stack with token counts.', 'members': {'__init__': {'value': {'type': 'list | dict | Callable | None', 'default': 'None', 'description': 'list of messages or dict containing messages. If a function is provided, the function will be called each time the app loads to set the initial value of this component.'}, 'count_tokens_fn': {'type': 'Callable[[Any], int] | None', 'default': 'None', 'description': 'function to count tokens in a message. If None, uses character count / 4 heuristic.'}, 'label': {'type': 'str | I18nData | None', 'default': '"AI Context"', 'description': 'the label for this component, displayed above the component if `show_label` is `True`.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise).'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': 'Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise).'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width.'}, 'interactive': {'type': 'bool | None', 'default': 'False', 'description': 'if True, will be rendered as interactive; if False, will be read-only.'}, 'visible': {'type': 'bool | Literal["hidden"]', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context.'}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': 'in a gr.render, Components with the same key across re-renders are treated as the same component.'}}, 'postprocess': {'value': {'type': 'typing.Any', 'description': 'messages list or dict containing messages.'}}, 'preprocess': {'return': {'type': 'typing.Any', 'description': 'Passes the data through unchanged.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the AIContext changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'AIContext': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_aicontext`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Custom gradio component to visualize your ai context by colours and tokens' size.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_aicontext
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_aicontext import AIContext
+import json
+import tiktoken
+
+
+def count_tokens(message: dict) -> int:
+    encoding = tiktoken.encoding_for_model("gpt-4")
+    return encoding.encode(json.dumps([message])).__len__()
+
+
+initial_messages = [
+    {
+        "role": "system",
+        "content": "You are a helpful AI assistant skilled in Python programming and data analysis."
+    },
+    {
+        "role": "user", 
+        "content": "Can you help me write a function to calculate the factorial of a number?"
+    },
+    {
+        "role": "assistant",
+        "content": "I'll help you create a factorial function. Here are two approaches:\n\n```python\n# Recursive approach\ndef factorial_recursive(n):\n    if n <= 1:\n        return 1\n    return n * factorial_recursive(n - 1)\n\n# Iterative approach  \ndef factorial_iterative(n):\n    result = 1\n    for i in range(1, n + 1):\n        result *= i\n    return result\n\n# Example usage\nprint(factorial_recursive(5))  # 120\nprint(factorial_iterative(5))  # 120\n```\n\nBoth functions work well, but the iterative version is more memory efficient for large numbers."
+    },
+    {
+        "role": "user",
+        "content": "What about using math.factorial()?"
+    },
+    {
+        "role": "assistant", 
+        "content": "Great point! Python's built-in `math.factorial()` is the most efficient option:\n\n```python\nimport math\n\nresult = math.factorial(5)  # 120\n```\n\nIt's optimized, handles edge cases, and is the recommended approach for production code. Use custom implementations mainly for learning or when you need specific behavior."
+    },
+    {
+        "role": "user",
+        "content": "What's the weather like in New York today?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather",
+        "call_id": "call_weather_123",
+        "arguments": "{\"location\": \"New York, NY\", \"units\": \"fahrenheit\"}"
+    },
+    {
+        "type": "function_call_output", 
+        "call_id": "call_weather_123",
+        "output": "{\"location\": \"New York, NY\", \"temperature\": 72, \"condition\": \"Partly Cloudy\", \"humidity\": 65, \"wind_speed\": 8, \"visibility\": 10, \"uv_index\": 6, \"feels_like\": 75}"
+    },
+    {
+        "role": "assistant",
+        "content": "The weather in New York today is quite pleasant! Here are the details:\n\n🌤️ **Partly Cloudy** - 72°F (feels like 75°F)\n💨 Wind: 8 mph\n💧 Humidity: 65%\n👁️ Visibility: 10 miles\n☀️ UV Index: 6 (moderate)\n\nIt's a nice day to be outside!"
+    },
+    {
+        "role": "user",
+        "content": "Can you also check the forecast for tomorrow and send me an email reminder?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather_forecast",
+        "call_id": "call_forecast_456",
+        "arguments": "{\"location\": \"New York, NY\", \"days\": 1}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_forecast_456", 
+        "output": "{\"location\": \"New York, NY\", \"forecast\": [{\"date\": \"2024-10-17\", \"high\": 68, \"low\": 58, \"condition\": \"Light Rain\", \"precipitation_chance\": 80, \"wind_speed\": 12}]}"
+    },
+    {
+        "type": "function_call",
+        "name": "send_email",
+        "call_id": "call_email_789",
+        "arguments": "{\"to\": \"user@example.com\", \"subject\": \"Weather Reminder: Bring an Umbrella Tomorrow!\", \"body\": \"Tomorrow's forecast for New York: Light rain expected with 80% chance of precipitation. High: 68°F, Low: 58°F. Don't forget your umbrella!\"}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_email_789",
+        "output": "{\"status\": \"sent\", \"message_id\": \"msg_12345\", \"delivered_at\": \"2024-10-16T20:45:30Z\"}"
+    }
+]
+
+with gr.Blocks(title="AI Context Visualization Demo") as demo:
+    gr.Markdown("# AI Context Component Demo")
+    gr.Markdown("Shows token visualization for OpenAI-style conversation messages")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            json_editor = gr.JSON(
+                value=initial_messages,
+                label="Raw Messages (Editable)",
+                show_label=True
+            )
+        
+        with gr.Column(scale=1):
+            context_viz = AIContext(
+                value=initial_messages, 
+                count_tokens_fn=count_tokens
+            )
+    
+    json_editor.change(
+        fn=lambda x: x,
+        inputs=[json_editor],
+        outputs=[context_viz]
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `AIContext`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["AIContext"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["AIContext"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes the data through unchanged.
+- **As output:** Should return, messages list or dict containing messages.
+
+ ```python
+def predict(
+    value: typing.Any
+) -> typing.Any:
+    return value
+```
+""", elem_classes=["md-custom", "AIContext-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          AIContext: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

src/README.md

@@ -0,0 +1,344 @@
+
+---
+title: Gradio AI Context
+sdk: gradio
+sdk_version: 5.49.0
+app_file: app.py
+pinned: false
+---
+
+# `gradio_aicontext`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+Custom gradio component to visualize your ai context by colours and tokens' size.
+
+## Installation
+
+```bash
+pip install gradio_aicontext
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_aicontext import AIContext
+import json
+import tiktoken
+
+
+def count_tokens(message: dict) -> int:
+    encoding = tiktoken.encoding_for_model("gpt-4")
+    return encoding.encode(json.dumps([message])).__len__()
+
+
+initial_messages = [
+    {
+        "role": "system",
+        "content": "You are a helpful AI assistant skilled in Python programming and data analysis."
+    },
+    {
+        "role": "user", 
+        "content": "Can you help me write a function to calculate the factorial of a number?"
+    },
+    {
+        "role": "assistant",
+        "content": "I'll help you create a factorial function. Here are two approaches:\n\n```python\n# Recursive approach\ndef factorial_recursive(n):\n    if n <= 1:\n        return 1\n    return n * factorial_recursive(n - 1)\n\n# Iterative approach  \ndef factorial_iterative(n):\n    result = 1\n    for i in range(1, n + 1):\n        result *= i\n    return result\n\n# Example usage\nprint(factorial_recursive(5))  # 120\nprint(factorial_iterative(5))  # 120\n```\n\nBoth functions work well, but the iterative version is more memory efficient for large numbers."
+    },
+    {
+        "role": "user",
+        "content": "What about using math.factorial()?"
+    },
+    {
+        "role": "assistant", 
+        "content": "Great point! Python's built-in `math.factorial()` is the most efficient option:\n\n```python\nimport math\n\nresult = math.factorial(5)  # 120\n```\n\nIt's optimized, handles edge cases, and is the recommended approach for production code. Use custom implementations mainly for learning or when you need specific behavior."
+    },
+    {
+        "role": "user",
+        "content": "What's the weather like in New York today?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather",
+        "call_id": "call_weather_123",
+        "arguments": "{\"location\": \"New York, NY\", \"units\": \"fahrenheit\"}"
+    },
+    {
+        "type": "function_call_output", 
+        "call_id": "call_weather_123",
+        "output": "{\"location\": \"New York, NY\", \"temperature\": 72, \"condition\": \"Partly Cloudy\", \"humidity\": 65, \"wind_speed\": 8, \"visibility\": 10, \"uv_index\": 6, \"feels_like\": 75}"
+    },
+    {
+        "role": "assistant",
+        "content": "The weather in New York today is quite pleasant! Here are the details:\n\n🌤️ **Partly Cloudy** - 72°F (feels like 75°F)\n💨 Wind: 8 mph\n💧 Humidity: 65%\n👁️ Visibility: 10 miles\n☀️ UV Index: 6 (moderate)\n\nIt's a nice day to be outside!"
+    },
+    {
+        "role": "user",
+        "content": "Can you also check the forecast for tomorrow and send me an email reminder?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather_forecast",
+        "call_id": "call_forecast_456",
+        "arguments": "{\"location\": \"New York, NY\", \"days\": 1}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_forecast_456", 
+        "output": "{\"location\": \"New York, NY\", \"forecast\": [{\"date\": \"2024-10-17\", \"high\": 68, \"low\": 58, \"condition\": \"Light Rain\", \"precipitation_chance\": 80, \"wind_speed\": 12}]}"
+    },
+    {
+        "type": "function_call",
+        "name": "send_email",
+        "call_id": "call_email_789",
+        "arguments": "{\"to\": \"user@example.com\", \"subject\": \"Weather Reminder: Bring an Umbrella Tomorrow!\", \"body\": \"Tomorrow's forecast for New York: Light rain expected with 80% chance of precipitation. High: 68°F, Low: 58°F. Don't forget your umbrella!\"}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_email_789",
+        "output": "{\"status\": \"sent\", \"message_id\": \"msg_12345\", \"delivered_at\": \"2024-10-16T20:45:30Z\"}"
+    }
+]
+
+with gr.Blocks(title="AI Context Visualization Demo") as demo:
+    gr.Markdown("# AI Context Component Demo")
+    gr.Markdown("Shows token visualization for OpenAI-style conversation messages")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            json_editor = gr.JSON(
+                value=initial_messages,
+                label="Raw Messages (Editable)",
+                show_label=True
+            )
+        
+        with gr.Column(scale=1):
+            context_viz = AIContext(
+                value=initial_messages, 
+                count_tokens_fn=count_tokens
+            )
+    
+    json_editor.change(
+        fn=lambda x: x,
+        inputs=[json_editor],
+        outputs=[context_viz]
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `AIContext`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list | dict | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">list of messages or dict containing messages. If a function is provided, the function will be called each time the app loads to set the initial value of this component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>count_tokens_fn</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Callable[[Any], int] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">function to count tokens in a message. If None, uses character count / 4 heuristic.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | I18nData | None
+```
+
+</td>
+<td align="left"><code>"AI Context"</code></td>
+<td align="left">the label for this component, displayed above the component if `show_label` is `True`.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise).</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise).</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">if True, will be rendered as interactive; if False, will be read-only.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | Literal["hidden"]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, ...] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the AIContext changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, passes the data through unchanged.
+- **As input:** Should return, messages list or dict containing messages.
+
+ ```python
+ def predict(
+     value: typing.Any
+ ) -> typing.Any:
+     return value
+ ```
+ 

src/backend/gradio_aicontext/__init__.py

@@ -0,0 +1,4 @@
+
+from .aicontext import AIContext
+
+__all__ = ['AIContext']

src/backend/gradio_aicontext/aicontext.py

@@ -0,0 +1,132 @@
+from __future__ import annotations
+
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
+
+from gradio.components.base import Component
+from gradio.events import Events
+from gradio.i18n import I18nData
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+class AIContext(Component):
+    """
+    Creates an AI context visualization component showing message stack with token counts.
+    """
+
+    EVENTS = [
+        Events.change,
+    ]
+
+    def __init__(
+        self,
+        value: list | dict | Callable | None = None,
+        *,
+        count_tokens_fn: Callable[[Any], int] | None = None,
+        label: str | I18nData | None = "AI Context",
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = False,
+        visible: bool | Literal["hidden"] = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+    ):
+        """
+        Parameters:
+            value: list of messages or dict containing messages. If a function is provided, the function will be called each time the app loads to set the initial value of this component.
+            count_tokens_fn: function to count tokens in a message. If None, uses character count / 4 heuristic.
+            label: the label for this component, displayed above the component if `show_label` is `True`.
+            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise).
+            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise).
+            show_label: if True, will display label.
+            scale: relative size compared to adjacent Components.
+            min_width: minimum pixel width.
+            interactive: if True, will be rendered as interactive; if False, will be read-only.
+            visible: If False, component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM.
+            render: If False, component will not render be rendered in the Blocks context.
+            key: in a gr.render, Components with the same key across re-renders are treated as the same component.
+        """
+        self.count_tokens_fn = count_tokens_fn
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=False,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            value=value,
+            render=render,
+            key=key,
+        )
+
+    def preprocess(self, payload: Any) -> Any:
+        """
+        Parameters:
+            payload: the data from the frontend.
+        Returns:
+            Passes the data through unchanged.
+        """
+        return payload
+
+    def postprocess(self, value: Any) -> dict[str, Any] | None:
+        """
+        Parameters:
+            value: messages list or dict containing messages.
+        Returns:
+            The formatted data for the frontend with token counts.
+        """
+        if value is None:
+            return {"messages": [], "tokens_count": []}
+
+        messages = []
+        if isinstance(value, list):
+            messages = value
+        elif isinstance(value, dict) and "messages" in value:
+            messages = value["messages"]
+        else:
+            messages = [value] if value else []
+
+        tokens_count = [self._count_tokens(msg) for msg in messages]
+
+        return {"messages": messages, "tokens_count": tokens_count}
+
+    def _count_tokens(self, message: dict) -> int:
+        """Count tokens in a message using the configured function or default heuristic."""
+        if self.count_tokens_fn:
+            return self.count_tokens_fn(message)
+
+        import json
+
+        content = json.dumps(message) if isinstance(message, dict) else str(message)
+        return max(1, len(content) // 4)
+
+    def api_info(self) -> dict[str, Any]:
+        return {"type": "object"}
+
+    def example_payload(self) -> Any:
+        return {
+            "messages": [
+                {"role": "user", "content": "Hello!"},
+                {"role": "assistant", "content": "Hi there!"},
+            ]
+        }
+
+    def example_value(self) -> Any:
+        return {
+            "messages": [
+                {"role": "user", "content": "Hello!"},
+                {"role": "assistant", "content": "Hi there!"},
+            ]
+        }

src/backend/gradio_aicontext/templates/component/style.css

@@ -0,0 +1 @@
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-igqdol.svelte-igqdol{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-igqdol.svelte-igqdol{border-top-left-radius:0}label.float.svelte-igqdol.svelte-igqdol{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-igqdol.svelte-igqdol:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-igqdol.svelte-igqdol{display:none}span.svelte-igqdol.svelte-igqdol{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-igqdol.svelte-igqdol{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-igqdol.svelte-igqdol{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-igqdol span.svelte-igqdol{margin-left:var(--size-2);margin-right:0}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}button.svelte-y0enk4{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid var(--border-color);padding:var(--spacing-xxs)}button.svelte-y0enk4:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-y0enk4{opacity:.5;box-shadow:none}button[disabled].svelte-y0enk4:hover{cursor:not-allowed}.padded.svelte-y0enk4{background:var(--bg-color)}button.svelte-y0enk4:hover,button.highlight.svelte-y0enk4{cursor:pointer;color:var(--color-accent)}.padded.svelte-y0enk4:hover{color:var(--block-label-text-color)}span.svelte-y0enk4{padding:0 1px;font-size:10px}div.svelte-y0enk4{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-y0enk4{width:10px;height:10px}.small.svelte-y0enk4{width:14px;height:14px}.medium.svelte-y0enk4{width:20px;height:20px}.large.svelte-y0enk4{width:22px;height:22px}.pending.svelte-y0enk4{animation:svelte-y0enk4-flash .5s infinite}@keyframes svelte-y0enk4-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-y0enk4{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-3);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);overflow:hidden;pointer-events:none}.wrap.center.svelte-vusapu.svelte-vusapu{top:0;right:0;left:0}.wrap.default.svelte-vusapu.svelte-vusapu{top:0;right:0;bottom:0;left:0}.hide.svelte-vusapu.svelte-vusapu{opacity:0;pointer-events:none}.generating.svelte-vusapu.svelte-vusapu{animation:svelte-vusapu-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-vusapu-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-vusapu.svelte-vusapu{background:none}@keyframes svelte-vusapu-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-vusapu-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-vusapu.svelte-vusapu{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-vusapu.svelte-vusapu{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-vusapu.svelte-vusapu{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-vusapu.svelte-vusapu{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-vusapu.svelte-vusapu{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-vusapu.svelte-vusapu{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-vusapu.svelte-vusapu{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.validation-error.svelte-vusapu.svelte-vusapu{pointer-events:auto;color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font);position:absolute;background:var(--error-background-fill);top:0;right:0;z-index:var(--layer-3);padding:var(--size-1) var(--size-2);font-size:var(--text-md);text-align:center;border-bottom-left-radius:var(--radius-sm);border-bottom:1px solid var(--error-border-color);border-left:1px solid var(--error-border-color);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl)}.minimal.svelte-vusapu.svelte-vusapu{pointer-events:none}.minimal.svelte-vusapu .progress-text.svelte-vusapu{background:var(--block-background-fill)}.border.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary)}.clear-status.svelte-vusapu.svelte-vusapu{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-je2isz{--toast-top:var(--size-4);display:flex;position:fixed;top:calc(var(--toast-top) + var(--size-4));right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-je2isz{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.bar.svelte-1f4spu{width:100%;margin:8px 0;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;transition:all .2s ease;cursor:default}.content.svelte-1f4spu{display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}.type.svelte-1f4spu{font-size:12px;font-weight:700;color:#000}.func-name.svelte-1f4spu{color:#000;font-size:10px;margin:0}.tokens.svelte-1f4spu{font-size:10px;opacity:.9;font-weight:500;color:#000}.context-container.svelte-1mw96hn{display:flex;width:100%;flex-direction:column;background:var(--background-fill-secondary);border-radius:var(--block-radius);box-shadow:var(--shadow-drop);height:100%}.empty-state.svelte-1mw96hn{height:100%;width:100%;display:flex;align-items:center;justify-content:center;color:var(--neutral-500);font-size:14px;background:var(--background-fill-primary);border:1px solid var(--border-color-primary);border-radius:12px;padding:40px}.header.svelte-1mw96hn{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:2px solid var(--border-color-primary);flex-wrap:wrap;flex-shrink:0}.title.svelte-1mw96hn{margin:0;color:var(--body-text-color);font-size:14px;font-weight:600}.count-badge.svelte-1mw96hn{background:var(--color-accent);color:#fff;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:600}.token-count.svelte-1mw96hn{margin:0;color:var(--body-text-color);font-size:12px;font-weight:400}.bars-container.svelte-1mw96hn{flex:1;overflow-y:auto;padding:0 16px 16px;min-height:0}

src/backend/gradio_aicontext/templates/example/index.js

@@ -0,0 +1,127 @@
+const {
+  SvelteComponent: g,
+  add_iframe_resize_listener: v,
+  add_render_callback: y,
+  append_hydration: b,
+  attr: m,
+  binding_callbacks: w,
+  children: z,
+  claim_element: S,
+  claim_text: k,
+  detach: d,
+  element: p,
+  init: E,
+  insert_hydration: q,
+  noop: u,
+  safe_not_equal: C,
+  set_data: D,
+  text: I,
+  toggle_class: r
+} = window.__gradio__svelte__internal, { onMount: M } = window.__gradio__svelte__internal;
+function P(t) {
+  let e, l = o(
+    /*value*/
+    t[0]
+  ) + "", a, _;
+  return {
+    c() {
+      e = p("div"), a = I(l), this.h();
+    },
+    l(i) {
+      e = S(i, "DIV", { class: !0 });
+      var n = z(e);
+      a = k(n, l), n.forEach(d), this.h();
+    },
+    h() {
+      m(e, "class", "svelte-84cxb8"), y(() => (
+        /*div_elementresize_handler*/
+        t[5].call(e)
+      )), r(
+        e,
+        "table",
+        /*type*/
+        t[1] === "table"
+      ), r(
+        e,
+        "gallery",
+        /*type*/
+        t[1] === "gallery"
+      ), r(
+        e,
+        "selected",
+        /*selected*/
+        t[2]
+      );
+    },
+    m(i, n) {
+      q(i, e, n), b(e, a), _ = v(
+        e,
+        /*div_elementresize_handler*/
+        t[5].bind(e)
+      ), t[6](e);
+    },
+    p(i, [n]) {
+      n & /*value*/
+      1 && l !== (l = o(
+        /*value*/
+        i[0]
+      ) + "") && D(a, l), n & /*type*/
+      2 && r(
+        e,
+        "table",
+        /*type*/
+        i[1] === "table"
+      ), n & /*type*/
+      2 && r(
+        e,
+        "gallery",
+        /*type*/
+        i[1] === "gallery"
+      ), n & /*selected*/
+      4 && r(
+        e,
+        "selected",
+        /*selected*/
+        i[2]
+      );
+    },
+    i: u,
+    o: u,
+    d(i) {
+      i && d(e), _(), t[6](null);
+    }
+  };
+}
+function V(t, e) {
+  t.style.setProperty("--local-text-width", `${e && e < 150 ? e : 200}px`), t.style.whiteSpace = "unset";
+}
+function o(t, e = 60) {
+  if (!t) return "";
+  const l = String(t);
+  return l.length <= e ? l : l.slice(0, e) + "...";
+}
+function W(t, e, l) {
+  let { value: a } = e, { type: _ } = e, { selected: i = !1 } = e, n, c;
+  M(() => {
+    V(c, n);
+  });
+  function f() {
+    n = this.clientWidth, l(3, n);
+  }
+  function h(s) {
+    w[s ? "unshift" : "push"](() => {
+      c = s, l(4, c);
+    });
+  }
+  return t.$$set = (s) => {
+    "value" in s && l(0, a = s.value), "type" in s && l(1, _ = s.type), "selected" in s && l(2, i = s.selected);
+  }, [a, _, i, n, c, f, h];
+}
+class j extends g {
+  constructor(e) {
+    super(), E(this, e, W, P, C, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  j as default
+};

src/backend/gradio_aicontext/templates/example/style.css

@@ -0,0 +1 @@
+.gallery.svelte-84cxb8{padding:var(--size-1) var(--size-2)}div.svelte-84cxb8{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}

src/demo/app.py

@@ -0,0 +1,106 @@
+import gradio as gr
+from gradio_aicontext import AIContext
+import json
+import tiktoken
+
+
+def count_tokens(message: dict) -> int:
+    encoding = tiktoken.encoding_for_model("gpt-4")
+    return encoding.encode(json.dumps([message])).__len__()
+
+
+initial_messages = [
+    {
+        "role": "system",
+        "content": "You are a helpful AI assistant skilled in Python programming and data analysis."
+    },
+    {
+        "role": "user", 
+        "content": "Can you help me write a function to calculate the factorial of a number?"
+    },
+    {
+        "role": "assistant",
+        "content": "I'll help you create a factorial function. Here are two approaches:\n\n```python\n# Recursive approach\ndef factorial_recursive(n):\n    if n <= 1:\n        return 1\n    return n * factorial_recursive(n - 1)\n\n# Iterative approach  \ndef factorial_iterative(n):\n    result = 1\n    for i in range(1, n + 1):\n        result *= i\n    return result\n\n# Example usage\nprint(factorial_recursive(5))  # 120\nprint(factorial_iterative(5))  # 120\n```\n\nBoth functions work well, but the iterative version is more memory efficient for large numbers."
+    },
+    {
+        "role": "user",
+        "content": "What about using math.factorial()?"
+    },
+    {
+        "role": "assistant", 
+        "content": "Great point! Python's built-in `math.factorial()` is the most efficient option:\n\n```python\nimport math\n\nresult = math.factorial(5)  # 120\n```\n\nIt's optimized, handles edge cases, and is the recommended approach for production code. Use custom implementations mainly for learning or when you need specific behavior."
+    },
+    {
+        "role": "user",
+        "content": "What's the weather like in New York today?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather",
+        "call_id": "call_weather_123",
+        "arguments": "{\"location\": \"New York, NY\", \"units\": \"fahrenheit\"}"
+    },
+    {
+        "type": "function_call_output", 
+        "call_id": "call_weather_123",
+        "output": "{\"location\": \"New York, NY\", \"temperature\": 72, \"condition\": \"Partly Cloudy\", \"humidity\": 65, \"wind_speed\": 8, \"visibility\": 10, \"uv_index\": 6, \"feels_like\": 75}"
+    },
+    {
+        "role": "assistant",
+        "content": "The weather in New York today is quite pleasant! Here are the details:\n\n🌤️ **Partly Cloudy** - 72°F (feels like 75°F)\n💨 Wind: 8 mph\n💧 Humidity: 65%\n👁️ Visibility: 10 miles\n☀️ UV Index: 6 (moderate)\n\nIt's a nice day to be outside!"
+    },
+    {
+        "role": "user",
+        "content": "Can you also check the forecast for tomorrow and send me an email reminder?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather_forecast",
+        "call_id": "call_forecast_456",
+        "arguments": "{\"location\": \"New York, NY\", \"days\": 1}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_forecast_456", 
+        "output": "{\"location\": \"New York, NY\", \"forecast\": [{\"date\": \"2024-10-17\", \"high\": 68, \"low\": 58, \"condition\": \"Light Rain\", \"precipitation_chance\": 80, \"wind_speed\": 12}]}"
+    },
+    {
+        "type": "function_call",
+        "name": "send_email",
+        "call_id": "call_email_789",
+        "arguments": "{\"to\": \"user@example.com\", \"subject\": \"Weather Reminder: Bring an Umbrella Tomorrow!\", \"body\": \"Tomorrow's forecast for New York: Light rain expected with 80% chance of precipitation. High: 68°F, Low: 58°F. Don't forget your umbrella!\"}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_email_789",
+        "output": "{\"status\": \"sent\", \"message_id\": \"msg_12345\", \"delivered_at\": \"2024-10-16T20:45:30Z\"}"
+    }
+]
+
+with gr.Blocks(title="AI Context Visualization Demo") as demo:
+    gr.Markdown("# AI Context Component Demo")
+    gr.Markdown("Shows token visualization for OpenAI-style conversation messages")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            json_editor = gr.JSON(
+                value=initial_messages,
+                label="Raw Messages (Editable)",
+                show_label=True
+            )
+        
+        with gr.Column(scale=1):
+            context_viz = AIContext(
+                value=initial_messages, 
+                count_tokens_fn=count_tokens
+            )
+    
+    json_editor.change(
+        fn=lambda x: x,
+        inputs=[json_editor],
+        outputs=[context_viz]
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/space.py

@@ -0,0 +1,228 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'AIContext': {'description': 'Creates an AI context visualization component showing message stack with token counts.', 'members': {'__init__': {'value': {'type': 'list | dict | Callable | None', 'default': 'None', 'description': 'list of messages or dict containing messages. If a function is provided, the function will be called each time the app loads to set the initial value of this component.'}, 'count_tokens_fn': {'type': 'Callable[[Any], int] | None', 'default': 'None', 'description': 'function to count tokens in a message. If None, uses character count / 4 heuristic.'}, 'label': {'type': 'str | I18nData | None', 'default': '"AI Context"', 'description': 'the label for this component, displayed above the component if `show_label` is `True`.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise).'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': 'Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise).'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width.'}, 'interactive': {'type': 'bool | None', 'default': 'False', 'description': 'if True, will be rendered as interactive; if False, will be read-only.'}, 'visible': {'type': 'bool | Literal["hidden"]', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context.'}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': 'in a gr.render, Components with the same key across re-renders are treated as the same component.'}}, 'postprocess': {'value': {'type': 'typing.Any', 'description': 'messages list or dict containing messages.'}}, 'preprocess': {'return': {'type': 'typing.Any', 'description': 'Passes the data through unchanged.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the AIContext changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'AIContext': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_aicontext`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Custom gradio component to visualize your ai context by colours and tokens' size.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_aicontext
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_aicontext import AIContext
+import json
+import tiktoken
+
+
+def count_tokens(message: dict) -> int:
+    encoding = tiktoken.encoding_for_model("gpt-4")
+    return encoding.encode(json.dumps([message])).__len__()
+
+
+initial_messages = [
+    {
+        "role": "system",
+        "content": "You are a helpful AI assistant skilled in Python programming and data analysis."
+    },
+    {
+        "role": "user", 
+        "content": "Can you help me write a function to calculate the factorial of a number?"
+    },
+    {
+        "role": "assistant",
+        "content": "I'll help you create a factorial function. Here are two approaches:\n\n```python\n# Recursive approach\ndef factorial_recursive(n):\n    if n <= 1:\n        return 1\n    return n * factorial_recursive(n - 1)\n\n# Iterative approach  \ndef factorial_iterative(n):\n    result = 1\n    for i in range(1, n + 1):\n        result *= i\n    return result\n\n# Example usage\nprint(factorial_recursive(5))  # 120\nprint(factorial_iterative(5))  # 120\n```\n\nBoth functions work well, but the iterative version is more memory efficient for large numbers."
+    },
+    {
+        "role": "user",
+        "content": "What about using math.factorial()?"
+    },
+    {
+        "role": "assistant", 
+        "content": "Great point! Python's built-in `math.factorial()` is the most efficient option:\n\n```python\nimport math\n\nresult = math.factorial(5)  # 120\n```\n\nIt's optimized, handles edge cases, and is the recommended approach for production code. Use custom implementations mainly for learning or when you need specific behavior."
+    },
+    {
+        "role": "user",
+        "content": "What's the weather like in New York today?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather",
+        "call_id": "call_weather_123",
+        "arguments": "{\"location\": \"New York, NY\", \"units\": \"fahrenheit\"}"
+    },
+    {
+        "type": "function_call_output", 
+        "call_id": "call_weather_123",
+        "output": "{\"location\": \"New York, NY\", \"temperature\": 72, \"condition\": \"Partly Cloudy\", \"humidity\": 65, \"wind_speed\": 8, \"visibility\": 10, \"uv_index\": 6, \"feels_like\": 75}"
+    },
+    {
+        "role": "assistant",
+        "content": "The weather in New York today is quite pleasant! Here are the details:\n\n🌤️ **Partly Cloudy** - 72°F (feels like 75°F)\n💨 Wind: 8 mph\n💧 Humidity: 65%\n👁️ Visibility: 10 miles\n☀️ UV Index: 6 (moderate)\n\nIt's a nice day to be outside!"
+    },
+    {
+        "role": "user",
+        "content": "Can you also check the forecast for tomorrow and send me an email reminder?"
+    },
+    {
+        "type": "function_call",
+        "name": "get_weather_forecast",
+        "call_id": "call_forecast_456",
+        "arguments": "{\"location\": \"New York, NY\", \"days\": 1}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_forecast_456", 
+        "output": "{\"location\": \"New York, NY\", \"forecast\": [{\"date\": \"2024-10-17\", \"high\": 68, \"low\": 58, \"condition\": \"Light Rain\", \"precipitation_chance\": 80, \"wind_speed\": 12}]}"
+    },
+    {
+        "type": "function_call",
+        "name": "send_email",
+        "call_id": "call_email_789",
+        "arguments": "{\"to\": \"user@example.com\", \"subject\": \"Weather Reminder: Bring an Umbrella Tomorrow!\", \"body\": \"Tomorrow's forecast for New York: Light rain expected with 80% chance of precipitation. High: 68°F, Low: 58°F. Don't forget your umbrella!\"}"
+    },
+    {
+        "type": "function_call_output",
+        "call_id": "call_email_789",
+        "output": "{\"status\": \"sent\", \"message_id\": \"msg_12345\", \"delivered_at\": \"2024-10-16T20:45:30Z\"}"
+    }
+]
+
+with gr.Blocks(title="AI Context Visualization Demo") as demo:
+    gr.Markdown("# AI Context Component Demo")
+    gr.Markdown("Shows token visualization for OpenAI-style conversation messages")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            json_editor = gr.JSON(
+                value=initial_messages,
+                label="Raw Messages (Editable)",
+                show_label=True
+            )
+        
+        with gr.Column(scale=1):
+            context_viz = AIContext(
+                value=initial_messages, 
+                count_tokens_fn=count_tokens
+            )
+    
+    json_editor.change(
+        fn=lambda x: x,
+        inputs=[json_editor],
+        outputs=[context_viz]
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `AIContext`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["AIContext"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["AIContext"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes the data through unchanged.
+- **As output:** Should return, messages list or dict containing messages.
+
+ ```python
+def predict(
+    value: typing.Any
+) -> typing.Any:
+    return value
+```
+""", elem_classes=["md-custom", "AIContext-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          AIContext: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Bar.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    export let role: string;
+    export let type: string = "";
+    export let name: string = "";
+    export let tokens: number;
+    export let height: number;
+
+    const colors: Record<string, string> = {
+        "system": "#BEF1FE",
+        "user": "#CFFFD9", 
+        "assistant": "#FEFEB1",
+        "function_call": "#E9D8FF",
+        "function_result": "#E9D8FF"
+    };
+
+    $: color = type === "function_call" ? colors["function_call"] :
+               type === "function_call_output" ? colors["function_result"] :
+               role === "system" ? colors["system"] :
+               role === "user" ? colors["user"] :
+               colors["assistant"];
+
+    $: displayType = type === "function_call" ? name || "unknown" :
+                     type === "function_call_output" ? "result" :
+                     role;
+
+    let hovered = false;
+</script>
+
+<div 
+    class="bar"
+    style:background={color}
+    style:height="{height}px"
+    style:border="1px solid {color}44"
+    style:transform={hovered ? "scale(1.02)" : "scale(1)"}
+    on:mouseenter={() => hovered = true}
+    on:mouseleave={() => hovered = false}
+>
+    <div class="content">
+        {#if type === "function_call"}
+            <pre class="func-name">{displayType}</pre>
+        {:else}
+            <div class="type">{displayType}</div>
+        {/if}
+        <div class="tokens">/ {tokens} tokens</div>
+    </div>
+</div>
+
+<style>
+    .bar {
+        width: 100%;
+        margin: 8px 0;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        font-weight: 600;
+        transition: all 0.2s ease;
+        cursor: default;
+    }
+
+    .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        line-height: 1.2;
+    }
+
+    .type {
+        font-size: 12px;
+        font-weight: 700;
+        color: black;
+    }
+
+    .func-name {
+        color: black;
+        font-size: 10px;
+        margin: 0;
+    }
+
+    .tokens {
+        font-size: 10px;
+        opacity: 0.9;
+        font-weight: 500;
+        color: black;
+    }
+</style>

src/frontend/Example.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	export let value: string | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+
+	let size: number;
+	let el: HTMLDivElement;
+
+	function set_styles(element: HTMLElement, el_width: number): void {
+		element.style.setProperty(
+			"--local-text-width",
+			`${el_width && el_width < 150 ? el_width : 200}px`
+		);
+		element.style.whiteSpace = "unset";
+	}
+
+	function truncate_text(text: string | null, max_length = 60): string {
+		if (!text) return "";
+		const str = String(text);
+		if (str.length <= max_length) return str;
+		return str.slice(0, max_length) + "...";
+	}
+
+	onMount(() => {
+		set_styles(el, size);
+	});
+</script>
+
+<div
+	bind:clientWidth={size}
+	bind:this={el}
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{truncate_text(value)}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+
+	div {
+		overflow: hidden;
+		min-width: var(--local-text-width);
+
+		white-space: nowrap;
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,146 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+  import { Block } from "@gradio/atoms";
+  import type { LoadingStatus } from "@gradio/statustracker";
+  import { StatusTracker } from "@gradio/statustracker";
+  import type { Gradio } from "@gradio/utils";
+  import Bar from "./Bar.svelte";
+
+  export let gradio: Gradio<{
+    change: never;
+    submit: never;
+    input: never;
+    clear_status: LoadingStatus;
+  }>;
+  export let elem_id = "";
+  export let elem_classes: string[] = [];
+  export let visible: boolean | "hidden" = true;
+  export let value: any = null;
+  export let scale: number | null = null;
+  export let min_width: number | undefined = undefined;
+  export let loading_status: LoadingStatus | undefined = undefined;
+  export let interactive: boolean = false;
+
+  $: messages = value?.messages || [];
+  $: tokens = value?.tokens_count || [];
+  $: totalTokens = tokens.reduce((sum: number, t: number) => sum + t, 0);
+  $: heights = tokens.map((count: number) =>
+    Math.min(Math.max(20, count * 0.2), 400)
+  );
+
+  function handle_change(): void {
+    gradio.dispatch("change");
+  }
+
+  $: value, handle_change();
+</script>
+
+<Block
+  {visible}
+  {elem_id}
+  {elem_classes}
+  {scale}
+  {min_width}
+  allow_overflow={false}
+  padding={false}
+>
+  {#if loading_status}
+    <StatusTracker
+      autoscroll={gradio.autoscroll}
+      i18n={gradio.i18n}
+      {...loading_status}
+      on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+    />
+  {/if}
+
+  <div class="context-container">
+    {#if messages.length === 0}
+      <div class="empty-state">No messages yet, start chatting!</div>
+    {:else}
+      <div class="header">
+        <h4 class="title">📚 Context Stack</h4>
+        <span class="count-badge">{messages.length}</span>
+        <span class="token-count">{totalTokens} tokens</span>
+      </div>
+      <div class="bars-container">
+        {#each messages as message, i}
+          <Bar
+            role={message.role || "unknown"}
+            type={message.type || ""}
+            name={message.name || ""}
+            tokens={tokens[i]}
+            height={heights[i]}
+          />
+        {/each}
+      </div>
+    {/if}
+  </div>
+</Block>
+
+<style>
+  .context-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    background: var(--background-fill-secondary);
+    border-radius: var(--block-radius);
+    box-shadow: var(--shadow-drop);
+    height: 100%;
+  }
+
+  .empty-state {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--neutral-500);
+    font-size: 14px;
+    background: var(--background-fill-primary);
+    border: 1px solid var(--border-color-primary);
+    border-radius: 12px;
+    padding: 40px;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px 16px 12px 16px;
+    border-bottom: 2px solid var(--border-color-primary);
+    flex-wrap: wrap;
+    flex-shrink: 0;
+  }
+
+  .title {
+    margin: 0;
+    color: var(--body-text-color);
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .count-badge {
+    background: var(--color-accent);
+    color: white;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 10px;
+    font-weight: 600;
+  }
+
+  .token-count {
+    margin: 0;
+    color: var(--body-text-color);
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  .bars-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 16px 16px 16px;
+    min-height: 0;
+  }
+</style>

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "gradio_aicontext",
+  "version": "0.3.30",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.18.1",
+    "@gradio/icons": "0.14.0",
+    "@gradio/statustracker": "0.11.1",
+    "@gradio/utils": "0.10.2"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.14.0"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/simpletextbox"
+  }
+}

src/frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"verbatimModuleSyntax": true
+	},
+	"exclude": ["node_modules", "dist", "./gradio.config.js"]
+}

src/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "aicontext",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

src/pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_aicontext"
+version = "0.0.1"
+description = "Custom gradio component to visualize your ai context by colours and tokens' size."
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = ["gradio-custom-component", "gradio-template-SimpleTextbox"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_aicontext/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_aicontext"]