\n Recipe Scraper Evaluation\n

\n\n {/* URL Input */}\n

\n setUrlInput(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addUrl()}\n placeholder=\"Enter recipe URL...\"\n className=\"flex-1 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}\n />\n \n {addingUrl ? 'Adding...' : 'Add URL'}\n \n setShowBulkInput(!showBulkInput)}\n className=\"btn-secondary\"\n >\n Bulk Import\n \n

\n\n {/* Bulk Import */}\n {showBulkInput && (\n

\n setBulkInput(e.target.value)}\n placeholder=\"Paste multiple URLs (one per line)...\"\n rows={4}\n className=\"w-full px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}\n />\n

\n \n {addingBulkUrls ? 'Adding...' : 'Add All URLs'}\n \n {\n setShowBulkInput(false);\n setBulkInput(\"\");\n }}\n disabled={addingBulkUrls}\n className=\"btn-secondary disabled:opacity-50\"\n >\n Cancel\n \n

\n )}\n\n {/* Actions */}\n {state.savedUrls.length > 0 && (\n

\n \n {state.loading && (\n

\n )}\n Run All\n \n {someSelected && (\n \n {state.loading && (\n

\n )}\n Run Selected ({state.selectedUrlIds.size})\n \n )}\n \n {clearingAll ? 'Clearing...' : 'Clear All'}\n \n \n {state.savedUrls.length} URL{state.savedUrls.length !== 1 ? \"s\" : \"\"} saved\n {someSelected && ` · ${state.selectedUrlIds.size} selected`}\n \n

\n )}\n

\n\n {/* Results Table */}\n {state.savedUrls.length > 0 && (\n

\n \n \n \n \n {SCRAPER_NAMES.map((name) => (\n \n {name}\n {name.split(\"-\")[0]}\n \n ))}\n \n \n \n {state.savedUrls.map((savedUrl, urlIndex) => {\n const urlResult = getResultForUrl(savedUrl.url);\n const isSelected = state.selectedUrlIds.has(savedUrl.id);\n return (\n \n \n {SCRAPER_NAMES.map((scraperName, scraperIndex) => {\n const scraperResult = urlResult?.results.find(\n (r) => r.scraper === scraperName\n );\n const summary = getScraperResultSummary(scraperResult);\n const cellExpanded = isExpanded(urlIndex, scraperIndex);\n const cellViewMode = getExpandedViewMode(urlIndex, scraperIndex);\n\n return (\n \n {state.loading && !urlResult ? (\n

\n Loading...\n

\n ) : summary.status === \"pending\" ? (\n —\n ) : summary.status === \"error\" ? (\n

\n ❌\n Error\n

\n toggleExpandCell(urlIndex, scraperIndex)}\n className=\"text-xs text-red-500 hover:underline mt-1\"\n >\n {cellExpanded ? \"Hide details\" : \"Show details\"}\n \n {cellExpanded && (\n

\n                                  {summary.text}\n

\n )}\n

\n ) : (\n

\n ✅\n \n {summary.text}\n \n

\n {summary.ingredientCount} ingredients ·{\" \"}\n {summary.instructionCount} steps ·{\" \"}\n {summary.durationMs}ms\n

\n toggleExpandCell(urlIndex, scraperIndex, \"key-fields\")}\n className=\"text-xs hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n {cellExpanded ? \"Hide\" : \"View Details\"}\n \n

\n {cellExpanded && (\n

\n {/* View Mode Toggle */}\n

\n setExpandedViewMode(urlIndex, scraperIndex, \"key-fields\")}\n className=\"px-2 py-1 text-xs rounded\"\n style={cellViewMode === \"key-fields\"\n ? { background: 'var(--accent)', color: 'white' }\n : { background: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}\n >\n Key Fields\n \n setExpandedViewMode(urlIndex, scraperIndex, \"full-json\")}\n className=\"px-2 py-1 text-xs rounded\"\n style={cellViewMode === \"full-json\"\n ? { background: 'var(--accent)', color: 'white' }\n : { background: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}\n >\n Full JSON\n \n

\n \n {cellViewMode === \"key-fields\" ? (\n

\n {(() => {\n const keyFields = extractKeyFields(scraperResult?.data);\n if (!keyFields) return No data;\n return (\n <>\n

Name:

{keyFields.name || \"—\"}

\n Ingredients ({keyFields.ingredients.length}):\n

\n {keyFields.ingredients.length > 0 ? (\n

\n •{ing}\n

\n ) : (\n None found\n )}\n

\n Instructions ({keyFields.instructions.length}):\n

\n {keyFields.instructions.length > 0 ? (\n

\n {i + 1}.{inst}\n

\n ) : (\n None found\n )}\n

\n \n );\n })()}\n

\n ) : (\n

\n                                      {JSON.stringify(scraperResult?.data, null, 2)}\n

\n )}\n

\n )}\n \n );\n })}\n \n );\n })}\n \n

\n \n allSelected ? deselectAllUrls() : selectAllUrls()}\n className=\"w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer\"\n title={allSelected ? \"Deselect all\" : \"Select all\"}\n />\n Recipe URL\n \n
\n \n toggleUrlSelection(savedUrl.id)}\n className=\"w-4 h-4 mt-0.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer flex-shrink-0\"\n />\n removeUrl(savedUrl)}\n disabled={removingUrlId !== null}\n className=\"text-red-500 hover:text-red-700 text-sm flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed\"\n title=\"Remove URL\"\n >\n {removingUrlId === savedUrl.id ? '...' : '✕'}\n \n \n {new URL(savedUrl.url).hostname}\n {new URL(savedUrl.url).pathname.slice(0, 20)}\n {new URL(savedUrl.url).pathname.length > 20 ? \"...\" : \"\"}\n \n \n

\n allSelected ? deselectAllUrls() : selectAllUrls()}\n className=\"w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer\"\n title={allSelected ? \"Deselect all\" : \"Select all\"}\n />\n Recipe URL\n

\n toggleUrlSelection(savedUrl.id)}\n className=\"w-4 h-4 mt-0.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer flex-shrink-0\"\n />\n removeUrl(savedUrl)}\n disabled={removingUrlId !== null}\n className=\"text-red-500 hover:text-red-700 text-sm flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed\"\n title=\"Remove URL\"\n >\n {removingUrlId === savedUrl.id ? '...' : '✕'}\n \n \n {new URL(savedUrl.url).hostname}\n {new URL(savedUrl.url).pathname.slice(0, 20)}\n {new URL(savedUrl.url).pathname.length > 20 ? \"...\" : \"\"}\n \n

\n )}\n\n {/* Empty State */}\n {state.savedUrls.length === 0 && (\n

🔍

No recipe URLs saved yet

\n Add recipe URLs above to compare scraper performance\n

\n )}\n

\n );\n}\n","deleted","label",[175,176,157],"frontend","components","permalink","https://www.val.town/x/shapedlines/carmy/code/frontend/components/ScraperEvalView.tsx","extension","actionData","errors"]