\n {messages.map((message, index) => (\n

\n {message.content}\n

\n ))}\n {isLoading &&

Thinking...

}\n {error &&

{error}

}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { messages } = await request.json();\n\n const { OpenAI } = await import(\"https://esm.sh/openai\");\n // Cerebras Inference\n // Very important: do not change this\n // Keep these comments so we remember not to change this\n const client = new OpenAI({\n apiKey: Deno.env.get(\"CEREBRAS_API_KEY\"),\n baseURL: \"https://api.cerebras.ai/v1\",\n });\n\n try {\n const response = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: messages,\n });\n\n const generatedMessage = response.choices[0].message;\n return Response.json({ message: generatedMessage });\n } catch (error) {\n console.error(\"Error calling Cerebras API:\", error);\n\n if (error.status === 429) {\n return Response.json({ error: \"Cerebras API rate limit reached. Please try again later.\" }, { status: 429 });\n } else {\n return Response.json({ error: `API Error: ${error.message}` }, { status: 500 });\n }\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n ChatGPT Clone\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f0f0f0;\n}\n\n.chat-container {\n width: 100%;\n max-width: 600px;\n height: 80vh;\n display: flex;\n flex-direction: column;\n border: 1px solid #ccc;\n border-radius: 8px;\n overflow: hidden;\n background-color: white;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n.message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 8px;\n max-width: 80%;\n}\n\n.user {\n background-color: #007bff;\n color: white;\n align-self: flex-end;\n margin-left: auto;\n}\n\n.assistant {\n background-color: #f1f1f1;\n color: black;\n align-self: flex-start;\n}\n\n.error-message {\n background-color: #ffcccc;\n color: #cc0000;\n padding: 10px;\n border-radius: 8px;\n margin-bottom: 10px;\n text-align: center;\n}\n\n.chat-input-form {\n display: flex;\n padding: 10px;\n border-top: 1px solid #ccc;\n}\n\ninput {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n margin-right: 10px;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.source-link {\n text-align: center;\n padding: 10px;\n font-size: 0.8em;\n}\n\n.source-link a {\n color: #007bff;\n text-decoration: none;\n}\n\n.source-link a:hover {\n text-decoration: underline;\n}\n`;",["D",1739320464748],"version","currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_102":103},"forkedVal",{"_94":157,"_96":158,"_131":132,"_147":159,"_160":-5},"633ea5ca-d4f0-11ef-b120-e6cdfca9ef9f","stevekrouse",7,"prDisabledHint","interval","description","Cerebras Inference template This val shows you how you can deploy an app using Cerebras Inference on Val Town\nin seconds. What is Cerebras? Cerebras is an American chip manufacturer that\nproduces large wafer chips that deliver mind-blowing LLM inference speeds.\nAs of this writing on Jan 17, 2025, Cerebras Inference \nprovides Llama 3.18b, 3.1 70b, and 3.370b at a jaw-dropping 2k tokens per second –\nthat's 50x faster than what the frontier labs produce. Llama 3.370b at 2k tokens\nper second is particularly noteworthy because it is\n a GPT-4-class model . This level\nof 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\nthe following instructions: . Use Cerebras for AI on the backend like so:\n\nconst { OpenAI } = await import(\"https://esm.sh/openai\");\nconst client = new OpenAI({\n apiKey: Deno.env.get(\"CEREBRAS_API_KEY\"),\n baseURL: \"https://api.cerebras.ai/v1\"\n});\nconst response = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: [],\n});\nconst generatedText = response.choices[0].message.content; For example, the val in this template was created by asking\n Townie AI to \"Make a chatgpt clone\",\nthen I hit shift-enter twice, and then pasted in the instructions on\nhow 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\nand summaries with Cerebras ( requires a SerpAPI key ) Cerebras Coder - an app that\ngenerates websites in a second with Cerebras Cerebras Debater - an\napp that truly shows Cerebras's speed: it's Cerebras talking to Cerebras in a debate","latestEvaluation","slug","daisuke/cerebrasTemplate","versions",[169],{"_98":170,"_147":31,"_171":172},["D",1739320464748],"n","1",{"_127":174,"_129":175},"df147774-ad54-11ef-8848-e6cdfca9ef9f",{"_131":176,"_133":95,"_127":174,"_134":-5,"_111":-5,"_135":136,"_137":177,"_139":140,"_141":178,"_143":26,"_94":178,"_144":179,"_98":180,"_147":117,"_148":26,"_113":31,"_149":31,"_150":31,"_151":31,"_114":31,"_152":31,"_153":-5,"_20":181,"_155":182,"_161":-7,"_162":177,"_164":-5,"_165":186,"_167":187},"bsky","Showing my BlueSky posts using their public API","bfc1ddce-ad56-11ef-93b8-e6cdfca9ef9f","/** @jsxImportSource npm:hono/jsx */\n\ntype Feed = {\n feed: { post: { uri: string; author: { displayName: string; avatar: string }; record: { text: string } } }[];\n};\n\nexport default async function(req: Request): Promise {\n const url = \"https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=dai.bsky.social&filter=posts_no_replies\";\n\n const data: Feed = await fetch(url).then((r) => r.json());\n\n return new Response(\n (\n \n Posts by dai on BlueSky\n \n \n \n \n \n

