Prompt Engineering Assistant

Step 1: Define Task & Generate System Prompt

\n Enter Task Description or Draft Prompt:\n \n \n

Generating

\n\n

Step 2: Refine Generated System Prompt

\n Generated System Prompt (Editable):\n \n \n

\n\n

Step 3: Define Variables & Test Prompt

\n User Message Template (Optional, use {{{var_name}}}):\n \n \n

Testing with LLM

\n\n

Test Results

Logs

\n\n

`;\n};\n\nconst clientJs = () => `\n // DOM Elements\n const taskDescEl = document.getElementById('task-description');\n const genButton = document.getElementById('generate-button');\n const loaderGen = document.getElementById('loading-indicator-generate');\n const errorGen = document.getElementById('error-display-generate');\n const step2Refine = document.getElementById('step2-refine');\n const genPromptEl = document.getElementById('generated-prompt');\n const updateVarsButton = document.getElementById('update-variables-button');\n const step3Test = document.getElementById('step3-test');\n const varInputsContainer = document.getElementById('variable-inputs');\n const userMsgTemplateEl = document.getElementById('user-message-template');\n const testButton = document.getElementById('test-button');\n const loaderTest = document.getElementById('loading-indicator-test');\n const errorTest = document.getElementById('error-display-test');\n const resultsDisplay = document.getElementById('results-display');\n const llmOutputEl = document.getElementById('llm-output');\n const logsDisplay = document.getElementById('logs-display');\n const logsContent = document.getElementById('logs-content');\n\n // Utility Functions\n const esc = (unsafe) => { if(unsafe==null)return''; return unsafe.toString().replace(/[&<>\"']/g, m => ({'&':'&','<':'<','>':'>','\"':'"',\"'\":'''})[m]); };\n const showLoading = (loader, show) => { loader.style.display = show ? 'block' : 'none'; };\n const showError = (errEl, msg) => { errEl.textContent = msg; errEl.style.display = 'block'; };\n const clearError = (errEl) => { errEl.textContent = ''; errEl.style.display = 'none'; };\n const toggleSection = (section, show) => { section.style.display = show ? 'block' : 'none'; };\n const showResults = (show) => { resultsDisplay.style.display = show ? 'block' : 'none'; if (show) setTimeout(() => resultsDisplay.classList.add('visible'), 10); else resultsDisplay.classList.remove('visible'); };\n const showLogs = (show) => { logsDisplay.style.display = show ? 'block' : 'none'; if (show) setTimeout(() => logsDisplay.classList.add('visible'), 10); else logsDisplay.classList.remove('visible'); };\n\n const formatLogs = (logs) => {\n if (!logs?.length) return '

No logs generated for this request.

';\n return logs.map(lg => {\n let dtlStr = '';\n if(lg.dtls) { try { dtlStr = esc(JSON.stringify(lg.dtls)); } catch(e){ dtlStr='[Err]'; } }\n const ts = lg.ts || new Date().toISOString();\n const lvl = lg.lvl || 'INFO';\n const comp = lg.comp || 'Sys';\n const msg = lg.msg || '';\n const reqIdStr = lg.reqId ? \\`[\\${lg.reqId.substring(0,6)}]\\` : '';\n return \\`

[\\${ts.substring(11,23)}] \\${reqIdStr} [\\${lvl}][\\${comp}]\\${esc(msg)}\\${dtlStr ? \\` | Dtls: \\${dtlStr}\\` : ''}

