Trending Vals
122
getContentFromUrl
@yawnxyz
HTTP
getContentFromUrl Use this for summarizers.
Combines https://r.jina.ai/URL and markdown.download's Youtube transcription getter to do its best to retrieve content from URLs. https://arstechnica.com/space/2024/06/nasa-indefinitely-delays-return-of-starliner-to-review-propulsion-data
https://journals.asm.org/doi/10.1128/iai.00065-23 Usage: https://yawnxyz-getcontentfromurl.web.val.run/https://www.ncbi.nlm.nih.gov/pmc/articles/PMC10187409/ https://yawnxyz-getcontentfromurl.web.val.run/https://www.youtube.com/watch?v=gzsczZnS84Y&ab_channel=PhageDirectory
123
125
126
127
resyGetMatchingSlot
@vtdocs
Script
(Part of: https://www.val.town/v/vtdocs.resyBot) This val attempts to return a single valid slot (per the time range requirements). If there are no valid slots, it throws an error. When there are multiple valid slots, it picks the middle slot (by ordering, not necessarily by time).
129
130
basicAuth
@pomdtr
Script
Val Town Basic Auth Add basic auth on top of any http val Usage Wrap your HTTP handler in the basicAuth middleware. import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth";
function handler(req: Request) {
return new Response("You are authenticated!");
}
export default basicAuth(handler, { verifyUser: (username, password) => username == "user" && password == "password" }); If you want to use an apiToken as a password: import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth";
import { verifyToken } from "https://www.val.town/v/pomdtr/verifyToken"
function handler(req: Request) {
return new Response("You are authenticated!");
}
export default basicAuth(handler, { verifyUser: (_, password) => verifyToken(password) });
131
132
sendSMS
@iamseeley
Script
💬 Email-to-SMS Send text messages on Val Town! Usage import { sendSMS } from 'https://esm.town/v/iamseeley/sendSMS';
sendSMS(phoneNumber: string, message: string, carrier: string): Promise<void> Parameters phoneNumber: The recipient's phone number (string of digits, no spaces or dashes) message: The text message you want to send carrier: The recipient's cell phone carrier. Supported carriers:
'att' (AT&T),
'tmobile' (T-Mobile),
'verizon' (Verizon),
'sprint' (Sprint) List of Email-To-SMS Addresses Comment on this val if you'd like me to add a carrier from the above list! Example import { sendSMS } from 'https://esm.town/v/iamseeley/sendSMS';
sendSMS('1234567890', 'Hello from Val Town!', 'verizon');
134
lootGenAPI
@roramigator
HTTP (deprecated)
Loot Generator API How It Works Components The Loot Generator API creates random loot items by combining: 30 adjectives 29 materials 15 item types resulting in 13,050 possible items. Legendary Items Occasionally, a rare legendary item is generated. An item becomes legendary if all three components are rare. Rarity is determined by a threshold: Threshold = max(1,⌊log(length)×0.6⌋) Probability of a legendary item with the default settings: P(Legendary) = 1/13,050 ≈ 0.00766% Only one legendary item is possible: ✨💎 Arcane Diamond Rock . Customization You can expand the lists or adjust the 0.6 multiplier to control rarity.
135
136
137
138
dotcom
@jxnblk
HTTP
Overengineered personal site and blog built on Val Town. https://jxnblk.com I started rebuilding my site using Val Town with the intent to create a val that would fetch static HTML and commit to a GitHub repo to host with gh-pages.
After building the site out, I found that the performance seemed good enough – at least in the US – to host it directly on Val Town. How it works The old site still exists at on GitHub at jxnblk/blog and includes the source markdown files, build script, and static JSON API.
I experimented with storing JSON in Val Town storage, but for now, the site imports a static JSON file for content.
This content is passed to the App React component that includes the entire HTML and handles routing.
The component is rendered using ReactStream which can render React to stream in Val Town and hydrate the component in the browser.
For performance reasons, I'm not using React on the client, but using small vanilla JS scripts to handle color modes. ReactStream also accepts middleware, and this site uses middleware to: Record server analytics in Val Town SQLite Respond to /robots.txt Handle redirects Generate an /rss.xml file Pass the blog content as props to the App component Set cache headers The favicon, avatar image, and OG images are also built in Val Town.
The avatar val exports an Avatar React component that's used in the site and
exposes an image service at https://jxnblk-avatar.web.val.run/ that accepts search parameters.
This image service is used for the site's favicon.
The blogOGImage val is used to generate PNG OG images from SVG and take search parameters to make dynamic
images for each blog post. Styling is handled by importing CSS from JxnblkCSS and rendering an inline <style> tag in the HTML head.
I experimented with some other approaches, but this seemed to be the simplest solution. What's next There are still some content issues in the markdown that need to be updated for the new site and there are likely bugs to fix.
If you spot anything, you can leave a comment on this val below.
I experimented with a few different approaches and plan to consolidate JxnblkApp and this val and clean up some of the structure of the site. I started building out a custom Reddit embed widget to help with front-end performance, but it's buggy and needs some work.
I'd also like to build a custom Val Town embed widget to add custom demo vals to future posts, but that's still a work in progress. Let me know what you think of the site so far, and if you have any ideas on how to make this better, I'd love to hear them!
139
lastloginHono
@pomdtr
Script
See @pomdtr/lastlogin for more informations about the middleware Example /** @jsxImportSource npm:hono@3/jsx */
import { lastlogin } from "https://esm.town/v/pomdtr/lastloginHono";
import { verifyUserEmail } from "https://esm.town/v/pomdtr/verifyUserEmail"
import { Hono } from "npm:hono";
const app = new Hono();
const lastloginMiddleware = lastlogin({
verifyEmail: verifyUserEmail
});
// required for the auth pages to work
app.use("/auth/*", lastloginMiddleware);
// this page is public
app.get("/", async (c) => {
return c.html(
<div>
There is a secret message for you if you{" "}<a href="/secret">login</a>
</div>,
);
});
// this page requires the user to signup
app.get("/secret", lastloginMiddleware, async (c) => {
const email = c.req.header("X-User-Email");
return c.html(
<div>
I think {email} is a really silly email address, actually.
</div>,
);
});
export default app.fetch;
140
perplexityAPI
@nbbaier
Script
Perplexity API Wrapper This val exports a function pplx that provides an interface to the Perplexity AI chat completions API. You'll need a Perplexity AI API key, see their documentation for how to get started with getting a key. By default, the function will use PERPLEXITY_API_KEY in your val town env variables unless overridden by setting apiKey in the function. pplx(options: PplxRequest & { apiKey?: string }): Promise<PplxResponse> Generates a model's response for the given chat conversation. Required parameters in options are the following (for other parameters, see the Types section below): model ( string ): the name of the model that will complete your prompt. See below for possible values: pplx- 7b-chat , pplx-70b-chat , pplx-7b-online , pplx-70b-online , llama-2-70b-chat , codellama-34b -instruct , mistral-7b-instruct , and mixtral-8x7b-instruct . messages ( Message[] ): A list of messages comprising the conversation so far. A message object must contain role ( system , user , or assistant ) and content (a string). You can also specify an apiKey to override the default Deno.env.get("PERPLEXITY_API_KEY") . The function returns an object of types PplxResponse , see below. Types PplxRequest Request object sent to Perplexity models. | Property | Type | Description |
|---------------------|----------------------|-----------------------------------------------------------------|
| model | Model | The name of the model that will complete your prompt. Possible values: pplx- 7b-chat , pplx-70b-chat , pplx-7b-online , pplx-70b-online , llama-2-70b-chat , codellama-34b -instruct , mistral-7b-instruct , and mixtral-8x7b-instruct . |
| messages | Message[] | A list of messages comprising the conversation so far. |
| max_tokens | number | (Optional) The maximum number of completion tokens returned by the API. The total number of tokens requested in max_tokens plus the number of prompt tokens sent in messages must not exceed the context window token limit of model requested. If left unspecified, then the model will generate tokens until either it reaches its stop token or the end of its context window. |
| temperature | number | (Optional) The amount of randomness in the response, valued between 0 inclusive and 2 exclusive. Higher values are more random, and lower values are more deterministic. You should either set temperature or top_p, but not both. |
| top_p | number | (Optional) The nucleus sampling threshold, valued between 0 and 1 inclusive. For each subsequent token, the model considers the results of the tokens with top_p probability mass. You should either alter temperature or top_p, but not both. |
| top_k | number | (Optional) The number of tokens to keep for highest top-k filtering, specified as an integer between 0 and 2048 inclusive. If set to 0, top-k filtering is disabled. |
| stream | boolean | (Optional) Flag indicating whether to stream the response. |
| presence_penalty | number | (Optional) A value between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics. Incompatible with frequency_penalty. |
| frequency_penalty | number | (Optional) A multiplicative penalty greater than 0. Values greater than 1.0 penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim. A value of 1.0 means no penalty. Incompatible with presence_penalty. | PplxResponse Response object for pplx models. | Property | Type | Description |
|------------|-------------------------|--------------------------------------------------|
| id | string | The ID of the response. |
| model | Model | The model used for generating the response. |
| object | "chat.completion" | The type of object (always "chat.completion"). |
| created | number | The timestamp indicating when the response was created. |
| choices | CompletionChoices[] | An array of completion choices. | Please refer to the code for more details and usage examples of these types. Message Represents a message in a conversation. | Property | Type | Description |
|------------|-----------------------|--------------------------------------------------------|
| role | "system" \| "user" \| "assistant" | The role of the speaker in this turn of conversation. After the (optional) system message, user and assistant roles should alternate with user then assistant, ending in user. |
| content | string | The contents of the message in this turn of conversation. | CompletionChoices The list of completion choices the model generated for the input prompt. | Property | Type | Description |
|-------------------|-----------------------------------|-----------------------------------------------------|
| index | number | The index of the choice. |
| finish_reason | "stop" \| "length" | The reason the model stopped generating tokens. Possible values are stop if the model hit a natural stopping point, or length if the maximum number of tokens specified in the request was reached. |
| message | Message | The message generated by the model. |
| delta | Message | The incrementally streamed next tokens. Only meaningful when stream = true. |
141
bedtimeStoryMaker
@dthyresson
HTTP (deprecated)
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!
143
144
ai
@yawnxyz
HTTP (deprecated)
An http and class wrapper for Vercel's AI SDK Usage: Groq: https://yawnxyz-ai.web.val.run/generate?prompt="tell me a beer joke"&provider=groq&model=llama3-8b-8192 Perplexity: https://yawnxyz-ai.web.val.run/generate?prompt="what's the latest phage directory capsid & tail article about?"&provider=perplexity Mistral: https://yawnxyz-ai.web.val.run/generate?prompt="tell me a joke?"&provider=mistral&model="mistral-small-latest" async function calculateEmbeddings(text) {
const url = `https://yawnxyz-ai.web.val.run/generate?embed=true&value=${encodeURIComponent(text)}`;
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('Error calculating embeddings:', error);
return null;
}
}
145
sqliteBuilder
@postpostscript
Script
sqliteBuilder: Opinionated safe(r) query builder using tagged templates import { Statement } from "https://esm.town/v/postpostscript/sqliteBuilder";
const unsafeId = "1234 or TRUE"
console.log(Statement`
SELECT *
FROM table
WHERE id = ${unsafeId}
${Statement`AND otherCondition`}
`)
// StatementInstance {
// sql: "\nSELECT *\nFROM table\nWHERE id = ?\nAND otherCondition\n",
// args: [ "1234 or TRUE" ],
// log: false
// }
const results = await Statement`SELECT ...`.execute()
// [ { key: "value", anotherKey: "anotherValue" }, ... ] Or you can pass it directly to @std/sqlite.execute : import { sqlite } from "https://esm.town/v/std/sqlite"
await sqlite.execute(Statement`Select ...`) You can combine multiple statements using Statement.prototype.combineWith : Statement`...`.combineWith(Statement`...`, " AND ")
[
Statement`fieldA`,
Statement`fieldB`,
Statement`fieldC`,
].reduce((a, b) => a.combineWith(b, ", "))
148
149
tuna
@jxnblk
Script
🐟 Simple CSS library for Val Town import { css } from "https://esm.town/v/jxnblk/tuna";
const styles = css({
body: { // special keyword for <body> element
fontFamily: "system-ui, sans-serif",
margin: 0,
backgroundColor: "#f5f5f5",
},
container: {
padding: 32, // numbers are converted to pixel units
margin: "0 auto",
maxWidth: 1024,
},
input: {
fontFamily: "inherit",
fontSize: "inherit",
lineHeight: "1.5",
padding: "2px 8px",
border: "1px solid #ccc",
borderRadius: "4px",
},
}); // JSX example
const html = render(
<div className={styles.container}>
<style {...styles.tag} />
<h1>Tuna Example</h1>
<input
type="text"
defaultValue="hi"
className={styles.input}
/>
</div>
); // get raw CSS string
styles.css Nested selectors and pseudoselectors const styles = css({
button: {
background-color: "tomato",
"&:hover": {
background-color: "magenta",
},
"& > svg": {
fill: "currentColor",
},
},
}); Media queries const styles = css({
box: {
padding: 16,
"@media screen and (min-width: 768px)": {
padding: 32,
"&:hover": {
color: "tomato",
},
},
}
}); Limitations Does not support HTML element selectors (other than body ) Tests: https://www.val.town/v/jxnblk/tuna_tests
150