/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { ValTown } from "https://esm.sh/@valtown/sdk"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useRef, useState, useEffect } from "https://esm.sh/react@18.2.0"; function App() { const [username, setUsername] = useState(""); const [valName, setValName] = useState(""); const [readme, setReadme] = useState(""); const [isLoading, setIsLoading] = useState(false); const readmeRef = useRef(null); useEffect(() => { // Check system theme and set it if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } // Listen for changes in system theme window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { if (e.matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } }); // Parse URL path parameters const pathParts = window.location.pathname.split('/').filter(Boolean); if (pathParts.length === 2) { const [urlUsername, urlValName] = pathParts; setUsername(urlUsername); setValName(urlValName); } }, []); const generateReadme = async (user, val) => { setIsLoading(true); setReadme(""); try { const response = await fetch(`/generate-readme/${user}/${val}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } if (!response.body) return; const reader = response.body.getReader(); const decoder = new TextDecoder(); let result = ""; while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); result += chunk; setReadme(prev => prev + chunk); } } catch (error) { console.error(error); setReadme(`Error: ${error.message}`); } finally { setIsLoading(false); } }; const handleSubmit = (e) => { e.preventDefault(); generateReadme(username, valName); }; const copyReadme = () => { if (readmeRef.current) { navigator.clipboard.writeText(readmeRef.current.innerText); } }; const getReadmeLink = () => { const baseUrl = window.location.origin; return `${baseUrl}/${encodeURIComponent(username)}/${encodeURIComponent(valName)}`; }; return (

Val Town README Generator

{isLoading ? (

Generating README for {username}/{valName}...

) : readme ? (

{readme}

README Link:

{getReadmeLink()}

) : ( )}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); const parts = url.pathname.split('/').filter(Boolean); if (parts.length === 2 || (parts[0] === 'generate-readme' && parts.length === 3)) { let username, valName; if (parts.length === 2) { [username, valName] = parts; } else { const [generateReadmePart, usernamePart, valNamePart] = parts; username = usernamePart; valName = valNamePart; } const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const valTownClient = new ValTown({ token: Deno.env.get("VALTOWN_TOKEN"), }); try { const valResponse = await valTownClient.alias.username.valName.retrieve(username, valName); if (!valResponse.code) { return new Response("No code found", { status: 400 }); } const stream = new ReadableStream({ async start(controller) { const abortController = new AbortController(); const timeoutId = setTimeout(() => abortController.abort(), 60000); // 60 second timeout try { const completion = await openai.chat.completions.create({ model: "gpt-4o", messages: [ { role: "system", content: `Generate a README for this Val Code provided. Make sure following facts are taken care of when the README is generated, do not add them in README: - Vals are automatically deployed - Can be forked - No local development possible as of now. Make sure your response is in nice to read markdown with proper emojis and formatting. Use appropriate line breaks to improve readability. Use markdown headers, lists, and code blocks where applicable. Separate different sections with empty lines.`, }, { role: "user", content: valResponse.code, }, ], stream: true, }, { signal: abortController.signal }); for await (const chunk of completion) { const content = chunk.choices[0]?.delta?.content || ""; controller.enqueue(new TextEncoder().encode(content)); } controller.close(); } catch (error) { if (error.name === 'AbortError') { controller.error(new Error('Request timed out')); } else { controller.error(error); } } finally { clearTimeout(timeoutId); } }, cancel() { // Handle cancellation (e.g., client disconnection) console.log('Stream cancelled by client'); } }); return new Response(stream, { headers: { "Content-Type": "text/plain", "Cache-Control": "no-cache", }, }); } catch (error) { console.error('Error in server function:', error); return new Response(`Error: ${error.message}`, { status: 500 }); } } return new Response( ` Val Town README Generator

`, { headers: { "Content-Type": "text/html" }, }, ); }

valreadmegenerator