\n Posts by Wil on BlueSky\n

\n [src]\n

\n {data.feed.map(({ post }) => (\n

\n \n

\n {post.record.text}\n {\" \"}\n

\n \n [link]\n \n

\n ))}\n

\n \n ).toString(),\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",["D",1732777356756],{"_96":97,"_102":103},{"_94":183,"_96":184,"_131":176,"_147":185,"_160":-5},"5a568e98-acbc-11ef-ad02-e6cdfca9ef9f","wilhelm",65,"daisuke/bsky",[188,190],{"_98":189,"_147":117,"_171":172},["D",1732777356756],{"_98":191,"_147":31,"_171":192},["D",1732776550308],"2",{"_127":194,"_129":195},"420552a4-9c9d-11ef-93cb-de64eea55b61",{"_131":196,"_133":95,"_127":194,"_134":-5,"_111":-5,"_135":136,"_137":197,"_139":140,"_141":198,"_143":26,"_94":198,"_144":199,"_98":200,"_147":117,"_148":26,"_113":31,"_149":31,"_150":90,"_151":31,"_114":31,"_152":31,"_153":-5,"_20":201,"_155":202,"_161":-7,"_162":206,"_164":-5,"_165":207,"_167":208},"multilingualchatroom","A simple chat room to share with friends of other languages, where each user can talk in their own language and see others' messages in their own language. \nClick and hold a translated message to see the original message. \nOpen the app in a new window to start your own, unique chatroom that you can share with your friends via the room URL.\n\nTODO:\n- BUG: fix the issue that keeps old usernames in the \"[User] is typing\" section after a user changes their name.\n- BUG: Username edit backspaces is glitchy.\n- UI: Update the title for each unique chatroom to make the difference clear.\n- UI: mobile friendly.\n- Feature: the ability for the message receiver to select a part of a translation that is confusing and the author will see that highlight of the confusing words and have the opportunity to reword the message or...\n- Feature: bump a translation to a higher LLM for more accurate translation.\n- Feature: use prior chat context for more accurate translations.\n- Feature: Add video feed for non-verbals while chatting.","ed0ec374-9c9d-11ef-acdc-de64eea55b61","/** @jsxImportSource https://esm.sh/react */\nimport { nanoid } from \"https://esm.sh/nanoid\";\nimport React, { useCallback, useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nconst languages = [\n { code: \"en\", name: \"English\" },\n { code: \"fr\", name: \"French\" },\n { code: \"es\", name: \"Spanish\" },\n { code: \"de\", name: \"German\" },\n { code: \"it\", name: \"Italian\" },\n { code: \"ja\", name: \"Japanese\" },\n];\n\nconst translations = {\n en: {\n title: \"Multilingual Chat Room\",\n usernameLabel: \"Username:\",\n usernamePlaceholder: \"Enter your username\",\n pendingUsernameMessage: \"Send a message to update your username\",\n messagePlaceholder: \"Type a message...\",\n sendButton: \"Send\",\n usersInRoom: \"Users in the room:\",\n shareUrl: \"Share this URL with friends:\",\n copyButton: \"Copy\",\n copiedMessage: \"Copied!\",\n selectLanguage: \"Select your language:\",\n isTyping: \"is typing...\",\n },\n fr: {\n title: \"Salle de Chat Multilingue\",\n usernameLabel: \"Nom d'utilisateur :\",\n usernamePlaceholder: \"Entrez votre nom d'utilisateur\",\n pendingUsernameMessage: \"Envoyez un message pour mettre à jour votre nom d'utilisateur\",\n messagePlaceholder: \"Tapez un message...\",\n sendButton: \"Envoyer\",\n usersInRoom: \"Utilisateurs dans la salle :\",\n shareUrl: \"Partagez cette URL avec vos amis :\",\n copyButton: \"Copier\",\n copiedMessage: \"Copié !\",\n selectLanguage: \"Sélectionnez votre langue :\",\n isTyping: \"est en train d'écrire...\",\n },\n es: {\n title: \"Sala de Chat Multilingüe\",\n usernameLabel: \"Nombre de usuario:\",\n usernamePlaceholder: \"Ingrese su nombre de usuario\",\n pendingUsernameMessage: \"Envíe un mensaje para actualizar su nombre de usuario\",\n messagePlaceholder: \"Escriba un mensaje...\",\n sendButton: \"Enviar\",\n usersInRoom: \"Usuarios en la sala:\",\n shareUrl: \"Comparta esta URL con amigos:\",\n copyButton: \"Copiar\",\n copiedMessage: \"¡Copiado!\",\n selectLanguage: \"Seleccione su idioma:\",\n isTyping: \"está escribiendo...\",\n },\n de: {\n title: \"Mehrsprachiger Chatraum\",\n usernameLabel: \"Benutzername:\",\n usernamePlaceholder: \"Geben Sie Ihren Benutzernamen ein\",\n pendingUsernameMessage: \"Senden Sie eine Nachricht, um Ihren Benutzernamen zu aktualisieren\",\n messagePlaceholder: \"Geben Sie eine Nachricht ein...\",\n sendButton: \"Senden\",\n usersInRoom: \"Benutzer im Raum:\",\n shareUrl: \"Teilen Sie diese URL mit Freunden:\",\n copyButton: \"Kopieren\",\n copiedMessage: \"Kopiert!\",\n selectLanguage: \"Wählen Sie Ihre Sprache:\",\n isTyping: \"tippt gerade...\",\n },\n it: {\n title: \"Sala Chat Multilingue\",\n usernameLabel: \"Nome utente:\",\n usernamePlaceholder: \"Inserisci il tuo nome utente\",\n pendingUsernameMessage: \"Invia un messaggio per aggiornare il tuo nome utente\",\n messagePlaceholder: \"Scrivi un messaggio...\",\n sendButton: \"Invia\",\n usersInRoom: \"Utenti nella stanza:\",\n shareUrl: \"Condividi questo URL con gli amici:\",\n copyButton: \"Copia\",\n copiedMessage: \"Copiato!\",\n selectLanguage: \"Seleziona la tua lingua:\",\n isTyping: \"sta scrivendo...\",\n },\n ja: {\n title: \"多言語チャットルーム\",\n usernameLabel: \"ユーザー名：\",\n usernamePlaceholder: \"ユーザー名を入力してください\",\n pendingUsernameMessage: \"メッセージを送信してユーザー名を更新してください\",\n messagePlaceholder: \"メッセージを入力...\",\n sendButton: \"送信\",\n usersInRoom: \"ルーム内のユーザー：\",\n shareUrl: \"このURLを友達と共有：\",\n copyButton: \"コピー\",\n copiedMessage: \"コピーしました！\",\n selectLanguage: \"言語を選択：\",\n isTyping: \"入力中...\",\n },\n};\n\nconst bannerMessages = {\n en: \"Click and hold on foreign messages to see the original language.\",\n fr: \"Cliquez et maintenez sur les messages étrangers pour voir la langue d'origine.\",\n es: \"Haga clic y mantenga presionado en los mensajes extranjeros para ver el idioma original.\",\n de: \"Klicken und halten Sie fremdsprachige Nachrichten, um die Originalsprache zu sehen.\",\n it: \"Clicca e tieni premuto sui messaggi stranieri per vedere la lingua originale.\",\n ja: \"外国語のメッセージを長押しすると、元の言語が表示されます。\",\n};\n\nfunction Banner({ message, isVisible, language }) {\n if (!isVisible) return null;\n return

