Hugging Face's logo

Spaces:
Ashrafb
/
Adldoke
Running

App Files Community
Adldoke / static /index1.html
Ashrafb's picture
Ashrafb
Rename static/index.html to static/index1.html
3c5f5c1 verified
raw history blame contribute delete
No virus
11.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FastAPI App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet">
<style>
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden !important;
}
body {
background-color: #000000;
margin: 0;
}
#cont {
background-color: #030303;
padding: 0px;
border-radius: 12px;
box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
display: flex;
align-items: center;
border: 2px solid rgb(247, 6, 187);
}
#prompt {
flex-grow: 1;
padding: 10px;
margin: 10px;
background: transparent;
border: none;
border-radius: 8px;
box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
color: #fff;
outline: none;
}
#cont button {
padding: 2.5vh 4.6vh;
margin: 1vh;
background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
border: none;
border-radius: 8px;
color: #fff;
cursor: pointer;
}
#cont button:hover {
background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
}
.container {
text-align: center;
}
h1 {
margin-bottom: 20px;
font-family: 'Barlow Condensed';
color: pink;
}
#inputs {
flex-grow: 1;
padding: 10px;
margin: 10px;
background: transparent;
border: none;
border-radius: 8px;
box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
color: #fff;
outline: none;
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.image-box {
width: 200px; /* Adjust the width as needed */
height: 200px; /* Adjust the height as needed */
border: 2px solid #ffffff; /* Set the border color to white */
border-radius: 10px;
overflow: hidden; /* Ensure the image does not overflow the box */
position: relative; /* Positioning context for absolute positioning of image */
}
.spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 3px solid #ffffff;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.image-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Maintain aspect ratio and cover the entire box */
}
#noise_level {
flex-grow: 1;
padding: 10px;
margin: 10px;
background: transparent;
border: none;
border-radius: 8px;
box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
color: #fff;
outline: none;
}
#image-box {
border: 2px solid blue;
width: 330px;
height: 330px;
display: flex;
flex-direction: column;
overflow-y: scroll;
margin: auto;
margin-top: 30px;
padding-bottom: 7px;
gap: 14px;
background: linear-gradient(black, black) padding-box,
linear-gradient(to right, red, blue) border-box;
border-radius: 20px;
border: 2.5px solid transparent;
}
#image-box p {
width: 80%;
font-size: 20px;
color: white;
}
#showadv{
padding: 10px 20px;
margin: 10px;
background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
border: none;
border-radius: 8px;
cursor: pointer;
color: #fff;
}
#advanced-options {
flex-grow: 1;
padding: 10px;
margin: 10px;
background: transparent;
border: none;
border-radius: 8px;
box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
color: #fff;
outline: none;
background-color: #030303;
padding: 0px;
border-radius: 12px;
box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
display: none;
align-items: center;
border: 2px solid rgb(247, 6, 187);
}
#advanced-options label, #advanced-options input {
margin: 10px;
color: #fff;
}
#advanced-options input[type="number"] {
width: 50px;
padding: 5px;
}
#advanced-options button {
padding: 10px 20px;
margin: 10px;
background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
border: none;
border-radius: 8px;
cursor: pointer;
color: #fff;
}
#advanced-options button:hover {
background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
}
</style>
</head>
<body>
<div class="container">
<h1>Aiconvert.online </h1>
<div id="cont">
<div>
<label for="prompt">Enter text:</label>
<input type="text" id="prompt" name="prompt">
</div>
<br>
<div>
<button onclick="generatePrompts()">Generate Prompts</button>
<div id="promptSpinner" class="spinner" style="display: none;"></div>
</div>
</div>
<br>
<div id="cont">
<div>
<label for="inputs">Enter prompt:</label>
<input type="text" id="inputs" name="inputs">
</div>
<br>
<div>
<button onclick="sendInputs()">generate image </button>
<div id="sendSpinner" class="spinner" style="display: none;"></div>
</div>
</div>
<br>
<button id="showadv" onclick="toggleAdvancedOptions()">Advanced Options</button>
<div id="advanced-options">
<label for="is_negative">Negative prompt :</label>
<input type="text" id="is_negative" name="is_negative" value="blurry, fuzziness">
<br>
<label for="steps">Steps:</label>
<input type="range" id="steps" name="steps" min="30" max="100" value="50">
<span id="steps-value">50</span>
<br>
<label for="cfg_scale">Guidance Scale:</label>
<input type="range" id="cfg_scale" name="cfg_scale" min="5" max="14" value="7.5" step="1">
<span id="cfg-scale-value">7.5</span>
<br>
<label for="seed">Seed:</label>
<input type="range" id="seed" name="seed" min="1" max="99999" value="0" step="1">
<span id="seed-value">0</span>
<br>
<label for="noise_level">Noise Level:</label>
<input type="range" id="noise_level" name="noise_level" min="0" max="10" step="1" value="0">
<span id="noise-level-value">0</span>
<br>
<button onclick="toggleAdvancedOptions()">Hide Advanced Options</button>
</div>
<br>
<div id="output-container" class="image-container">
<div id="image-box" class="image-box">
<p>Your Generated Arts Will Appear Here</p>
</div>
</div>
</div>
<script>
function showSpinner(spinnerId) {
document.getElementById(spinnerId).style.display = 'block';
}
function hideSpinner(spinnerId) {
document.getElementById(spinnerId).style.display = 'none';
}
function generatePrompts() {
showSpinner('promptSpinner');
const prompt = document.getElementById("prompt").value;
fetch(`/generate_prompts?prompt_text=${encodeURIComponent(prompt)}`)
.then(response => response.text())
.then(data => {
document.getElementById("inputs").value = data.trim();
hideSpinner('promptSpinner');
})
.catch(error => {
console.error('Error:', error);
hideSpinner('promptSpinner');
});
}
function sendInputs() {
const inputs = document.getElementById("inputs").value;
if (!inputs) {
const imageBox = document.getElementById("image-box");
imageBox.innerHTML = "<p>Please enter prompt before sending.</p>";
return;
}
showSpinner('sendSpinner');
const noiseLevel = document.getElementById("noise_level").value;
const isNegative = document.getElementById("is_negative").value;
const steps = document.getElementById("steps").value;
const cfgScale = document.getElementById("cfg_scale").value;
const seed = document.getElementById("seed").value;
fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const imageBox = document.getElementById("image-box");
const img = new Image();
img.src = 'data:image/jpeg;base64,' + data.image_base64;
const maxWidth = 200;
const maxHeight = 200;
if (img.width > maxWidth || img.height > maxHeight) {
const ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
img.width *= ratio;
img.height *= ratio;
}
imageBox.appendChild(img);
hideSpinner('sendSpinner');
})
.catch(error => {
console.error('Error:', error);
const imageBox = document.getElementById("image-box");
imageBox.innerHTML = "<p>An error occurred. Please try again later.</p>";
hideSpinner('sendSpinner');
});
}
function toggleAdvancedOptions() {
const advancedOptions = document.getElementById("advanced-options");
if (advancedOptions.style.display === "none") {
advancedOptions.style.display = "block";
} else {
advancedOptions.style.display = "none";
}
}
// Function to update slider value display
function updateSliderValue(sliderId, spanId) {
const slider = document.getElementById(sliderId);
const span = document.getElementById(spanId);
span.textContent = slider.value;
}
// Event listeners to update slider values
document.getElementById("steps").addEventListener("input", () => {
updateSliderValue("steps", "steps-value");
});
document.getElementById("cfg_scale").addEventListener("input", () => {
updateSliderValue("cfg_scale", "cfg-scale-value");
});
document.getElementById("seed").addEventListener("input", () => {
updateSliderValue("seed", "seed-value");
});
document.getElementById("noise_level").addEventListener("input", () => {
updateSliderValue("noise_level", "noise-level-value");
});
</script>
</body>
</html>