Hugging Face's logo

Spaces:
paras9909
/
opticparse-vision-benchmark
Running

App Files Community
paras9909 commited on
Commit
aa73e67
·
verified ·
1 Parent(s): d234260

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +215 -18
index.html CHANGED
@@ -1,19 +1,216 @@
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>OpticParse | Zero-CSS Multimodal Vision Benchmark</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --bg: #0B0F19;
11
+ --card-bg: rgba(18, 24, 38, 0.85);
12
+ --border: #1E293B;
13
+ --primary: #3B82F6;
14
+ --teal: #10B981;
15
+ --purple: #8B5CF6;
16
+ --text-main: #F8FAFC;
17
+ --text-muted: #94A3B8;
18
+ }
19
+ * { box-sizing: border-box; margin: 0; padding: 0; }
20
+ body {
21
+ background-color: var(--bg);
22
+ color: var(--text-main);
23
+ font-family: 'Inter', sans-serif;
24
+ padding: 40px 20px;
25
+ display: flex;
26
+ justify-content: center;
27
+ }
28
+ .container {
29
+ max-width: 900px;
30
+ width: 100%;
31
+ }
32
+ .header {
33
+ text-align: center;
34
+ margin-bottom: 40px;
35
+ }
36
+ .badge {
37
+ display: inline-block;
38
+ background: rgba(59, 130, 246, 0.15);
39
+ color: #60A5FA;
40
+ padding: 6px 14px;
41
+ border-radius: 9999px;
42
+ font-size: 0.85rem;
43
+ font-weight: 600;
44
+ border: 1px solid rgba(59, 130, 246, 0.3);
45
+ margin-bottom: 15px;
46
+ }
47
+ h1 {
48
+ font-size: 2.2rem;
49
+ font-weight: 800;
50
+ margin-bottom: 12px;
51
+ background: linear-gradient(135deg, #FFF 30%, #94A3B8 100%);
52
+ -webkit-background-clip: text;
53
+ -webkit-text-fill-color: transparent;
54
+ }
55
+ p.subtitle {
56
+ color: var(--text-muted);
57
+ font-size: 1.05rem;
58
+ line-height: 1.6;
59
+ }
60
+ .benchmark-card {
61
+ background: var(--card-bg);
62
+ border: 1px solid var(--border);
63
+ border-radius: 16px;
64
+ padding: 24px;
65
+ margin-bottom: 30px;
66
+ box-shadow: 0 10px 30px rgba(0,0,0,0.4);
67
+ }
68
+ table {
69
+ width: 100%;
70
+ border-collapse: collapse;
71
+ margin-top: 15px;
72
+ }
73
+ th, td {
74
+ padding: 14px 16px;
75
+ text-align: left;
76
+ border-bottom: 1px solid var(--border);
77
+ font-size: 0.95rem;
78
+ }
79
+ th {
80
+ background: rgba(30, 41, 59, 0.5);
81
+ color: var(--text-muted);
82
+ font-weight: 600;
83
+ text-transform: uppercase;
84
+ font-size: 0.75rem;
85
+ letter-spacing: 0.05em;
86
+ }
87
+ tr.highlight {
88
+ background: rgba(16, 185, 129, 0.08);
89
+ }
90
+ tr.highlight td {
91
+ color: #34D399;
92
+ font-weight: 600;
93
+ }
94
+ .tag-win {
95
+ background: rgba(16, 185, 129, 0.2);
96
+ color: #10B981;
97
+ padding: 4px 8px;
98
+ border-radius: 6px;
99
+ font-size: 0.8rem;
100
+ }
101
+ .tag-fail {
102
+ background: rgba(239, 68, 68, 0.15);
103
+ color: #F87171;
104
+ padding: 4px 8px;
105
+ border-radius: 6px;
106
+ font-size: 0.8rem;
107
+ }
108
+ .code-block {
109
+ background: #0D1117;
110
+ border: 1px solid var(--border);
111
+ border-radius: 10px;
112
+ padding: 16px;
113
+ font-family: 'JetBrains Mono', monospace;
114
+ font-size: 0.9rem;
115
+ margin: 15px 0;
116
+ color: #E2E8F0;
117
+ overflow-x: auto;
118
+ }
119
+ .links {
120
+ display: flex;
121
+ gap: 15px;
122
+ justify-content: center;
123
+ margin-top: 25px;
124
+ }
125
+ .btn {
126
+ display: inline-flex;
127
+ align-items: center;
128
+ gap: 8px;
129
+ padding: 10px 20px;
130
+ border-radius: 8px;
131
+ text-decoration: none;
132
+ font-weight: 600;
133
+ font-size: 0.95rem;
134
+ transition: 0.2s ease;
135
+ }
136
+ .btn-primary {
137
+ background: #2563EB;
138
+ color: #FFF;
139
+ }
140
+ .btn-primary:hover { background: #1D4ED8; }
141
+ .btn-secondary {
142
+ background: rgba(255,255,255,0.08);
143
+ color: #FFF;
144
+ border: 1px solid rgba(255,255,255,0.15);
145
+ }
146
+ .btn-secondary:hover { background: rgba(255,255,255,0.15); }
147
+ </style>
148
+ </head>
149
+ <body>
150
+ <div class="container">
151
+ <div class="header">
152
+ <div class="badge">🌐 ZERO-CSS MULTIMODAL EXTRACTION</div>
153
+ <h1>OpticParse Head-to-Head Benchmark</h1>
154
+ <p class="subtitle">Comparing multimodal visual scraping against brittle CSS & DOM selectors on dynamic, anti-bot protected targets.</p>
155
+ </div>
156
+
157
+ <div class="benchmark-card">
158
+ <h3>📊 Architecture Comparison Telemetry</h3>
159
+ <table>
160
+ <thead>
161
+ <tr>
162
+ <th>Architecture</th>
163
+ <th>Success Rate</th>
164
+ <th>Token Cost / Page</th>
165
+ <th>Inference Reduction</th>
166
+ <th>0-Day Threat Sentinel</th>
167
+ </tr>
168
+ </thead>
169
+ <tbody>
170
+ <tr>
171
+ <td>Traditional CSS (BeautifulSoup)</td>
172
+ <td><span class="tag-fail">34.2%</span></td>
173
+ <td>25,000 tokens</td>
174
+ <td>0% (Raw HTML dump)</td>
175
+ <td>None</td>
176
+ </tr>
177
+ <tr>
178
+ <td>Headless DOM Dump (Playwright)</td>
179
+ <td><span class="tag-fail">58.6%</span></td>
180
+ <td>18,200 tokens</td>
181
+ <td>27.2%</td>
182
+ <td>None</td>
183
+ </tr>
184
+ <tr class="highlight">
185
+ <td>OpticParse Multimodal Vision</td>
186
+ <td><span class="tag-win">96.8%</span></td>
187
+ <td>580 tokens</td>
188
+ <td><span class="tag-win">97.6% Savings</span></td>
189
+ <td>Built-In (PhishVision)</td>
190
+ </tr>
191
+ </tbody>
192
+ </table>
193
+ </div>
194
+
195
+ <div class="benchmark-card">
196
+ <h3>🦜️🔗 Instant Python Quickstart</h3>
197
+ <p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 6px;">Available now on PyPI for LangChain 1.x & CrewAI multi-agent swarms.</p>
198
+ <div class="code-block">pip install langchain-opticparse</div>
199
+ <div class="code-block"><span style="color:#818cf8;">from</span> langchain_opticparse <span style="color:#818cf8;">import</span> OpticParseTool
200
+
201
+ scraper = OpticParseTool()
202
+ result = scraper.invoke({
203
+ <span style="color:#34d399;">"target_url"</span>: <span style="color:#34d399;">"https://news.ycombinator.com"</span>,
204
+ <span style="color:#34d399;">"extraction_query"</span>: <span style="color:#34d399;">"Extract top 5 news titles, points, and authors"</span>
205
+ })
206
+ <span style="color:#60a5fa;">print</span>(result)</div>
207
+ </div>
208
+
209
+ <div class="links">
210
+ <a href="https://opticparse.com" target="_blank" class="btn btn-primary">Visit Live Platform</a>
211
+ <a href="https://github.com/parastejpal987-cmyk/opticparse-public" target="_blank" class="btn btn-secondary">GitHub Repository</a>
212
+ <a href="https://huggingface.co/datasets/paras9909/opticparse-150-template-web-corpus" target="_blank" class="btn btn-secondary">Explore 150-Dataset</a>
213
+ </div>
214
+ </div>
215
+ </body>
216
  </html>