gradio-themer 0.1.0__py3-none-any.whl

gradio_themer/templates/component/style.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";@import"https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.css";@import"https://cdn.jsdelivr.net/npm/tailwindcss@3.4.4/base.min.css";.gradio-component{width:100%!important;height:100%!important;min-height:100vh;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body,html{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.gradio-component *{box-sizing:border-box}[data-theme]{transition:all .2s ease-in-out}html[data-theme],body[data-theme],.gradio-container[data-theme],.app[data-theme],#root[data-theme],.gradio-app,.gradio-interface,main{background-color:hsl(var(--b1))!important;color:hsl(var(--bc))!important;transition:background-color .2s ease,color .2s ease}.gradio-container,.gradio-app,.gradio-interface,main,#root{background-color:hsl(var(--b1))!important}.gradio-container *{transition:background-color .2s ease,color .2s ease,border-color .2s ease}.gradio-component .input,.gradio-component .textarea,.gradio-component .select{color:inherit!important;background-color:inherit!important}.gradio-component .btn{border:none!important;outline:none!important}.color-picker{width:40px;height:40px;border-radius:.5rem;border:2px solid hsl(var(--bc) / .2);cursor:pointer;transition:all .3s ease;position:relative}.color-picker:hover{border-color:hsl(var(--bc) / .5);transform:scale(1.05);box-shadow:0 4px 12px #00000026}.color-picker.ring-4{box-shadow:0 0 0 4px hsl(var(--p)),0 0 0 6px #ffffff80;transform:scale(1.1)}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;padding:1rem}.theme-grid-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;padding:.5rem}.theme-card{border-radius:1rem;padding:0;margin:.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative;min-height:120px;display:flex;align-items:center;justify-content:center}.theme-card-compact{border-radius:.75rem;padding:0;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative;min-height:80px;display:flex;align-items:center;justify-content:center;font-family:inherit}.btn:hover{transform:scale(1.05);transition:transform .2s ease}.btn:active{transform:scale(.98)}.theme-selector-buttons .btn{margin:2px;min-width:60px}@media (max-width: 640px){.theme-selector-buttons .btn{margin:1px;min-width:50px;font-size:.625rem}}.theme-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #00000026}.theme-card-compact:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000001a}.theme-card.border-primary{box-shadow:0 0 0 3px hsl(var(--p) / .3),0 8px 25px #00000026}.theme-card.scale-105{transform:scale(1.02) translateY(-2px)}*{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.gradio-component{color:hsl(var(--bc));background-color:hsl(var(--b1))}*,*:before,*:after{box-sizing:border-box}[data-theme]{color-scheme:light}[data-theme=dark]{color-scheme:dark}.textarea,.input,.select{background-color:hsl(var(--b1))!important;color:hsl(var(--bc))!important;border-color:hsl(var(--b3))!important}.textarea::-moz-placeholder,.input::-moz-placeholder{color:hsl(var(--bc) / .6)!important}.textarea::placeholder,.input::placeholder{color:hsl(var(--bc) / .6)!important}.card{background-color:hsl(var(--b2));color:hsl(var(--bc))}input,textarea,select{color:#1f2937!important;background-color:#fff!important;border:1px solid #d1d5db;border-radius:.375rem;padding:.5rem;font-family:inherit}input::-moz-placeholder,textarea::-moz-placeholder,select::-moz-placeholder{color:#9ca3af!important}input::placeholder,textarea::placeholder,select::placeholder{color:#9ca3af!important}.dark input,.dark textarea,.dark select{color:#f9fafb!important;background-color:#374151!important;border-color:#4b5563}.dark input::-moz-placeholder,.dark textarea::-moz-placeholder,.dark select::-moz-placeholder{color:#9ca3af!important}.dark input::placeholder,.dark textarea::placeholder,.dark select::placeholder{color:#9ca3af!important}button{font-family:inherit;cursor:pointer}.gradio-component,.gradio-component *{color:inherit!important}.textarea{color:#1f2937!important;background-color:#fff!important}.textarea::-moz-placeholder{color:#9ca3af!important}.textarea::placeholder{color:#9ca3af!important}.textarea:focus{color:#1f2937!important;background-color:#fff!important}.btn,.card,.card-title{color:inherit!important}input,select,textarea{color:#1f2937!important;background-color:#fff!important}input::-moz-placeholder,select::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af!important}input::placeholder,select::placeholder,textarea::placeholder{color:#9ca3af!important}.tabs .tab{transition:all .2s ease}.tabs .tab-active{font-weight:600}.sticky{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.badge{font-weight:500}.font-inter{font-family:Inter,sans-serif}.form-control .select{font-weight:500}.steps .step{transition:all .3s ease}.steps .step-primary{color:hsl(var(--pc))}.card:hover{transform:translateY(-2px);transition:transform .2s ease}.mockup-code{border-radius:.75rem}.mockup-code pre{font-family:JetBrains Mono,Fira Code,Consolas,monospace}.table{border-radius:.75rem;overflow:hidden}.btn:hover{transform:translateY(-1px);transition:transform .2s ease}.progress{border-radius:9999px;height:.75rem}.alert{border-radius:.75rem;font-weight:500}.stats{border-radius:1rem}.stat-title{font-weight:500;opacity:.8}.stat-value{font-weight:700}.checkbox{border-radius:.375rem}@media (max-width: 768px){.theme-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;padding:.5rem}.theme-card{margin:.25rem;min-height:100px}}@keyframes theme-select{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1.02)}}.theme-card.border-primary{animation:theme-select .3s ease-out}.btn:disabled{opacity:.6;cursor:not-allowed}html{scroll-behavior:smooth}.theme-card:focus{outline:2px solid hsl(var(--p));outline-offset:2px}.color-picker:focus{outline:2px solid hsl(var(--p));outline-offset:2px}

