Spaces:

Ashrafb
/

Im2sdocke

Paused

App Files Files Community

Im2sdocke / static /index.html

Ashrafb

Update static/index.html

1083f50 verified about 2 years ago

raw

history blame contribute delete

17.6 kB

	<!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 */
	}

	#copyContainer {
	width: fit-content;
	margin: auto;
	text-align: center;
	}

	#copyIcon {
	font-size: 24px; /* Adjust the font size as needed */
	cursor: pointer;
	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="language">Choose a language:</label>
	<select name="language" id="language">
	<option value="english">English</option>
	<option value="arabic">Arabic</option>
	<option value="af">Afrikaans</option>
	<option value="sq">Albanian</option>
	<option value="am">Amharic</option>
	<option value="hy">Armenian</option>
	<option value="az">Azerbaijani</option>
	<option value="eu">Basque</option>
	<option value="be">Belarusian</option>
	<option value="bn">Bengali</option>
	<option value="bs">Bosnian</option>
	<option value="bg">Bulgarian</option>
	<option value="my">Burmese</option>
	<option value="ca">Catalan</option>
	<option value="ceb">Cebuano</option>
	<option value="ny">Chichewa</option>
	<option value="zh-CN">Chinese (Simplified)</option>
	<option value="zh-TW">Chinese (Traditional)</option>
	<option value="co">Corsican</option>
	<option value="hr">Croatian</option>
	<option value="cs">Czech</option>
	<option value="da">Danish</option>
	<option value="nl">Dutch</option>
	<option value="eo">Esperanto</option>
	<option value="et">Estonian</option>
	<option value="tl">Filipino</option>
	<option value="fi">Finnish</option>
	<option value="fr">French</option>
	<option value="fy">Frisian</option>
	<option value="gl">Galician</option>
	<option value="ka">Georgian</option>
	<option value="de">German</option>
	<option value="el">Greek</option>
	<option value="gu">Gujarati</option>
	<option value="ht">Haitian Creole</option>
	<option value="ha">Hausa</option>
	<option value="haw">Hawaiian</option>
	<option value="hi">Hindi</option>
	<option value="hmn">Hmong</option>
	<option value="hu">Hungarian</option>
	<option value="is">Icelandic</option>
	<option value="ig">Igbo</option>
	<option value="id">Indonesian</option>
	<option value="ga">Irish</option>
	<option value="it">Italian</option>
	<option value="ja">Japanese</option>
	<option value="jw">Javanese</option>
	<option value="kn">Kannada</option>
	<option value="kk">Kazakh</option>
	<option value="km">Khmer</option>
	<option value="rw">Kinyarwanda</option>
	<option value="ko">Korean</option>
	<option value="ku">Kurdish (Kurmanji)</option>
	<option value="ky">Kyrgyz</option>
	<option value="lo">Lao</option>
	<option value="la">Latin</option>
	<option value="lv">Latvian</option>
	<option value="lt">Lithuanian</option>
	<option value="lb">Luxembourgish</option>
	<option value="mk">Macedonian</option>
	<option value="mg">Malagasy</option>
	<option value="ms">Malay</option>
	<option value="ml">Malayalam</option>
	<option value="mt">Maltese</option>
	<option value="mi">Maori</option>
	<option value="mr">Marathi</option>
	<option value="mn">Mongolian</option>
	<option value="ne">Nepali</option>
	<option value="no">Norwegian</option>
	<option value="or">Odia</option>
	<option value="ps">Pashto</option>
	<option value="fa">Persian</option>
	<option value="pl">Polish</option>
	<option value="pt">Portuguese</option>
	<option value="pa">Punjabi</option>
	<option value="ro">Romanian</option>
	<option value="ru">Russian</option>
	<option value="sm">Samoan</option>
	<option value="gd">Scots Gaelic</option>
	<option value="sr">Serbian</option>
	<option value="st">Sesotho</option>
	<option value="sn">Shona</option>
	<option value="sd">Sindhi</option>
	<option value="si">Sinhala</option>
	<option value="sk">Slovak</option>
	<option value="sl">Slovenian</option>
	<option value="so">Somali</option>
	<option value="es">Spanish</option>
	<option value="su">Sundanese</option>
	<option value="sw">Swahili</option>
	<option value="sv">Swedish</option>
	<option value="tg">Tajik</option>
	<option value="ta">Tamil</option>
	<option value="te">Telugu</option>
	<option value="th">Thai</option>
	<option value="tr">Turkish</option>
	<option value="uk">Ukrainian</option>
	<option value="ur">Urdu</option>
	<option value="ug">Uyghur</option>
	<option value="uz">Uzbek</option>
	<option value="vi">Vietnamese</option>
	<option value="cy">Welsh</option>
	<option value="xh">Xhosa</option>
	<option value="yi">Yiddish</option>
	<option value="yo">Yoruba</option>
	<option value="zu">Zulu</option>



	<!-- Add more language options as needed -->
	</select>

	<button type="button" onclick="generateStory()">Generate Story </button>
	</form>
	<div id="results">
	<div id="estimatedTime" style="display: none;">Estimated time: 90s</div>
	<div id="loadingSpinner" style="display: none;"></div>

	<div id="resultContainer">

	</div>
	</div>
	<div id="copyContainer">
	<i class="far fa-copy" id="copyIcon" onclick="copyTextToClipboard()"></i>
	</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 generateStory() {
	var formData = new FormData();
	var fileInput = document.querySelector('input[type="file"]');
	var languageSelect = document.getElementById('language');
	formData.append('image_file', fileInput.files[0]);
	formData.append('language', languageSelect.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('loadingSpinner');
	loadingSpinner.style.display = 'block';
	const estimatedTime = document.getElementById('estimatedTime');
	estimatedTime.style.display = 'block';

	try {
	const response = await fetch('/generate-story/', {
	method: 'POST',
	body: formData
	});
	// Hide loading spinner
	loadingSpinner.style.display = 'none';
	estimatedTime.style.display = 'none';

	if (response.ok) {
	const resultContainer = document.getElementById('resultContainer');
	const data = await response.text(); // Get response as text
	resultContainer.innerHTML = '<h2></h2>';
	resultContainer.innerText = data; // Set response text to innerText

	} else {
	document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
	}
	} catch (error) {
	console.error('Error:', error);
	document.getElementById('resultContainer').innerHTML = `<p style="color: white ;">Oops! Something went wrong. Please try again later.</p>`;
	}
	}
	function copyTextToClipboard() {
	const resultContainer = document.getElementById('resultContainer');
	const textToCopy = resultContainer.innerText;

	// Create a temporary textarea element to copy the text
	const textarea = document.createElement('textarea');
	textarea.value = textToCopy;
	document.body.appendChild(textarea);

	// Select the text inside the textarea
	textarea.select();
	textarea.setSelectionRange(0, 99999); // For mobile devices

	// Copy the selected text
	document.execCommand('copy');

	// Remove the temporary textarea
	document.body.removeChild(textarea);

	// Change the copy icon text to "Copied"
	const copyIcon = document.getElementById('copyIcon');
	copyIcon.textContent = ' # Copied' ;
	copyIcon.style.fontSize = '14px';
	// Revert the copy icon back to "Copy" after 1.5 seconds
	setTimeout(() => {
	copyIcon.textContent = '';
	}, 1500);
	}


	</script>
	</body>
	</html>