Spaces:

MySafeCode
/

Flux_Schnell

Running

App Files Files Community

MySafeCode commited on Dec 30, 2025

Commit

d5c10df

verified ·

1 Parent(s): 7ac7ae9

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -513

index.html DELETED Viewed

@@ -1,513 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pixazo Image Generator</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 20px;
-        }
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-            overflow: hidden;
-        }
-        .header {
-            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
-            color: white;
-            padding: 30px;
-            text-align: center;
-        }
-        .header h1 {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 15px;
-        }
-        .header p {
-            opacity: 0.9;
-            font-size: 1.1rem;
-        }
-        .content {
-            padding: 30px;
-        }
-        .form-group {
-            margin-bottom: 25px;
-        }
-        label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 600;
-            color: #333;
-            font-size: 1.1rem;
-        }
-        textarea {
-            width: 100%;
-            padding: 15px;
-            border: 2px solid #e5e7eb;
-            border-radius: 10px;
-            font-size: 1rem;
-            resize: vertical;
-            min-height: 120px;
-            font-family: inherit;
-            transition: border-color 0.3s;
-        }
-        textarea:focus {
-            outline: none;
-            border-color: #4f46e5;
-        }
-        .controls {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
-            margin-bottom: 25px;
-        }
-        .control {
-            display: flex;
-            flex-direction: column;
-        }
-        input[type="number"], select {
-            padding: 12px 15px;
-            border: 2px solid #e5e7eb;
-            border-radius: 10px;
-            font-size: 1rem;
-            transition: border-color 0.3s;
-        }
-        input[type="number"]:focus, select:focus {
-            outline: none;
-            border-color: #4f46e5;
-        }
-        .btn-generate {
-            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
-            color: white;
-            border: none;
-            padding: 18px 30px;
-            font-size: 1.2rem;
-            font-weight: 600;
-            border-radius: 12px;
-            cursor: pointer;
-            width: 100%;
-            transition: transform 0.3s, box-shadow 0.3s;
-            margin-bottom: 25px;
-        }
-        .btn-generate:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
-        }
-        .btn-generate:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .result-container {
-            display: none;
-            background: #f9fafb;
-            border-radius: 15px;
-            padding: 25px;
-            margin-top: 25px;
-            border: 2px dashed #d1d5db;
-        }
-        .result-container.active {
-            display: block;
-        }
-        .result-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-        .result-header h3 {
-            color: #333;
-        }
-        #imageResult {
-            max-width: 100%;
-            border-radius: 10px;
-            display: none;
-        }
-        #imageResult.loaded {
-            display: block;
-            animation: fadeIn 0.5s ease;
-        }
-        .loading {
-            display: none;
-            text-align: center;
-            padding: 40px;
-        }
-        .loading.active {
-            display: block;
-        }
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid #e5e7eb;
-            border-top: 5px solid #4f46e5;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 20px;
-        }
-        .error {
-            background: #fee2e2;
-            border: 2px solid #fca5a5;
-            color: #dc2626;
-            padding: 15px;
-            border-radius: 10px;
-            margin-top: 20px;
-            display: none;
-        }
-        .error.active {
-            display: block;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .example-prompts {
-            margin-top: 30px;
-            padding-top: 25px;
-            border-top: 2px solid #e5e7eb;
-        }
-        .example-prompts h3 {
-            margin-bottom: 15px;
-            color: #333;
-        }
-        .examples {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 15px;
-        }
-        .example {
-            background: #f3f4f6;
-            padding: 15px;
-            border-radius: 10px;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-        .example:hover {
-            background: #e5e7eb;
-            transform: translateY(-2px);
-        }
-        .example h4 {
-            color: #4f46e5;
-            margin-bottom: 8px;
-            font-size: 1rem;
-        }
-        .example p {
-            color: #666;
-            font-size: 0.9rem;
-        }
-        @media (max-width: 600px) {
-            .container {
-                border-radius: 15px;
-            }
-            .header {
-                padding: 20px;
-            }
-            .header h1 {
-                font-size: 2rem;
-            }
-            .content {
-                padding: 20px;
-            }
-            .controls {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>🎨 Pixazo Image Generator</h1>
-            <p>Generate stunning AI images with FLUX-1 Schnell</p>
-        </div>
-        <div class="content">
-            <div class="form-group">
-                <label for="prompt">Image Prompt</label>
-                <textarea id="prompt" placeholder="Describe the image you want to generate..."></textarea>
-            </div>
-            <div class="controls">
-                <div class="control">
-                    <label for="steps">Number of Steps</label>
-                    <input type="number" id="steps" min="1" max="50" value="4">
-                </div>
-                <div class="control">
-                    <label for="seed">Seed (0 for random)</label>
-                    <input type="number" id="seed" min="0" max="999999" value="15">
-                </div>
-                <div class="control">
-                    <label for="size">Image Size</label>
-                    <select id="size">
-                        <option value="512x512">512x512</option>
-                        <option value="768x512">768x512 (Landscape)</option>
-                        <option value="512x768">512x768 (Portrait)</option>
-                    </select>
-                </div>
-            </div>
-            <button id="generateBtn" class="btn-generate">Generate Image</button>
-            <div class="loading" id="loading">
-                <div class="spinner"></div>
-                <p>Generating your image... This may take a moment.</p>
-            </div>
-            <div class="result-container" id="resultContainer">
-                <div class="result-header">
-                    <h3>Generated Image</h3>
-                    <button id="downloadBtn" style="display: none;">Download</button>
-                </div>
-                <img id="imageResult" alt="Generated image">
-            </div>
-            <div class="error" id="error"></div>
-            <div class="example-prompts">
-                <h3>Try these examples:</h3>
-                <div class="examples">
-                    <div class="example" onclick="useExample(this)">
-                        <h4>Cyberpunk City</h4>
-                        <p>A futuristic cyberpunk city at night with neon lights and flying cars</p>
-                    </div>
-                    <div class="example" onclick="useExample(this)">
-                        <h4>Fantasy Landscape</h4>
-                        <p>A magical forest with glowing mushrooms and fairies</p>
-                    </div>
-                    <div class="example" onclick="useExample(this)">
-                        <h4>Space Explorer</h4>
-                        <p>An astronaut exploring an alien planet with two suns</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        const API_ENDPOINT = '/api/generate'; // Proxy to our backend
-        document.getElementById('generateBtn').addEventListener('click', generateImage);
-        document.getElementById('downloadBtn').addEventListener('click', downloadImage);
-        function useExample(exampleEl) {
-            const prompt = exampleEl.querySelector('p').textContent;
-            document.getElementById('prompt').value = prompt;
-        }
-        async function generateImage() {
-            // Get form values
-            const prompt = document.getElementById('prompt').value.trim();
-            const steps = parseInt(document.getElementById('steps').value);
-            const seed = parseInt(document.getElementById('seed').value);
-            const size = document.getElementById('size').value;
-            if (!prompt) {
-                showError('Please enter a prompt');
-                return;
-            }
-            // Parse size
-            const [width, height] = size.split('x').map(Number);
-            // Show loading
-            showLoading(true);
-            hideError();
-            hideResult();
-            try {
-                const body = {
-                    prompt: prompt,
-                    num_steps: steps,
-                    seed: seed || Math.floor(Math.random() * 999999),
-                    height: height,
-                    width: width
-                };
-                console.log('Sending request:', body);
-                const response = await fetch(API_ENDPOINT, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(body)
-                });
-                console.log('Response status:', response.status);
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error || `API returned ${response.status}`);
-                }
-                const data = await response.json();
-                console.log('Response data:', data);
-                // Handle the response based on Pixazo's actual response format
-                // This assumes the API returns image data in some format
-                displayResult(data);
-            } catch (error) {
-                console.error('Error:', error);
-                showError(error.message || 'Failed to generate image');
-            } finally {
-                showLoading(false);
-            }
-        }
-        function displayResult(data) {
-            // This function needs to be adjusted based on Pixazo's actual response format
-            // Here are a few possibilities:
-            // 1. If Pixazo returns a direct image URL:
-            // if (data.image_url) {
-            //     document.getElementById('imageResult').src = data.image_url;
-            //     showResult();
-            // }
-            // 2. If Pixazo returns base64 image data:
-            // if (data.image_base64) {
-            //     document.getElementById('imageResult').src = `data:image/png;base64,${data.image_base64}`;
-            //     showResult();
-            // }
-            // 3. For now, let's just show the response data
-            console.log('Full response:', data);
-            // Show a message instead of an image
-            const resultContainer = document.getElementById('resultContainer');
-            const imageResult = document.getElementById('imageResult');
-            // Hide image and show text message
-            imageResult.style.display = 'none';
-            resultContainer.innerHTML = `
-                <div class="result-header">
-                    <h3>API Response</h3>
-                </div>
-                <pre style="background: white; padding: 15px; border-radius: 10px; overflow: auto;">${JSON.stringify(data, null, 2)}</pre>
-                <p style="margin-top: 15px; color: #666;">
-                    The API call was successful! Check the console for the complete response.
-                    <br>You'll need to adjust the displayResult() function based on Pixazo's actual response format.
-                </p>
-            `;
-            resultContainer.classList.add('active');
-        }
-        function showResult() {
-            const resultContainer = document.getElementById('resultContainer');
-            const imageResult = document.getElementById('imageResult');
-            imageResult.classList.add('loaded');
-            resultContainer.classList.add('active');
-            document.getElementById('downloadBtn').style.display = 'block';
-        }
-        function hideResult() {
-            const resultContainer = document.getElementById('resultContainer');
-            const imageResult = document.getElementById('imageResult');
-            imageResult.classList.remove('loaded');
-            resultContainer.classList.remove('active');
-            document.getElementById('downloadBtn').style.display = 'none';
-        }
-        function downloadImage() {
-            const imageUrl = document.getElementById('imageResult').src;
-            const link = document.createElement('a');
-            link.href = imageUrl;
-            link.download = `pixazo-${Date.now()}.png`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-        function showLoading(show) {
-            const loading = document.getElementById('loading');
-            const button = document.getElementById('generateBtn');
-            if (show) {
-                loading.classList.add('active');
-                button.disabled = true;
-                button.textContent = 'Generating...';
-            } else {
-                loading.classList.remove('active');
-                button.disabled = false;
-                button.textContent = 'Generate Image';
-            }
-        }
-        function showError(message) {
-            const errorDiv = document.getElementById('error');
-            errorDiv.textContent = `Error: ${message}`;
-            errorDiv.classList.add('active');
-        }
-        function hideError() {
-            const errorDiv = document.getElementById('error');
-            errorDiv.classList.remove('active');
-        }
-    </script>
-</body>
-</html>