\\`;\n }).join('');\n };\n\n const updateLogDisplay = (logs) => {\n logsContent.innerHTML = formatLogs(logs);\n showLogs(true);\n };\n\n // Event Handlers\n genButton.onclick = async () => {\n const taskDesc = taskDescEl.value;\n if (!taskDesc || taskDesc.trim().length < 10) {\n showError(errorGen, 'Please enter a more detailed task description (at least 10 characters).');\n return;\n }\n clearError(errorGen);\n showLoading(loaderGen, true);\n genButton.disabled = true;\n toggleSection(step2Refine, false);\n toggleSection(step3Test, false);\n showResults(false);\n showLogs(false);\n\n try {\n const response = await fetch('/generate', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ taskDescription: taskDesc }),\n });\n const result = await response.json();\n updateLogDisplay(result.logs || []); // Display logs even if there's an error\n\n if (!response.ok || result.error) {\n throw new Error(result.error || result.dtls || 'Server error: ' + response.status);\n }\n\n genPromptEl.value = result.data.generatedPrompt;\n toggleSection(step2Refine, true);\n parseAndDisplayVariables(); // Automatically parse after generation\n toggleSection(step3Test, true); // Show testing section immediately\n\n } catch (err) {\n showError(errorGen, \\`Generation failed: \\${err.message}\\`);\n showLogs(true); // Ensure logs are visible on error\n } finally {\n showLoading(loaderGen, false);\n genButton.disabled = false;\n }\n };\n\n updateVarsButton.onclick = () => {\n parseAndDisplayVariables();\n toggleSection(step3Test, true); // Ensure test section is visible\n };\n\n const parseAndDisplayVariables = () => {\n const promptText = genPromptEl.value;\n // Regex to find variables like [variable_name] or {{variable_name}}\n const variableRegex = /\\\\[([a-zA-Z0-9_]+)\\\\]|\\\\{\\\\{\\\\{([a-zA-Z0-9_]+)\\\\}\\\\}\\\\}/g;\n let match;\n const variables = new Set();\n while ((match = variableRegex.exec(promptText)) !== null) {\n variables.add(match[1] || match[2]); // Add the captured group (either from [] or {{{}}})\n }\n\n varInputsContainer.innerHTML = ''; // Clear previous inputs\n if (variables.size === 0) {\n varInputsContainer.innerHTML = '

No variables (like [variable] or {{{variable}}}) found in the prompt.

';\n return;\n }\n\n // Ensure 'user_input' is present if the template uses it\n if (userMsgTemplateEl.value.includes(\"{{{user_input}}}\") && !variables.has('user_input')) {\n variables.add('user_input');\n }\n\n\n variables.forEach(varName => {\n const group = document.createElement('div');\n group.className = 'var-group';\n const label = document.createElement('label');\n label.className = 'form-label';\n label.htmlFor = \\`var-\\${varName}\\`;\n label.textContent = \\`Test Value for \"\\${varName}\":\\`;\n const input = document.createElement('textarea'); // Use textarea for potentially long inputs\n input.id = \\`var-\\${varName}\\`;\n input.name = varName;\n input.className = 'form-control';\n input.rows = 3; // Default to 3 rows\n input.placeholder = \\`Enter test data for \\${varName}\\`;\n\n group.appendChild(label);\n group.appendChild(input);\n varInputsContainer.appendChild(group);\n });\n };\n\n testButton.onclick = async () => {\n const systemPrompt = genPromptEl.value;\n if (!systemPrompt.trim()) {\n showError(errorTest, 'System prompt cannot be empty.');\n return;\n }\n\n const variableValues = {};\n const inputs = varInputsContainer.querySelectorAll('textarea');\n let hasMissingValue = false;\n inputs.forEach(input => {\n if (!input.value.trim()) {\n // showError(errorTest, \\`Missing test value for variable: \"\\${input.name}\"\\`);\n // hasMissingValue = true;\n // Instead of erroring, allow empty optional values, maybe add visual cue later\n variableValues[input.name] = \"\"; // Allow empty strings\n } else {\n variableValues[input.name] = input.value;\n }\n });\n\n // if (hasMissingValue) return; // Uncomment to enforce all variables must have values\n\n const userMessageTemplate = userMsgTemplateEl.value || \"{{{user_input}}}\"; // Default if empty\n\n // Basic check if template variable exists in gathered values\n const templateVarMatch = userMessageTemplate.match(/\\\\{\\\\{\\\\{([a-zA-Z0-9_]+)\\\\}\\\\}\\\\}/);\n if (templateVarMatch && !(templateVarMatch[1] in variableValues)) {\n showError(errorTest, \\`Variable \"\\${templateVarMatch[1]}\" needed by the User Message Template is missing. Define it in the prompt or add it manually.\\`);\n return;\n }\n\n\n clearError(errorTest);\n showLoading(loaderTest, true);\n testButton.disabled = true;\n showResults(false);\n // Keep previous logs visible or clear them? Let's keep them and append.\n // showLogs(false);\n\n try {\n const response = await fetch('/test', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n systemPrompt: systemPrompt,\n variables: variableValues,\n userMessageTemplate: userMessageTemplate,\n }),\n });\n const result = await response.json();\n updateLogDisplay(result.logs || []); // Append/replace logs\n\n if (!response.ok || result.error) {\n throw new Error(result.error || result.dtls || \\`Server error: \\${response.status}\\`);\n }\n\n llmOutputEl.textContent = result.data.llmOutput;\n showResults(true);\n\n } catch (err) {\n showError(errorTest, \\`Testing failed: \\${err.message}\\`);\n showLogs(true); // Ensure logs are visible on error\n } finally {\n showLoading(loaderTest, false);\n testButton.disabled = false;\n }\n };\n\n // Initial setup\n parseAndDisplayVariables(); // Initial parse in case there's default text\n`;\n\n// --- Server-Side Logic ---\n\nclass Logger {\n _logs: LogEntry[] = [];\n reqIdCtx?: string;\n\n constructor(reqId?: string) { this.reqIdCtx = reqId; }\n log(lvl: LogLevel, comp: string, msg: string, dtls?: any, reqId?: string) {\n const effReqId = reqId || this.reqIdCtx;\n let safeDtls; try { safeDtls = dtls === undefined ? undefined : JSON.parse(JSON.stringify(dtls)); } catch(e) { safeDtls = `[Log Err: ${e.message}]`; }\n const entry: LogEntry = { ts: new Date().toISOString(), reqId: effReqId, lvl, comp, msg, dtls: safeDtls };\n this._logs.push(entry);\n const dStr = safeDtls ? `| D: ${JSON.stringify(safeDtls)}` : \"\";\n console.log(`[${entry.ts.substring(11,23)}] [${entry.reqId?.substring(0,6)||'-----'}] [${entry.lvl}] [${entry.comp}] ${entry.msg} ${dStr}`);\n }\n getLogs = (): LogEntry[] => { try { return JSON.parse(JSON.stringify(this._logs)); } catch (e) { console.error(\"Log copy failed:\",e); return [...this._logs]; } }\n setCtx = (reqId: string) => { this.reqIdCtx = reqId; }\n}\n\n// LLM Interaction Function (Simplified)\nconst llm = async (systemPrompt: string, userPrompt: string, reqId: string, log: LogFn): Promise => {\n log(\"DEBUG\", \"LLM\", `OpenAI Call`, { sysL: systemPrompt.length, usrL: userPrompt.length }, reqId);\n try {\n // IMPORTANT: Replace with your actual OpenAI API key mechanism (e.g., environment variable)\n const oa = new OpenAI(); // Assumes OPENAI_API_KEY env var is set\n const completion = await oa.chat.completions.create({\n // Consider using a more powerful model for prompt generation, maybe cheaper for testing\n model: \"gpt-4o-mini\", // Or \"gpt-4o\", \"gpt-3.5-turbo\" etc.\n messages: [{ role: \"system\", content: systemPrompt }, { role: \"user\", content: userPrompt }],\n temperature: 0.5, // Lower temp for more predictable generation, higher for creativity\n max_tokens: 2048,\n });\n const txt = completion.choices[0]?.message?.content;\n const usage = completion.usage;\n if (!txt) {\n log(\"WARN\", \"LLM\", `OpenAI returned no content.`, { usage }, reqId);\n throw new Error(\"LLM returned no content.\");\n }\n log(\"DEBUG\", \"LLM\", `OpenAI Success`, { resL: txt.length, usage }, reqId);\n return txt.trim();\n } catch (err: any) {\n const errD = { msg: err.message, name: err.name, status: err.status, type: err.type, code: err.code };\n log(\"ERROR\", \"LLM\", `OpenAI API call failed`, { error: errD }, reqId);\n throw new Error(`LLM API error: ${err.message}${err.code ? ` (Code: ${err.code})` : ''}`);\n }\n}\n\n// --- Main HTTP Handler ---\nexport default async function(req: Request): Promise {\n const reqId = `req-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;\n const logger = new Logger(reqId);\n const log = logger.log.bind(logger);\n const url = new URL(req.url);\n const headers = { \"Content-Type\": \"application/json\", \"Access-Control-Allow-Origin\": \"*\", \"Access-Control-Allow-Methods\": \"GET, POST, OPTIONS\", \"Access-Control-Allow-Headers\": \"Content-Type\" };\n\n if (req.method === \"OPTIONS\") { log(\"INFO\", \"Handler\", \"OPTIONS preflight\"); return new Response(null, { status: 204, headers }); }\n\n log(\"INFO\", \"Handler\", `Request: ${req.method} ${url.pathname}`);\n\n try {\n // Serve HTML UI\n if (req.method === \"GET\" && (url.pathname === \"/\" || url.pathname === \"\")) {\n log(\"INFO\", \"Handler\", \"GET /: Serve UI\");\n return new Response(genHtml(), { status: 200, headers: { ...headers, \"Content-Type\": \"text/html\" } });\n }\n // Generate System Prompt Endpoint\n else if (req.method === \"POST\" && url.pathname === \"/generate\") {\n log(\"INFO\", \"Handler\", \"POST /generate\");\n let input: GenerateRequest, rawBody;\n try {\n rawBody = await req.text();\n const body = JSON.parse(rawBody);\n input = GenerateRequestSchema.parse(body);\n log(\"DEBUG\", \"Handler\", \"Parsed /generate request\", { data: input });\n } catch (error: any) {\n const errDtls = (error instanceof z.ZodError)\n ? error.issues.map(i => `'${i.path.join('.')}': ${i.message}`).join('; ')\n : error.message;\n log(\"WARN\", \"Handler\", \"Bad /generate request\", { error: errDtls, body: rawBody?.substring(0, 200) });\n const result: FinalRes = { error: \"Invalid request body.\", dtls: errDtls, logs: logger.getLogs(), reqId };\n return new Response(JSON.stringify(result), { status: 400, headers });\n }\n\n try {\n // Use the LLM to generate the system prompt based on the user's task description\n const generatedPrompt = await llm(\n SYSTEM_PROMPT_GENERATION_GUIDELINES, // The meta-prompt defining how to create prompts\n `Generate a system prompt for the following task:\\n\\n${input.taskDescription}`, // User's input\n reqId,\n log\n );\n const responseData: GenerateResponse = { generatedPrompt };\n const result: FinalRes = { data: responseData, logs: logger.getLogs(), reqId };\n log(\"INFO\", \"Handler\", \"/generate success\");\n return new Response(JSON.stringify(result), { status: 200, headers });\n\n } catch (error: any) {\n log(\"ERROR\", \"Handler\", \"/generate LLM call failed\", { error: error.message });\n const result: FinalRes = { error: \"Failed to generate prompt via LLM.\", dtls: error.message, logs: logger.getLogs(), reqId };\n return new Response(JSON.stringify(result), { status: 500, headers });\n }\n }\n // Test Prompt Endpoint\n else if (req.method === \"POST\" && url.pathname === \"/test\") {\n log(\"INFO\", \"Handler\", \"POST /test\");\n let input: TestRequest, rawBody;\n try {\n rawBody = await req.text();\n const body = JSON.parse(rawBody);\n input = TestRequestSchema.parse(body);\n log(\"DEBUG\", \"Handler\", \"Parsed /test request\", { data: { sysPromptLen: input.systemPrompt.length, vars: Object.keys(input.variables)} });\n } catch (error: any) {\n const errDtls = (error instanceof z.ZodError)\n ? error.issues.map(i => `'${i.path.join('.')}': ${i.message}`).join('; ')\n : error.message;\n log(\"WARN\", \"Handler\", \"Bad /test request\", { error: errDtls, body: rawBody?.substring(0, 200) });\n const result: FinalRes = { error: \"Invalid request body.\", dtls: errDtls, logs: logger.getLogs(), reqId };\n return new Response(JSON.stringify(result), { status: 400, headers });\n }\n\n try {\n // Construct the user message by replacing placeholders in the template\n let userMessage = input.userMessageTemplate;\n for (const varName in input.variables) {\n const placeholder = new RegExp(`\\\\{\\\\{\\\\{${varName}\\\\}\\\\}\\\\}`, 'g');\n userMessage = userMessage.replace(placeholder, input.variables[varName]);\n }\n\n // Check if all placeholders were replaced (basic check)\n if (/\\\\{\\\\{\\\\{[a-zA-Z0-9_]+\\\\}\\\\}\\\\}/.test(userMessage)) {\n log(\"WARN\", \"Handler\", \"User message template still contains unreplaced variables\", { template: input.userMessageTemplate, final: userMessage, vars: input.variables });\n // Decide whether to error or proceed. Let's proceed but log warning.\n // throw new Error(\"Not all variables in the user message template could be filled.\");\n }\n\n\n // Call the LLM with the provided system prompt and constructed user message\n const llmOutput = await llm(\n input.systemPrompt,\n userMessage,\n reqId,\n log\n );\n\n const responseData: TestResponse = { llmOutput };\n const result: FinalRes = { data: responseData, logs: logger.getLogs(), reqId };\n log(\"INFO\", \"Handler\", \"/test success\");\n return new Response(JSON.stringify(result), { status: 200, headers });\n\n } catch (error: any) {\n log(\"ERROR\", \"Handler\", \"/test LLM call failed\", { error: error.message });\n const result: FinalRes = { error: \"Failed to test prompt via LLM.\", dtls: error.message, logs: logger.getLogs(), reqId };\n return new Response(JSON.stringify(result), { status: 500, headers });\n }\n }\n // Catch-all for unsupported paths/methods\n else {\n log(\"WARN\", \"Handler\", `Not Found/Allowed: ${req.method} ${url.pathname}`);\n const result: FinalRes = { error: \"Not Found\", dtls: `Endpoint ${req.method} ${url.pathname} does not exist.`, logs: logger.getLogs(), reqId };\n return new Response(JSON.stringify(result), { status: 404, headers });\n }\n } catch (err: any) {\n log(\"ERROR\", \"Handler\", \"Unhandled exception in main handler\", { errMsg: err.message, stack: err.stack?.substring(0, 300) });\n const result: FinalRes = { error: \"Internal Server Error\", dtls: \"An unexpected error occurred.\", logs: logger.getLogs(), reqId };\n return new Response(JSON.stringify(result), { status: 500, headers });\n }\n}","deleted","label",[98],"permalink","https://www.val.town/x/salon/prompt/code/main.tsx","extension","actionData","errors"]