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
/** @jsxImportSource npm:react **/
import process from "node:process";
import { renderToString } from "npm:react-dom@18/server";
import { QueryVectorStore, sb, Substrate } from "npm:substrate";
type ShotResult = {
id: string;
distance: number;
metadata: {
doc: string; // base64 img data
doc_id: string;
};
};
async function getResults(q: string, n: number): Promise<ShotResult[]> {
const substrate = new Substrate({
apiKey: process.env.SUBSTRATE_API_KEY,
});
const collectionName = "shotclip";
const query = new QueryVectorStore({
collection_name: collectionName,
model: "clip",
query_strings: [q],
include_metadata: true,
top_k: n,
}, { cache_age: 60 * 60 });
const res = await substrate.run(query);
return res.get(query).results[0] as ShotResult[];
}
export default async (req: Request) => {
const searchParams = new URL(req.url).searchParams;
const { prompt = "flowers", n = 12 } = Object.fromEntries(searchParams);
const res = await getResults(prompt, Number(n));
const pageWidth = 1200;
const aspectRatio = 16 / 9;
const widthNoPadding = pageWidth - 40 - 10;
const columns = 2;
const imgWidth = widthNoPadding / columns;
const imgHeight = imgWidth / aspectRatio;
const fontFamily = "Monaco, monospace";
return new Response(
renderToString(
<html>
<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.1" />
<main
style={{
padding: "20px",
minWidth: `${pageWidth}px`,
maxWidth: `${pageWidth}px`,
fontFamily,
}}
>
<h1
style={{
fontSize: "36px",
textAlign: "center",
margin: 0,
fontFamily,
marginTop: "20px",
textTransform: "uppercase",
}}
>
Shotclip
</h1>
<p style={{ textAlign: "center", margin: "2px 0" }}>
<a
href="https://www.substrate.run/"
style={{
textDecoration: "none",
fontSize: "12px",
}}
>
[made with substrate]
</a>
</p>
<div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "10px", paddingTop: "20px" }}>
{res.map(s => (
<div key={s.id} style={{ padding: "10px" }}>
<img
src={s.metadata.doc}
style={{ width: `${imgWidth}px`, height: `${imgHeight}px`, objectFit: "cover" }}
/>
</div>
))}
</div>
</main>
</html>,
),
{ headers: { "Content-Type": "text/html" } },
);
};
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
July 10, 2024