Spaces:

ThingsLog
/

thingslog-ai-examples

Sleeping

Add GitHub starter repository section

478efdc verified 7 months ago

10.7 kB

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.",
    },
}

REPOSITORIES = [
    (
        "thingslog-api-starter-kit",
        "REST API guide, token flow, counters, alarms, devices, and Push API examples.",
    ),
    (
        "thingslog-monitoring-portal-template",
        "React/Vite monitoring portal for fast demos and installer-facing dashboards.",
    ),
    (
        "thingslog-nextjs-monitoring-template",
        "Next.js portal skeleton for partner products with backend token handling.",
    ),
    (
        "thingslog-vue-monitoring-template",
        "Vue starter app for lightweight monitoring and alerting portals.",
    ),
    (
        "thingslog-node-express-api-template",
        "Node/Express backend gateway for ThingsLog API integration.",
    ),
    (
        "thingslog-python-fastapi-template",
        "Python/FastAPI service for utility IT teams, automation, and reports.",
    ),
    (
        "thingslog-ai-examples",
        "Codex and Claude prompts, app briefs, launch checklist, and setup guides.",
    ),
]


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"]}`
"""


def repositories_markdown() -> str:
    lines = [
        "## Start from GitHub",
        "",
        "Pick a starter repository, open it with Codex or Claude, and turn it into a branded monitoring product for your customers.",
        "",
    ]
    for repo, description in REPOSITORIES:
        lines.append(f"- **[{repo}]({repo_url(repo)})**: {description}")
    return "\n".join(lines)


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.
        """
    )

    gr.Markdown(repositories_markdown())

    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()

	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.",
	},
	}

	REPOSITORIES = [
	(
	"thingslog-api-starter-kit",
	"REST API guide, token flow, counters, alarms, devices, and Push API examples.",
	),
	(
	"thingslog-monitoring-portal-template",
	"React/Vite monitoring portal for fast demos and installer-facing dashboards.",
	),
	(
	"thingslog-nextjs-monitoring-template",
	"Next.js portal skeleton for partner products with backend token handling.",
	),
	(
	"thingslog-vue-monitoring-template",
	"Vue starter app for lightweight monitoring and alerting portals.",
	),
	(
	"thingslog-node-express-api-template",
	"Node/Express backend gateway for ThingsLog API integration.",
	),
	(
	"thingslog-python-fastapi-template",
	"Python/FastAPI service for utility IT teams, automation, and reports.",
	),
	(
	"thingslog-ai-examples",
	"Codex and Claude prompts, app briefs, launch checklist, and setup guides.",
	),
	]


	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"]}`
	"""


	def repositories_markdown() -> str:
	lines = [
	"## Start from GitHub",
	"",
	"Pick a starter repository, open it with Codex or Claude, and turn it into a branded monitoring product for your customers.",
	"",
	]
	for repo, description in REPOSITORIES:
	lines.append(f"- [{repo}]({repo_url(repo)}): {description}")
	return "\n".join(lines)


	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.
	"""
	)

	gr.Markdown(repositories_markdown())

	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()