Mnddoke

Running

App Files Files Community

Ashrafb commited on Apr 19, 2024

Commit

f55efc9

verified ·

1 Parent(s): f64c71d

Delete static/index.html

Browse files

Files changed (1) hide show

static/index.html +0 -455

static/index.html DELETED Viewed

@@ -1,455 +0,0 @@
-<!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="Question" 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 QuestionInput = document.getElementById('Question');
-    formData.append("image", fileInput.files[0]);
-    formData.append("Question", QuestionInput.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('/upload/', {
-            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
-            // Extract the last sentence from the response string
-            const lastCommaIndex = data.lastIndexOf(',');
-            const lastSentence = data.substring(lastCommaIndex + 1).trim();
-            // Display the last sentence in the result container
-            resultContainer.innerHTML = `<p style="color: white;">${lastSentence}</p>`;
-        } 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>