gradio_themer/templates/example/index.js

@@ -0,0 +1,103 @@
+const {
+  SvelteComponent: f,
+  append_hydration: r,
+  attr: u,
+  children: o,
+  claim_element: h,
+  claim_text: g,
+  detach: d,
+  element: v,
+  init: m,
+  insert_hydration: y,
+  noop: _,
+  safe_not_equal: b,
+  set_data: w,
+  text: E,
+  toggle_class: s
+} = window.__gradio__svelte__internal;
+function q(a) {
+  let e, n;
+  return {
+    c() {
+      e = v("div"), n = E(
+        /*value*/
+        a[0]
+      ), this.h();
+    },
+    l(t) {
+      e = h(t, "DIV", { class: !0 });
+      var l = o(e);
+      n = g(
+        l,
+        /*value*/
+        a[0]
+      ), l.forEach(d), this.h();
+    },
+    h() {
+      u(e, "class", "svelte-1gecy8w"), s(
+        e,
+        "table",
+        /*type*/
+        a[1] === "table"
+      ), s(
+        e,
+        "gallery",
+        /*type*/
+        a[1] === "gallery"
+      ), s(
+        e,
+        "selected",
+        /*selected*/
+        a[2]
+      );
+    },
+    m(t, l) {
+      y(t, e, l), r(e, n);
+    },
+    p(t, [l]) {
+      l & /*value*/
+      1 && w(
+        n,
+        /*value*/
+        t[0]
+      ), l & /*type*/
+      2 && s(
+        e,
+        "table",
+        /*type*/
+        t[1] === "table"
+      ), l & /*type*/
+      2 && s(
+        e,
+        "gallery",
+        /*type*/
+        t[1] === "gallery"
+      ), l & /*selected*/
+      4 && s(
+        e,
+        "selected",
+        /*selected*/
+        t[2]
+      );
+    },
+    i: _,
+    o: _,
+    d(t) {
+      t && d(e);
+    }
+  };
+}
+function C(a, e, n) {
+  let { value: t } = e, { type: l } = e, { selected: c = !1 } = e;
+  return a.$$set = (i) => {
+    "value" in i && n(0, t = i.value), "type" in i && n(1, l = i.type), "selected" in i && n(2, c = i.selected);
+  }, [t, l, c];
+}
+class D extends f {
+  constructor(e) {
+    super(), m(this, e, C, q, b, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  D as default
+};

gradio_themer/templates/example/style.css

@@ -0,0 +1 @@
+.gallery.svelte-1gecy8w{padding:var(--size-1) var(--size-2)}

gradio_themer-0.1.0.dist-info/METADATA

@@ -0,0 +1,405 @@
+Metadata-Version: 2.4
+Name: gradio_themer
+Version: 0.1.0
+Summary: User-configurable themes for Gradio applications - unlimited custom themes via JSON configuration
+Author-email: Eldar Syzdykov <eldar@utexas.edu>
+License-Expression: MIT
+Keywords: gradio-custom-component,gradio-styling,gradio-themes,ui-themes,user-configurable
+Classifier: Development Status :: 3 - Alpha
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3 :: Only
+Classifier: Programming Language :: Python :: 3.8
+Classifier: Programming Language :: Python :: 3.9
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Topic :: Scientific/Engineering
+Classifier: Topic :: Scientific/Engineering :: Artificial Intelligence
+Classifier: Topic :: Scientific/Engineering :: Visualization
+Requires-Python: >=3.8
+Requires-Dist: gradio<6.0,>=4.0
+Provides-Extra: dev
+Requires-Dist: build; extra == 'dev'
+Requires-Dist: twine; extra == 'dev'
+Description-Content-Type: text/markdown
+
+
+# `gradio_themer`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange">  
+
+User-configurable themes for Gradio applications - unlimited custom themes via JSON configuration
+
+## Installation
+
+```bash
+pip install gradio_themer
+```
+
+## Usage
+
+```python
+"""
+Gradio Themer - MCP Server Entry Point
+Clean entry point that exposes only the 4 intended MCP tools.
+"""
+
+import os
+import gradio as gr
+
+# CRITICAL: Enable MCP server mode (as per GRADIO_MCP_HF_SPACES_GUIDE.md)
+os.environ["GRADIO_MCP_SERVER"] = "True"
+
+# Import the 4 MCP tools - these will be exposed by the MCP server
+from mcp_tools import (
+    setup_package,
+    generate_theme,
+    convert_css_to_theme,
+    generate_app_code,
+)
+
+if __name__ == "__main__":
+    try:
+        import page
+
+        # Add hidden MCP endpoints to the existing demo
+        with page.demo:
+            # Add hidden MCP tool endpoints (invisible to users, visible to MCP)
+
+            # Hidden setup_package endpoint
+            setup_btn = gr.Button("Setup Package", visible=False)
+            setup_output = gr.JSON(visible=False)
+            setup_btn.click(
+                fn=setup_package, outputs=setup_output, api_name="setup_package"
+            )
+
+            # Hidden generate_theme endpoint
+            theme_name_input = gr.Textbox(visible=False)
+            primary_color_input = gr.Textbox(visible=False, value="#3b82f6")
+            theme_style_input = gr.Textbox(visible=False, value="light")
+            accent_color_input = gr.Textbox(visible=False, value="")
+            generate_theme_btn = gr.Button("Generate Theme", visible=False)
+            generate_theme_output = gr.JSON(visible=False)
+            generate_theme_btn.click(
+                fn=generate_theme,
+                inputs=[
+                    theme_name_input,
+                    primary_color_input,
+                    theme_style_input,
+                    accent_color_input,
+                ],
+                outputs=generate_theme_output,
+                api_name="generate_theme",
+            )
+
+            # Hidden convert_css_to_theme endpoint
+            css_input = gr.Textbox(visible=False)
+            convert_theme_name_input = gr.Textbox(
+                visible=False, value="converted_theme"
+            )
+            user_token_input = gr.Textbox(visible=False, value="")
+            model_choice_input = gr.Textbox(visible=False, value="qwen")
+            convert_css_btn = gr.Button("Convert CSS", visible=False)
+            convert_css_output = gr.Textbox(visible=False)
+            convert_css_btn.click(
+                fn=convert_css_to_theme,
+                inputs=[
+                    css_input,
+                    convert_theme_name_input,
+                    user_token_input,
+                    model_choice_input,
+                ],
+                outputs=convert_css_output,
+                api_name="convert_css_to_theme",
+            )
+
+            # Hidden generate_app_code endpoint
+            app_theme_names_input = gr.Textbox(
+                visible=False, value="ocean_breeze,sunset_orange"
+            )
+            app_title_input = gr.Textbox(visible=False, value="My Themed App")
+            include_components_input = gr.Textbox(
+                visible=False, value="button,textbox,slider"
+            )
+            generate_app_btn = gr.Button("Generate App", visible=False)
+            generate_app_output = gr.Textbox(visible=False)
+            generate_app_btn.click(
+                fn=generate_app_code,
+                inputs=[
+                    app_theme_names_input,
+                    app_title_input,
+                    include_components_input,
+                ],
+                outputs=generate_app_output,
+                api_name="generate_app_code",
+            )
+
+        # Launch the demo with MCP server enabled
+        page.demo.launch(
+            mcp_server=True,  # CRITICAL: Enable MCP server functionality
+            server_name="0.0.0.0",
+            server_port=7860,
+            share=False,
+            debug=True,
+            allowed_paths=["./"],
+        )
+
+    except ImportError as e:
+        print(f"❌ Error importing demo interface: {e}")
+        print("Make sure page.py exists and contains the 'demo' variable")
+        exit(1)
+    except AttributeError as e:
+        print(f"❌ Error accessing demo object: {e}")
+        print("Make sure page.py contains a 'demo' variable")
+        exit(1)
+
+```
+
+## `GradioThemer`
+
+### 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
+typing.Union[
+    typing.Dict[str, typing.Any], typing.Callable, NoneType
+][
+    typing.Dict[str, typing.Any][str, typing.Any],
+    Callable,
+    None,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Default theme configuration. Should be a dict with 'themeInput', 'themeConfig', and 'generatedCSS' keys.</td>
+</tr>
+
+<tr>
+<td align="left"><code>theme_config_path</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[str][str, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Path to user themes configuration file (JSON). If None, searches for common filenames.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</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
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Union[
+    gradio.components.base.FormComponent,
+    typing.Sequence[gradio.components.base.FormComponent],
+    set[gradio.components.base.FormComponent],
+    NoneType,
+][
+    gradio.components.base.FormComponent,
+    typing.Sequence[gradio.components.base.FormComponent][
+        gradio.components.base.FormComponent
+    ],
+    set[gradio.components.base.FormComponent],
+    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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If True, will display label.</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>None</code></td>
+<td align="left">If True, will be rendered as an editable component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</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 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 | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A unique key for this component.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the GradioThemer 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. |
+| `input` | This listener is triggered when the user changes the value of the GradioThemer. |
+| `submit` | This listener is triggered when the user presses the Enter key while the GradioThemer is focused. |
+
+
+
+### 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 theme configuration as a dict into the function.
+- **As input:** Should return, expects a dict with theme configuration data.
+
+ ```python
+ def predict(
+     value: typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, typing.Any], None
+]
+ ) -> typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, typing.Any], None
+]:
+     return value
+ ```
+ 

gradio_themer-0.1.0.dist-info/RECORD

@@ -0,0 +1,11 @@
+gradio_themer/__init__.py,sha256=dtBIhGqr26fxR5Tc84-jctIp1ilg_3HK5IpdUVWrtiA,68
+gradio_themer/generate_theme_template.py,sha256=YN5wDU9Ci4JvXdR_gfJ9BqH0NVsxBh46ZdDKqzb1xNg,5640
+gradio_themer/gradio_themer.py,sha256=V6ygLNns4xpeVOGNOgEesZTyeLbPZ8jZNxyHaUIjqVs,13599
+gradio_themer/gradio_themer.pyi,sha256=ZHXvWZ83EFAFybnkfBeBast3_2RLltkHRkuFMMxauuw,31565
+gradio_themer/templates/component/index.js,sha256=7ZFR0aV_QthrxGNn1Yv07TR0jhjWD31n8rlPiZ0qycI,60396
+gradio_themer/templates/component/style.css,sha256=_N14vViGQ8RfAZKsscJcvStcVMRZcwqbvOMgOKEjwF4,6084
+gradio_themer/templates/example/index.js,sha256=S0rQhEVCiO6TrKOl5wSmmKeYSD4WufxrYzuLtpfb-fo,1818
+gradio_themer/templates/example/style.css,sha256=Aj4k-S41TV83pot-J9j9Fi2UonrXHFC1Jl4Zb1xaYo4,61
+gradio_themer-0.1.0.dist-info/METADATA,sha256=_MUa3fS4TWsy6bly6POmoSSuK19OzcP_E7IYl1laJpk,11343
+gradio_themer-0.1.0.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+gradio_themer-0.1.0.dist-info/RECORD,,

gradio_themer-0.1.0.dist-info/WHEEL

@@ -0,0 +1,4 @@
+Wheel-Version: 1.0
+Generator: hatchling 1.27.0
+Root-Is-Purelib: true
+Tag: py3-none-any