Rename static/index.html to static/index1.html
Browse files<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
background-color: #121212;
color: #FFFFFF;
}
/* Dark mode for upload buttons */
#upload-form button[type="button"] {
background-color: #1E7E34;
}
/* Dark mode for file input labels */
#image-label {
background-color: #BF2C25;
}
/* Dark mode for face number inputs */
#best_max_flavors {
background-color: #333333;
color: #FFFFFF;
border: 1px solid #555555;
}
/* Dark mode for swap button */
button[type="button"] {
background-color: #1E7E34;
}
/* Dark mode hover effect for swap button */
button[type="button"]:hover {
background-color: #2E9E44;
}
/* Style for upload buttons */
input[type="file"] {
display: none; /* Hide the default file input */
}
#upload-form label[for="image"] {
padding: 10px 20px;
background-color: #f44336;
color: white;
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin: 0 auto;
}
#image-label {
padding: 10px 20px;
background-color: #f44336;
color: white;
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin: 0 auto;
}
.uploadButton {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
margin: auto;
margin: 0 auto;
}
/* Style for file input labels */
#upload-form {
display: flex;
flex-direction: column;
align-items: center;
}
#image-label {
padding: 10px 20px;
background-color: #f44336;
color: white;
border-radius: 5px;
cursor: pointer;
display: block;
margin: 0 auto;
}
#image-label input[type="file"] {
display: none;
}
/* Style for face number inputs */
#mode, #best_max_flavors {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 5px;
font-size: 16px;
}
/* Style for labels */
label {
font-weight: bold;
}
/* Optional: Increase space between elements */
form > * {
margin-bottom: 10px;
}
/* Style for the swap button */
button {
background-image: linear-gradient(
45deg,
hsl(240deg 75% 29%) 0%,
hsl(254deg 78% 28%) 6%,
hsl(264deg 82% 27%) 13%,
hsl(272deg 87% 26%) 19%,
hsl(278deg 93% 25%) 25%,
hsl(284deg 98% 24%) 31%,
hsl(289deg 100% 23%) 37%,
hsl(294deg 100% 23%) 44%,
hsl(299deg 100% 22%) 50%,
hsl(303deg 100% 23%) 56%,
hsl(307deg 100% 24%) 63%,
hsl(311deg 100% 25%) 69%,
hsl(313deg 100% 26%) 75%,
hsl(316deg 95% 28%) 81%,
hsl(320deg 88% 30%) 87%,
hsl(323deg 81% 32%) 94%,
hsl(326deg 75% 33%) 100%
);
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
display: block;
margin: 0 auto;
width: 200px;
}
/* Hover effect for the button */
button:hover {
background-color: #45a049;
}
/* Style for file input */
#image {
display: none; /* Hide the default file input */
}
#image-label {
padding: 10px 20px;
background-color: #f44336;
color: white;
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin: 0 auto;
}
#image-label input[type="file"] {
display: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
font-family: 'Barlow Condensed';
color: pink;
font-size: 40px; /* Adjust the font size as needed */
}
h2 {
font-size: 24px; /* Adjust size as needed */
font-family: 'Barlow Condensed';
color: #FFFFFF; /* Text color */
margin-top: 20px; /* Top margin */
margin-bottom: 10px; /* Bottom margin */
}
select {
width: 150px; /* Adjust width as needed */
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #333333; /* Background color */
color: white; /* Text color */
font-size: 16px;
}
#best_max_flavors {
width: 60px;
}
/* Style for the scale number input */
input[type="number"]#best_max_flavors {
padding: 8px;
width: 50px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 5px;
font-size: 16px;
color: white; /* Set text color to white */
background-color: #333333; /* Set background color */
}
/* Optional: Adjust focus styling for the scale number input */
input[type="number"]#best_max_flavors:focus {
outline: none; /* Remove default outline */
border-color: #1E7E34; /* Change border color on focus */
}
#estimatedTime {
display: none;
text-align: center; /* Center align the text */
margin-top: 10px; /* Add margin to separate it from the spinner */
color: white; /* Set text color */
}
#results {
border: 2px solid blue;
width: 265px;
height: 300px;
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-preview {
border: 2px solid blue;
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
overflow-y: scroll;
margin: auto;
margin-top: 30px;
padding-bottom: 7px;
gap: 100px;
background: linear-gradient(black , black) padding-box,
linear-gradient(to right, red, blue) border-box;
border-radius: 20px;
border: 2.5px solid transparent;
}
#sourceImage {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}
#loadingSpinner {
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: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none; /* Initially hide the loading spinner */
}
@keyframes
spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#results {
position: relative; /* Set position to relative */
/* Your existing styles */
}
#copyIcon {
font-size: 24px; /* Adjust the font size as needed */
position: absolute;
bottom: 10px; /* Adjust the distance from the bottom */
left: 10px; /* Adjust the distance from the left */
cursor: pointer;
z-index: 1;
color: rgba(255, 255, 255, 0.7); /* Adjust the opacity value */
}
#resultContainer {
/* Include padding and border in the total height */
}
#resultContainer p {
font-size: 14px; /* Adjust the font size as needed */
text-align: center; /* Center text horizontally */
margin: 5px 0; /* Add margin for spacing between paragraphs */
line-height: 1.5; /* Adjust line height for better readability */
}
</style>
</head>
<body>
<h1>Aiconvert.online</h1>
<form id="upload-form" enctype="multipart/form-data">
<label for="image">Select image:</label>
<input type="file" id="image" accept="image/*" required onchange="previewImage(event)">
<div id="image-preview">
<img id="sourceImage">
</div><br>
<label for="question" style="display: none;">Enter your question:</label>
<input type="text" id="context" style="display: none;" value="Describe this image in detail" required>
<br>
<button type="button" onclick="generateDescription()">Generate Description</button>
</form>
<div id="results">
<div id="estimatedTime" style="display: none;">Estimated time: 90s</div>
<div id="loadingSpinner" style="display: none;"></div>
<i class="far fa-copy" id="copyIcon" onclick="copyTextToClipboard()"></i>
<div id="resultContainer">
</div>
</div>
<script>
function previewImage(event) {
const file = event.target.files[0];
const sourceImageContainer = document.getElementById('image-preview');
const uploadButton = document.querySelector('button');
// Check if file size is larger than 500 KB
if (file.size > 4000 * 1024) {
sourceImageContainer.innerHTML = `<p style="color: white;">Please upload an image smaller than 4000 KB.</p>`;
uploadButton.disabled = true; // Disable the button
return;
}
// If file size is within limit, display image preview
const reader = new FileReader();
reader.onload = function(event) {
sourceImageContainer.innerHTML = `<img src="${event.target.result}" alt="Uploaded Image" style="max-width: 300px; max-height: 300px;">`;
};
reader.readAsDataURL(file);
uploadButton.disabled = false; // Enable the button
}
async function generateDescription() {
var formData = new FormData();
var fileInput = document.querySelector('input[type="file"]');
const contextnput = document.getElementById('context');
formData.append("image", fileInput.files[0]);
formData.append("context", contextInput.value);
// Check if the file input is empty
if (!fileInput.files[0]) {
document.getElementById('resultContainer').innerHTML = `<p style="color: white ;">Please upload an image.</p>`;
return;
}
// Clear the result container
document.getElementById('resultContainer').innerHTML = "";
// Display loading spinner
const loadingSpinner = document.getElementById('loading
|
File without changes
|