fork download 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Evangelion Wallpaper Generator</title>
  7.     <script src="https://c...content-available-to-author-only...s.com"></script>
  8.     <style>
  9.         @import url('https://f...content-available-to-author-only...s.com/css2?family=Inter:wght@400;700&display=swap');
  10.         body {
  11.             font-family: 'Inter', sans-serif;
  12.             background-color: #1a1a1a;
  13.             color: #f0f0f0;
  14.             display: flex;
  15.             justify-content: center;
  16.             align-items: center;
  17.             min-height: 100vh;
  18.             padding: 1rem;
  19.         }
  20.         .container {
  21.             background-color: #2a2a2a;
  22.             padding: 2rem;
  23.             border-radius: 1rem;
  24.             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  25.             max-width: 90%;
  26.             width: 500px;
  27.             text-align: center;
  28.         }
  29.         .title {
  30.             font-size: 1.75rem;
  31.             font-weight: 700;
  32.             color: #a3e635; /* Neon green */
  33.             margin-bottom: 1rem;
  34.         }
  35.         .subtitle {
  36.             color: #94a3b8;
  37.             margin-bottom: 1.5rem;
  38.         }
  39.         #promptInput {
  40.             width: 100%;
  41.             padding: 0.75rem;
  42.             border-radius: 0.5rem;
  43.             border: 1px solid #4a4a4a;
  44.             background-color: #333;
  45.             color: #f0f0f0;
  46.             outline: none;
  47.             transition: all 0.3s;
  48.         }
  49.         #promptInput:focus {
  50.             border-color: #a3e635;
  51.             box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.3);
  52.         }
  53.         #generateButton {
  54.             width: 100%;
  55.             padding: 0.75rem;
  56.             margin-top: 1rem;
  57.             background-color: #a3e635;
  58.             color: #1a1a1a;
  59.             font-weight: 700;
  60.             border-radius: 0.5rem;
  61.             cursor: pointer;
  62.             border: none;
  63.             transition: background-color 0.3s, transform 0.2s;
  64.         }
  65.         #generateButton:hover {
  66.             background-color: #84cc16;
  67.             transform: translateY(-2px);
  68.         }
  69.         #generateButton:disabled {
  70.             background-color: #4b5563;
  71.             cursor: not-allowed;
  72.         }
  73.         #imageContainer {
  74.             margin-top: 2rem;
  75.             min-height: 300px;
  76.             display: flex;
  77.             justify-content: center;
  78.             align-items: center;
  79.             background-color: #1f1f1f;
  80.             border-radius: 0.75rem;
  81.             overflow: hidden;
  82.             border: 2px solid #333;
  83.             position: relative;
  84.         }
  85.         #generatedImage {
  86.             max-width: 100%;
  87.             max-height: 100%;
  88.             border-radius: 0.5rem;
  89.             display: none;
  90.         }
  91.         #loadingSpinner {
  92.             display: none;
  93.             color: #a3e635;
  94.             font-size: 1.5rem;
  95.         }
  96.         .footer {
  97.             margin-top: 1.5rem;
  98.             color: #6b7280;
  99.             font-size: 0.875rem;
  100.         }
  101.     </style>
  102. </head>
  103. <body class="bg-gray-900 text-white flex flex-col items-center justify-center min-h-screen p-4">
  104.  
  105.     <!-- Main Container -->
  106.     <div class="bg-gray-800 p-8 rounded-xl shadow-lg w-full max-w-2xl">
  107.         <h1 class="text-3xl font-bold text-center text-green-400 mb-2">Evangelion Wallpaper Generator</h1>
  108.         <p class="text-center text-gray-400 mb-6">Create your own custom Evangelion-themed wallpapers using AI.</p>
  109.  
  110.         <!-- Input and Button Section -->
  111.         <div class="space-y-4">
  112.             <textarea id="promptInput" rows="3" class="w-full p-3 rounded-lg bg-gray-700 text-white border-2 border-gray-600 focus:ring-green-500 focus:border-green-500 transition-all duration-300" placeholder="Describe the wallpaper you want, e.g., 'EVA Unit-01 fighting an angel in a destroyed city, dramatic lighting, high detail.'">A wallpaper of EVA Unit-01 from Neon Genesis Evangelion in a dynamic pose, in front of a ruined Tokyo-3 city.</textarea>
  113.             <button id="generateButton" class="w-full py-3 rounded-lg bg-green-500 text-gray-900 font-bold hover:bg-green-600 transition-colors duration-300">
  114.                 Generate Wallpaper
  115.             </button>
  116.         </div>
  117.  
  118.         <!-- Image and Loading Section -->
  119.         <div class="mt-8 flex justify-center items-center h-96 bg-gray-700 rounded-lg border-2 border-gray-600 overflow-hidden">
  120.             <div id="loadingSpinner" class="hidden text-green-400 animate-spin">
  121.                 <svg class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  122.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m15.356-2H15m12 2a8.001 8.001 0 01-15.356-2H12"></path>
  123.                 </svg>
  124.             </div>
  125.             <img id="generatedImage" class="object-cover w-full h-full hidden" alt="Generated Evangelion Wallpaper">
  126.             <p id="placeholderText" class="text-gray-400 text-sm">Your generated wallpaper will appear here.</p>
  127.         </div>
  128.  
  129.         <p class="text-center text-gray-500 text-sm mt-4">Powered by AI image generation.</p>
  130.     </div>
  131.  
  132.     <script>
  133.         document.addEventListener('DOMContentLoaded', () => {
  134.             const promptInput = document.getElementById('promptInput');
  135.             const generateButton = document.getElementById('generateButton');
  136.             const imageContainer = document.getElementById('imageContainer');
  137.             const generatedImage = document.getElementById('generatedImage');
  138.             const loadingSpinner = document.getElementById('loadingSpinner');
  139.             const placeholderText = document.getElementById('placeholderText');
  140.  
  141.             // Function to handle the image generation process
  142.             async function generateImage() {
  143.                 const prompt = promptInput.value.trim() + " Evangelion wallpaper, neon genesis, detailed, high resolution, anime style";
  144.  
  145.                 // Show loading state
  146.                 generateButton.disabled = true;
  147.                 loadingSpinner.classList.remove('hidden');
  148.                 placeholderText.classList.add('hidden');
  149.                 generatedImage.classList.add('hidden');
  150.  
  151.                 try {
  152.                     const apiKey = "";
  153.                     const apiUrl = `https://g...content-available-to-author-only...s.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`;
  154.  
  155.                     // Construct the payload for the API call
  156.                     const payload = {
  157.                         instances: [{ prompt: prompt }],
  158.                         parameters: { "sampleCount": 1 }
  159.                     };
  160.  
  161.                     const response = await fetch(apiUrl, {
  162.                         method: 'POST',
  163.                         headers: { 'Content-Type': 'application/json' },
  164.                         body: JSON.stringify(payload)
  165.                     });
  166.  
  167.                     // Check for a successful response
  168.                     if (!response.ok) {
  169.                         const errorData = await response.json();
  170.                         throw new Error(`API error: ${JSON.stringify(errorData)}`);
  171.                     }
  172.  
  173.                     const result = await response.json();
  174.  
  175.                     if (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {
  176.                         const base64Data = result.predictions[0].bytesBase64Encoded;
  177.                         const imageUrl = `data:image/png;base64,${base64Data}`;
  178.  
  179.                         generatedImage.src = imageUrl;
  180.                         generatedImage.classList.remove('hidden');
  181.                     } else {
  182.                         throw new Error("Invalid response from API.");
  183.                     }
  184.  
  185.                 } catch (error) {
  186.                     console.error('Error generating image:', error);
  187.                     placeholderText.textContent = "Failed to generate image. Please try again.";
  188.                     placeholderText.classList.remove('hidden');
  189.                 } finally {
  190.                     // Hide loading state
  191.                     loadingSpinner.classList.add('hidden');
  192.                     generateButton.disabled = false;
  193.                 }
  194.             }
  195.  
  196.             // Attach event listener to the button
  197.             generateButton.addEventListener('click', generateImage);
  198.         });
  199.     </script>
  200. </body>
  201. </html>
Success #stdin #stdout 0.03s 26164KB
comments (?)
stdin 
Standard input is empty
stdout 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evangelion Wallpaper Generator</title>
    <script src="https://c...content-available-to-author-only...s.com"></script>
    <style>
        @import url('https://f...content-available-to-author-only...s.com/css2?family=Inter:wght@400;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            background-color: #1a1a1a;
            color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 1rem;
        }
        .container {
            background-color: #2a2a2a;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            max-width: 90%;
            width: 500px;
            text-align: center;
        }
        .title {
            font-size: 1.75rem;
            font-weight: 700;
            color: #a3e635; /* Neon green */
            margin-bottom: 1rem;
        }
        .subtitle {
            color: #94a3b8;
            margin-bottom: 1.5rem;
        }
        #promptInput {
            width: 100%;
            padding: 0.75rem;
            border-radius: 0.5rem;
            border: 1px solid #4a4a4a;
            background-color: #333;
            color: #f0f0f0;
            outline: none;
            transition: all 0.3s;
        }
        #promptInput:focus {
            border-color: #a3e635;
            box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.3);
        }
        #generateButton {
            width: 100%;
            padding: 0.75rem;
            margin-top: 1rem;
            background-color: #a3e635;
            color: #1a1a1a;
            font-weight: 700;
            border-radius: 0.5rem;
            cursor: pointer;
            border: none;
            transition: background-color 0.3s, transform 0.2s;
        }
        #generateButton:hover {
            background-color: #84cc16;
            transform: translateY(-2px);
        }
        #generateButton:disabled {
            background-color: #4b5563;
            cursor: not-allowed;
        }
        #imageContainer {
            margin-top: 2rem;
            min-height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #1f1f1f;
            border-radius: 0.75rem;
            overflow: hidden;
            border: 2px solid #333;
            position: relative;
        }
        #generatedImage {
            max-width: 100%;
            max-height: 100%;
            border-radius: 0.5rem;
            display: none;
        }
        #loadingSpinner {
            display: none;
            color: #a3e635;
            font-size: 1.5rem;
        }
        .footer {
            margin-top: 1.5rem;
            color: #6b7280;
            font-size: 0.875rem;
        }
    </style>
