Search results for "react client side"

dateme_react_hydrated

@stevekrouse

Date Me Directory This is entry-point val for the source code for the Date Me Directory. Contributions welcome! This app uses Hono as the server framework and for JSX . The vals are stored in Val Town SQLite . Contributing Forking this repo should mostly work, except for the sqlite database. You'll need to create the table & populate it with some data. This script should do it, but I think it has a couple bugs. If you're interested in contributing to this project contact me or comment on this val and I'll get it working for ya! Todos [ ] Make the SQLite database forkable and build a widget/workflow for that, ie fix @stevekrouse/dateme_sqlite [ ] Require an email (that isn't shared publicly) [ ] Verify the email address with a "magic link" [ ] Refactor Location to an array of Lat, Lon [ ] Geocode all the existing locations [ ] Add a geocoder map input to the form [ ] Allow selecting multiple location through the form [ ] Profile performance & speed up site, possibly add more caching [ ] Let people edit their forms [ ] Featured profiles

1

HTTP

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

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

import {

StaticRouterProvider,

} from "https://esm.sh/react-router-dom@6.23.0/server?deps=react@18.2.0";

import { sqlite } from "https://esm.town/v/std/sqlite?v=6";

GistGPT_Client

@weaverwhale

GistGPT Client Provide a RAW file URL from Github, BitBucket, GitLab, Val Town, etc. and GistGPT will provide you the gist of the code. Client for https://www.val.town/v/weaverwhale/GistGPT

0

HTTP

# GistGPT Client

> Provide a RAW file URL from Github, BitBucket, GitLab, Val Town, etc. and GistGPT will provide you the gist of the code.

