|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CaslaQuartz Static</title> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>CaslaQuartz Image Generator</h1> |
|
|
|
|
|
<div class="tabs"> |
|
|
<button onclick="switchTab('text2img')" class="active">Text2Img</button> |
|
|
<button onclick="switchTab('img2img')">Img2Img</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="text2img" class="tab-content"> |
|
|
<input type="text" id="prompt" placeholder="Enter a prompt..."> |
|
|
<select id="size"> |
|
|
<option value="1152x768">1152x768</option> |
|
|
<option value="1024x1024" selected>1024x1024</option> |
|
|
<option value="768x1152">768x1152</option> |
|
|
<option value="Custom size">Custom size</option> |
|
|
</select> |
|
|
<input type="text" id="custom-size" placeholder="Width x Height (e.g., 1280x720)" style="display: none;"> |
|
|
<div id="product-groups"></div> |
|
|
<button onclick="generateText2Img()">Generate</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="img2img" class="tab-content" style="display: none;"> |
|
|
<input type="file" id="image-upload"> |
|
|
<select id="position"> |
|
|
<option value="Wall">Wall</option> |
|
|
<option value="Countertop">Countertop</option> |
|
|
<option value="Floor">Floor</option> |
|
|
|
|
|
</select> |
|
|
<select id="size-img2img"> |
|
|
<option value="1152x768">1152x768</option> |
|
|
<option value="1024x1024" selected>1024x1024</option> |
|
|
<option value="768x1152">768x1152</option> |
|
|
<option value="Custom size">Custom size</option> |
|
|
</select> |
|
|
<input type="text" id="custom-size-img2img" placeholder="Width x Height (e.g., 1280x720)" style="display: none;"> |
|
|
<div id="product-groups-img2img"></div> |
|
|
<button onclick="generateImg2Img()">Generate</button> |
|
|
</div> |
|
|
|
|
|
<div id="progress" class="progress-container" style="display: none;"> |
|
|
<div class="progress-bar" style="width: 0%;"></div> |
|
|
</div> |
|
|
<p id="error" style="color: red; display: none;"></p> |
|
|
<img id="output-image" style="display: none; max-width: 100%;"> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
