AI Prompt Engineering Workspace & Log Manager

<!DOCTYPE html>
<html lang="en" class="h-full dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Prompt Engineering Workspace & Log Manager</title>
    
    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        outfit: ['Outfit', 'sans-serif'],
                        mono: ['Fira Code', 'monospace']
                    }
                }
            }
        }
    </script>
    <style>
        body { margin: 0; padding: 0; min-height: 100vh; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.2); border-radius: 4px; }
    </style>
</head>
<body class="min-h-full bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 flex flex-col font-sans select-none transition-colors duration-300">

    <!-- Header Navigation -->
    <header class="h-16 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 px-4 sm:px-6 flex items-center justify-between shrink-0 z-30 sticky top-0 transition-colors duration-300">
        <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-purple-500 to-indigo-600 flex items-center justify-center text-slate-950 font-outfit font-extrabold text-lg shadow-lg shadow-purple-500/20">
                🤖
            </div>
            <div>
                <h1 class="font-outfit font-bold text-sm sm:text-base text-slate-900 dark:text-white tracking-wide">AI Prompt Engineering Studio</h1>
                <p class="text-[10px] text-purple-600 dark:text-purple-400 font-mono">LLM Prompt Tester & Log Manager</p>
            </div>
        </div>

        <div class="flex items-center gap-2">
            <button id="copyPromptBtn" class="px-3.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-800 dark:text-white font-outfit font-bold text-xs transition flex items-center gap-1.5 border border-slate-200 dark:border-slate-700">
                <i class="fa-solid fa-copy text-purple-500 dark:text-purple-400"></i>
                <span>Copy Prompt</span>
            </button>
        </div>
    </header>

    <!-- Main Workspace -->
    <main class="flex-1 p-4 sm:p-6 max-w-6xl w-full mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6">

        <!-- Left Column: LLM Parameters -->
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-5 sm:p-6 shadow-sm dark:shadow-xl space-y-6 flex flex-col justify-between transition-colors duration-300">
            <div class="space-y-6">
                <h2 class="font-outfit font-bold text-sm text-purple-600 dark:text-purple-400 uppercase tracking-wider flex items-center gap-2">
                    <i class="fa-solid fa-sliders"></i> Model Parameters
                </h2>

                <div class="space-y-2">
                    <label class="block text-xs font-bold text-slate-700 dark:text-slate-300">Target LLM Architecture</label>
                    <select id="modelSelect" class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-xs font-mono text-slate-900 dark:text-slate-200 rounded-xl p-3 focus:outline-none focus:border-purple-500 transition">
                        <option value="gpt-4o">GPT-4o Turbo (OpenAI)</option>
                        <option value="claude-35">Claude 3.5 Sonnet (Anthropic)</option>
                        <option value="llama-3">Llama 3 70B Instruct (Meta)</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <div class="flex justify-between text-xs font-bold text-slate-700 dark:text-slate-300">
                        <span>Temperature</span>
                        <span id="tempVal" class="font-mono text-purple-600 dark:text-purple-400">0.7</span>
                    </div>
                    <input type="range" id="tempInput" min="0" max="1" step="0.1" value="0.7" class="w-full accent-purple-500">
                </div>

                <div class="space-y-2">
                    <div class="flex justify-between text-xs font-bold text-slate-700 dark:text-slate-300">
                        <span>Max Response Tokens</span>
                        <span id="tokensVal" class="font-mono text-purple-600 dark:text-purple-400">2048</span>
                    </div>
                    <input type="range" id="tokensInput" min="256" max="4096" step="256" value="2048" class="w-full accent-purple-500">
                </div>

                <div class="space-y-2">
                    <div class="flex justify-between text-xs font-bold text-slate-700 dark:text-slate-300">
                        <span>Top-P Sampling</span>
                        <span id="topPVal" class="font-mono text-purple-600 dark:text-purple-400">0.9</span>
                    </div>
                    <input type="range" id="topPInput" min="0.1" max="1" step="0.1" value="0.9" class="w-full accent-purple-500">
                </div>
            </div>

            <div class="p-3.5 bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl text-[11px] text-slate-600 dark:text-slate-400 space-y-1 transition">
                <div class="text-slate-900 dark:text-white font-bold">Estimated Cost:</div>
                <div class="font-mono text-cyan-600 dark:text-cyan-400">$0.0025 per 1,000 tokens</div>
            </div>
        </div>

        <!-- Right 2 Columns: Prompt Construction & Live Response -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- System Prompt -->
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-5 sm:p-6 shadow-sm dark:shadow-xl space-y-4 transition-colors duration-300">
                <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800/80 pb-3">
                    <h3 class="font-outfit font-extrabold text-base text-slate-900 dark:text-white">System Prompt Instructions</h3>
                    <span id="systemCharCount" class="text-xs text-slate-500 dark:text-slate-400 font-mono">112 chars</span>
                </div>
                <textarea id="systemPromptText" rows="3" class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl p-4 text-xs font-mono text-purple-700 dark:text-purple-300 leading-relaxed focus:outline-none focus:border-purple-500 transition resize-none">You are a senior full-stack software engineer. Provide clean, concise code examples using modern standards and best practices.</textarea>
            </div>

            <!-- User Query Prompt -->
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-5 sm:p-6 shadow-sm dark:shadow-xl space-y-4 transition-colors duration-300">
                <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800/80 pb-3">
                    <h3 class="font-outfit font-extrabold text-base text-slate-900 dark:text-white">User Query / Prompt</h3>
                    <button id="runPromptBtn" class="px-5 py-2.5 rounded-xl bg-purple-600 hover:bg-purple-500 text-white font-outfit font-extrabold text-xs uppercase tracking-wider transition shadow-lg shadow-purple-500/20 flex items-center gap-2">
                        <i class="fa-solid fa-bolt"></i>
                        <span>Test Prompt</span>
                    </button>
                </div>
                <textarea id="userPromptText" rows="3" class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl p-4 text-xs font-mono text-slate-900 dark:text-slate-200 leading-relaxed focus:outline-none focus:border-purple-500 transition resize-none">Write a clean async function in JavaScript to fetch user metrics by ID with error handling.</textarea>
            </div>

            <!-- Output Box -->
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-5 sm:p-6 shadow-sm dark:shadow-xl space-y-3 transition-colors duration-300">
                <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800/80 pb-3">
                    <h3 class="font-outfit font-extrabold text-base text-slate-900 dark:text-white">Simulated LLM Output Response</h3>
                    <span id="statusTag" class="text-xs text-emerald-600 dark:text-emerald-400 font-mono font-bold">● Response Ready</span>
                </div>
                <pre id="outputCode" class="p-4 rounded-2xl bg-slate-900 dark:bg-slate-950 text-cyan-300 font-mono text-xs leading-relaxed border border-slate-800 overflow-x-auto select-text">// Clean async handler implementation
