Vals using cronstrue

Description from the NPM package:

Convert cron expressions into human readable descriptions

CronGPT

This is a minisite to help you create cron expressions, particularly for crons on Val Town. It was inspired by Cron Prompt, but also does the timezone conversion from wherever you are to UTC (typically the server timezone).

Tech

Hono for routing (GET / and POST /compile.)
Hono JSX
HTML (probably overcomplicates things; should remove)
@stevekrouse/openai, which is a light wrapper around @std/openai

TODO

simplify by removing HTMX (try doing the form as a GET request, manual JS script, or client side react)
make the timezone picker better (fewer options, searchable)
add a copy button?

cron_client_react_fork

100

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import cronstrue from "https://esm.sh/cronstrue";

import React, { useState } from "https://esm.sh/react@18.2.0";

import { chat } from "https://esm.town/v/stevekrouse/openai?v=19";

import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";

export default function(req: Request) {

const url = new URL(req.url);

if (req.method === "GET" && url.pathname === "/") {

return react_http({

component: App,

sourceURL: import.meta.url,

head: `<meta charset="UTF-8" />

<title>CronGPT</title>`,

});

} else if (req.method === "POST" && url.pathname === "/compile") {

return compile(req);

}

return new Response("Not found", { status: 404 });

}

export function App() {

const browserTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;

const [loading, setLoading] = useState(false);

const [cron, setCron] = useState("0 16 * * 1-5");

const onSubmit: React.FormEventHandler<HTMLFormElement> = async function(e) {

e.preventDefault();

setLoading(true);

const cron = await fetch("/compile", {

method: "POST",

body: new FormData(e.target as HTMLFormElement),

}).then((r) => r.json());

setCron(cron);

setLoading(false);

};

return (

<h1 className="text-3xl font-bold">CronGPT</h1>

<p className="text-lg">Generate cron expressions with ChatGPT</p>

</div>

<label>Natural language description</label>

<input

name="description"

defaultValue="On weekdays at noon"

required

className="border-2 rounded-lg p-2 text-lg text-center"

</div>

<label>Timezone</label>

{Intl.supportedValuesOf("timeZone").map((tz) => <option value={tz} selected={tz === browserTZ}>{tz}

</option>)}

</select>

</div>

<button

className="bg-sky-500 hover:bg-sky-700 text-white font-bold py-2 px-4 rounded disabled:bg-gray-500"

disabled={loading}

{loading ? "Loading.." : "Compile"}

</button>

</form>

<div>

Need a place to run cron jobs? Try <Link href="https://val.town">Val Town</Link>

</div>{" "}

<div>

<Link href="https://www.val.town/v/stevekrouse/cron">View source</Link>

{" | "} Inspired by <Link href="https://cronprompt.com/">Cron Prompt</Link>

</div>

);

}

const Link = ({ href, children }: { href: string; children?: any }) => (

<a href={href} className="text-blue-500 hover:text-blue-700" target="_blank" rel="noopener noreferrer">{children}</a>

);

