documentation/future.html at main · jonpalecek/documentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Future Image Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5; /* Light gray background */
        }
        .container {
            max-width: 90%;
            margin: 2rem auto;
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .header {
            font-size: 2.25rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        .button-primary {
            background-color: #4f46e5; /* Indigo */
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            border: none;
        }
        .button-primary:hover {
            background-color: #4338ca; /* Darker indigo */
        }
        .image-display {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 300px; /* Minimum height for image container */
            background-color: #e2e8f0; /* Lighter gray for loading area */
            border-radius: 1rem;
            overflow: hidden;
            position: relative;
        }
        .image-display img {
            max-width: 100%;
            height: auto;
            border-radius: 1rem;
            display: block;
        }
        .loader {
            border: 8px solid #f3f3f3; /* Light grey */
            border-top: 8px solid #4f46e5; /* Blue */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -30px; /* Half of height */
            margin-left: -30px; /* Half of width */
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .message-box {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-top: 1rem;
            width: 100%;
            text-align: center;
            display: none; /* Hidden by default */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="header">AI Future Vision</h1>
        <button id="generateImageBtn" class="button-primary">Generate Future AI Image</button>
        <div id="messageBox" class="message-box"></div>
        <div class="image-display">
            <div id="loader" class="loader hidden"></div>
            <img id="generatedImage" src="" alt="Generated AI Future Image" class="hidden">
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const generateImageBtn = document.getElementById('generateImageBtn');
            const generatedImage = document.getElementById('generatedImage');
            const loader = document.getElementById('loader');
            const messageBox = document.getElementById('messageBox');

            /**
             * Displays a message in the message box.
             * @param {string} message - The message to display.
             * @param {string} type - The type of message (e.g., 'error', 'success').
             */
            function showMessage(message, type = 'info') {
                messageBox.textContent = message;
                messageBox.className = 'message-box'; // Reset classes
                if (type === 'error') {
                    messageBox.classList.add('bg-red-100', 'text-red-700', 'border-red-400');
                } else if (type === 'success') {
                    messageBox.classList.add('bg-green-100', 'text-green-700', 'border-green-400');
                } else {
                    messageBox.classList.add('bg-yellow-100', 'text-yellow-700', 'border-yellow-400');
                }
                messageBox.style.display = 'block';
            }

            /**
             * Hides the message box.
             */
            function hideMessageBox() {
                messageBox.style.display = 'none';
            }

            generateImageBtn.addEventListener('click', async () => {
                // Show loader, hide previous image and message box
                loader.classList.remove('hidden');
                generatedImage.classList.add('hidden');
                hideMessageBox();

                const prompt = "A breathtaking futuristic city skyline at sunset, integrated with advanced AI technology. Flying vehicles, bioluminescent flora, sleek skyscrapers with vertical farms, and holographic displays. Humans and AI-powered robots coexist peacefully. The aesthetic is clean, elegant, and technologically advanced, with a touch of nature.";

                const payload = { instances: { prompt: prompt }, parameters: { "sampleCount": 1 } };
                const apiKey = ""; // Canvas will automatically provide the API key at runtime.
                const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`;

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

                    if (!response.ok) {
                        const errorData = await response.json();
                        throw new Error(`API error: ${response.status} - ${errorData.error.message || 'Unknown error'}`);
                    }

                    const result = await response.json();

                    // Check if predictions exist and contain base64 encoded image data
                    if (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {
                        const imageUrl = `data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`;
                        generatedImage.src = imageUrl;
                        generatedImage.classList.remove('hidden'); // Show the image
                        showMessage("Image generated successfully!", 'success');
                    } else {
                        throw new Error("No image data received from the API.");
                    }
                } catch (error) {
                    console.error("Error generating image:", error);
                    showMessage(`Failed to generate image: ${error.message}`, 'error');
                    generatedImage.classList.add('hidden'); // Ensure image is hidden on error
                } finally {
                    loader.classList.add('hidden'); // Hide loader regardless of success or failure
                }
            });
        });
    </script>
</body>
</html>