async function fetchUserMetrics(userId) {
    try {
        const response = await fetch(`/api/users/${userId}/metrics`);
        if (!response.ok) {
            throw new Error(`HTTP Error! Status: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error("Failed to fetch user metrics:", error);
        return null;
    }
}</pre>
            </div>

        </div>

    </main>

    <!-- JS Logic -->
    <script>
        const tempInput = document.getElementById('tempInput');
        const tokensInput = document.getElementById('tokensInput');
        const topPInput = document.getElementById('topPInput');
        const systemPromptText = document.getElementById('systemPromptText');
        const userPromptText = document.getElementById('userPromptText');
        const runPromptBtn = document.getElementById('runPromptBtn');
        const outputCode = document.getElementById('outputCode');
        const statusTag = document.getElementById('statusTag');

        tempInput.addEventListener('input', (e) => {
            document.getElementById('tempVal').innerText = parseFloat(e.target.value).toFixed(1);
        });

        tokensInput.addEventListener('input', (e) => {
            document.getElementById('tokensVal').innerText = e.target.value;
        });

        topPInput.addEventListener('input', (e) => {
            document.getElementById('topPVal').innerText = parseFloat(e.target.value).toFixed(1);
        });

        systemPromptText.addEventListener('input', () => {
            document.getElementById('systemCharCount').innerText = systemPromptText.value.length + ' chars';
        });

        runPromptBtn.addEventListener('click', () => {
            statusTag.className = 'text-xs text-amber-500 dark:text-amber-400 font-mono font-bold animate-pulse';
            statusTag.innerText = '● Processing Model...';

            setTimeout(() => {
                statusTag.className = 'text-xs text-emerald-600 dark:text-emerald-400 font-mono font-bold';
                statusTag.innerText = '● Response Generated';
                outputCode.innerText = `// Tested on ${document.getElementById('modelSelect').value} (Temp: ${tempInput.value})
async function executeQuery() {
    const system = "${systemPromptText.value.replace(/"/g, '\\"').substring(0, 50)}...";
    console.log("Processing query:", "${userPromptText.value.replace(/"/g, '\\"').substring(0, 40)}...");
    return { success: true, timestamp: Date.now() };
}`;
            }, 600);
        });

        document.getElementById('copyPromptBtn').addEventListener('click', () => {
            const fullPrompt = `System: ${systemPromptText.value}\n\nUser: ${userPromptText.value}`;
            navigator.clipboard.writeText(fullPrompt);
            alert('Prompt text copied to clipboard!');
        });
    </script>
</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file