Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Knowledge Base Browser</title> | |
| <style> | |
| .kb-browser { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | |
| max-width: 100%; | |
| background: #ffffff; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .search-interface { | |
| padding: 20px; | |
| border-bottom: 1px solid #e2e8f0; | |
| background: #f8fafc; | |
| } | |
| .search-input-container { | |
| display: flex; | |
| gap: 12px; | |
| align-items: flex-end; | |
| margin-bottom: 16px; | |
| } | |
| .search-input { | |
| flex: 1; | |
| padding: 12px 16px; | |
| border: 1px solid #d1d5db; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .search-input:focus { | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .search-button { | |
| padding: 12px 24px; | |
| background: #3b82f6; | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .search-button:hover { | |
| background: #2563eb; | |
| } | |
| .search-button:disabled { | |
| background: #9ca3af; | |
| cursor: not-allowed; | |
| } | |
| .search-options { | |
| display: flex; | |
| gap: 16px; | |
| align-items: center; | |
| } | |
| .search-type-select { | |
| padding: 8px 12px; | |
| border: 1px solid #d1d5db; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| background: white; | |
| } | |
| .results-container { | |
| padding: 20px; | |
| } | |
| .results-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 16px; | |
| padding-bottom: 12px; | |
| border-bottom: 1px solid #e2e8f0; | |
| } | |
| .results-info { | |
| font-size: 14px; | |
| color: #64748b; | |
| } | |
| .result-card { | |
| border: 1px solid #e2e8f0; | |
| border-radius: 8px; | |
| margin-bottom: 16px; | |
| overflow: hidden; | |
| transition: box-shadow 0.2s; | |
| } | |
| .result-card:hover { | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .result-header { | |
| padding: 16px; | |
| background: white; | |
| } | |
| .result-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #1e293b; | |
| margin: 0 0 8px 0; | |
| line-height: 1.4; | |
| } | |
| .result-source { | |
| font-size: 13px; | |
| color: #64748b; | |
| margin-bottom: 12px; | |
| } | |
| .result-meta { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| } | |
| .source-type-badge { | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| } | |
| .source-type-academic { | |
| background: #ede9fe; | |
| color: #7c3aed; | |
| } | |
| .source-type-web { | |
| background: #dbeafe; | |
| color: #2563eb; | |
| } | |
| .source-type-pdf { | |
| background: #fef2f2; | |
| color: #dc2626; | |
| } | |
| .source-type-code { | |
| background: #f3f4f6; | |
| color: #374151; | |
| } | |
| .relevance-score { | |
| padding: 4px 8px; | |
| background: #10b981; | |
| color: white; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| } | |
| .result-snippet { | |
| background: #f8fafc; | |
| padding: 12px; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: #475569; | |
| margin-bottom: 12px; | |
| } | |
| .result-actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .action-button { | |
| padding: 8px 12px; | |
| border: 1px solid #d1d5db; | |
| background: white; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .action-button:hover { | |
| background: #f3f4f6; | |
| } | |
| .action-button.primary { | |
| background: #3b82f6; | |
| color: white; | |
| border-color: #3b82f6; | |
| } | |
| .action-button.primary:hover { | |
| background: #2563eb; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 48px 20px; | |
| color: #64748b; | |
| } | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid #e2e8f0; | |
| border-radius: 50%; | |
| border-top-color: #3b82f6; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .expanded-content { | |
| border-top: 1px solid #e2e8f0; | |
| padding: 16px; | |
| background: #fafbfc; | |
| } | |
| .metadata-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 12px; | |
| margin-top: 12px; | |
| } | |
| .metadata-item { | |
| font-size: 13px; | |
| } | |
| .metadata-label { | |
| color: #64748b; | |
| font-weight: 500; | |
| } | |
| .metadata-value { | |
| color: #1e293b; | |
| margin-left: 8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="kb-browser-root"></div> | |
| <script type="module" src="./script.tsx"></script> | |
| </body> | |
| </html> |