Search

VALLEDRAW

@tgrv

VALL-E-DRAW LLM code generation for vals, on a canvas! Make apps with a frontend, backend, and database. First you need a working version of VALL-E. Follow the steps here . Fork this val, and update the iframeSrc to point to your working version of VALL-E. Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!

HTTP

import valledrawclient from "https://esm.town/v/janpaul123/valledrawclient";

export default valledrawclient({

iframeSrc: "https://janpaul123-valle.web.val.run",

lastlogin

@yawnxyz

Lastlogin Authentication for val.town Looking for an hono integration ? See @pomdtr/lastloginHono Support login in trough: Email Link QR Code Google Oauth Github Oauth Gitlab Oauth Facebook Oauth Demo You can try a demo at https://pomdtr-lastloginhonoexample.web.val.run (see @pomdtr/lastLoginHonoExample for code) Usage Wrap your http handlers in a lastlogin middleware (sessions will be persisted in the lastlogin_session table on your sqlite account). If you want to be the only one able to access your val, you can use @pomdtr/verifyUserEmail. import { lastlogin } from "https://esm.town/v/pomdtr/lastlogin"; import { verifyUserEmail } from "https://esm.town/v/pomdtr/verifyUserEmail"; export default lastlogin((req) => { return new Response(`You are logged in as ${req.headers.get("X-LastLogin-Email")}`); }, { // check that the user email match your val town email verifyEmail: verifyUserEmail }); If you want to customize how is allowed to signup, you can set the verifyEmail option: import { lastlogin } from "https://esm.town/v/pomdtr/lastlogin"; export default lastlogin((req) => { return new Response(`You are logged in as ${req.headers.get("X-LastLogin-Email")}`); }, { verifyEmail: (email) => { email == "steve@valtown" } }); You can allow anyone to signup by returning a boolean from the verifyEmail function: import { lastlogin } from "https://esm.town/v/pomdtr/lastlogin"; export default lastlogin((req) => { return new Response(`You are logged in as ${req.headers.get("X-LastLogin-Email")}`); }, { verifyEmail: (_email) => true }); Public Routes import { lastlogin } from "https://esm.town/v/pomdtr/lastlogin"; import { verifyUserEmail } from "https://esm.town/v/pomdtr/verifyUserEmail"; export default lastlogin(() => { return new Response("Hi!"); }, { verifyEmail: verifyUserEmail, public_routes: ["/", "/public/*"], }); See the URLPattern API for reference. Logout Just redirect the user to /auth/logout

Script

const url = new URL(req.url);

const clientID = `${url.protocol}//${url.host}/`;

const redirectUri = `${url.protocol}//${url.host}/auth/callback`;

const tokenUrl = new URL("https://lastlogin.io/token");

tokenUrl.searchParams.set("client_id", clientID);

tokenUrl.searchParams.set("code", code);

const authUrl = new URL("https://lastlogin.io/auth");

authUrl.searchParams.set("client_id", clientID);

authUrl.searchParams.set("redirect_uri", redirectUri);

btrdb_kv_example

@yuuza

An interactive, runnable TypeScript val by yuuza

Script

import process from "node:process";

import { btrdbClient } from "https://esm.town/v/yuuza/btrdbClient";

export const btrdb_kv_example = (async () => {

const db = btrdbClient({

baseUrl: process.env.btrdbUrl,

token: process.env.btrdbToken,

val_town_by_example_components

@pomdtr

@jsxImportSource npm:hono/jsx

HTTP (deprecated)

<p class="text-gray-500 pt-2">Additional resources:</p>

{example.resources.map(({ link, title }) => (

yourBrain

@petermillspaugh

@jsxImportSource https://esm.sh/react

Script

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

import { generateLessonHtml } from "https://esm.town/v/petermillspaugh/lessonTemplate";

import { renderToString } from "npm:react-dom/server";

* Note: this lesson is a work in progress 👷‍♂️

const TITLE = "Your brain";

libsqlstudio_script

@pomdtr

@jsxImportSource https://esm.sh/react@18.3.1

Script

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

import { Studio } from "https://esm.sh/@libsqlstudio/gui?deps=react@18.3.1";

import { createRoot } from "https://esm.sh/react-dom@18.3.1/client";

import { useMemo } from "https://esm.sh/react@18.3.1";

import ValtownDriver from "https://esm.town/v/pomdtr/libsqlstudio_driver";

pie

@jxnblk

// svg-based pie chart service

HTTP (deprecated)

/* usage:

* https://jxnblk-pie.web.val.run/?values=4,5,6

/** @jsxImportSource https://esm.sh/preact */

import chroma from "npm:chroma-js";

import { render } from "npm:preact-render-to-string";

const R = 128;

const dashArray = n => `${(R * Math.PI * n)} ${Math.PI * R}`;

subscribeToPush

@devdoshi

An interactive, runnable TypeScript val by devdoshi

Script

"/": async (req: express.Request, res: express.Response) => {

const response = await fetch(

`https://raw.githubusercontent.com/pirminrehm/service-worker-web-push-example/main/client${

req.path.substring(`/ui`.length)

).then(handleFetchTextResponse);

growthMindset

@petermillspaugh

@jsxImportSource https://esm.sh/react

Script

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

import { generateLessonHtml } from "https://esm.town/v/petermillspaugh/lessonTemplate";

import { renderToString } from "npm:react-dom/server";

* Note: this lesson is a work in progress 👷‍♂️

const TITLE = "Growth mindset";

generateImageHandler

@iamseeley

An interactive, runnable TypeScript val by iamseeley

HTTP (deprecated)

import * as fal from "npm:@fal-ai/serverless-client";

fal.config({

credentials: Deno.env.get("FAL_KEY"),

indieauth_test

@pomdtr

An interactive, runnable TypeScript val by pomdtr

HTTP (deprecated)

const { httpEndpoint } = extractValInfo(import.meta.url);

export default indieauth(handler, {

clientID: httpEndpoint,

jsrApi

@vladimyr

// SPDX-License-Identifier: 0BSD

Script

import * as v from "npm:valibot";

const client = ky.create({ prefixUrl: "https://jsr.io" });

const configFiles = [

scope = normalizeScope(scope);

const data = await client.get(`@${scope}/${name}/meta.json`).json();

return v.parse(PkgMetaSchema, data).latest;

version = await getLatestVersion(scope, name);

const data = await client.get(`@${scope}/${name}/${version}_meta.json`).json();

return v.parse(PkgVerMetaSchema, data).manifest;

const configFile = configFiles.find(filename => Object.hasOwn(manifest, `/${filename}`));

const data = await client.get(`@${scope}/${name}/${version}/${configFile}`, {

parseJson: (text) => JSON.parse(stripJsonComments(text)),

bedtimeStoryMaker

@daniellevine

Bedtime Story Maker Inspired from a RedwoodJS demo I made last year, this adds generative art powered by Fal to the bedtime story maker. Start writing a story by picking a style (spooky, colorful, adventurous an animal (penguin, mouse, unicorn, whale ...) a color for the animal and activity (befriends aliens, goes to the doctor, rides a rollercoaster, bakes a cake for friends) It uses OpenAI to write a children's bedtime story title summary story for a "fantastical story about a green whale who rides the bus" or the "spooky story about the tomato fox who explores a cave". Then using the summary, OpenAI geenrates another prompt to describe the instructions to generate a children's story book image. That's sent to Fal to generate an image. Stories get saved to bedtime_stories in SQLite for viewing, searching and maybe sharing. You then get a bedtime story to enjoy!

HTTP (deprecated)

import { ValTownLink } from "https://esm.town/v/dthyresson/viewOnValTownComponent";

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

import * as fal from "npm:@fal-ai/serverless-client";

export const falConfig = () => {

fal.config({

reactGoogleFonts

@jxnblk

@jsxImportSource https://esm.sh/react

Script

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

const preconnect = (

bedtimeStoryMaker

@stevekrouse

Bedtime Story Maker Inspired from a RedwoodJS demo I mde last year, this adds generative art powered by Fal to the bedtime story maker. Start writing a story by picking a style (spooky, colofrol, adventurous an animal (penguin, mouse, unicorn, whale ...) a color for the animal and activity (befriends aliens, goes to the doctor, rides a rollercoaster, bakes a cake for friends) It uses OpenAI to write a children's bedtime story title summary story for a "fantastical story about a green whale who rides the bus" or the "spooky story about the tomato fox who explores a cave". Then using the summary, OpenAI geenrates another prompt to describe the instructions to geneate a childrens story book image. That's sent to Fal to generate an image. Stories get saved to bedtime_stories in SQLite for viewing, searching and maybe sharing. You then get a bedtime story to enjoy!

HTTP

import { ValTownLink } from "https://esm.town/v/dthyresson/viewOnValTownComponent";

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

import * as fal from "npm:@fal-ai/serverless-client";

export const falConfig = () => {

fal.config({

…

50 51

53 54

…

184