<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Prompt Expander for SDXL & SD3.5 (OnnxStream)</title>
    <script src="./tailwinds.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        .glow-border {
            box-shadow: 0 0 15px rgba(139, 92, 246, 0.5), 0 0 5px rgba(139, 92, 246, 0.6);
        }
        #loading-overlay {
            background-color: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(5px);
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-200 flex flex-col items-center justify-center min-h-screen p-4">

    <!-- Model Loading Overlay -->
    <div id="loading-overlay" class="absolute inset-0 z-50 flex flex-col items-center justify-center text-center p-4">
        <svg class="animate-spin h-10 w-10 text-violet-400 mb-4" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <p id="loading-status" class="text-lg text-gray-300">Initializing AI Pipeline...</p>
        <p class="text-sm text-gray-500 mt-2">Note: First-time model download is large and can take several minutes.</p>
    </div>

    <div class="w-full max-w-4xl bg-gray-800 rounded-2xl shadow-2xl p-6 md:p-8">

        <!-- Header -->
        <div class="text-center mb-6">
            <h1 class="text-3xl md:text-4xl font-bold text-white">Local AI Prompt Expander</h1>
            <p class="text-gray-400 mt-2">Powered by OnnxStream & Transformers.js</p>
        </div>

        <!-- Input Section -->
        <div class="mb-6">
            <label for="idea-input" class="block text-sm font-medium text-violet-300 mb-2">Enter your simple idea or concept:</label>
            <textarea id="idea-input" rows="3" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-gray-200 focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition-shadow" placeholder="e.g., a futuristic cyberpunk city at night in the rain"></textarea>
        </div>

        <!-- Generate Button -->
        <div class="text-center mb-6">
            <button id="generate-btn" class="bg-violet-600 hover:bg-violet-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-violet-400 focus:ring-opacity-50 glow-border" disabled>
                <span id="btn-text">Expand Prompt</span>
                <span id="btn-loader" class="hidden">
                    <svg class="animate-spin h-5 w-5 mr-3 inline" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Generating...
                </span>
            </button>
        </div>

        <!-- Output Section -->
        <div id="output-container" class="space-y-6 hidden">
            <!-- Positive Prompt -->
            <div>
                <div class="flex justify-between items-center mb-2">
                    <h2 class="text-xl font-semibold text-green-400">Positive Prompt</h2>
                    <button onclick="copyToClipboard('positive-prompt')" class="copy-btn bg-gray-700 hover:bg-gray-600 text-xs text-gray-300 font-medium py-1 px-3 rounded-md transition">Copy</button>
                </div>
                <div id="positive-prompt" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-4 text-gray-300 min-h-[100px] whitespace-pre-wrap"></div>
            </div>

            <!-- Negative Prompt -->
            <div>
                 <div class="flex justify-between items-center mb-2">
                    <h2 class="text-xl font-semibold text-red-400">Negative Prompt</h2>
                    <button onclick="copyToClipboard('negative-prompt')" class="copy-btn bg-gray-700 hover:bg-gray-600 text-xs text-gray-300 font-medium py-1 px-3 rounded-md transition">Copy</button>
                </div>
                <div id="negative-prompt" class="w-full bg-gray-900 border border-gray-700 rounded-lg p-4 text-gray-300 min-h-[70px] whitespace-pre-wrap"></div>
            </div>
        </div>

        <!-- Error Message Area -->
        <div id="error-message" class="hidden mt-4 text-center text-red-400 bg-red-900 bg-opacity-30 p-3 rounded-lg"></div>

    </div>

    <!-- Import Transformers.js -->
    <script type="module">
        import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';

        // Configure the environment for browser usage
        env.allowLocalModels = false; // We are loading from the Hugging Face hub
        env.useForks = false;

        const generateBtn = document.getElementById('generate-btn');
        const ideaInput = document.getElementById('idea-input');
        const outputContainer = document.getElementById('output-container');
        const positivePromptEl = document.getElementById('positive-prompt');
        const negativePromptEl = document.getElementById('negative-prompt');
        const errorMessageEl = document.getElementById('error-message');
        const btnText = document.getElementById('btn-text');
        const btnLoader = document.getElementById('btn-loader');
        const loadingOverlay = document.getElementById('loading-overlay');
        const loadingStatus = document.getElementById('loading-status');

        const systemPrompt = `You are an expert prompt engineer for advanced text-to-image AI models like Stable Diffusion XL (SDXL), Realvis, and Stable Diffusion 3.5. Your mission is to take a user's simple idea and expand it into a rich, detailed, and effective prompt set, including both a positive and a negative prompt. Your output must be only the prompts, starting with "Positive Prompt:" and then "Negative Prompt:". Do not add any other conversational text or pleasantries.`;

        let generator;

        async function initializeOnnxStream() {
            try {
                // Use a capable chat/instruct model that is well-suited for creative generation
                // and correctly packaged for transformers.js.
                generator = await pipeline('text-generation', 'Felladrin/onnx-Minue-Mistral-7B-v0.2', {
                    progress_callback: (progress) => {
                        const formattedFile = progress.file.split('/').pop();
                        const statusText = `Loading: ${formattedFile} (${Math.round(progress.progress)}%)`;
                        console.log(statusText);
                        loadingStatus.innerText = statusText;
                    }
                });

                loadingOverlay.classList.add('hidden');
                generateBtn.disabled = false;
            } catch (err) {
                console.error("Initialization failed", err);
                showError("AI Engine failed to load. This can happen on low-memory devices or due to network issues. Please try reloading. Check console for details.");
                loadingOverlay.classList.add('hidden');
            }
        }

        initializeOnnxStream();

        generateBtn.addEventListener('click', async () => {
            const userInput = ideaInput.value.trim();
            if (!userInput) {
                showError("Please enter an idea first.");
                return;
            }

            setLoading(true);
            hideError();

            // FIX: Manually format the prompt as a single string. The tokenizer for this
            // model pipeline expects a string, not an array of message objects.
            const fullPrompt = `${systemPrompt}\n\n**User Input:**\n${userInput}`;

            try {
                const outputs = await generator(fullPrompt, {
                    max_new_tokens: 256,
                    do_sample: true,
                    temperature: 0.7,
                    top_k: 50,
                });

                // FIX: The output for a string prompt is a single object with a generated_text string.
                const fullResponse = outputs[0].generated_text;

                // The response includes the original prompt, so we extract the generated part after our labels.
                const positiveMatch = fullResponse.match(/Positive Prompt:\s*([\s\S]*?)(Negative Prompt:|$)/);
                const negativeMatch = fullResponse.match(/Negative Prompt:\s*([\s\S]*)/);

                if (positiveMatch && positiveMatch[1]) {
                    positivePromptEl.textContent = positiveMatch[1].trim();
                } else {
                    positivePromptEl.textContent = "Could not parse positive prompt from response.";
                }

                if (negativeMatch && negativeMatch[1]) {
                     negativePromptEl.textContent = negativeMatch[1].trim();
                } else {
                    negativePromptEl.textContent = "Could not parse negative prompt from response.";
                }

                 if(!positiveMatch && !negativeMatch) {
                    // This part of the response is often the full text including the original prompt,
                    // so we look for our keywords to find the generated section.
                    const generatedPart = fullResponse.split("Negative Prompt:")[0].split("Positive Prompt:")[1] || fullResponse;
                    positivePromptEl.textContent = "Could not parse response. Full output:\n\n" + generatedPart.trim();
                 }

                outputContainer.classList.remove('hidden');

            } catch (error) {
                console.error("Error generating prompt:", error);
                showError("An error occurred while generating the prompt. Please check the console.");
            } finally {
                setLoading(false);
            }
        });

        function setLoading(isLoading) {
            if (isLoading) {
                generateBtn.disabled = true;
                btnText.classList.add('hidden');
                btnLoader.classList.remove('hidden');
            } else {
                generateBtn.disabled = false;
                btnText.classList.remove('hidden');
                btnLoader.classList.add('hidden');
            }
        }

        function showError(message) {
            errorMessageEl.textContent = message;
            errorMessageEl.classList.remove('hidden');
        }

        function hideError() {
            errorMessageEl.classList.add('hidden');
        }

        function copyToClipboard(elementId) {
            const textToCopy = document.getElementById(elementId).textContent;
            const tempTextArea = document.createElement('textarea');
            tempTextArea.value = textToCopy;
            document.body.appendChild(tempTextArea);
            tempTextArea.select();
            try {
                document.execCommand('copy');
                const copyButtons = document.querySelectorAll('.copy-btn');
                copyButtons.forEach(btn => {
                   if(btn.onclick.toString().includes(elementId)) {
                       const originalText = btn.textContent;
                       btn.textContent = 'Copied!';
                       setTimeout(() => { btn.textContent = originalText; }, 2000);
                   }
                });
            } catch (err) {
                console.error('Failed to copy text: ', err);
                showError('Failed to copy text.');
            }
            document.body.removeChild(tempTextArea);
        }
    </script>
</body>
</html>