Hugging Face's logo

Spaces:
Tigersman
/
visionsnap-ocr-wizard
Running

App Files Community
Tigersman commited on
Commit
b8fdd9a
·
verified ·
1 Parent(s): ba0ef1f

Create me mobile application specialized in character recognition don't integrate any just starts with frontend, tabs of home, history, settings

Browse files
Files changed (4) hide show
  1. README.md +7 -4
  2. index.html +91 -19
  3. script.js +38 -0
  4. style.css +225 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Visionsnap Ocr Wizard
3
- emoji: 🌍
4
  colorFrom: blue
5
- colorTo: gray
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: VisionSnap OCR Wizard 🔍
 
3
  colorFrom: blue
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,91 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>VisionSnap - OCR Wizard</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
+ </head>
10
+ <body>
11
+ <div class="mobile-frame">
12
+ <div class="app-container">
13
+ <div class="app-header">
14
+ <h1><i class="fas fa-camera"></i> VisionSnap</h1>
15
+ </div>
16
+
17
+ <div class="tab-content active" id="home">
18
+ <div class="scan-area">
19
+ <div class="camera-view">
20
+ <div class="placeholder-image"></div>
21
+ <button class="scan-button">
22
+ <i class="fas fa-camera"></i>
23
+ </button>
24
+ </div>
25
+ <div class="results-preview">
26
+ <h3>Last Scan Result</h3>
27
+ <div class="text-preview">
28
+ <p>Scan something to see results appear here...</p>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+
34
+ <div class="tab-content" id="history">
35
+ <div class="history-list">
36
+ <h3><i class="fas fa-history"></i> Scan History</h3>
37
+ <div class="history-empty">
38
+ <p>No previous scans yet</p>
39
+ </div>
40
+ </div>
41
+ </div>
42
+
43
+ <div class="tab-content" id="settings">
44
+ <div class="settings-options">
45
+ <h3><i class="fas fa-cog"></i> Settings</h3>
46
+ <div class="setting-item">
47
+ <label>Dark Mode</label>
48
+ <label class="switch">
49
+ <input type="checkbox">
50
+ <span class="slider"></span>
51
+ </label>
52
+ </div>
53
+ <div class="setting-item">
54
+ <label>Auto Copy to Clipboard</label>
55
+ <label class="switch">
56
+ <input type="checkbox" checked>
57
+ <span class="slider"></span>
58
+ </label>
59
+ </div>
60
+ <div class="setting-item">
61
+ <label>Language</label>
62
+ <select>
63
+ <option>English</option>
64
+ <option>Spanish</option>
65
+ <option>French</option>
66
+ </select>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="bottom-tabs">
72
+ <a href="#" class="tab-button active" data-tab="home">
73
+ <i class="fas fa-home"></i>
74
+ <span>Home</span>
75
+ </a>
76
+ <a href="#" class="tab-button" data-tab="history">
77
+ <i class="fas fa-history"></i>
78
+ <span>History</span>
79
+ </a>
80
+ <a href="#" class="tab-button" data-tab="settings">
81
+ <i class="fas fa-cog"></i>
82
+ <span>Settings</span>
83
+ </a>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <script src="script.js"></script>
89
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
90
+ </body>
91
+ </html>
script.js ADDED
@@ -0,0 +1,38 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Tab switching functionality
3
+ const tabButtons = document.querySelectorAll('.tab-button');
4
+ const tabContents = document.querySelectorAll('.tab-content');
5
+
6
+ tabButtons.forEach(button => {
7
+ button.addEventListener('click', function(e) {
8
+ e.preventDefault();
9
+ const tabId = this.getAttribute('data-tab');
10
+
11
+ // Remove active class from all tabs and buttons
12
+ tabButtons.forEach(btn => btn.classList.remove('active'));
13
+ tabContents.forEach(content => content.classList.remove('active'));
14
+
15
+ // Add active class to clicked tab and button
16
+ this.classList.add('active');
17
+ document.getElementById(tabId).classList.add('active');
18
+ });
19
+ });
20
+
21
+ // Scan button functionality
22
+ const scanButton = document.querySelector('.scan-button');
23
+ const textPreview = document.querySelector('.text-preview');
24
+
25
+ scanButton.addEventListener('click', function() {
26
+ // Simulate scanning process
27
+ textPreview.innerHTML = '<p><i class="fas fa-spinner fa-spin"></i> Scanning...</p>';
28
+
29
+ setTimeout(() => {
30
+ // Simulate OCR results
31
+ textPreview.innerHTML = `
32
+ <p>Sample OCR Result:</p>
33
+ <p class="ocr-text">The quick brown fox jumps over the lazy dog.</p>
34
+ <p class="timestamp">Scanned at ${new Date().toLocaleTimeString()}</p>
35
+ `;
36
+ }, 2000);
37
+ });
38
+ });
style.css CHANGED
@@ -1,28 +1,235 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary-color: #4a6bff;
3
+ --secondary-color: #f8f9fa;
4
+ --text-color: #333;
5
+ --light-text: #666;
6
+ --border-color: #ddd;
7
+ --shadow-color: rgba(0, 0, 0, 0.1);
8
+ }
9
+
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15
+ }
16
+
17
  body {
18
+ background-color: #f0f2f5;
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: center;
22
+ min-height: 100vh;
23
+ color: var(--text-color);
24
+ }
25
+
26
+ .mobile-frame {
27
+ width: 360px;
28
+ height: 640px;
29
+ background: white;
30
+ border-radius: 30px;
31
+ box-shadow: 0 10px 30px var(--shadow-color);
32
+ overflow: hidden;
33
+ position: relative;
34
+ }
35
+
36
+ .app-container {
37
+ width: 100%;
38
+ height: 100%;
39
+ display: flex;
40
+ flex-direction: column;
41
+ }
42
+
43
+ .app-header {
44
+ padding: 20px;
45
+ text-align: center;
46
+ background: var(--primary-color);
47
+ color: white;
48
+ }
49
+
50
+ .app-header h1 {
51
+ font-size: 1.5rem;
52
+ font-weight: 600;
53
+ }
54
+
55
+ .app-header i {
56
+ margin-right: 10px;
57
  }
