|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Casla Quartz Image Generator</title> |
|
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="App"> |
|
|
<header class="header"> |
|
|
<div class="logo-container"> |
|
|
<img src="logo.png" alt="Casla Quartz Logo" class="logo-img"> |
|
|
<h1>Đưa CaslaQuartz vào công trình của bạn</h1> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="tabs"> |
|
|
<button class="tab-button active" onclick="switchTab('text2img')">Tạo ảnh từ văn bản</button> |
|
|
<button class="tab-button" onclick="switchTab('img2img')">Chuyển đổi ảnh</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="text2img" class="section"> |
|
|
<h2>Tạo ảnh từ văn bản</h2> |
|
|
<form onsubmit="generateText2Img(event)"> |
|
|
<div> |
|
|
<label>Mô tả (Prompt):</label> |
|
|
<input type="text" id="prompt" placeholder="Ví dụ: Bàn bếp hiện đại" required> |
|
|
</div> |
|
|
<div> |
|
|
<label>Kích thước:</label> |
|
|
<select id="size"> |
|
|
<option value="1152x768">1152x768</option> |
|
|
<option value="1024x1024" selected>1024x1024</option> |
|
|
<option value="768x1152">768x1152</option> |
|
|
<option value="Custom size">Tùy chỉnh</option> |
|
|
</select> |
|
|
<input type="text" id="custom-size" placeholder="Width x Height (e.g., 1280x720)" style="display: none;"> |
|
|
</div> |
|
|
<div> |
|
|
<label>Chọn sản phẩm:</label> |
|
|
<div class="product-buttons" id="text2img-products"></div> |
|
|
</div> |
|
|
<button type="submit">Tạo ảnh</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="img2img" class="section" style="display: none;"> |
|
|
<h2>Chuyển đổi ảnh</h2> |
|
|
<form onsubmit="generateImg2Img(event)"> |
|
|
<div> |
|
|
<label>Ảnh đầu vào:</label> |
|
|
<div class="dropzone" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)" onclick="document.getElementById('image-upload').click()"> |
|
|
<p>Kéo thả hoặc nhấn để tải ảnh</p> |
|
|
<input type="file" id="image-upload" style="display: none;" accept="image/*"> |
|
|
</div> |
|
|
<img id="preview-image" class="preview-image" style="display: none;"> |
|
|
</div> |
|
|
<div> |
|
|
<label>Vị trí áp dụng:</label> |
|
|
<select id="position"> |
|
|
<option value="Wall">Wall</option> |
|
|
<option value="Countertop">Countertop</option> |
|
|
<option value="Floor">Floor</option> |
|
|
<option value="Counter">Counter</option> |
|
|
<option value="Table">Table</option> |
|
|
<option value="Coffee Table top">Coffee Table top</option> |
|
|
<option value="Backsplash">Backsplash</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label>Kích thước:</label> |
|
|
<select id="size-img2img"> |
|
|
<option value="1152x768">1152x768</option> |
|
|
<option value="1024x1024" selected>1024x1024</option> |
|
|
<option value="768x1152">768x1152</option> |
|
|
<option value="Custom size">Tùy chỉnh</option> |
|
|
</select> |
|
|
<input type="text" id="custom-size-img2img" placeholder="Width x Height (e.g., 1280x720)" style="display: none;"> |
|
|
</div> |
|
|
<div> |
|
|
<label>Chọn sản phẩm:</label> |
|
|
<div class="product-buttons" id="img2img-products"></div> |
|
|
</div> |
|
|
<button type="submit">Tạo ảnh</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loading" class="loading-spinner" style="display: none;"></div> |
|
|
<p id="error" style="color: red; display: none;"></p> |
|
|
<img id="generated-image" class="generated-image" style="display: none;"> |
|
|
<a id="download-link" style="display: none;" download>Hải ảnh về máy</a> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