function Cron({ cron, timezone }) {

let translation;

try {

translation = cronstrue.toString(cron, { tzOffset: getOffset(timezone), use24HourTimeFormat: false });

} catch (e) {

translation = "Translation error: " + e.message;

}

return (

</div>

CronGPT

Tech

Hono for routing (GET / and POST /compile.)
Hono JSX
HTML (probably overcomplicates things; should remove)
@stevekrouse/openai, which is a light wrapper around @std/openai

cron_client_side_script_fork

100

/** @jsxImportSource npm:hono@3/jsx */

import { chat } from "https://esm.town/v/stevekrouse/openai";

import cronstrue from "npm:cronstrue";

import { Hono } from "npm:hono@3";

const app = new Hono();

export default app.fetch;

app.get("/", (c) =>

c.html(

<html>

<head>

<title>CronGPT</title>

</head>

<h1 class="text-3xl font-bold">CronGPT</h1>

<p class="text-lg">Generate cron expressions with ChatGPT</p>

</div>

<label for="description">Natural language description</label>

<input

name="description"

value="On weekdays at noon"

required

class="border-2 rounded-lg p-2 text-lg text-center"

</div>

<label for="description">Timezone</label>

{Intl.supportedValuesOf("timeZone").map((tz) => (

))}

</select>

</div>

Compile

</button>

</form>

<div>

</div>

<div>

Need a place to run cron jobs? Try <Link href="https://val.town">Val Town</Link>

</div>{" "}

<div>

<Link href="https://www.val.town/v/stevekrouse/cron">View source</Link>

{" | "} Inspired by <Link href="https://cronprompt.com/">Cron Prompt</Link>

</div>

</body>

</html>,

));

app.post("/compile", async (c) => {

const form = await c.req.formData();

const description = form.get("description") as string;

const timezone = form.get("timezone") as string;

const { content } = await chat([

{

role: "system",

content: `You are an natural language to cron syntax compiler.

Return a cron expression in UTC.

The user is in ${timezone}. The timezone offset is ${getOffset(timezone)}.

Return ONLY the cron expression.`,

{ role: "user", content: description },

], {

max_tokens: 10,

});

const cron = content.replace("`", "");

return c.html(<Cron cron={cron} timezone={timezone} />);

});

function clientScript() {

// Set the timezone input

const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;

(document.querySelector("#" + tz.replace("/", "-")) as HTMLOptionElement).selected = true;

const form = document.querySelector("form") as HTMLFormElement;

const button = document.querySelector("button") as HTMLButtonElement;

form.addEventListener("submit", async (e) => {

e.preventDefault();

button.disabled = true;

button.innerText = "Loading..";

const cron = await fetch("/compile", { method: "POST", body: new FormData(form) }).then((r) => r.text());

button.disabled = false;

button.innerText = "Compile";

(document.getElementById("cron") as HTMLDivElement).innerHTML = cron;

});

}

function Cron({ cron, timezone }) {

let translation;

try {

cron

100

/** @jsxImportSource npm:hono@3/jsx */

import { chat } from "https://esm.town/v/stevekrouse/openai";

import cronstrue from "npm:cronstrue";

import { Hono } from "npm:hono@3";

const app = new Hono();

app.get("/", (c) =>

c.html(

<html>

<head>

<script

src="https://unpkg.com/htmx.org@1.9.11"

integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"

crossorigin="anonymous"

</script>

<style

dangerouslySetInnerHTML={{

__html: `

.htmx-indicator{

display:none;

}

.htmx-request .htmx-indicator{

display:inline;

}

.htmx-request.htmx-indicator{

display:inline;

}

}}

</style>

<title>Cron Compiler</title>

</head>

<div>

<h1 class="text-3xl">Cron Compiler</h1>

<p>Compile natural language to cron via ChatGPT</p>

</div>

<input

name="description"

value="On weekdays at noon"

required

class="w-full border-2 rounded-lg p-2"

</input>

<script

dangerouslySetInnerHTML={{

__html: `document.querySelector('#timezone').value = Intl.DateTimeFormat().resolvedOptions().timeZone`,

}}

Compile

</button>

</button>

</form>

{renderCron("0 16 * * 1-5", "America/New_York")}

</div>

<div>

Inspired by <a href="https://cronprompt.com/" class="text-blue-500 hover:text-blue-700">Cron Prompt</a>.{" "}

<a href="https://www.val.town/v/stevekrouse/cron" class="text-blue-500 hover:text-blue-700">View source</a>.

</div>

</body>

</html>,

));

function renderCron(cron: string, timezone: string) {

return (

<div>

{cronstrue.toString(cron, { tzOffset: getOffset(timezone), use24HourTimeFormat: false })}

, {shortenTimezoneString(timezone)}

</p>

</div>

);

}

// convert a timezone string like America/New_York to "EST"

function shortenTimezoneString(timeZone: string) {

const string = new Date().toLocaleString("en-US", { timeZone, timeZoneName: "short" });

return string.split(" ").at(-1);

}

// https://stackoverflow.com/a/68593283

const getOffset = (timeZone: string) => {

const now = new Date();

const utcDate = new Date(now.toLocaleString("en-US", { timeZone: "UTC" }));

const tzDate = new Date(now.toLocaleString("en-US", { timeZone }));

return (tzDate.getTime() - utcDate.getTime()) / (60 * 60 * 1000);

};

Doesn't seem to work on val.town, should work in principle

valwriter

/** @jsxImportSource npm:hono@3/jsx */

import { fetchText } from "https://esm.town/v/stevekrouse/fetchText";

import { chat } from "https://esm.town/v/stevekrouse/openai";

import cronstrue from "npm:cronstrue";

import { Hono } from "npm:hono@3";

const examples = [

{

user: "website that shows the current time",

content: `/** @jsxImportSource npm:react */

export default function() {

return <h1>{new Date().toLocaleTimeString()}</h1>;

}`,

{

user: `A collaborative poem builder.

It stores each line of the poem in sqlite.

It has a textbox that lets anyone input a new line to the poem.`,

content: await fetchText("https://esm.town/v/stevekrouse/poembuilder3?v=4"),

{

user: "an app that uses chatgpt to convert natural language to cron syntax",

content: await fetchText("https://esm.town/v/stevekrouse/cron2"),

];

const app = new Hono();

export default app.fetch;

app.get("/", async (c) => {

const example = examples[0] // examples[Math.floor(Math.random() * examples.length)];

const description = c.req.query("description") || example.user;

let code = c.req.query("description") ? await compile(description) : example.content;

return c.html(

<html>

<head>

<title>Val Writer</title>

</head>

<div>

<h1 class="text-3xl">Val Writer</h1>

<p>Compile your prompt into code</p>

</div>

<textarea

name="description"

required

class="w-full border-2 rounded-lg p-2"

rows={5}

{description}

</textarea>

Write

</button>

</form>

<div>

<pre>

{code}

</pre>

</div>

</body>

</html>,

);

});

export async function compile(description: string) {

const messages = [

{

role: "system",

content: `You are an expert fullstack developer.

You convert user requests to code.

You write Deno TypeScript.

Reply ONLY with valid Typescript.

Export the fetch function to run the server.

Only use web standard fetch. Export the fetch function to start the server.

Add extensive comments`,

...examples.flatMap((example) => [, {

role: "user",

content: example.user,

}, {

role: "assistant",

content: example.content,

}]),

{ role: "user", content: description },

];

const { content } = await chat(messages, {

model: "gpt-4-turbo-2024-04-09",

max_tokens: 4000,

});

return content;

}

valwriter

/** @jsxImportSource npm:hono@3/jsx */

import { fetchText } from "https://esm.town/v/stevekrouse/fetchText";

import { chat } from "https://esm.town/v/stevekrouse/openai";

import cronstrue from "npm:cronstrue";

import { Hono } from "npm:hono@3";

const examples = [

{

user: "website that shows the current time",

content: `/** @jsxImportSource npm:react */

export default function() {

return <h1>{new Date().toLocaleTimeString()}</h1>;

}`,

{

user: `A collaborative poem builder.

It stores each line of the poem in sqlite.

It has a textbox that lets anyone input a new line to the poem.`,

content: await fetchText("https://esm.town/v/stevekrouse/poembuilder3?v=4"),

{

user: "an app that uses chatgpt to convert natural language to cron syntax",

content: await fetchText("https://esm.town/v/stevekrouse/cron2"),

];

const app = new Hono();

export default app.fetch;

app.get("/", async (c) => {

const example = examples[Math.floor(Math.random() * examples.length)];

const description = c.req.query("description") || example.user;

let code = c.req.query("description") ? await compile(description) : example.content;

return c.html(

<html>

<head>

<title>Val Writer</title>

</head>

<div>

<h1 class="text-3xl">Val Writer</h1>

<p>Compile your prompt into code</p>

</div>

<textarea

name="description"

required

class="w-full border-2 rounded-lg p-2"

rows={5}

{description}

</textarea>

Write

</button>

</form>

<div>

<pre>

{code}

</pre>

</div>

</body>

</html>,

);

});

export async function compile(description: string) {

const messages = [

{

role: "system",

content: `You are a programmer.

Convert user requests to code.

Write ONLY Deno TypeScript.

If you use Hono, use \`export default app.fetch;\` to start the server.

Only use web standard fetch.

For storage, use \`import { sqlite } from "https://esm.town/v/std/sqlite?v=5";\`. Rows are arrays, NOT objects.

For notifying the user, use: \`import { email } from "https://esm.town/v/std/email";

await email({ subject: "Subject", text: "Body" });\`

Add extensive comments.`,

...examples.flatMap((example) => [, {

role: "user",

content: example.user,

}, {

role: "assistant",

content: example.content,

}]),

{ role: "user", content: description },

];

const { content } = await chat(messages, {

model: "gpt-4-turbo-2024-04-09",

max_tokens: 4000,

});

return content;

}

cron2

/** @jsxImportSource npm:hono@3/jsx */

import { chat } from "https://esm.town/v/stevekrouse/openai";

import cronstrue from "npm:cronstrue";

import { Hono } from "npm:hono@3";

const app = new Hono();

export default app.fetch;

app.get("/", async (c) => {

const description = c.req.query("description") || "On weekdays at noon";

const timezone = c.req.query("timezone") || "America/New_York";

const cron = c.req.query("description") ? await compile(description, timezone) : "0 16 * * 1-5";

let translated;

try {

translated = cronstrue.toString(cron, { tzOffset: getOffset(timezone), use24HourTimeFormat: false });

} catch (e)

{

translated = "Error in cron expression " + e.message;

}

return c.html(

<html>

<head>

<title>Cron Compiler</title>

</head>

<div>

<h1 class="text-3xl">Cron Compiler</h1>

<p>Compile natural language to cron via ChatGPT</p>

</div>

<input

name="description"

value={description}

required

class="w-full border-2 rounded-lg p-2"

</input>

<script

dangerouslySetInnerHTML={{ __html: `document.querySelector("input[name=timezone]").value = "${timezone}"` }}

Compile

</button>

</form>

<div>

{translated}

, {shortenTimezoneString(timezone)}

</p>

</div>

<div>

Inspired by <a href="https://cronprompt.com/" class="text-blue-500 hover:text-blue-700">Cron Prompt</a>.{" "}

<a href="https://www.val.town/v/stevekrouse/cron" class="text-blue-500 hover:text-blue-700">View source</a>.

</div>

</body>

</html>,

);

});

// convert a timezone string like America/New_York to "EST"

function shortenTimezoneString(timeZone: string) {

const string = new Date().toLocaleString("en-US", { timeZone, timeZoneName: "short" });

return string.split(" ").at(-1);

}

// https://stackoverflow.com/a/68593283

const getOffset = (timeZone: string) => {

const now = new Date();

const utcDate = new Date(now.toLocaleString("en-US", { timeZone: "UTC" }));

const tzDate = new Date(now.toLocaleString("en-US", { timeZone }));

return (tzDate.getTime() - utcDate.getTime()) / (60 * 60 * 1000);

};

export async function compile(description: string, timezone: string) {

const { content } = await chat([

{

role: "system",

content:

"You are a helpful assistant that converts the user's prompt into a valid crontab expression. You only reply with valid crontab expressions.",

{ role: "user", content: "On Juneteenth every hour" },

{ role: "assistant", content: "0 * 19 6 * *" },

{ role: "user", content: "At midnight on christmas" },

{ role: "assistant", content: "0 0 25 12 * *" },

{ role: "user", content: prompt },

], {

max_tokens: 10,

});

return content.replace("`", "");

}

CronGPT

Tech

Hono for routing (GET / and POST /compile.)
Hono JSX
HTMX (probably overcomplicates things; should remove)
@stevekrouse/openai, which is a light wrapper around @std/openai

I'm finding HTMX a bit overpowered for this, so I have two experimental forks without it:

Vanilla client-side JavaScript: @stevekrouse/cron_client_side_script_fork
Client-side ReactJS (no SSR): @stevekrouse/cron_client_react_fork

I think (2) Client-side React without any SSR is the simplest architecture. Maybe will move to that.

cron

100

/** @jsxImportSource npm:hono@3/jsx */

import { chat } from "https://esm.town/v/stevekrouse/openai";

import cronstrue from "npm:cronstrue";

import { Hono } from "npm:hono@3";

const css = `

.htmx-indicator{

display:none;

}

.htmx-request .htmx-indicator{

display:inline;

}

.htmx-request.htmx-indicator{

display:inline;

}`;

const app = new Hono();

export default app.fetch;

app.get("/", (c) =>

c.html(

<html>

<head>

<script

src="https://unpkg.com/htmx.org@1.9.11"

integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"

crossorigin="anonymous"

</script>

<title>CronGPT</title>

</head>

<h1 class="text-3xl font-bold">CronGPT</h1>

<p class="text-lg">Generate cron expressions with ChatGPT</p>

</div>

<label for="description">Natural language description</label>

<input

name="description"

value="On weekdays at noon"

required

class="border-2 rounded-lg p-2 text-lg text-center"

</div>

<label for="description">Timezone</label>

{Intl.supportedValuesOf("timeZone").map((tz) => (

))}

</select>

</div>

<script

dangerouslySetInnerHTML={{

__html: `

const tz = Intl.DateTimeFormat().resolvedOptions().timeZone

document.querySelector("#" + tz.replace("/", "-")).selected = true

}}

Compile

</button>

</button>

</form>

</div>

<div>

Need a place to run cron jobs? Try <Link href="https://val.town">Val Town</Link>

</div>{" "}

<div>

<Link href="https://www.val.town/v/stevekrouse/cron">View source</Link>

{" | "} Inspired by <Link href="https://cronprompt.com/">Cron Prompt</Link>

</div>

</body>

</html>,

));

app.post("/compile", async (c) => {

const form = await c.req.formData();

const description = form.get("description") as string;

const timezone = form.get("timezone") as string;

const { content } = await chat([

{

role: "system",

content: `You are an natural language to cron syntax compiler.

Return a cron expression in UTC.

The user is in ${timezone}. The timezone offset is ${getOffset(timezone)}.

Return ONLY the cron expression.`,

{ role: "user", content: description },