Spaces:

abven
/

ImageCaptionGenerator

Sleeping

App Files Files Community

VenkateshRoshan commited on Oct 10, 2024

Commit

8eeb5a3

1 Parent(s): bf9aafc

Added Webpage

Browse files

Files changed (3) hide show

app.py +3 -2
static/styles.css +18 -0
templates/index.html +148 -0

app.py CHANGED Viewed

@@ -1,4 +1,4 @@
-from flask import Flask, request, jsonify
 from PIL import Image
 import io
 from infer import ImageCaptioningInference
@@ -23,7 +23,8 @@ inference_model = ImageCaptioningInference(model)
 @app.route('/')
 def home():
-    return "Welcome to the Flask API"
 @app.route('/upload-image', methods=['POST'])
 def upload_image():

+from flask import Flask, request, jsonify, render_template
 from PIL import Image
 import io
 from infer import ImageCaptioningInference
 @app.route('/')
 def home():
+    # return "Welcome to the Flask API"
+    return render_template('index.html')
 @app.route('/upload-image', methods=['POST'])
 def upload_image():

static/styles.css ADDED Viewed

	@@ -0,0 +1,18 @@

+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+}
+h1 {
+    color: #333;
+}
+form {
+    margin-bottom: 20px;
+}
+input[type="file"], input[type="text"] {
+    display: block;
+    margin: 10px 0;
+}

templates/index.html ADDED Viewed

	@@ -0,0 +1,148 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Inference</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <style>
+        /* Drag and drop area styles */
+        #drop-area {
+            border: 2px dashed #ccc;
+            border-radius: 20px;
+            width: 300px;
+            height: 300px;
+            margin: 20px auto;
+            text-align: center;
+            padding: 20px;
+            transition: border 0.3s;
+            position: relative;
+        }
+        #drop-area.highlight {
+            border-color: #666;
+        }
+        #drop-area p {
+            margin: 0;
+            font-weight: bold;
+        }
+        #drop-area img {
+            max-width: 100%;
+            max-height: 100%;
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+        }
+        #caption-box {
+            margin-top: 20px;
+            width: 300px;
+            height: 100px;
+            resize: none;
+        }
+        #caption-container {
+            text-align: center;
+        }
+        #upload-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Image Inference App</h1>
+    <div id="upload-container">
+        <div id="drop-area">
+            <p>Drag & drop your image here or click to select</p>
+            <input type="file" name="image" accept="image/*" required style="display:none;">
+            <img id="uploaded-image" src="" alt="Uploaded Image"> <!-- Image will appear here -->
+        </div>
+    </div>
+    <div id="caption-container">
+        <h2>Generated Caption:</h2>
+        <textarea id="caption-box" readonly></textarea> <!-- This will display the caption -->
+    </div>
+    <script>
+        const dropArea = document.getElementById('drop-area');
+        const input = dropArea.querySelector('input[type="file"]');
+        const uploadedImage = document.getElementById('uploaded-image');
+        const captionBox = document.getElementById('caption-box');
+        // Prevent default drag behaviors
+        ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropArea.addEventListener(eventName, preventDefaults, false);
+            document.body.addEventListener(eventName, preventDefaults, false);
+        });
+        // Highlight the drop area when an item is dragged over it
+        ;['dragenter', 'dragover'].forEach(eventName => {
+            dropArea.classList.add('highlight');
+        });
+        ;['dragleave', 'drop'].forEach(eventName => {
+            dropArea.classList.remove('highlight');
+        });
+        // Handle dropped files
+        dropArea.addEventListener('drop', handleDrop, false);
+        dropArea.addEventListener('click', () => input.click());
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // Handle file input change
+        input.addEventListener('change', () => {
+            handleFiles(input.files);
+        });
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            handleFiles(files);
+        }
+        function handleFiles(files) {
+            if (files.length > 0) {
+                // Clear previous outputs
+                captionBox.value = '';
+                uploadedImage.style.display = 'none';
+                const formData = new FormData();
+                formData.append('image', files[0]);
+                // Show the uploaded image in the container
+                uploadedImage.src = URL.createObjectURL(files[0]);
+                uploadedImage.style.display = 'block'; // Make the image visible
+                // Perform AJAX request to upload image without refreshing the page
+                fetch("/upload-image", {
+                    method: "POST",
+                    body: formData,
+                })
+                .then(response => response.json())
+                .then(result => {
+                    captionBox.value = result.generated_caption || result.error; // Display caption in the text area
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
+            }
+        }
+    </script>
+</body>
+</html>