Mnddoke

Running

App Files Files Community

Ashrafb commited on Apr 19, 2024

Commit

2e11f0f

verified ·

1 Parent(s): f9294c6

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +34 -428

static/index.html CHANGED Viewed

@@ -3,440 +3,46 @@
 <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>
-        <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 > 1000 * 1024) {
-        sourceImageContainer.innerHTML = `<p style="color: white;">Please upload an image smaller than 1000 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"]');
-            formData.append("file", fileInput.files[0]);
-  // 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('/uploadfile/', {
-            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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Captioning</title>
+    <style>
+        .result {
+            margin-top: 20px;
+        }
+    </style>
 </head>
 <body>
+    <h1>Image Captioning</h1>
+    <form id="uploadForm" action="/uploadfile/" method="post" enctype="multipart/form-data">
+        <label for="image">Upload Image:</label><br>
+        <input type="file" id="image" name="image" accept="image/*"><br>
+        <label for="context">Additional Context:</label><br>
+        <textarea id="context" name="context" rows="4" cols="50"></textarea><br>
+        <button type="submit">Submit</button>
     </form>
+    <div id="result" class="result" style="display: none;">
+        <h2>Result:</h2>
+        <p id="caption"></p>
+    </div>
+    <script>
+        document.getElementById('uploadForm').addEventListener('submit', async function(event) {
+            event.preventDefault();
+            let formData = new FormData(this);
+            let response = await fetch('/uploadfile/', {
+                method: 'POST',
+                body: formData
+            });
+            if (response.ok) {
+                let result = await response.json();
+                document.getElementById('caption').innerText = result.result;
+                document.getElementById('result').style.display = 'block';
+            } else {
+                alert('An error occurred while processing the request.');
+            }
         });
     </script>
 </body>
 </html>