{message[language] || message.en}

;\n}\n\nfunction UserList({ users, t }) {\n return (\n

{t.usersInRoom}

\n {user.username} - {languages.find(lang => lang.code === user.language)?.name || user.language}\n

\n );\n}\n\nfunction Sidebar({ users, language, handleLanguageChange, roomUrl, copyToClipboard, copied, t }) {\n return (\n

\n \n

{t.shareUrl}

\n e.target.select()}\n />\n \n {copied && {t.copiedMessage}}\n

{t.selectLanguage}

\n );\n}\n\nfunction TypingIndicator({ typingUsers, t }) {\n if (typingUsers.length === 0) return null;\n \n return (\n

\n {typingUsers.map((user, index) => (\n \n {user} {t.isTyping}\n {index < typingUsers.length - 1 ? ', ' : ''}\n \n ))}\n

\n );\n}\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [inputMessage, setInputMessage] = useState(\"\");\n const [username, setUsername] = useState(\"\");\n const [pendingUsername, setPendingUsername] = useState(\"\");\n const [roomId, setRoomId] = useState(\"\");\n const [language, setLanguage] = useState(\"en\");\n const [copied, setCopied] = useState(false);\n const [heldMessageId, setHeldMessageId] = useState(null);\n const [showBanner, setShowBanner] = useState(false);\n const [hasSeenOtherUserMessage, setHasSeenOtherUserMessage] = useState(false);\n const [translatedBannerMessage, setTranslatedBannerMessage] = useState(bannerMessages);\n const [users, setUsers] = useState([]);\n const [typingUsers, setTypingUsers] = useState([]);\n\n const t = translations[language];\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const roomFromUrl = urlParams.get(\"room\");\n if (roomFromUrl) {\n setRoomId(roomFromUrl);\n } else {\n const newRoomId = nanoid(10);\n setRoomId(newRoomId);\n window.history.pushState({}, \"\", `?room=${newRoomId}`);\n }\n }, []);\n\n useEffect(() => {\n if (roomId) {\n const fetchDefaultUsername = async () => {\n try {\n // First, check if there's a username in localStorage\n const storedUsername = localStorage.getItem('chatUsername');\n if (storedUsername) {\n setUsername(storedUsername);\n } else {\n // If not, fetch a default username from the server\n const response = await fetch(`/default-username?room=${roomId}`);\n if (response.ok) {\n const defaultUsername = await response.text();\n setUsername(defaultUsername);\n // Store the username in localStorage\n localStorage.setItem('chatUsername', defaultUsername);\n }\n }\n\n // Check if there's a language in localStorage\n const storedLanguage = localStorage.getItem('chatLanguage');\n if (storedLanguage) {\n setLanguage(storedLanguage);\n }\n } catch (error) {\n console.error(\"Error fetching default username:\", error);\n }\n };\n\n fetchDefaultUsername();\n }\n }, [roomId]);\n\n useEffect(() => {\n if (roomId) {\n const pollMessages = async () => {\n try {\n const response = await fetch(`/messages?room=${roomId}&language=${language}`);\n if (response.ok) {\n const newMessages = await response.json();\n setMessages(newMessages);\n\n if (!hasSeenOtherUserMessage && newMessages.some(msg => msg.username !== username)) {\n setHasSeenOtherUserMessage(true);\n setShowBanner(true);\n setTimeout(() => setShowBanner(false), 5000);\n }\n }\n } catch (error) {\n console.error(\"Error fetching messages:\", error);\n }\n };\n\n const fetchUsers = async () => {\n try {\n const response = await fetch(`/users?room=${roomId}`);\n if (response.ok) {\n const userList = await response.json();\n setUsers(userList);\n }\n } catch (error) {\n console.error(\"Error fetching users:\", error);\n }\n };\n\n const fetchTypingUsers = async () => {\n try {\n const response = await fetch(`/typing-users?room=${roomId}`);\n if (response.ok) {\n const typingUsersList = await response.json();\n setTypingUsers(typingUsersList.filter(user => user !== username));\n }\n } catch (error) {\n console.error(\"Error fetching typing users:\", error);\n }\n };\n\n pollMessages();\n fetchUsers();\n fetchTypingUsers();\n const messageIntervalId = setInterval(pollMessages, 2000);\n const userIntervalId = setInterval(fetchUsers, 5000);\n const typingIntervalId = setInterval(fetchTypingUsers, 1000);\n\n return () => {\n clearInterval(messageIntervalId);\n clearInterval(userIntervalId);\n clearInterval(typingIntervalId);\n };\n }\n }, [roomId, language, username, hasSeenOtherUserMessage]);\n\n useEffect(() => {\n const translateBannerMessage = async () => {\n if (language !== \"en\") {\n try {\n const translatedMessage = await fetch(\"/translate-text\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n text: bannerMessages.en,\n targetLanguage: language,\n sourceLanguage: \"en\",\n }),\n }).then(res => res.text());\n\n setTranslatedBannerMessage(prev => ({\n ...prev,\n [language]: translatedMessage,\n }));\n } catch (error) {\n console.error(\"Error translating banner message:\", error);\n }\n }\n };\n\n translateBannerMessage();\n }, [language]);\n\n const sendMessage = async () => {\n if (inputMessage && roomId && username) {\n try {\n const response = await fetch(\"/send-message\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n room: roomId,\n username,\n content: inputMessage,\n language,\n newUsername: pendingUsername || undefined,\n }),\n });\n if (response.ok) {\n setInputMessage(\"\");\n if (pendingUsername) {\n setUsername(pendingUsername);\n setPendingUsername(\"\");\n // Update username in localStorage\n localStorage.setItem('chatUsername', pendingUsername);\n }\n }\n } catch (error) {\n console.error(\"Error sending message:\", error);\n }\n }\n };\n\n const updateUser = async (newUsername, newLanguage) => {\n if (newUsername !== username) {\n setPendingUsername(newUsername);\n } else {\n try {\n const response = await fetch(\"/update-user\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ room: roomId, oldUsername: username, newUsername, newLanguage }),\n });\n if (response.ok) {\n setLanguage(newLanguage);\n // Update username and language in localStorage\n localStorage.setItem('chatUsername', newUsername);\n localStorage.setItem('chatLanguage', newLanguage);\n }\n } catch (error) {\n console.error(\"Error updating user:\", error);\n }\n }\n };\n\n const copyToClipboard = useCallback(() => {\n const el = document.createElement(\"textarea\");\n el.value = window.location.href;\n document.body.appendChild(el);\n el.select();\n document.execCommand(\"copy\");\n document.body.removeChild(el);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }, []);\n\n const handleMouseDown = (messageId) => {\n setHeldMessageId(messageId);\n };\n\n const handleMouseUp = () => {\n setHeldMessageId(null);\n };\n\n const handleUsernameChange = (e) => {\n const newUsername = e.target.value;\n updateUser(newUsername, language);\n };\n\n const handleLanguageChange = (e) => {\n const newLanguage = e.target.value;\n updateUser(username, newLanguage);\n // Save the new language to localStorage\n localStorage.setItem('chatLanguage', newLanguage);\n };\n\n const handleInputChange = (e) => {\n setInputMessage(e.target.value);\n updateTypingStatus(true);\n };\n\n const updateTypingStatus = useCallback(\n async (isTyping) => {\n if (roomId && username) {\n try {\n await fetch(\"/update-typing\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ room: roomId, username, isTyping }),\n });\n } catch (error) {\n console.error(\"Error updating typing status:\", error);\n }\n }\n },\n [roomId, username]\n );\n\n useEffect(() => {\n const typingTimer = setTimeout(() => {\n updateTypingStatus(false);\n }, 2000);\n\n return () => clearTimeout(typingTimer);\n }, [inputMessage, updateTypingStatus]);\n\n return (\n

\n \n

{t.title}

\n {t.usernameLabel}\n \n {pendingUsername && {t.pendingUsernameMessage}}\n

\n {messages.map((msg, index) => (\n handleMouseDown(index)}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n >\n {msg.username}:{\" \"}\n {heldMessageId === index ? msg.content : msg.translatedContent || msg.content}\n

\n ))}\n

\n \n

\n e.key === \"Enter\" && sendMessage()}\n placeholder={t.messagePlaceholder}\n />\n \n

\n \n

\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n\n const openai = new OpenAI();\n\n // Simple rate limiting\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n const RATE_LIMIT_KEY = `${KEY}_rate_limit`;\n const MAX_REQUESTS = 20;\n const TIME_WINDOW = 60 * 1000; // 1 minute\n\n async function checkRateLimit() {\n const now = Date.now();\n const rateLimit = await blob.getJSON(RATE_LIMIT_KEY) || { count: 0, timestamp: now };\n\n if (now - rateLimit.timestamp > TIME_WINDOW) {\n rateLimit.count = 1;\n rateLimit.timestamp = now;\n } else {\n rateLimit.count++;\n }\n\n await blob.setJSON(RATE_LIMIT_KEY, rateLimit);\n return rateLimit.count <= MAX_REQUESTS;\n }\n\n async function translateText(text: string, targetLanguage: string, sourceLanguage: string): Promise {\n const cacheKey = `${KEY}_translation_${sourceLanguage}_${targetLanguage}_${text}`;\n const cachedTranslation = await blob.getJSON(cacheKey);\n\n if (cachedTranslation) {\n return cachedTranslation;\n }\n\n if (!(await checkRateLimit())) {\n console.log(\"Rate limit exceeded. Skipping translation.\");\n return text;\n }\n\n try {\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n `You are a translator. Translate the following text from ${sourceLanguage} to ${targetLanguage}. Only respond with the translated text, nothing else.`,\n },\n { role: \"user\", content: text },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 150,\n });\n\n const translatedText = completion.choices[0].message.content || text;\n await blob.setJSON(cacheKey, translatedText);\n return translatedText;\n } catch (error) {\n console.error(\"Translation error:\", error);\n return text;\n }\n }\n\n if (url.pathname === \"/default-username\") {\n const roomId = url.searchParams.get(\"room\");\n if (!roomId) {\n return new Response(\"Room ID is required\", { status: 400 });\n }\n const userCountKey = `${KEY}_user_count_${roomId}`;\n let userCount = await blob.getJSON(userCountKey) || 0;\n userCount++;\n await blob.setJSON(userCountKey, userCount);\n return new Response(`Guest${userCount}`);\n }\n\n if (url.pathname === \"/messages\") {\n const roomId = url.searchParams.get(\"room\");\n const targetLanguage = url.searchParams.get(\"language\") || \"en\";\n if (!roomId) {\n return new Response(\"Room ID is required\", { status: 400 });\n }\n const messages = await blob.getJSON(`chat_room_${roomId}`) || [];\n\n // Translate messages if they're not in the user's selected language\n const translatedMessages = await Promise.all(messages.map(async (msg) => {\n if (msg.language !== targetLanguage) {\n msg.translatedContent = await translateText(msg.content, targetLanguage, msg.language);\n }\n return msg;\n }));\n\n return new Response(JSON.stringify(translatedMessages), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname === \"/send-message\" && request.method === \"POST\") {\n const { room, username, content, language, newUsername } = await request.json();\n if (!room || !username || !content || !language) {\n return new Response(\"Room, username, content, and language are required\", { status: 400 });\n }\n const messages = await blob.getJSON(`chat_room_${room}`) || [];\n\n // Update all prior messages if there's a username change\n if (newUsername && newUsername !== username) {\n messages.forEach(msg => {\n if (msg.username === username) {\n msg.username = newUsername;\n }\n });\n }\n\n messages.push({ username: newUsername || username, content, language, timestamp: new Date().toISOString() });\n await blob.setJSON(`chat_room_${room}`, messages.slice(-100)); // Keep only last 100 messages\n\n // Update users list\n const usersKey = `${KEY}_users_${room}`;\n let users = await blob.getJSON(usersKey) || [];\n const existingUserIndex = users.findIndex(u => u.username === username);\n if (existingUserIndex !== -1) {\n users[existingUserIndex] = { username: newUsername || username, language };\n } else {\n users.push({ username: newUsername || username, language });\n }\n await blob.setJSON(usersKey, users);\n\n return new Response(\"Message sent\", { status: 200 });\n }\n\n if (url.pathname === \"/update-user\" && request.method === \"POST\") {\n const { room, oldUsername, newUsername, newLanguage } = await request.json();\n if (!room || !oldUsername || !newUsername || !newLanguage) {\n return new Response(\"Room, old username, new username, and new language are required\", { status: 400 });\n }\n const usersKey = `${KEY}_users_${room}`;\n let users = await blob.getJSON(usersKey) || [];\n const existingUserIndex = users.findIndex(u => u.username === oldUsername);\n if (existingUserIndex !== -1) {\n users[existingUserIndex] = { username: newUsername, language: newLanguage };\n } else {\n users.push({ username: newUsername, language: newLanguage });\n }\n await blob.setJSON(usersKey, users);\n\n return new Response(\"User updated\", { status: 200 });\n }\n\n if (url.pathname === \"/translate-text\" && request.method === \"POST\") {\n const { text, targetLanguage, sourceLanguage } = await request.json();\n if (!text || !targetLanguage || !sourceLanguage) {\n return new Response(\"Text, target language, and source language are required\", { status: 400 });\n }\n const translatedText = await translateText(text, targetLanguage, sourceLanguage);\n return new Response(translatedText);\n }\n\n if (url.pathname === \"/users\") {\n const roomId = url.searchParams.get(\"room\");\n if (!roomId) {\n return new Response(\"Room ID is required\", { status: 400 });\n }\n const usersKey = `${KEY}_users_${roomId}`;\n const users = await blob.getJSON(usersKey) || [];\n return new Response(JSON.stringify(users), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname === \"/update-typing\" && request.method === \"POST\") {\n const { room, username, isTyping } = await request.json();\n if (!room || !username) {\n return new Response(\"Room and username are required\", { status: 400 });\n }\n const typingKey = `${KEY}_typing_${room}`;\n let typingUsers = await blob.getJSON(typingKey) || [];\n if (isTyping) {\n if (!typingUsers.includes(username)) {\n typingUsers.push(username);\n }\n } else {\n typingUsers = typingUsers.filter(user => user !== username);\n }\n await blob.setJSON(typingKey, typingUsers);\n return new Response(\"Typing status updated\", { status: 200 });\n }\n\n if (url.pathname === \"/typing-users\") {\n const roomId = url.searchParams.get(\"room\");\n if (!roomId) {\n return new Response(\"Room ID is required\", { status: 400 });\n }\n const typingKey = `${KEY}_typing_${roomId}`;\n const typingUsers = await blob.getJSON(typingKey) || [];\n return new Response(JSON.stringify(typingUsers), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n Multilingual Chat Room\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\n.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n}\n.username-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.username-container label {\n margin-bottom: 5px;\n}\n.username-input {\n padding: 5px;\n font-size: 14px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n.pending-username-message {\n font-size: 12px;\n color: #666;\n margin-top: 5px;\n}\n.main-content {\n display: flex;\n gap: 20px;\n}\n.chat-area {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n.chat-box {\n height: 400px;\n overflow-y: auto;\n border: 1px solid #ccc;\n padding: 10px;\n margin-bottom: 10px;\n background-color: white;\n}\n.input-area {\n display: flex;\n}\ninput[type=\"text\"] {\n flex-grow: 1;\n padding: 10px;\n font-size: 16px;\n}\nbutton {\n padding: 10px 20px;\n font-size: 16px;\n background-color: #4CAF50;\n color: white;\n border: none;\n cursor: pointer;\n}\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n.message {\n margin-bottom: 10px;\n padding: 5px;\n border-radius: 5px;\n}\n.message.self {\n text-align: right;\n color: blue;\n}\n.message.clickable {\n cursor: pointer;\n background-color: #f9f9f9;\n transition: background-color 0.3s ease;\n}\n.message.clickable:hover {\n background-color: #e9e9e9;\n}\n.message.held {\n background-color: #e0e0e0;\n}\n.sidebar {\n width: 250px;\n padding: 20px;\n background-color: #e9e9e9;\n border-radius: 5px;\n}\n.language-selector {\n margin-bottom: 20px;\n}\n.language-selector select {\n width: 100%;\n padding: 5px;\n font-size: 16px;\n}\n.share-url {\n margin-bottom: 20px;\n}\n.share-link {\n width: 100%;\n padding: 5px;\n margin-bottom: 10px;\n font-size: 14px;\n}\n.copy-button {\n width: 100%;\n padding: 5px 10pxHere's the continuation of the CSS code:\n\n;\n font-size: 14px;\n}\n.copied-message {\n color: #4CAF50;\n font-style: italic;\n display: block;\n margin-top: 5px;\n}\n.banner {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n padding: 10px;\n background-color: #e6f7ff;\n color: #0066cc;\n text-align: center;\n font-weight: bold;\n z-index: 1000;\n animation: fadeInOut 8s ease-in-out forwards;\n}\n@keyframes fadeInOut {\n 0% { opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { opacity: 0; }\n}\n.user-list {\n margin-bottom: 20px;\n font-size: 12px;\n}\n.user-list h4 {\n margin-bottom: 5px;\n}\n\nh4 {\n font-size: 18px;\n margin-bottom: 8px;\n}\n\n.user-list ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n.user-list li {\n margin-bottom: 3px;\n}\n.typing-indicator {\n font-size: 14px;\n color: #666;\n font-style: italic;\n margin-bottom: 10px;\n}\n`;\n\nThe code has been updated to include Japanese language support. The changes include:\n\n1. Adding Japanese to the `languages` array\n2. Adding Japanese translations to the `translations` object\n3. Adding Japanese translation for the banner message\n\nThese changes allow users to select Japanese as their preferred language in the chat application, and all UI elements and messages will be translated accordingly.",["D",1730938757261],{"_96":97,"_102":103},{"_94":203,"_96":204,"_131":196,"_147":205,"_160":-5},"d76974b4-9ba4-11ef-b3ae-de64eea55b61","trob",63,"A simple chat room to share with friends of other languages, where each user can talk in their own language and see others' messages in their own language.\nClick and hold a translated message to see the original message.\nOpen the app in a new window to start your own, unique chatroom that you can share with your friends via the room URL. TODO: BUG: fix the issue that keeps old usernames in the \"[User] is typing\" section after a user changes their name. BUG: Username edit backspaces is glitchy. UI: Update the title for each unique chatroom to make the difference clear. UI: mobile friendly. Feature: the ability for the message receiver to select a part of a translation that is confusing and the author will see that highlight of the confusing words and have the opportunity to reword the message or... Feature: bump a translation to a higher LLM for more accurate translation. Feature: use prior chat context for more accurate translations. Feature: Add video feed for non-verbals while chatting.","daisuke/multilingualchatroom",[209,211],{"_98":210,"_147":117,"_171":172},["D",1730938757261],{"_98":212,"_147":31,"_171":192},["D",1730938470301],{"_127":214,"_129":215},"5e001502-981f-11ef-960a-de64eea55b61",{"_131":216,"_133":95,"_127":214,"_134":-5,"_111":-5,"_135":136,"_137":66,"_139":140,"_141":217,"_143":26,"_94":217,"_144":218,"_98":219,"_147":31,"_148":26,"_113":31,"_149":31,"_150":117,"_151":31,"_114":31,"_152":31,"_153":-5,"_20":220,"_155":221,"_161":-7,"_162":224,"_164":-5,"_165":225,"_167":226},"falDemoApp","5e243d92-981f-11ef-960a-de64eea55b61","/** @jsxImportSource https://esm.sh/react */\nimport { createFalClient } from \"https://esm.sh/@fal-ai/client\";\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { falProxyRequest } from \"https://esm.town/v/stevekrouse/falProxyRequest\";\n\nfunction App() {\n const [prompt, setPrompt] = useState(\"\");\n const [imageUrl, setImageUrl] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const generateImage = async (e?: React.FormEvent) => {\n e?.preventDefault();\n setLoading(true);\n try {\n const fal = createFalClient({\n proxyUrl: \"/api/fal/proxy\",\n });\n\n const result = await fal.run(\"fal-ai/flux/schnell\", {\n input: {\n prompt,\n image_size: \"landscape_4_3\",\n num_inference_steps: 4,\n num_images: 1,\n enable_safety_checker: true,\n sync_mode: true,\n },\n });\n setImageUrl(result.data.images[0].url);\n } catch (error) {\n console.error(\"Error generating image:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Fal AI Image Generator

\n {imageUrl && (\n

\n $\"Generated$ \n

\n )}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname === \"/\") {\n return new Response(\n `\n \n \n \n \n \n Fal AI Image Generator\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n }\n\n if (url.pathname === \"/api/fal/proxy\") {\n return falProxyRequest(req);\n }\n\n return new Response(\"Not Found\", { status: 404 });\n}",["D",1730444596002],{"_96":97,"_102":103},{"_94":222,"_96":158,"_131":216,"_147":223,"_160":-5},"4e44a880-96c6-11ef-a9c3-de64eea55b61",5,"@jsxImportSource https://esm.sh/react","daisuke/falDemoApp",[227],{"_98":228,"_147":31,"_171":172},["D",1730444596002],{"_127":230,"_129":231},"10b3f2e2-659c-11ef-9810-de64eea55b61",{"_131":232,"_133":95,"_127":230,"_134":-5,"_111":-5,"_135":136,"_137":66,"_139":140,"_141":233,"_143":26,"_94":233,"_144":234,"_98":235,"_147":90,"_148":26,"_113":31,"_149":31,"_150":31,"_151":31,"_114":31,"_152":31,"_153":-5,"_20":236,"_155":237,"_161":-7,"_162":224,"_164":-5,"_165":240,"_167":241},"linkInBioTemplate","22c488a6-659d-11ef-a8b8-de64eea55b61","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\n\nexport default async function(req: Request) {\n return new Response(\n renderToString(\n \n \n \n \n daisuke\n \n \n

daisuke

ping me here

\n Github\n LinkedIn\n Twitter\n Instagram\n

\n \n ,\n ),\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}\n\nconst itemStyle = {\n padding: \"10px\",\n color: \"white\",\n backgroundColor: \"#ff748d\",\n borderRadius: \"20px\",\n textDecoration: \"none\",\n\n boxShadow: \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n};",["D",1724891103930],{"_96":97,"_102":103},{"_94":238,"_96":158,"_131":232,"_147":239,"_160":-5},"d465b6de-0f0d-11ef-99e3-cab58f78796a",38,"daisuke/linkInBioTemplate",[242,244,246],{"_98":243,"_147":90,"_171":172},["D",1724891103930],{"_98":245,"_147":117,"_171":192},["D",1724890828539],{"_98":247,"_147":31,"_171":248},["D",1724890644430],"3",{"_127":250,"_129":251},"bfab5d4a-f6ce-11ee-b98f-cab58f78796a",{"_131":252,"_133":95,"_127":250,"_134":-5,"_111":-5,"_135":136,"_137":66,"_139":253,"_141":254,"_143":26,"_94":254,"_144":255,"_98":256,"_147":117,"_148":26,"_113":31,"_149":31,"_150":117,"_151":31,"_114":31,"_152":31,"_153":-5,"_20":257,"_155":258,"_161":-7,"_162":262,"_164":-5,"_165":263,"_167":264},"postHogAPICapture","script","c2d76270-f6ce-11ee-9d17-cab58f78796a","import { fetch } from \"https://esm.town/v/std/fetch\";\n\nexport async function postHogAPICapture({ key, event, properties, distinct_id }: {\n key: string;\n event: string;\n properties: object;\n distinct_id: string;\n}) {\n const body = {\n \"api_key\": key,\n \"event\": event,\n \"properties\": properties,\n \"distinct_id\": distinct_id,\n };\n let result = await fetch(\"https://app.posthog.com/capture/\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(body),\n }).then((r) => r.json());\n if (result.error) {\n throw new Error(\"PH error \" + result.error.message);\n }\n else {\n return result;\n }\n}",["D",1712707838764],{"_96":97,"_102":103},{"_94":259,"_96":260,"_131":252,"_147":261,"_160":-5},"5afb5411-f5fc-46a8-b964-0ff0553947c7","ianvph",17,"An interactive, runnable TypeScript val by daisuke","daisuke/postHogAPICapture",[265,267],{"_98":266,"_147":117,"_171":172},["D",1712707838764],{"_98":268,"_147":31,"_171":192},["D",1712707833688],"hasNext","routes/_app","actionData","errors"]