5import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75";
6
7export async function loader(req: Request) {
8 const { sqlite } = await import("https://esm.town/v/std/sqlite?v=4");
9 const [, { columns, rows }] = await sqlite.batch([
20}
21
22export async function action(req: Request) {
23 const { sqlite } = await import("https://esm.town/v/std/sqlite?v=4");
24 const formData = await req.formData();
47}
48
49export function Component({ initialTodos, initialLogs }) {
50 const [todos, setTodos] = useState(initialTodos);
51 const [logs, setLogs] = useState(initialLogs);
54 useEffect(() => addLog(`Client rendered`), []);
55
56 function addTodo() {
57 setTodos([...todos, { text: newTodo }]);
58 setNewTodo("");
64 }
65
66 function toggleTodo(e) {
67 const formData = new FormData(e.target);
68 const id = parseInt(formData.get("id") as string);
71 }
72
73 function deleteTodo(e) {
74 const formData = new FormData(e.target);
75 const id = parseInt(formData.get("id") as string);
1export function extractValInfo(url: string | URL) {
2 const { pathname, search } = new URL(url);
3 const [author, filename] = pathname.split("/").slice(-2);
10```
11
12* Export any "global" p5 functions. These are functions like `setup` and `draw` that p5 will call.
13
14* Set the val type to http and default export the result of `sketch`, passing in `import.meta.url`.
19import type * as p5 from "npm:@types/p5";
20
21export function setup() {
22 createCanvas(400, 400);
23}
24
25export function draw() {
26 if (mouseIsPressed) {
27 fill(0);
37
38## How it works
39The sketch function returns an http handler that sets up a basic page with p5.js added. It then imports your module from the browser and wires up all the exports so p5.js can see them. All the code in your val will run in the browser (except for the default `sketch` export) so you can't call any Deno functions, environment variables, or other server side apis.
40
1import { frameHtml } from "https://esm.town/v/moe/frameHtmlRaw"
2
3export function sketch(module: string, title = "P5 Sketch") {
4 return async function(req: Request): Promise<Response> {
5 // console.log("module:", module)
6 const url = new URL(req.url)
72}
73
74function r() {
75 return Math.floor(Math.random() * 100)
76}
1function parseTimeToMinutes(timeString: string): number {
2 const parts = timeString.split(' ');
3 let minutes = 0;
9}
10
11export default async function server(request: Request): Promise<Response> {
12 const url = new URL(request.url);
13
72}
73
74async function findNearest(origin: string, locations: any[], apiKey: string): Promise<any> {
75 const batchSize = 25;
76 let nearestLocation = null;
108}
109
110async function getDrivingTime(origin: string, destination: string, apiKey: string, arrivalTime?: string, arrivalDay?: string): Promise<string> {
111 let directionsUrl = `https://maps.googleapis.com/maps/api/directions/json?origin=${encodeURIComponent(origin)}&destination=${encodeURIComponent(destination)}&mode=driving&key=${apiKey}`;
112
129}
130
131async function getTransitTime(origin: string, destination: string, apiKey: string): Promise<string> {
132 const directionsUrl = `https://maps.googleapis.com/maps/api/directions/json?origin=${encodeURIComponent(origin)}&destination=${encodeURIComponent(destination)}&mode=transit&key=${apiKey}`;
133
144}
145
146async function getZipCode(address: string, apiKey: string): Promise<string> {
147 const geocodeUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${apiKey}`;
148 const response = await fetch(geocodeUrl);
159}
160
161function getNextDayOfWeek(date: Date, dayOfWeek: string): Date {
162 const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
163 const targetDay = days.indexOf(dayOfWeek.toLowerCase());
26}
27
28function LightningBolt({ x, y }) {
29 return (
30 <svg x={x} y={y} width="40" height="40" viewBox="0 0 10 10">
34}
35
36function Background() {
37 const [bolts, setBolts] = useState([]);
38
62}
63
64function LoadingSpinner() {
65 return (
66 <div className="loading-spinner">
70}
71
72function App() {
73 const [prompt, setPrompt] = useState(DEFAULT_PROMPT);
74 const [imageUrl, setImageUrl] = useState(PLACEHOLDER_IMAGE);
147}
148
149function client() {
150 createRoot(document.getElementById("root")).render(<App />);
151}
155}
156
157async function checkRateLimit(clientIP: string): Promise<boolean> {
158 const now = Date.now();
159 const key = `xratelimit_${clientIP}`;
177}
178
179async function server(request: Request): Promise<Response> {
180 if (request.method === "POST" && new URL(request.url).pathname === "/generate") {
181 const clientIP = (request.headers.get("x-forwarded-for") || "unknown").split(",")[0].trim();
31console.log(text);
32
33export async function weatherGPT() {
34 await email({ subject: "Weather Today", text });
35}
31console.log(text);
32
33export async function weatherGPT() {
34 await email({ subject: "Weather Today", text });
35}
33- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)
34- [x] make result tables scrollable
35- [x] add export to CSV, and JSON (CSV and JSON helper functions written in [this val](https://www.val.town/v/nbbaier/sqliteExportHelpers). Thanks to @pomdtr for merging the initial version!)
36- [x] add listener for cmd+enter to submit query
1/**
2 * This val creates a text editing tool using the Cerebras Llama 70B model.
3 * It includes a command input field with speech-to-text functionality, a collapsible additional context area,
4 * and a rich text editor. The user's command, additional context, and current text are sent to the Cerebras API,
5 * which returns the modified text to be displayed in the editor.
8
9// Server-side code
10async function server(request: Request): Promise<Response> {
11 if (request.method === "POST" && new URL(request.url).pathname === "/process") {
12 const { command, text, additionalContext } = await request.json();
70 import ReactQuill from "https://esm.sh/react-quill";
71
72 function App() {
73 const [command, setCommand] = useState("");
74 const [editorContent, setEditorContent] = useState("<p></p>");
