Search
translator
@stevekrouse
Press to talk, and get a translation! The app is set up so you can easily have a conversation between two people. The app will translate between the two selected languages, in each voice, as the speakers talk. Add your OpenAI API Key, and make sure to open in a separate window for Mic to work.
HTTP
Press to talk, and get a translation!
The app is set up so you can easily have a conversation between two people. The app will translate between the two selected languages, in each voice, as the speakers talk.
Add your OpenAI API Key, and make sure to open in a separate window for Mic to work.
const app = new Hono();
const openai = new OpenAI(Deno.env.get("OPENAI_API_KEY_VOICE"));
class TranscriptionService {
async transcribeAudio(audioFile) {
try {
const transcription = await openai.audio.transcriptions.create({
file: audioFile,
web_65yJ4LP2Qx
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_65yJ4LP2Qx(req) {
return new Response(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Dreams</title>
<style>
body {
margin: 0;
claude
@adagradschool
An interactive, runnable TypeScript val by adagradschool
HTTP
export default function handler(req) {
// The HTML string needs to be properly escaped and formatted as a template literal
const html = `<!DOCTYPE html>
<html>
<head>
<title>Claude Chat Conversation</title>
<meta charset="UTF-8">
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
htmx_hono_layout
@saolsen
See what a minimal example of a hono + canvas game could look like.
HTTP
See what a minimal example of a hono + canvas game could look like.
/* @jsxImportSource https://esm.sh/hono/jsx */
const app = new Hono();
// Components
* Nav component that uses `hx-boost` toplevel links targeting `main`.
* @remarks
* hx-boost links targeting `main` are handled automatically by the
* layout middleware.
const Nav: FC = () => {
return (
web_Uex9zSRfGn
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_Uex9zSRfGn(req) {
return new Response(`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reality Test #1: Interactive Computing</title>
<style>
body {
font-family: 'Arial', sans-serif;
Breathe
@jeremys
A very simple breathing tool I made for folks who may get panic attacks or just need to regulate their breathing Pure HTML, CSS, and JS!
HTTP
## A very simple breathing tool I made for folks who may get panic attacks or just need to regulate their breathing
Pure HTML, CSS, and JS!
export default async function(req: Request): Promise<Response> {
const query = new URL(req.url).searchParams;
// Read name from the querystring or body. Defaults to "you" if not present.
// HTML string
const htmlContent = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
checkResy
@godot
An interactive, runnable TypeScript val by godot
Script
export let checkResy = (async () => {
const axios = await import("npm:axios");
const apiUrl = "https://staging-api.resy.com/3/auth/password";
const api_key = "VbWk7s3L4KiK5fzlO7JD3Q5EYolJI7n5";
const email = process.env.resyEmail;
const password = process.env.resyPassword;
const config = {
headers: {
Authorization: `ResyAPI api_key="${api_key}"`,
"Content-Type": "multipart/form-data",
lableaks
@jonbo
An interactive, runnable TypeScript val by jonbo
HTTP
export async function lableaks(request: Request): Promise<Response> {
// Define the HTML content
const htmlContent = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebSocket Example</title>
<script>
document.addEventListener("DOMContentLoaded", function () {
orangeVole
@yawnxyz
An interactive, runnable TypeScript val by yawnxyz
HTTP
/** @jsx jsx */
const app = new Hono();
const Layout = ({ children, title = "Content Summary and Tagging" }) => (
<html lang="en">
<head>
<title>{title}</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/loading-states.js"></script>
</head>
val_tOqCakgwrZ
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_tOqCakgwrZ(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const add = (a, b) => a + b; return add(5, 3);
// Return the result in a properly formatted response
return new Response(JSON.stringify({
result: result,
type: typeof result
headers: { 'Content-Type': 'application/json' }
MaplJIT
@aquapi
An interactive, runnable TypeScript val by aquapi
HTTP
const app = router()
.get("/", {
type: "text",
fn: () => "Hi",
.get("/user/*", {
type: "html",
fn: (ctx) => `<p>Hello ${ctx.params[0]}</p>`,
.post("/yield", {
type: "json",
fn: async (ctx) => ctx.req.json(),
val_rf0NeaYrZY
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
return 100;
return Response.json({ success: true, result });
} catch (error) {
return Response.json({
success: false,
error: error.message
}, { status: 500 });
valle_tmp_32286234407113518840440547453902
@janpaul123
// Respond with a HTML page with silly gradients and crazy CSS
HTTP
// Respond with a HTML page with silly gradients and crazy CSS
export default async function (req: Request): Promise<Response> {
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
text-align: center;
valle_tmp_071643302414527117543908170364975
@janpaul123
// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles
HTTP
// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles
export default async function(req: Request): Promise<Response> {
const html = `
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
tealEarthworm
@nbbaier
@jsxImportSource npm:hono/jsx
HTTP
/** @jsxImportSource npm:hono/jsx */
const app = new Hono();
const StyleTag: FC = ({ css }) => <style dangerouslySetInnerHTML={{ __html: css }}>{}</style>;
const css = `body {
font-family: system-ui, sans-serif;
button {
border-radius: .5em;
padding: .25em;
font-size: 1.5em;
line-height: 1;