caendesilva · September 23, 2024 18:17
diff --git a/dall-e-frontend.html b/dall-e-frontend.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DALL·E Image Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
            padding: 0;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #price {
            font-weight: bold;
            color: #333;
        }
        #generatedImage {
            margin-top: 20px;
            max-width: 100%;
            display: none;
        }
    </style>
 </head>
 <body>

    <h1>DALL·E Image Generator</h1>

    <form id="dalleForm">
        <div class="form-group">
            <label for="apiToken">API Token:</label>
            <input type="text" id="apiToken" required>
        </div>

        <div class="form-group">
            <label for="model">Model:</label>
            <select id="model" required>
                <option value="dall-e-3-standard-1024">DALL·E 3 - Standard (1024x1024) - $0.040</option>
                <option value="dall-e-3-standard-wide">DALL·E 3 - Standard (1792x1024 or 1024x1792) - $0.080</option>
                <option value="dall-e-3-hd-1024">DALL·E 3 - HD (1024x1024) - $0.080</option>
                <option value="dall-e-3-hd-wide">DALL·E 3 - HD (1792x1024 or 1024x1792) - $0.120</option>
                <option value="dall-e-2-1024">DALL·E 2 (1024x1024) - $0.020</option>
                <option value="dall-e-2-512">DALL·E 2 (512x512) - $0.018</option>
                <option value="dall-e-2-256">DALL·E 2 (256x256) - $0.016</option>
            </select>
        </div>

        <div class="form-group">
            <label for="prompt">Prompt:</label>
            <input type="text" id="prompt" placeholder="Describe the image you want to generate" required>
        </div>

        <div class="form-group">
            <label>Price: <span id="price">$0.00</span></label>
        </div>

        <button type="submit">Generate Image</button>
    </form>

    <img id="generatedImage" alt="Generated Image" />

    <script>
        const modelPrices = {
            "dall-e-3-standard-1024": 0.040,
            "dall-e-3-standard-wide": 0.080,
            "dall-e-3-hd-1024": 0.080,
            "dall-e-3-hd-wide": 0.120,
            "dall-e-2-1024": 0.020,
            "dall-e-2-512": 0.018,
            "dall-e-2-256": 0.016
        };

        // Load last inputs from localStorage
        document.addEventListener('DOMContentLoaded', () => {
            const apiToken = localStorage.getItem('apiToken');
            const model = localStorage.getItem('model');
            const prompt = localStorage.getItem('prompt');

            if (apiToken) document.getElementById('apiToken').value = apiToken;
            if (model) document.getElementById('model').value = model;
            if (prompt) document.getElementById('prompt').value = prompt;

            if (model) {
                const price = modelPrices[model];
                document.getElementById('price').innerText = `$${price.toFixed(3)}`;
            }
        });

        // Update price when model is changed
        document.getElementById('model').addEventListener('change', function() {
            const price = modelPrices[this.value];
            document.getElementById('price').innerText = `$${price.toFixed(3)}`;
        });

        // Handle form submission
        document.getElementById('dalleForm').addEventListener('submit', async function(event) {
            event.preventDefault();

            const apiToken = document.getElementById('apiToken').value;
            const model = document.getElementById('model').value;
            const prompt = document.getElementById('prompt').value;

            // Save inputs to localStorage
            localStorage.setItem('apiToken', apiToken);
            localStorage.setItem('model', model);
            localStorage.setItem('prompt', prompt);

            const price = modelPrices[model];

            // Get the selected model's resolution
            let size = '1024x1024';
            if (model.includes('wide')) {
                size = model.includes('hd') ? '1792x1024' : '1024x1792';
            }

            try {
                const response = await fetch('https://api.openai.com/v1/images/generations', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiToken}`
                    },
                    body: JSON.stringify({
                        prompt: prompt,
                        model: model.startsWith('dall-e-3') ? 'dall-e-3' : 'dall-e-2',
                        size: size
                    })
                });

                const data = await response.json();
                if (response.ok) {
                    document.getElementById('generatedImage').src = data.data[0].url; // Use the URL from the response
                    document.getElementById('generatedImage').style.display = 'block'; // Show the image
                    alert('Image generated successfully!');
                } else {
                    alert(`Error: ${data.error.message}`);
                }
            } catch (error) {
                alert(`Request failed: ${error.message}`);
            }
        });
    </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DALL·E Image Generator</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 50px;
	padding: 0;
	}
	.form-group {
	margin-bottom: 15px;
	}
	label {
	font-weight: bold;
	}
	input, select {
	width: 100%;
	padding: 10px;
	margin-top: 5px;
	}
	button {
	padding: 10px 20px;
	background-color: #4CAF50;
	color: white;
	border: none;
	cursor: pointer;
	}
	button:hover {
	background-color: #45a049;
	}
	#price {
	font-weight: bold;
	color: #333;
	}
	#generatedImage {
	margin-top: 20px;
	max-width: 100%;
	display: none;
	}
	</style>
	</head>
	<body>

	<h1>DALL·E Image Generator</h1>

	<form id="dalleForm">
	<div class="form-group">
	<label for="apiToken">API Token:</label>
	<input type="text" id="apiToken" required>
	</div>

	<div class="form-group">
	<label for="model">Model:</label>
	<select id="model" required>
	<option value="dall-e-3-standard-1024">DALL·E 3 - Standard (1024x1024) - $0.040</option>
	<option value="dall-e-3-standard-wide">DALL·E 3 - Standard (1792x1024 or 1024x1792) - $0.080</option>
	<option value="dall-e-3-hd-1024">DALL·E 3 - HD (1024x1024) - $0.080</option>
	<option value="dall-e-3-hd-wide">DALL·E 3 - HD (1792x1024 or 1024x1792) - $0.120</option>
	<option value="dall-e-2-1024">DALL·E 2 (1024x1024) - $0.020</option>
	<option value="dall-e-2-512">DALL·E 2 (512x512) - $0.018</option>
	<option value="dall-e-2-256">DALL·E 2 (256x256) - $0.016</option>
	</select>
	</div>

	<div class="form-group">
	<label for="prompt">Prompt:</label>
	<input type="text" id="prompt" placeholder="Describe the image you want to generate" required>
	</div>

	<div class="form-group">
	<label>Price: <span id="price">$0.00</span></label>
	</div>

	<button type="submit">Generate Image</button>
	</form>

	<img id="generatedImage" alt="Generated Image" />

	<script>
	const modelPrices = {
	"dall-e-3-standard-1024": 0.040,
	"dall-e-3-standard-wide": 0.080,
	"dall-e-3-hd-1024": 0.080,
	"dall-e-3-hd-wide": 0.120,
	"dall-e-2-1024": 0.020,
	"dall-e-2-512": 0.018,
	"dall-e-2-256": 0.016
	};

	// Load last inputs from localStorage
	document.addEventListener('DOMContentLoaded', () => {
	const apiToken = localStorage.getItem('apiToken');
	const model = localStorage.getItem('model');
	const prompt = localStorage.getItem('prompt');

	if (apiToken) document.getElementById('apiToken').value = apiToken;
	if (model) document.getElementById('model').value = model;
	if (prompt) document.getElementById('prompt').value = prompt;

	if (model) {
	const price = modelPrices[model];
	document.getElementById('price').innerText = `$${price.toFixed(3)}`;
	}
	});

	// Update price when model is changed
	document.getElementById('model').addEventListener('change', function() {
	const price = modelPrices[this.value];
	document.getElementById('price').innerText = `$${price.toFixed(3)}`;
	});

	// Handle form submission
	document.getElementById('dalleForm').addEventListener('submit', async function(event) {
	event.preventDefault();

	const apiToken = document.getElementById('apiToken').value;
	const model = document.getElementById('model').value;
	const prompt = document.getElementById('prompt').value;

	// Save inputs to localStorage
	localStorage.setItem('apiToken', apiToken);
	localStorage.setItem('model', model);
	localStorage.setItem('prompt', prompt);

	const price = modelPrices[model];

	// Get the selected model's resolution
	let size = '1024x1024';
	if (model.includes('wide')) {
	size = model.includes('hd') ? '1792x1024' : '1024x1792';
	}

	try {
	const response = await fetch('https://api.openai.com/v1/images/generations', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	'Authorization': `Bearer ${apiToken}`
	},
	body: JSON.stringify({
	prompt: prompt,
	model: model.startsWith('dall-e-3') ? 'dall-e-3' : 'dall-e-2',
	size: size
	})
	});

	const data = await response.json();
	if (response.ok) {
	document.getElementById('generatedImage').src = data.data[0].url; // Use the URL from the response
	document.getElementById('generatedImage').style.display = 'block'; // Show the image
	alert('Image generated successfully!');
	} else {
	alert(`Error: ${data.error.message}`);
	}
	} catch (error) {
	alert(`Request failed: ${error.message}`);
	}
	});
	</script>

	</body>
	</html>