[Client](https://weaverwhale-gistgpt_client.web.val.run/) for https://www.val.town/v/weaverwhale/GistGPT

</h1>

<p class="mb-4">Client for the <a class="underline" target="_blank" href="https://www.val.town/v/weaverwhale/GistGPT"

<p class="mb-4">Provide a RAW file URL from Github, BitBucket, GitLab, Val Town, etc. and GistGPT will provide you th

e.target.disabled = true;

window.location.href = "/gist?url=https://esm.town/v/weaverwhale/GistGPT_Client";

document.querySelector("input").value = "Summarizing this file...";

jsonpub

@yawnxyz

// Initialize InstantDB

0

HTTP

const cursor = {

x: e.clientX,

y: e.clientY,

color: userColor,

const totalWidth = $("body").width();

const xPos = (e.clientX / totalWidth) * 100;

if (xPos < 10 || xPos > 90) return;

REACT_MINIFIED

@liamdanielduffy

// set by liamdanielduffy.buildReactMinified at 2023-06-01T12:15:21.371Z

3

0

Script

// set by liamdanielduffy.buildReactMinified at 2023-06-01T12:15:21.371Z

export let REACT_MINIFIED = "/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its

hallmarkMoviePlotGenerator

@manyone

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

1

HTTP

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

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

import React, { useState } from "https://esm.sh/react@18.2.0";

const hallmarkTemplate = {

</div>

function client() {

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

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

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

preciseScarletHerring

@stevekrouse

Cerebras Inference template This val shows you how you can deploy an app using Cerebras Inference on Val Town in seconds. What is Cerebras? Cerebras is an American chip manufacturer that produces large wafer chips that deliver mind-blowing LLM inference speeds. As of this writing on Jan 17, 2025, Cerebras Inference provides Llama 3.18b, 3.1 70b, and 3.370b at a jaw-dropping 2k tokens per second – that's 50x faster than what the frontier labs produce. Llama 3.370b at 2k tokens per second is particularly noteworthy because it is a GPT-4-class model . This level of intelligence at that level of speed will unlock whole new classes of applications. Quick start Set up Cerebras Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY Once Cerebras is set up in your Val Town account, there are two ways to get started: Fork this app and customize it (or ask Townie AI to customize it) Start a new chat with Townie AI and copy & paste the following instructions: . Use Cerebras for AI on the backend like so: const { OpenAI } = await import("https://esm.sh/openai"); const client = new OpenAI({ apiKey: "YOUR_CEREBRAS_API_KEY", baseURL: "https://api.cerebras.ai/v1" }); const response = await client.chat.completions.create({ model: "llama-3.3-70b", messages: [], }); const generatedText = response.choices[0].message.content; For example, the val in this template was created by asking Townie AI to "Make a chatgpt clone", then I hit shift-enter twice, and then pasted in the instructions on how to use Cerebras from above, then hit enter. Townie built this app on its first try, in about 20 seconds. Sample apps Cerebras Searcher - a Perplexity clone that uses the SerpAPI to do RAG and summaries with Cerebras ( requires a SerpAPI key ) Cerebras Coder - an app that generates websites in a second with Cerebras Cerebras Debater - an app that truly shows Cerebras's speed: it's Cerebras talking to Cerebras in a debate

0

HTTP

const { OpenAI } = await import("https://esm.sh/openai");

const client = new OpenAI({

apiKey: "YOUR_CEREBRAS_API_KEY",

baseURL: "https://api.cerebras.ai/v1"

const response = await client.chat.completions.create({

model: "llama-3.3-70b",

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

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

import React, { useState } from "https://esm.sh/react@18.2.0";

function App() {

</div>

function client() {

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

if (typeof document !== "undefined") {

client();

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

// Keep these comments so we remember not to change this

const client = new OpenAI({

apiKey: Deno.env.get("CEREBRAS_API_KEY"),

try {

const response = await client.chat.completions.create({

model: "llama-3.3-70b",

sqliteExplorerApp

@postpostscript

fork of @nbbaier/sqliteExplorerApp with my authentication middleware

1

0

HTTP

<h1>sqlite explorer</h1>

<option value="default" selected={source === "default"}>Default (@std/sqlite)</option>

return c.render(

{tableList}

artisticAzureCrawdad

@bikram6731

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

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(

azureBeetle

@stevekrouse

@jsxImportSource https://esm.sh/hono@latest/jsx

0

HTTP

change my understanding. I really like{" "}

<a className="text-blue-500 hover:underline" href="https://www.readtangle.com">Tangle</a>{" "}

because it offers perspectives from all sides. I dislike when people assume the worst of their opponents and

when I can't tell who's right because no one addresses the best arguments from their opponents.

</p>

whoIsHiring

@stevekrouse

WIP Searcher for HN whos hiring posts HonoJs doesn't support render for async components so the style is off for the home page. And the state changes don't register in html rendering so thinking of using react instead.

1

0

HTTP

HonoJs doesn't support render for async components so the style is off for the home page.

And the state changes don't register in html rendering so thinking of using react instead.

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

import React, { useCallback, useEffect, useReducer, useRef, useState } from "https://esm.sh/react";

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

import { renderToString } from "https://esm.sh/react-dom/server";

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

whoIsHiring

@vawogbemi

WIP Searcher for HN whos hiring posts HonoJs doesn't support render for async components so the style is off for the home page. And the state changes don't register in html rendering so thinking of using react instead.

3

1

HTTP

HonoJs doesn't support render for async components so the style is off for the home page.

And the state changes don't register in html rendering so thinking of using react instead.

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

import React, { useCallback, useEffect, useReducer, useRef, useState } from "https://esm.sh/react";

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

import { renderToString } from "https://esm.sh/react-dom/server";

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

youtubeSearchResults

@trob

@jsxImportSource https://esm.sh/react

0

HTTP

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

import React, { useState } from "https://esm.sh/react";

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

function App() {

performSearch();

const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {

if (e.key === 'Enter') {

</div>

function client() {

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

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

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

counterTown

@stevekrouse

@jsxImportSource npm:hono@3/jsx

3

HTTP

</div>

{/* We'll need to implement a server-side chart solution or use a simple HTML table for now */}

<thead>

resizeImageError

@shawnbasquiat

// This val creates an image resizing service using the Cloudinary API.

1

HTTP

// It provides a form for users to input the image URL and size, and displays the resized image.

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

import React, { useState } from "https://esm.sh/react";

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

function App() {

const [resizedImageUrl, setResizedImageUrl] = useState("");

const handleSubmit = async (e: React.FormEvent) => {

e.preventDefault();

</div>

function client() {

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

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

async function testEndpoint() {

getValsContextWindowDebug

@janpaul123

// This val renders the output of "janpaul123/getValsContextWindow" as HTML

0

HTTP

// This val renders the output of "janpaul123/getValsContextWindow" as HTML

// It uses React for rendering and includes a <select> for the "model" option

// The approach is to fetch the context window data, then render it as an interactive HTML page

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

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

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