</head>
<body class="bg-gray-900 text-white flex flex-col items-center justify-center min-h-screen p-4">

    <!-- Main Container -->
    <div class="bg-gray-800 p-8 rounded-xl shadow-lg w-full max-w-2xl">
        <h1 class="text-3xl font-bold text-center text-green-400 mb-2">Evangelion Wallpaper Generator</h1>
        <p class="text-center text-gray-400 mb-6">Create your own custom Evangelion-themed wallpapers using AI.</p>

        <!-- Input and Button Section -->
        <div class="space-y-4">
            <textarea id="promptInput" rows="3" class="w-full p-3 rounded-lg bg-gray-700 text-white border-2 border-gray-600 focus:ring-green-500 focus:border-green-500 transition-all duration-300" placeholder="Describe the wallpaper you want, e.g., 'EVA Unit-01 fighting an angel in a destroyed city, dramatic lighting, high detail.'">A wallpaper of EVA Unit-01 from Neon Genesis Evangelion in a dynamic pose, in front of a ruined Tokyo-3 city.</textarea>
            <button id="generateButton" class="w-full py-3 rounded-lg bg-green-500 text-gray-900 font-bold hover:bg-green-600 transition-colors duration-300">
                Generate Wallpaper
            </button>
        </div>

        <!-- Image and Loading Section -->
        <div class="mt-8 flex justify-center items-center h-96 bg-gray-700 rounded-lg border-2 border-gray-600 overflow-hidden">
            <div id="loadingSpinner" class="hidden text-green-400 animate-spin">
                <svg class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m15.356-2H15m12 2a8.001 8.001 0 01-15.356-2H12"></path>
                </svg>
            </div>
            <img id="generatedImage" class="object-cover w-full h-full hidden" alt="Generated Evangelion Wallpaper">
            <p id="placeholderText" class="text-gray-400 text-sm">Your generated wallpaper will appear here.</p>
        </div>

        <p class="text-center text-gray-500 text-sm mt-4">Powered by AI image generation.</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const promptInput = document.getElementById('promptInput');
            const generateButton = document.getElementById('generateButton');
            const imageContainer = document.getElementById('imageContainer');
            const generatedImage = document.getElementById('generatedImage');
            const loadingSpinner = document.getElementById('loadingSpinner');
            const placeholderText = document.getElementById('placeholderText');

            // Function to handle the image generation process
            async function generateImage() {
                const prompt = promptInput.value.trim() + " Evangelion wallpaper, neon genesis, detailed, high resolution, anime style";

                // Show loading state
                generateButton.disabled = true;
                loadingSpinner.classList.remove('hidden');
                placeholderText.classList.add('hidden');
                generatedImage.classList.add('hidden');

                try {
                    const apiKey = "";
                    const apiUrl = `https://g...content-available-to-author-only...s.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`;

                    // Construct the payload for the API call
                    const payload = {
                        instances: [{ prompt: prompt }],
                        parameters: { "sampleCount": 1 }
                    };

                    const response = await fetch(apiUrl, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(payload)
                    });

                    // Check for a successful response
                    if (!response.ok) {
                        const errorData = await response.json();
                        throw new Error(`API error: ${JSON.stringify(errorData)}`);
                    }

                    const result = await response.json();
                    
                    if (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {
                        const base64Data = result.predictions[0].bytesBase64Encoded;
                        const imageUrl = `data:image/png;base64,${base64Data}`;
                        
                        generatedImage.src = imageUrl;
                        generatedImage.classList.remove('hidden');
                    } else {
                        throw new Error("Invalid response from API.");
                    }

                } catch (error) {
                    console.error('Error generating image:', error);
                    placeholderText.textContent = "Failed to generate image. Please try again.";
                    placeholderText.classList.remove('hidden');
                } finally {
                    // Hide loading state
                    loadingSpinner.classList.add('hidden');
                    generateButton.disabled = false;
                }
            }

            // Attach event listener to the button
            generateButton.addEventListener('click', generateImage);
        });
    </script>
</body>
</html>
https://ideone.com/7DmnLY
language:
PHP (php 7.3.5)
created:
1 day ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!