58
 
59
+ .tab-content {
60
+ display: none;
61
+ flex: 1;
62
+ overflow-y: auto;
63
+ padding: 20px;
64
  }
65
 
66
+ .tab-content.active {
67
+ display: block;
 
 
 
68
  }
69
 
70
+ .scan-area {
71
+ display: flex;
72
+ flex-direction: column;
73
+ gap: 20px;
 
 
74
  }
75
 
76
+ .camera-view {
77
+ position: relative;
78
+ width: 100%;
79
+ height: 200px;
80
+ background-color: #eee;
81
+ border-radius: 10px;
82
+ display: flex;
83
+ justify-content: center;
84
+ align-items: center;
85
+ overflow: hidden;
86
  }
87
+
88
+ .placeholder-image {
89
+ width: 100%;
90
+ height: 100%;
91
+ background: url('http://static.photos/workspace/360x200/1') no-repeat center center;
92
+ background-size: cover;
93
+ }
94
+
95
+ .scan-button {
96
+ position: absolute;
97
+ bottom: 20px;
98
+ width: 60px;
99
+ height: 60px;
100
+ border-radius: 50%;
101
+ background: var(--primary-color);
102
+ color: white;
103
+ border: none;
104
+ display: flex;
105
+ justify-content: center;
106
+ align-items: center;
107
+ font-size: 24px;
108
+ box-shadow: 0 4px 10px var(--shadow-color);
109
+ cursor: pointer;
110
+ }
111
+
112
+ .results-preview {
113
+ background: white;
114
+ border-radius: 10px;
115
+ padding: 15px;
116
+ box-shadow: 0 2px 10px var(--shadow-color);
117
+ }
118
+
119
+ .results-preview h3 {
120
+ margin-bottom: 10px;
121
+ color: var(--primary-color);
122
+ }
123
+
124
+ .text-preview {
125
+ padding: 10px;
126
+ background: var(--secondary-color);
127
+ border-radius: 5px;
128
+ min-height: 100px;
129
+ }
130
+
131
+ .history-list h3 {
132
+ margin-bottom: 15px;
133
+ display: flex;
134
+ align-items: center;
135
+ gap: 8px;
136
+ }
137
+
138
+ .history-empty {
139
+ text-align: center;
140
+ padding: 50px 0;
141
+ color: var(--light-text);
142
+ }
143
+
144
+ .settings-options h3 {
145
+ margin-bottom: 15px;
146
+ display: flex;
147
+ align-items: center;
148
+ gap: 8px;
149
+ }
150
+
151
+ .setting-item {
152
+ display: flex;
153
+ justify-content: space-between;
154
+ align-items: center;
155
+ padding: 15px 0;
156
+ border-bottom: 1px solid var(--border-color);
157
+ }
158
+
159
+ .switch {
160
+ position: relative;
161
+ display: inline-block;
162
+ width: 50px;
163
+ height: 24px;
164
+ }
165
+
166
+ .switch input {
167
+ opacity: 0;
168
+ width: 0;
169
+ height: 0;
170
+ }
171
+
172
+ .slider {
173
+ position: absolute;
174
+ cursor: pointer;
175
+ top: 0;
176
+ left: 0;
177
+ right: 0;
178
+ bottom: 0;
179
+ background-color: #ccc;
180
+ transition: .4s;
181
+ border-radius: 24px;
182
+ }
183
+
184
+ .slider:before {
185
+ position: absolute;
186
+ content: "";
187
+ height: 16px;
188
+ width: 16px;
189
+ left: 4px;
190
+ bottom: 4px;
191
+ background-color: white;
192
+ transition: .4s;
193
+ border-radius: 50%;
194
+ }
195
+
196
+ input:checked + .slider {
197
+ background-color: var(--primary-color);
198
+ }
199
+
200
+ input:checked + .slider:before {
201
+ transform: translateX(26px);
202
+ }
203
+
204
+ .bottom-tabs {
205
+ display: flex;
206
+ justify-content: space-around;
207
+ padding: 10px 0;
208
+ background: white;
209
+ box-shadow: 0 -2px 10px var(--shadow-color);
210
+ }
211
+
212
+ .tab-button {
213
+ display: flex;
214
+ flex-direction: column;
215
+ align-items: center;
216
+ text-decoration: none;
217
+ color: var(--light-text);
218
+ font-size: 12px;
219
+ gap: 5px;
220
+ }
221
+
222
+ .tab-button i {
223
+ font-size: 20px;
224
+ }
225
+
226
+ .tab-button.active {
227
+ color: var(--primary-color);
228
+ }
229
+
230
+ select {
231
+ padding: 5px 10px;
232
+ border-radius: 5px;
233
+ border: 1px solid var(--border-color);
234
+ background: white;
235
+ }