-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (173 loc) · 10.6 KB
/
index.html
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Favicon Generator</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-blue-900 text-white min-h-screen flex items-center justify-center p-4">
<div class="w-full max-w-xl space-y-8">
<h1 class="text-4xl font-bold text-center text-blue-300">Advanced Favicon Generator</h1>
<div class="bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-lg rounded-lg p-8 space-y-6 shadow-xl">
<div class="space-y-2">
<label for="apiKey" class="block text-sm font-medium text-blue-200">OpenAI API Key</label>
<input id="apiKey" type="password" placeholder="Enter your OpenAI API Key"
class="w-full bg-gray-700 text-white placeholder-gray-400 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300">
</div>
<div class="space-y-2">
<label for="prompt" class="block text-sm font-medium text-blue-200">Favicon Description</label>
<input id="prompt" type="text" placeholder="Enter your prompt for favicon generation"
class="w-full bg-gray-700 text-white placeholder-gray-400 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300">
</div>
<div class="grid grid-cols-2 gap-6">
<div class="space-y-2">
<label for="style" class="block text-sm font-medium text-blue-200">Style</label>
<select id="style"
class="w-full bg-gray-700 text-white rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300">
<option value="minimalist">Minimalist</option>
<option value="flat">Flat</option>
<option value="3d">3D</option>
<option value="sketch">Sketch</option>
<option value="pixel art">Pixel Art</option>
<option value="gradient">Gradient</option>
<option value="isometric">Isometric</option>
</select>
</div>
<div class="space-y-2">
<label for="color" class="block text-sm font-medium text-blue-200">Color Scheme</label>
<select id="color"
class="w-full bg-gray-700 text-white rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300">
<option value="vibrant">Vibrant</option>
<option value="pastel">Pastel</option>
<option value="monochrome">Monochrome</option>
<option value="gradient">Gradient</option>
<option value="neon">Neon</option>
<option value="earth tones">Earth Tones</option>
</select>
</div>
</div>
<div class="space-y-2">
<label for="size" class="block text-sm font-medium text-blue-200">Image Size</label>
<select id="size"
class="w-full bg-gray-700 text-white rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300">
<option value="1024x1024">Square (1024x1024)</option>
<option value="1024x1792">Portrait (1024x1792)</option>
<option value="1792x1024">Landscape (1792x1024)</option>
</select>
</div>
<div class="flex items-center space-x-2">
<input type="checkbox" id="hdQuality" class="rounded text-blue-500 focus:ring-blue-500">
<label for="hdQuality" class="text-sm text-blue-200">Generate HD Quality</label>
</div>
<button id="generateBtn"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md px-6 py-3 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Generate Favicon
</button>
</div>
<div id="result"
class="bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-lg rounded-lg p-8 text-center hidden space-y-4 shadow-xl">
<!-- Results will be inserted here -->
</div>
</div>
<script>
const CHAT_API_ENDPOINT = 'https://api.openai.com/v1/chat/completions';
const IMAGE_API_ENDPOINT = 'https://api.openai.com/v1/images/generations';
// Load API key from localStorage if available
document.getElementById('apiKey').value = localStorage.getItem('openaiApiKey') || '';
async function generateFaviconPrompt(apiKey, userPrompt, style, color) {
const messages = [
{ role: "system", content: "You are an expert designer specializing in creating unique and professional favicons. Your task is to generate a detailed prompt for DALL-E 3 to create a favicon based on the user's input." },
{
role: "user", content: `Create a detailed prompt for a favicon with the following characteristics:
- Core concept: ${userPrompt}
- Style: ${style}
- Color scheme: ${color}
The prompt should be specific, creative, and result in a unique favicon that is recognizable at small sizes. Include details about shapes, symbols, and design elements that would make an effective favicon.`
}
];
try {
const response = await axios.post(CHAT_API_ENDPOINT, {
model: "gpt-4o",
messages: messages
}, {
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
}
});
return response.data.choices[0].message.content;
} catch (error) {
console.error('Error generating favicon prompt:', error);
throw error;
}
}
document.getElementById('generateBtn').addEventListener('click', async () => {
const apiKey = document.getElementById('apiKey').value.trim();
const userPrompt = document.getElementById('prompt').value;
const style = document.getElementById('style').value;
const color = document.getElementById('color').value;
const size = document.getElementById('size').value;
const hdQuality = document.getElementById('hdQuality').checked;
const resultDiv = document.getElementById('result');
resultDiv.classList.remove('hidden');
if (!apiKey || !userPrompt) {
resultDiv.innerHTML = '<p class="text-red-400 font-medium">Please enter both an API key and a prompt.</p>';
return;
}
localStorage.setItem('openaiApiKey', apiKey);
resultDiv.innerHTML = '<div class="flex items-center justify-center space-x-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div><p class="text-blue-300">Generating favicon...</p></div>';
try {
const detailedPrompt = await generateFaviconPrompt(apiKey, userPrompt, style, color);
const imageResponse = await axios.post(IMAGE_API_ENDPOINT, {
model: "dall-e-3",
prompt: detailedPrompt,
n: 1,
size: size,
quality: hdQuality ? "hd" : "standard",
response_format: "url"
}, {
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
}
});
const imageUrl = imageResponse.data.data[0].url;
const revisedPrompt = imageResponse.data.data[0].revised_prompt;
resultDiv.innerHTML = `
<img src="${imageUrl}" alt="Generated Favicon" class="mx-auto mb-6 rounded-lg w-64 h-64 shadow-lg">
<p class="text-sm text-blue-300 mb-4">Revised Prompt: ${revisedPrompt}</p>
<div class="space-y-4">
<a href="${imageUrl}" target="_blank" rel="noopener noreferrer" class="bg-green-600 hover:bg-green-700 text-white font-semibold rounded-md px-6 py-3 transition duration-300 ease-in-out inline-block transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
Open Favicon in New Tab
</a>
<button id="regenerateBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md px-6 py-3 transition duration-300 ease-in-out inline-block transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Regenerate
</button>
</div>
`;
document.getElementById('regenerateBtn').addEventListener('click', () => {
document.getElementById('generateBtn').click();
});
} catch (error) {
console.error('Error:', error);
let errorMessage = 'Error generating favicon. Please check your API key and try again.';
if (error.response) {
errorMessage += ` Status: ${error.response.status}. ${error.response.data.error.message}`;
} else if (error.message) {
errorMessage += ` ${error.message}`;
}
resultDiv.innerHTML = `<p class="text-red-400 font-medium">${errorMessage}</p>`;
}
});
</script>
</body>
</html>