@wilt
7 likes22 public vals
Joined January 12, 2023
Did you know that in recent versions of Windows 11, PWAs can add themselves as desktop widgets? This is a demo of that.
Because this PWA isn't published to the Microsoft Store, if you want to try this out for yourself you'll first need to install WinAppSDK version >= 1.2, enable Developer Mode in settings following the instructions here, and visit https://wilt-miniWidget.web.val.run to install using a recent version of Edge.
Readme
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { fetch } from "https://esm.town/v/std/fetch";
import { notFound } from "https://esm.town/v/wilt/notFound";
import { thisUrl } from "https://esm.town/v/wilt/thisUrl";
import { tinyLogomark } from "https://esm.town/v/wilt/tinyLogomark";
export async function miniWidget(request: Request): Promise<Response> {
switch (new URL(request.url).pathname) {
case "/":
case "/index.html":
return new Response(
`
<!DOCTYPE html>
<html>
<link rel="manifest" href="manifest.json" />
<script type="text/javascript">
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
try {
const registration = await navigator.serviceWorker.register("/serviceworker.js", {
scope: "/",
});
if (registration.installing) {
console.log("Service worker installing");
} else if (registration.waiting) {
console.log("Service worker installed");
} else if (registration.active) {
console.log("Service worker active");
}
} catch (error) {
console.error(\`Registration failed with \${error}\`);
}
}
};
registerServiceWorker();
</script>
<h2>Install this PWA</h2>
<p>To get a widget in your Windows Widgets sidebar!</p>
<img src="${tinyLogomark}" />
</html>
`,
{ headers: { "Content-Type": "text/html" } },
);
case "/manifest.json":
return new Response(
JSON.stringify({
name: "simplepwa",
description: "A simple demo PWA",
scope: "./",
start_url: "./",
display: "standalone",
display_override: ["window-controls-overlay"],
icons: [{
src:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAQMAAADdiHD7AAAAAXNSR0IArs4c6QAAAANQTFRFLf+I56geCQAAABlJREFUeNrtwTEBAAAAwiD7p7bGDmAAABB2CrAAAR3VlIUAAAAASUVORK5CYII=",
sizes: "144x144",
type: "image/png",
}, {
"src": "https://placehold.co/192x192.png",
"sizes": "192x192",
"type": "image/png",
}, {
"src": "https://placehold.co/512x512.png",
"sizes": "512x512",
"type": "image/png",
}],
screenshots: [{
src: "img.jpg",
sizes: "600x400",
label: "Widget",
}],
widgets: [{
name: "simplepwa widget",
description: "A simple demo widget for the Windows sidebar",
tag: "simplepwa",
ms_ac_template: "template.json",
data: "data.json",
screenshots: [{
src: "img.jpg",
sizes: "600x400",
label: "Demo widget",
}],
backgrounds: [{
src: "img.jpg",
sizes: "600x400",
}],
}],
}),
{
headers: { "Content-Type": "application/manifest+json" },
},
);
case "/template.json":
return new Response(
JSON.stringify({
type: "AdaptiveCard",
body: [{
type: "TextBlock",
size: "Medium",
text: "Hello from Val.Town!",
weight: "Bolder",
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { fetch } from "https://esm.town/v/std/fetch";
/**
* Create a new Qdrant collection in an existing cluster with the given name
* Uses recommended values for OpenAPI embeddings
*/
export async function createQdrantCollection(args: {
collectionName: string;
qdrantKey: string;
qdrantUrl: string;
}) {
const { collectionName, qdrantKey, qdrantUrl } = args;
const resp = await fetch(
`https://${qdrantUrl}/collections/${collectionName}`,
{
method: "PUT",
headers: {
"api-key": qdrantKey,
"Content-Type": "application/json",
},
body: JSON.stringify({
name: "facts",
vectors: { size: 1536, distance: "Cosine" },
}),
},
);
return resp.json();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
/**
* Call OpenAPI Embeddings api to vectorize a query string
* Returns an array of 1536 numbers
*/
export const getOpenapiEmbedding = async ({ openapiToken, query }: {
openapiToken: string;
query: string;
}): Promise<number[]> =>
fetchJSON("https://api.openai.com/v1/embeddings", {
method: "POST",
headers: {
Authorization: `Bearer ${openapiToken}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "text-embedding-ada-002",
input: query.trim().replaceAll("\n", " "),
}),
}).then((j) => j.data[0].embedding);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { toDatesWithTz } from "https://esm.town/v/wilt/toDatesWithTz";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
// See https://open-meteo.com/en/docs for usage
type OMHourlyMeasures =
| "temperature_2m"
| "relativehumidity_2m"
| "dewpoint_2m"
| "apparent_temperature"
| "pressure_msl"
| "surface_pressure"
| "cloudcover"
| "cloudcover_low"
| "cloudcover_mid"
| "cloudcover_high"
| "windspeed_10m"
| "windspeed_80m"
| "windspeed_120m"
| "windspeed_180m"
| "winddirection_10m"
| "winddirection_80m"
| "winddirection_120m"
| "winddirection_180m"
| "windgusts_10m"
| "shortwave_radiation"
| "direct_radiation"
| "direct_normal_irradiance"
| "diffuse_radiation"
| "vapor_pressure_deficit"
| "cape"
| "evapotranspiration"
| "et0_fao_evapotranspiration"
| "precipitation"
| "snowfall"
| "precipitation_probability"
| "rain"
| "showers"
| "weathercode"
| "snow_depth"
| "freezinglevel_height"
| "visibility"
| "soil_temperature_0cm"
| "soil_temperature_6cm"
| "soil_temperature_18cm"
| "soil_temperature_54cm"
| "soil_moisture_0_1cm"
| "soil_moisture_1_3cm"
| "soil_moisture_3_9cm"
| "soil_moisture_9_27cm"
| "soil_moisture_27_81cm"
| "is_day";
type OMDailyMeasures =
| "temperature_2m_max"
| "temperature_2m_min"
| "apparent_temperature_max"
| "apparent_temperature_min"
| "precipitation_sum"
| "rain_sum"
| "showers_sum"
| "snowfall_sum"
| "precipitation_hours"
| "precipitation_probability_max"
| "precipitation_probability_min"
| "precipitation_probability_mean"
| "weathercode"
| "sunrise"
| "sunset"
| "windspeed_10m_max"
| "windgusts_10m_max"
| "winddirection_10m_dominant"
| "shortwave_radiation_sum"
| "et0_fao_evapotranspiration"
| "uv_index_max"
| "uv_index_clear_sky_max";
interface OMParams {
latitude: number;
longitude: number;
hourly?: OMHourlyMeasures[];
daily?: OMDailyMeasures[];
current_weather?: boolean;
temperature_unit?: "celcius" | "fahrenheit";
windspeed_unit?: "kmh" | "ms" | "mph" | "kn";
precipitation_unit?: "mm" | "inch";
timeformat?: string;
timezone?: string;
past_days?: number;
forecast_days?: number;
start_date?: string;
end_date?: string;
models?: string[];
cell_selection?: "land" | "sea" | "nearest";
}
export async function getOpenMeteoForecast(params: OMParams) {
const data = await fetchJSON(
`https://api.open-meteo.com/v1/forecast?${new URLSearchParams(
params as {} // Typescript is stricter than Deno here
).toString()}`
);
if (Array.isArray(data.hourly?.time)) {
data.hourly.time = await toDatesWithTz(
1
2
3
4
5
6
7
8
9
10
11
// Outputs, e.g., "It is currently Sunday, May 21, 2023 at 12:11:04 PM Pacific Daylight Time."
// timeZone should be a tz identifier as listed at https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
export function formatCurrentDatetimeSentence(timeZone: string): string {
const dateFormatter = new Intl.DateTimeFormat([], {
dateStyle: "full",
timeStyle: "full",
timeZone,
});
const now = dateFormatter.format(Date.now());
return `It is currently ${now}.`;
}
1
2
3
4
5
6
7
8
9
10
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
// Currently broken! Val.Town cannot fetch from .gov sites
// You can get these input values by calling https://api.weather.gov/points/{latitude},{longitude}
export async function getWeatherGovData({ office, gridX, gridY }) {
const data = await fetchJSON(
`https://api.weather.gov/gridpoints/${office}/${gridX},${gridY}/forecast`
);
return data.properties;
}
Find the dot product between two arrays of numbers (representing 1-dimensional vectors). Requires that both arrays be the same length, but for speed doesn't actually check this - be sure to check yourself if there's a possibility they might not be.
Readme
1
2
3
4
5
6
7
export function dotProduct(vec1: number[], vec2: number[]): number {
let sum = 0;
for (let i = 0; i < vec1.length; i++) {
sum += vec1[i] * vec2[i];
}
return sum;
}
Take in any javascript object and return the sha-256 representation of that object as a hex-encoded string.
Readme
1
2
3
4
5
6
7
export const hash = async (o: unknown): Promise<string> => {
const stringInput = typeof o === "string" ? o : JSON.stringify(o);
const arrayInput = new Uint8Array(new TextEncoder().encode(stringInput));
const hashBuffer = await crypto.subtle.digest("sha-256", arrayInput);
const hashArray = Array.from(new Uint8Array(hashBuffer));
return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
};
1
2
3
4
5
6
7
export const monthDayYear = (d: Date, timeZone: string) =>
new Intl.DateTimeFormat([], {
year: "numeric",
month: "2-digit",
day: "2-digit",
timeZone,
}).format(d);