Spaces:
Running
Running
Commit
·
e302e06
1
Parent(s):
0bd0f00
Updated UI and image display
Browse files- app.py +6 -2
- static/style.css +5 -0
- templates/index.html +5 -2
app.py
CHANGED
|
@@ -1,4 +1,4 @@
|
|
| 1 |
-
from flask import Flask, render_template, request
|
| 2 |
from paddleocr import PaddleOCR
|
| 3 |
import os
|
| 4 |
|
|
@@ -38,5 +38,9 @@ def upload_file():
|
|
| 38 |
|
| 39 |
return render_template('index.html')
|
| 40 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 41 |
if __name__ == '__main__':
|
| 42 |
-
app.run(host='0.0.0.0', port=5000)
|
|
|
|
| 1 |
+
from flask import Flask, render_template, request, send_from_directory
|
| 2 |
from paddleocr import PaddleOCR
|
| 3 |
import os
|
| 4 |
|
|
|
|
| 38 |
|
| 39 |
return render_template('index.html')
|
| 40 |
|
| 41 |
+
@app.route('/uploads/<filename>')
|
| 42 |
+
def uploaded_file(filename):
|
| 43 |
+
return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
|
| 44 |
+
|
| 45 |
if __name__ == '__main__':
|
| 46 |
+
app.run(host='0.0.0.0', port=5000)
|
static/style.css
CHANGED
|
@@ -18,6 +18,11 @@ body {
|
|
| 18 |
h1 {
|
| 19 |
margin-bottom: 20px;
|
| 20 |
color: #333;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 21 |
}
|
| 22 |
|
| 23 |
.custom-file-upload {
|
|
|
|
| 18 |
h1 {
|
| 19 |
margin-bottom: 20px;
|
| 20 |
color: #333;
|
| 21 |
+
font-size: 2.5em;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
form {
|
| 25 |
+
margin-bottom: 30px;
|
| 26 |
}
|
| 27 |
|
| 28 |
.custom-file-upload {
|
templates/index.html
CHANGED
|
@@ -5,6 +5,7 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>OCR App</title>
|
| 7 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">
|
|
|
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
<div class="container mt-5">
|
|
@@ -32,13 +33,15 @@
|
|
| 32 |
<pre>{{ text }}</pre>
|
| 33 |
{% endif %}
|
| 34 |
|
|
|
|
| 35 |
{% if filename %}
|
| 36 |
<h4>Uploaded Image: {{ filename }}</h4>
|
| 37 |
-
<
|
|
|
|
|
|
|
| 38 |
{% endif %}
|
| 39 |
</div>
|
| 40 |
|
| 41 |
-
<!-- Optional: Bootstrap JavaScript for interaction (such as form validation) -->
|
| 42 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
|
| 43 |
</body>
|
| 44 |
</html>
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>OCR App</title>
|
| 7 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">
|
| 8 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
| 9 |
</head>
|
| 10 |
<body>
|
| 11 |
<div class="container mt-5">
|
|
|
|
| 33 |
<pre>{{ text }}</pre>
|
| 34 |
{% endif %}
|
| 35 |
|
| 36 |
+
<!-- Display Image -->
|
| 37 |
{% if filename %}
|
| 38 |
<h4>Uploaded Image: {{ filename }}</h4>
|
| 39 |
+
<div class="image-preview">
|
| 40 |
+
<img src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image">
|
| 41 |
+
</div>
|
| 42 |
{% endif %}
|
| 43 |
</div>
|
| 44 |
|
|
|
|
| 45 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
|
| 46 |
</body>
|
| 47 |
</html>
|