Failed to unzip file!
Close
Search
Search
Search
Search
Information
Information
Light
Dark
Open actions menu
Basic upload method
Bypass upload method
Tips!
If you encounter an error (by firewall) while uploading using both methods,
try changing extension of the file before uploading it and rename it right after.
This uploader supports multiple file upload.
Submit
~
var
www
ai-gemini.bitkit.dk
httpdocs
File Content:
image-analysis.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Analysis with Gemini</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <style> body { background-color: #f8f9fa; font-family: 'Arial', sans-serif; } .container { max-width: 60%; margin: auto; padding: 20px; background-color: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: 50px; margin-bottom: 50px; } .loader { border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #3498db; width: 50px; height: 50px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; display: none; margin: 20px auto; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #history { max-height: 400px; overflow-y: auto; margin-top: 20px; border: 1px solid #dee2e6; border-radius: 8px; padding: 10px; background-color: #f1f1f1; } #history .entry { margin-bottom: 10px; padding: 10px; border-radius: 5px; background-color: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } #history .entry .question { font-weight: bold; margin-bottom: 5px; } #history .entry .answer { color: #333; } #history .entry:not(:last-child) { border-bottom: 1px solid #ddd; } #answer { margin-top: 20px; padding: 10px; border-radius: 5px; background-color: #e9ecef; } .btn-custom { background-color: #3498db; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } .btn-custom:hover { background-color: #2980b9; } .headline { margin-top: 20px; font-weight: bold; font-size: 1.2em; border-bottom: 2px solid #3498db; padding-bottom: 5px; } </style> </head> <body> <div class="container"> <h1 class="text-center mb-4">Image Analysis with Gemini</h1> <form id="uploadImageForm" enctype="multipart/form-data" class="mb-3"> <div class="form-group"> <input type="file" class="form-control-file" name="image" id="image" accept="image/*" required> </div> <button type="submit" class="btn btn-custom btn-block">Upload Image</button> </form> <div id="uploadStatus" class="text-center mt-3"></div> <div class="loader" id="loader"></div> <form id="imageQuestionForm" style="display: none;" class="mt-3"> <div class="form-group"> <input type="text" class="form-control" name="question" id="imageQuestion" placeholder="Ask a question about the image..." required> </div> <button type="submit" class="btn btn-custom btn-block">Ask</button> </form> <div class="headline">Chat History</div> <div id="history" class="mt-3"></div> <div class="headline">Current Answer</div> <div id="answer" class="mt-3" style="display: none;"></div> </div> <script> $(document).ready(function() { let uploadedFilePath = ''; $('#uploadImageForm').on('submit', function(e) { e.preventDefault(); var formData = new FormData(this); $('#loader').show(); $.ajax({ url: 'http://localhost:3000/upload-image', type: 'POST', data: formData, contentType: false, processData: false, success: function(response) { $('#loader').hide(); if (response.status === 'success') { $('#uploadStatus').text('Image uploaded successfully.'); $('#imageQuestionForm').show(); uploadedFilePath = response.filePath; // Store the file path } else { $('#uploadStatus').text(response.message); } }, error: function() { $('#loader').hide(); $('#uploadStatus').text('An error occurred during image upload.'); } }); }); $('#imageQuestionForm').on('submit', function(e) { e.preventDefault(); var question = $('#imageQuestion').val(); $('#loader').show(); $.ajax({ url: 'http://localhost:3000/image-question', type: 'POST', data: { question: question, filePath: uploadedFilePath }, success: function(response) { $('#loader').hide(); if (response.status === 'success') { var history = response.history; $('#history').empty(); history.forEach(function(entry) { $('#history').append('<div class="entry"><div class="question">' + entry.question + '</div><div class="answer">' + marked.parse(entry.answer) + '</div></div>'); }); $('#answer').html(marked.parse(response.answer)).show(); } else { $('#answer').text(response.message).show(); } }, error: function() { $('#loader').hide(); $('#answer').text('An error occurred while processing the question.').show(); } }); }); }); </script> </body> </html>
Edit
Download
Unzip
Chmod
Delete