Search

gemini_coder

@stevekrouse

This is an AI code assistant powered by Cerebras , running llama3.3-70b. Inspired by Hassan's Llama Coder . Setup Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY Todos I'm looking for collaborators to help. Fork & send me PRs! [ ] Experiment with two prompt chain (started here )

HTTP

function Hero({

Turn your ideas into fully functional apps in{" "}

function App() {

function handleStarterPromptClick(promptItem: typeof prompts[number]) {

async function handleSubmit(e: React.FormEvent | string) {

function handleVersionChange(direction: "back" | "forward") {

function client() {

function extractCodeFromFence(text: string): string {

async function generateCode(prompt: string, currentCode: string) {

export default async function gemini_coder(req: Request): Promise<Response> {

cerebras_coder

@CerebrasCoder

HTTP

function Hero({

Turn your ideas into fully functional apps in{" "}

function App() {

function handleStarterPromptClick(promptItem: typeof prompts[number]) {

async function handleSubmit(e: React.FormEvent | string) {

function handleVersionChange(direction: "back" | "forward") {

function client() {

function extractCodeFromFence(text: string): string {

async function generateCode(prompt: string, currentCode: string) {

export default async function cerebras_coder(req: Request): Promise<Response> {

valle_tmp_5348120470989651484969606140059

@janpaul123

// This val responds with an HTML form to input the user's name and greets them upon form submission

HTTP

// This val responds with an HTML form to input the user's name and greets them upon form submission

export default async function(req: Request): Promise<Response> {

if (req.method === "POST") {

const formData = new URLSearchParams(await req.text());

welcomingPinkAlligator

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP

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

function debounce(func: Function, wait: number) {

let timeout: number | undefined;

return function executedFunction(...args: any[]) {

const later = () => {

timeout = setTimeout(later, wait);

function App() {

const [prompt, setPrompt] = useState("Generate a colorful gradient shader");

}, [code, debouncedRenderShader, retryCount]);

async function handleSubmit(e: React.FormEvent, shaderErrorMessage?: string) {

if (e) e.preventDefault();

</div>

function client() {

createRoot(document.getElementById("root")!).render(<App />);

client();

function renderShader(canvas: HTMLCanvasElement, fragmentShaderSource: string, time: number) {

const gl = canvas.getContext("webgl");

gl_Position = a_position;

function createShader(gl: WebGLRenderingContext, type: number, source: string) {

const shader = gl.createShader(type);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

function extractGLSLCode(text: string): string {

const glslMatch = text.match(/```glsl\n([\s\S]*?)\n```/);

: text.trim();

export default async function server(req: Request): Promise<Response> {

if (req.method === "POST") {

ethereumAddressGenerator

@alfongj

Tool to generate test ethereum addresses, client side. Don't use this for production keys. The code has not been audited and there could be leakages (although it's unlikely)

HTTP

import { ethers } from "https://esm.sh/ethers@5.7.2";

function CopyableField({ label, value }) {

const copyToClipboard = () => {

</div>

function App() {

const [wallet, setWallet] = useState(null);

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

return new Response(`

SAMPLE_JOKE

@lenatong3

An interactive, runnable TypeScript val by lenatong3

Script

"punchline": "A cat-tastrophe.",

}; // Fetches a random joke.

function fetchRandomJoke() {

const SAMPLE_JOKE = {

"setup": "What do you call a group of disorganized cats?",

airbnb

@bunkaway

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

HTTP

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

function App() {

const [property, setProperty] = useState("");

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

return new Response(`

pngMakerApp

Polyglot Png Creator This val allows creation of polygot png files by uploading a reference image and a file. A polygot png is a valid png file that also contains arbitrary data. This can be used to create files that serve a different purpose depending on their file extensions. PDF and ZIP files are known to work with polygot png images, although not every software supports the resulting files. The conversion happens entirely on the client side. The logic behind the conversion is entirely based on DavidBuchanan314/tweetable-polyglot-png and ported to JavaScript.

HTTP

import { Hono } from 'npm:hono';

function html() {

<!DOCTYPE html>

</html>

function css() {

body {

background-color: #0056b3;

function js() {

import { createPolygotPng } from '/polypng.mjs';

hnFollowPollJob

@zak

An interactive, runnable TypeScript val by zak

Script

import { hackerNewsAuthors } from "https://esm.town/v/zak/hackerNewsAuthors";

import { hnLatestPosts } from "https://esm.town/v/stevekrouse/hnLatestPosts?v=18";

export async function hnFollowPollJob(interval: Interval) {

let posts = await hnLatestPosts({

authors: hackerNewsAuthors,

HTMX_template

@deepfates

@jsxImportSource https://esm.sh/preact

HTTP

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

export default async function(req: Request) {

if (req.method === "POST") {

function submitHandler(event) {

event.preventDefault();

backButton.style.display = "block";

function resetFormHandler(event) {

var container = event.target.parentNode;

remasterbackend

@tempdev

// console.log(await streamwishExtractor("ru04dsfz6sjj"));

Script

url: string;

export async function Fetcher(url: string, referer: string) {

const design = `?destination=${encodeURIComponent(url)}&referer=${encodeURIComponent(referer)}`;

return request.text();

function unpack(p: any, a: any, c: any, k: any) {

while (c--) if (k[c]) p = p.replace(new RegExp("\\b" + c.toString(a) + "\\b", "g"), k[c]);

return p;

function mat(r: any, l: any) {

return r.exec(l);

export async function streamwishExtractor(id: string): Promise<DataSheet> {

const returnData: DataSheet = {

// console.log(await streamwishExtractor("ru04dsfz6sjj"));

export async function doodstreamExtractor(id: string): Promise<DataSheet> {

const returnData: DataSheet = {

// console.log(await doodstreamExtractor("iw358beiadas"));

export async function streamtapeExtractor(id: string): Promise<DataSheet> {

const returnData: DataSheet = {

sweetBonanzaGame

@aa370166fasd

@jsxImportSource https://esm.sh/react

HTTP

"🍭" // Lollipop

function SlotMachine() {

const [slots, setSlots] = useState(Array(5).fill(Array(4).fill("❓")));

</div>

function client() {

createRoot(document.getElementById("root")).render(<SlotMachine />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request) {

return new Response(`

superPeachParrotfish

@nadaamiinn

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

HTTP

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

function JobPostingForm() {

const [title, setTitle] = useState("");

</form>

function JobBoard({ jobs }) {

return (

</div>

function UsernameModal({ onSetUsername }) {

const [username, setUsername] = useState("");

</div>

function ChatRoom() {

const [messages, setMessages] = useState([]);

</div>

function TabNavigation({ activeTab, onTabChange }) {

return (

</div>

function App() {

const [jobs, setJobs] = useState([]);

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");

valSign

@easrng

secure signatures with vals setup you'll need to make 2 new vals: generate a keypair (keep this val private) let vsExportedKeys = @easrng.generateKeys(); publish your public key (make this val public) const vsPublicKey = () => @me.exportedKeys.publicKey; usage sign call @easrng.valSign to get a signature. const signature = await @easrng.valSign({ keys: @me.vsExportedKeys, data: {hello: "world"}}) the result will look something like this: @easrng.htVgaVWWtvnz5AK0DnDaNON5gar5qJeaorfsTCiIr7ua_-D4HPmFrIrPMfwmCaMvI0CxKlYCUe9XTGm7r5s5C3siZGF0YSI6eyJoZWxsbyI6IndvcmxkIn0sInVzZXIiOiJlYXNybmciLCJleHByIjpudWxsfQ you can also set an expiration date: const signature = await @easrng.valSign({ keys: @me.vsExportedKeys, data: "this expires in 1 second", expireIn: 1000 }) verify call @easrng.valSignVerify to verify a signature const { data, handle, expiresAt } = await @easrng.valSignVerify(signature) with the example signature from earlier, data would be {hello: "world"} , handle would be easrng , and expiresAt would be null

Script

import { whoami } from "https://esm.town/v/easrng/whoami";

import { Buffer } from "node:buffer";

export async function valSign({ keys, data, expireIn }: {

keys: {

publicKey: string;

web_mhVADHMQe1

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export async function web_mhVADHMQe1(req) {

return new Response(`<!DOCTYPE html>

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

function playSound() {

const oscillator = audioContext.createOscillator();

oscillator.stop(audioContext.currentTime + 0.1);

function explodeEmojis(event) {

const emojis = ['🎉', '✨', '💫', '🌟', '💥'];

// Make the cube transform on click

document.querySelector('.cube').addEventListener('click', function() {

this.style.transform = `scale(${Math.random() + 0.5}) rotateX(${Math.random() * 360}deg) rotateY(${Math.random()

…

212 213

214

215 216

…

467