Publish ThingsLog AI examples Space

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/solutions/agriculture-monitoring.png filter=lfs diff=lfs merge=lfs -text
+assets/solutions/energy-monitoring.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,5 @@
+__pycache__/
+.DS_Store
+.env
+.venv/
+venv/

README.md

@@ -1,12 +1,38 @@
 ---
-title: Thingslog Ai Examples
-emoji: ⚡
-colorFrom: yellow
-colorTo: red
+title: ThingsLog AI Examples
+emoji: 💧
+colorFrom: blue
+colorTo: green
 sdk: gradio
-sdk_version: 6.13.0
+sdk_version: 6.0.2
 app_file: app.py
 pinned: false
+license: apache-2.0
+short_description: Build monitoring portals and apps on top of ThingsLog data.
+tags:
+  - iot
+  - water
+  - utilities
+  - monitoring
+  - codex
+  - claude
+  - smart-metering
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ThingsLog AI Examples
+
+This Space helps installers, water-system integrators, utility IT teams, and small communal utilities start their own monitoring and alerting apps on top of ThingsLog.
+
+Use it to pick a starter repository, generate an implementation prompt for Codex or Claude, and follow the ThingsLog token flow without exposing credentials in a browser app.
+
+## GitHub Starters
+
+- [thingslog-api-starter-kit](https://github.com/ThingsLog/thingslog-api-starter-kit)
+- [thingslog-monitoring-portal-template](https://github.com/ThingsLog/thingslog-monitoring-portal-template)
+- [thingslog-nextjs-monitoring-template](https://github.com/ThingsLog/thingslog-nextjs-monitoring-template)
+- [thingslog-vue-monitoring-template](https://github.com/ThingsLog/thingslog-vue-monitoring-template)
+- [thingslog-node-express-api-template](https://github.com/ThingsLog/thingslog-node-express-api-template)
+- [thingslog-python-fastapi-template](https://github.com/ThingsLog/thingslog-python-fastapi-template)
+- [thingslog-ai-examples](https://github.com/ThingsLog/thingslog-ai-examples)
+
+Apps and portals built with ThingsLog APIs should include `Powered by ThingsLog` with a link to [thingslog.com](https://thingslog.com).

app.py

@@ -0,0 +1,220 @@
+from __future__ import annotations
+
+import textwrap
+
+import gradio as gr
+
+
+GITHUB = "https://github.com/ThingsLog"
+THINGSLOG = "https://thingslog.com"
+
+STACKS = {
+    "React portal": {
+        "repo": "thingslog-monitoring-portal-template",
+        "best_for": "A polished single-page monitoring portal for demos, pilots, installers, and customer-facing dashboards.",
+        "start": "npm install && npm run dev",
+    },
+    "Next.js portal": {
+        "repo": "thingslog-nextjs-monitoring-template",
+        "best_for": "Production-style partner portals with server-side token handling and customer workspaces.",
+        "start": "npm install && npm run dev",
+    },
+    "Vue portal": {
+        "repo": "thingslog-vue-monitoring-template",
+        "best_for": "Vue teams building lightweight monitoring, alerting, and reporting tools.",
+        "start": "npm install && npm run dev",
+    },
+    "Node API": {
+        "repo": "thingslog-node-express-api-template",
+        "best_for": "Backend gateway for keeping ThingsLog tokens server-side and exposing partner-specific APIs.",
+        "start": "npm install && npm run dev",
+    },
+    "Python FastAPI": {
+        "repo": "thingslog-python-fastapi-template",
+        "best_for": "Utility IT teams, automation, reporting jobs, data exports, and integration services.",
+        "start": "python -m venv .venv && source .venv/bin/activate && pip install -r requirements.txt && uvicorn app.main:app --reload",
+    },
+    "API starter kit": {
+        "repo": "thingslog-api-starter-kit",
+        "best_for": "Learning the ThingsLog REST API, token flow, counters, alarms, device metadata, and Push API integration.",
+        "start": "Open the README and run the curl examples from a secure terminal.",
+    },
+}
+
+
+def repo_url(repo: str) -> str:
+    return f"{GITHUB}/{repo}"
+
+
+def build_prompt(stack: str, customer_type: str, solution: str, agent: str) -> str:
+    item = STACKS[stack]
+    return textwrap.dedent(
+        f"""
+        You are {agent}, helping build a ThingsLog-powered monitoring product.
+
+        Target customer:
+        {customer_type}
+
+        Solution focus:
+        {solution}
+
+        Starter repository:
+        {repo_url(item["repo"])}
+
+        Build goal:
+        Create a branded monitoring portal or app for installers, water-system integrators,
+        utility IT teams, small communal utilities, private customers, farms, buildings, or
+        industrial sites that need metering, alerts, and operational visibility.
+
+        ThingsLog API rules:
+        - Keep ThingsLog usernames, passwords, and API tokens server-side.
+        - Use the ThingsLog login flow to obtain a short-lived Bearer token.
+        - Use the API token endpoint only from trusted backend code when a longer-lived token is required.
+        - Never commit .env files, real tokens, customer device IDs, or customer measurements.
+        - Add "Powered by ThingsLog" with a link to https://thingslog.com in the app footer or about page.
+
+        Domain context:
+        - Water deployments can use popular water meter brands connected through LoRa, NB-IoT, or wireless M-Bus.
+        - ThingsLog can also work with Modbus devices and analog 4-20 mA or 0-3 V sensors.
+        - Build for real operational workflows: consumption trends, alarms, pressure/level/flow views,
+          leak detection, NRW reduction, pump station checks, tank monitoring, and customer reports.
+
+        Start command:
+        {item["start"]}
+
+        First tasks:
+        1. Read README.md, AGENTS.md, and CLAUDE.md if present.
+        2. Create a .env file from the example values.
+        3. Add mock data mode for demos, then wire real ThingsLog API calls through the backend.
+        4. Keep the UI practical, clear, and suitable for installers and utility operators.
+        """
+    ).strip()
+
+
+def stack_details(stack: str) -> str:
+    item = STACKS[stack]
+    return f"""
+### {stack}
+
+**Repository:** [{item["repo"]}]({repo_url(item["repo"])})
+
+**Best for:** {item["best_for"]}
+
+**Start:** `{item["start"]}`
+"""
+
+
+with gr.Blocks(
+    title="ThingsLog AI Examples",
+    css="""
+    :root { --tl-blue: #0b5cab; --tl-green: #2f9e44; --tl-ink: #172033; }
+    .tl-hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
+      gap: 28px;
+      align-items: center;
+      padding: 22px 0 8px;
+    }
+    .tl-hero h1 { color: var(--tl-ink); font-size: 42px; line-height: 1.05; margin: 0 0 12px; }
+    .tl-hero p { color: #42526b; font-size: 18px; line-height: 1.55; margin: 0; }
+    .tl-logo { max-width: 260px; width: 100%; }
+    .tl-card img { border-radius: 8px; width: 100%; height: 180px; object-fit: cover; }
+    .tl-links a { margin-right: 14px; white-space: nowrap; }
+    footer { visibility: hidden; }
+    @media (max-width: 820px) {
+      .tl-hero { grid-template-columns: 1fr; }
+      .tl-hero h1 { font-size: 34px; }
+    }
+    """,
+) as demo:
+    gr.HTML(
+        """
+        <div class="tl-hero">
+          <div>
+            <h1>Build your monitoring business on ThingsLog</h1>
+            <p>
+              Starter portals, API examples, and AI prompts for water-meter installers,
+              system integrators, utility IT teams, and small communal utilities that want
+              their own monitoring, alerting, and reporting apps.
+            </p>
+            <p class="tl-links" style="margin-top:18px">
+              <a href="https://thingslog.com" target="_blank">thingslog.com</a>
+              <a href="https://github.com/ThingsLog" target="_blank">GitHub starters</a>
+              <a href="https://thingslog.com/thingslog-solutions/intelligent-water/" target="_blank">Water</a>
+              <a href="https://thingslog.com/thingslog-solutions/energy-consumption-monitoring/" target="_blank">Energy</a>
+              <a href="https://thingslog.com/thingslog-solutions/thingslog-smart-agriculture/" target="_blank">Agriculture</a>
+            </p>
+          </div>
+          <div>
+            <img class="tl-logo" src="/file=assets/thingslog-logo.png" alt="ThingsLog logo" />
+          </div>
+        </div>
+        """
+    )
+
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Image("assets/solutions/water-monitoring.jpg", label="Water monitoring", show_download_button=False, show_fullscreen_button=False)
+        with gr.Column(scale=1):
+            gr.Image("assets/solutions/energy-monitoring.png", label="Energy monitoring", show_download_button=False, show_fullscreen_button=False)
+        with gr.Column(scale=1):
+            gr.Image("assets/solutions/agriculture-monitoring.png", label="Agriculture monitoring", show_download_button=False, show_fullscreen_button=False)
+
+    gr.Markdown(
+        """
+## Where ThingsLog Fits
+
+ThingsLog helps partners build practical IoT monitoring solutions for water, energy, agriculture,
+buildings, and industrial sites. The strongest fit is small and mid-size communal utilities,
+municipal operators, installers, and integrators that need fast deployment without building a full
+IoT platform from scratch. Larger utilities can also use the examples for pilots, department tools,
+and integrations.
+
+For water, ThingsLog supports popular water meter brands connected through LoRa, NB-IoT, or
+wireless M-Bus, plus Modbus devices and analog sensors such as 4-20 mA or 0-3 V pressure, level,
+flow, and environmental sensors.
+        """
+    )
+
+    with gr.Row():
+        stack = gr.Dropdown(list(STACKS), value="Next.js portal", label="Choose starter")
+        agent = gr.Dropdown(["Codex", "Claude"], value="Codex", label="AI agent")
+
+    customer_type = gr.Textbox(
+        label="Target customer",
+        value="Small communal water utility or local water-system integrator serving private customers and municipalities",
+    )
+    solution = gr.Textbox(
+        label="Monitoring product idea",
+        value="Water consumption dashboard with alarms, leak indicators, meter status, customer reporting, and a Powered by ThingsLog footer",
+    )
+
+    details = gr.Markdown()
+    prompt = gr.Textbox(label="Prompt for your AI agent", lines=22, show_copy_button=True)
+
+    stack.change(stack_details, inputs=stack, outputs=details)
+    for field in (stack, customer_type, solution, agent):
+        field.change(build_prompt, inputs=[stack, customer_type, solution, agent], outputs=prompt)
+
+    demo.load(stack_details, inputs=stack, outputs=details)
+    demo.load(build_prompt, inputs=[stack, customer_type, solution, agent], outputs=prompt)
+
+    gr.Markdown(
+        """
+## Token Flow
+
+1. Sign in to the ThingsLog IoT portal with a partner or customer account.
+2. Exchange credentials for a Bearer token from the ThingsLog login endpoint.
+3. For trusted backend services, create a named long-term API token with an expiration period.
+4. Store tokens only in backend environment variables or secret managers.
+5. Build customer-facing apps through a backend gateway, never by exposing ThingsLog tokens in frontend code.
+
+Read the full guide in the [thingslog-ai-examples token document](https://github.com/ThingsLog/thingslog-ai-examples/blob/main/docs/generate-thingslog-api-token.md).
+
+**Powered by [ThingsLog](https://thingslog.com).**
+        """
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1 @@
+gradio>=6.0.0