Spaces:
Build error
Build error
File size: 5,521 Bytes
de3df47 3d82aef de3df47 3d82aef de3df47 3d82aef | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 | import gradio as gr
import cv2
import numpy as np
import pytesseract
import base64, json, io
from PIL import Image
# HTML template that loads Fabric.js and creates an interactive canvas.
html_template = """
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.6.0/fabric.min.js"></script>
<style>
canvas { border: 1px solid #ccc; }
</style>
</head>
<body>
<canvas id="c" width="600" height="400"></canvas>
<script>
// Parse JSON data from Python.
var data = {data_json};
// Initialize Fabric.js canvas.
var canvas = new fabric.Canvas('c');
// Load the image as canvas background.
var imgObj = new Image();
imgObj.src = "data:image/png;base64," + data.image_data;
imgObj.onload = function() {
var bg = new fabric.Image(imgObj);
bg.selectable = false;
// Scale background to canvas dimensions.
bg.scaleToWidth(canvas.width);
bg.scaleToHeight(canvas.height);
canvas.setBackgroundImage(bg, canvas.renderAll.bind(canvas));
};
// Add detected objects to the canvas.
data.objects.forEach(function(obj) {
if(obj.type === "text") {
var textObj = new fabric.IText(obj.text, {
left: obj.x,
top: obj.y,
fontSize: 20,
fill: 'black'
});
canvas.add(textObj);
} else if(obj.type === "image") {
var rect = new fabric.Rect({
left: obj.x,
top: obj.y,
width: obj.width,
height: obj.height,
fill: 'rgba(0, 0, 255, 0.3)'
});
canvas.add(rect);
}
});
</script>
</body>
</html>
"""
def generate_html(image):
# If the PNG has transparency, composite it onto a white background.
if image.shape[2] == 4:
alpha = image[:, :, 3] / 255.0
image_rgb = image[:, :, :3]
white_bg = np.ones_like(image_rgb, dtype=np.uint8) * 255
image = np.uint8(image_rgb * alpha[..., None] + white_bg * (1 - alpha[..., None]))
# Convert the image (numpy array) to a base64-encoded PNG.
pil_image = Image.fromarray(image)
buffer = io.BytesIO()
pil_image.save(buffer, format="PNG")
base64_image = base64.b64encode(buffer.getvalue()).decode('utf-8')
# ------------------- TEXT DETECTION -------------------
text_data = pytesseract.image_to_data(image, output_type=pytesseract.Output.DICT)
detected_texts = []
n_boxes = len(text_data['level'])
for i in range(n_boxes):
try:
conf = int(text_data['conf'][i])
except:
conf = 0
text_content = text_data['text'][i].strip()
if conf > 60 and text_content:
x = int(text_data['left'][i])
y = int(text_data['top'][i])
w = int(text_data['width'][i])
h = int(text_data['height'][i])
detected_texts.append({
'type': 'text',
'text': text_content,
'x': x,
'y': y,
'width': w,
'height': h,
'confidence': conf
})
# ---------------- NON-TEXT OBJECT DETECTION ----------------
# Convert image to grayscale and threshold to detect non-white regions.
gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
_, thresh = cv2.threshold(gray, 240, 255, cv2.THRESH_BINARY_INV)
contours, _ = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
detected_images = []
# Helper function to compute Intersection over Union (IoU) for overlap testing.
def iou(box1, box2):
x1, y1, w1, h1 = box1
x2, y2, w2, h2 = box2
inter_x = max(0, min(x1+w1, x2+w2) - max(x1, x2))
inter_y = max(0, min(y1+h1, y2+h2) - max(y1, y2))
inter_area = inter_x * inter_y
area1 = w1 * h1
area2 = w2 * h2
union = area1 + area2 - inter_area
return inter_area / union if union != 0 else 0
# Prepare text bounding boxes for filtering.
text_boxes = [(obj['x'], obj['y'], obj['width'], obj['height']) for obj in detected_texts]
image_id = 0
for cnt in contours:
x, y, w, h = cv2.boundingRect(cnt)
if w < 10 or h < 10:
continue
# Skip if the contour significantly overlaps with a detected text box.
overlap = any(iou((x, y, w, h), tb) > 0.5 for tb in text_boxes)
if not overlap:
detected_images.append({
'type': 'image',
'id': image_id,
'x': x,
'y': y,
'width': w,
'height': h
})
image_id += 1
# Combine text and non-text objects.
objects = detected_texts + detected_images
result = {
"image_data": base64_image,
"objects": objects
}
# Insert the JSON data into the HTML template.
json_data = json.dumps(result)
html_code = html_template.replace("{data_json}", json_data)
return html_code
# Create the Gradio interface.
with gr.Blocks() as demo:
gr.Markdown("## Interactive Image Editor")
with gr.Row():
with gr.Column():
input_image = gr.Image(label="Upload PNG Image", source="upload", type="numpy")
process_button = gr.Button("Process Image")
with gr.Column():
html_output = gr.HTML(label="Interactive Editor")
process_button.click(fn=generate_html, inputs=input_image, outputs=html_output)
demo.launch() |