Search
pleasantMagentaAnglerfish
@btwiuse
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 **/
import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
export default (req: Request) => {
return new Response(
inspiringAquaToad
@priyanshu
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useState, useRef } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
// (Previous COLORS, INTERESTS, ORIENTATIONS, PRONOUNS, SCHOOLS, COMMUNITY_SPACES constants remain the same)
foo
@tmm
An interactive, runnable TypeScript val by tmm
Script
export async function foo() {
const { createPublicClient, http } = await import("npm:viem");
const { mainnet } = await import("npm:viem/chains");
const client = createPublicClient({
chain: mainnet,
transport: http(),
console.log(client);
exceptionalBeigeMacaw
@akbaruddin
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react **/
import { renderToString } from "https://esm.sh/react-dom@18/server";
export default (req: Request) => {
return Response.json(
push
@jrmann100
@jsxImportSource npm:hono@3/jsx
HTTP
addEventListener("notificationclick", (event) => {
if (typeof event.notification.data?.url === "string") {
clients.openWindow(event.notification.data?.url);
200,
{ "Content-Type": "text/javascript" },
digitalMemorial
@all
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import confetti from "https://esm.sh/canvas-confetti@1.6.0";
import React, { useCallback, useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
type ConfettiOptions = {
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
libraryThatNeedsValidation
@maxm
An interactive, runnable TypeScript val by maxm
Script
export const newClient = async (username: string, password: string): Client => {
const url = `https://${username}-userspaceauth.web.val.run/validate/${password}`;
throw new Error("Incorrect password");
return new Client(username);
class Client {
private username: string;
counter
@pomdtr
@jsxImportSource https://esm.sh/react
Script
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
type Props = {
initialCount?: Number;
blogOGImage
@jxnblk
OG image service for https://val.town/v/jxnblk/dotcom – https://jxnblk.com
HTTP
/** @jsxImportSource npm:react */
import { Avatar } from "https://esm.town/v/jxnblk/avatar";
import { Diagz, Tiled } from "https://esm.town/v/jxnblk/greebles";
import { render } from "https://esm.town/v/jxnblk/reactSVG2PNG";
import wrap from "npm:word-wrap";
const MARGIN = 64;
web_Zw1Asa4o7V
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
const warning = document.createElement('div');
warning.style.position = 'fixed';
warning.style.left = e.clientX + 'px';
warning.style.top = e.clientY + 'px';
warning.style.color = '#ff3333';
warning.style.opacity = '0';
openai
@std
OpenAI - Docs ↗ Use OpenAI's chat completion API with std/openai . This integration enables access to OpenAI's language models without needing to acquire API keys. For free Val Town users, all calls are sent to gpt-4o-mini . Basic Usage import { OpenAI } from "https://esm.town/v/std/openai";
const openai = new OpenAI();
const completion = await openai.chat.completions.create({
messages: [
{ role: "user", content: "Say hello in a creative way" },
],
model: "gpt-4",
max_tokens: 30,
});
console.log(completion.choices[0].message.content); Images To send an image to ChatGPT, the easiest way is by converting it to a
data URL, which is easiest to do with @stevekrouse/fileToDataURL . import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL";
const dataURL = await fileToDataURL(file);
const response = await chat([
{
role: "system",
content: `You are an nutritionist.
Estimate the calories.
We only need a VERY ROUGH estimate.
Respond ONLY in a JSON array with values conforming to: {ingredient: string, calories: number}
`,
},
{
role: "user",
content: [{
type: "image_url",
image_url: {
url: dataURL,
},
}],
},
], {
model: "gpt-4o",
max_tokens: 200,
}); Limits While our wrapper simplifies the integration of OpenAI, there are a few limitations to keep in mind: Usage Quota : We limit each user to 10 requests per minute. Features : Chat completions is the only endpoint available. If these limits are too low, let us know! You can also get around the limitation by using your own keys: Create your own API key on OpenAI's website Create an environment variable named OPENAI_API_KEY Use the OpenAI client from npm:openai : import { OpenAI } from "npm:openai";
const openai = new OpenAI(); 📝 Edit docs
Script
3. Use the `OpenAI` client from `npm:openai`:
import { type ClientOptions, OpenAI as RawOpenAI } from "npm:openai";
* API Client for interfacing with the OpenAI API. Uses Val Town credentials.
private rawOpenAIClient: RawOpenAI;
* API Client for interfacing with the OpenAI API. Uses Val Town credentials.
* @param {number} [opts.timeout=10 minutes] - The maximum amount of time (in milliseconds) the client will wait for a response before timing out.
* @param {number} [opts.maxRetries=2] - The maximum number of times the client will retry a request.
* @param {boolean} [opts.dangerouslyAllowBrowser=false] - By default, client-side use of this library is not allowed, as it risks exposing your secret API credentials to attackers.
constructor(options: Omit<ClientOptions, "baseURL" | "apiKey" | "organization"> = {}) {
this.rawOpenAIClient = new RawOpenAI({
return this.rawOpenAIClient.chat;
changes
@saolsen
View val changes as a diff. Go to /v/username/valname/version to see a diff between that version and the previous one.
For example https://saolsen-changes.web.val.run/v/saolsen/tracing/108
HTTP
let diffEditor = monaco.editor.createDiffEditor(
document.getElementById("container"),
renderSideBySide: true,
diffEditor.setModel({
original: originalModel,
drumMachine
@sedson
Freesound Drum Machine Freesound is an amazing sample library with thousands of user-uploaded sounds. Many of them are amazing and useful sound effects. Many others are hilarious and silly home recordings. This toy lets you (try to) make music from that chaos.
HTTP
// playable region, the volume, and the playback speed. Townie holding it down on
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const STEPS = 16;
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
async function server(request: Request): Promise<Response> {
