Hugging Face's logo

Spaces:
usmanyousaf
/
image-to-text
Sleeping

App Files Community
usmanyousaf commited on
Commit
c5f31ad
·
verified ·
1 Parent(s): 1c6dd8a

Upload 2 files

Browse files
Files changed (2) hide show
  1. Templates/.DS_Store +0 -0
  2. Templates/index.html +167 -0
Templates/.DS_Store ADDED
Binary file (6.15 kB). View file
 
Templates/index.html ADDED
@@ -0,0 +1,167 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Image to Text Converter</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #000000;
11
+ color: #333;
12
+ margin: 0;
13
+ padding: 0;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ height: 100vh;
18
+ }
19
+ .container {
20
+ text-align: center;
21
+ background: #fff;
22
+ padding: 30px;
23
+ border-radius: 10px;
24
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
25
+ width: 90%;
26
+ max-width: 600px;
27
+ }
28
+ h1 {
29
+ font-size: 24px;
30
+ color: #4CAF50;
31
+ }
32
+ p {
33
+ color: #666;
34
+ }
35
+ .upload-box {
36
+ margin: 20px auto;
37
+ padding: 30px;
38
+ border: 2px dashed #ccc;
39
+ border-radius: 10px;
40
+ background-color: #f9f9f9;
41
+ cursor: pointer;
42
+ position: relative;
43
+ }
44
+ .upload-box:hover {
45
+ background-color: #f4f4f4;
46
+ }
47
+ .upload-box span {
48
+ color: #888;
49
+ font-size: 14px;
50
+ display: block;
51
+ }
52
+ .upload-box input[type="file"] {
53
+ position: absolute;
54
+ width: 100%;
55
+ height: 100%;
56
+ top: 0;
57
+ left: 0;
58
+ opacity: 0;
59
+ cursor: pointer;
60
+ }
61
+ .process-button {
62
+ background-color: #4CAF50;
63
+ color: white;
64
+ padding: 10px 20px;
65
+ border: none;
66
+ border-radius: 5px;
67
+ cursor: pointer;
68
+ font-size: 16px;
69
+ }
70
+ .process-button:hover {
71
+ background-color: #45a049;
72
+ }
73
+ .result-box {
74
+ margin-top: 20px;
75
+ text-align: left;
76
+ }
77
+ .result-box img {
78
+ max-width: 100%;
79
+ border-radius: 5px;
80
+ margin-top: 10px;
81
+ }
82
+ .actions {
83
+ margin-top: 20px;
84
+ }
85
+ .actions button {
86
+ margin: 5px;
87
+ background-color: #4CAF50;
88
+ color: white;
89
+ padding: 8px 16px;
90
+ border: none;
91
+ border-radius: 5px;
92
+ cursor: pointer;
93
+ font-size: 14px;
94
+ }
95
+ .actions button:hover {
96
+ background-color: #45a049;
97
+ }
98
+ pre {
99
+ background-color: #f4f4f4;
100
+ padding: 10px;
101
+ border-radius: 5px;
102
+ white-space: pre-wrap;
103
+ word-wrap: break-word;
104
+ }
105
+ .error {
106
+ color: red;
107
+ font-weight: bold;
108
+ margin-bottom: 20px;
109
+ }
110
+ </style>
111
+ </head>
112
+ <body>
113
+ <div class="container">
114
+ <h1>Image to Text Converter</h1>
115
+ <p>Quickly extract text from your uploaded images!</p>
116
+
117
+ <!-- Error Message -->
118
+ {% if error %}
119
+ <div class="error">
120
+ <strong>{{ error }}</strong>
121
+ </div>
122
+ {% endif %}
123
+
124
+ <!-- Upload Form -->
125
+ <form method="POST" enctype="multipart/form-data">
126
+ <div class="upload-box">
127
+ <span>Drag & Drop the Images<br>Or Click to Browse</span>
128
+ <input type="file" name="image" accept="image/*" id="image-file">
129
+ </div>
130
+ <button class="process-button" type="submit">Upload Image</button>
131
+ </form>
132
+
133
+ <!-- Uploaded Image -->
134
+ {% if image_url %}
135
+ <div class="result-box">
136
+ <h2>Uploaded Image:</h2>
137
+ <img src="{{ image_url }}" alt="Uploaded Image">
138
+ <form method="POST" action="/process">
139
+ <input type="hidden" name="image_path" value="{{ image_url }}">
140
+ <button class="process-button" type="submit">Process Image</button>
141
+ </form>
142
+ </div>
143
+ {% endif %}
144
+
145
+ <!-- Extracted Text -->
146
+ {% if text %}
147
+ <div class="result-box">
148
+ <h2>Extracted Text:</h2>
149
+ <pre>{{ text }}</pre>
150
+ <div class="actions">
151
+ <button onclick="copyToClipboard()">Copy to Clipboard</button>
152
+ <button onclick="window.location.href='/'">Upload Another Image</button>
153
+ </div>
154
+ </div>
155
+ {% endif %}
156
+ </div>
157
+
158
+ <script>
159
+ function copyToClipboard() {
160
+ const text = document.querySelector('pre').textContent;
161
+ navigator.clipboard.writeText(text).then(() => {
162
+ alert('Text copied to clipboard!');
163
+ });
164
+ }
165
+ </script>
166
+ </body>
167
+ </html>