Add graph and vector search features
This commit is contained in:
@@ -14,6 +14,7 @@
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">This Little Corner</div>
|
||||
<div class="title-bar-controls">
|
||||
<button id="aboutBtn" aria-label="About">?</button>
|
||||
<button id="minimizeBtn" aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
@@ -21,6 +22,10 @@
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<p>Enter a phrase to query title, description, and transcript text.</p>
|
||||
<p style="font-size: 11px;">
|
||||
Looking for semantic matches? Try the
|
||||
<a href="/vector-search">vector search beta</a>.
|
||||
</p>
|
||||
|
||||
<fieldset>
|
||||
<legend>Search</legend>
|
||||
@@ -31,13 +36,10 @@
|
||||
</div>
|
||||
|
||||
<div class="field-row" style="margin-bottom: 8px; align-items: center;">
|
||||
<label style="width: 60px;">Channel:</label>
|
||||
<details id="channelDropdown" class="channel-dropdown" style="flex: 1;">
|
||||
<summary id="channelSummary">All Channels</summary>
|
||||
<div id="channelOptions" class="channel-options">
|
||||
<div>Loading channels…</div>
|
||||
</div>
|
||||
</details>
|
||||
<label for="channel" style="width: 60px;">Channel:</label>
|
||||
<select id="channel" style="flex: 1;">
|
||||
<option value="">All Channels</option>
|
||||
</select>
|
||||
|
||||
<label for="year" style="margin-left: 8px;">Year:</label>
|
||||
<select id="year">
|
||||
@@ -64,21 +66,25 @@
|
||||
<div class="toggle-item toggle-item--first">
|
||||
<input type="checkbox" id="exactToggle" checked />
|
||||
<label for="exactToggle">Exact</label>
|
||||
<span class="toggle-help">Match all terms exactly.</span>
|
||||
</div>
|
||||
|
||||
<div class="toggle-item">
|
||||
<input type="checkbox" id="fuzzyToggle" checked />
|
||||
<label for="fuzzyToggle">Fuzzy</label>
|
||||
<span class="toggle-help">Allow small typos and variations.</span>
|
||||
</div>
|
||||
|
||||
<div class="toggle-item">
|
||||
<input type="checkbox" id="phraseToggle" checked />
|
||||
<label for="phraseToggle">Phrase</label>
|
||||
<span class="toggle-help">Boost exact phrases inside transcripts.</span>
|
||||
</div>
|
||||
|
||||
<div class="toggle-item">
|
||||
<input type="checkbox" id="queryStringToggle" />
|
||||
<label for="queryStringToggle">Query string mode</label>
|
||||
<span class="toggle-help">Use raw Lucene syntax (overrides other toggles).</span>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -107,11 +113,110 @@
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="status-bar">
|
||||
<p class="status-bar-field">Ready</p>
|
||||
<div class="status-bar">
|
||||
<p class="status-bar-field">Ready</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-panel" id="aboutPanel" hidden>
|
||||
<div class="about-panel__header">
|
||||
<strong>About This App</strong>
|
||||
<button id="aboutCloseBtn" aria-label="Close about panel">×</button>
|
||||
</div>
|
||||
<div class="about-panel__body">
|
||||
<p>Use the toggles to choose exact, fuzzy, or phrase matching. Query string mode accepts raw Lucene syntax.</p>
|
||||
<p>Results are ranked by your chosen sort order; the timeline summarizes the same query.</p>
|
||||
<p>You can download transcripts, copy MLA citations, or explore references via the graph button.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="graphModalOverlay"
|
||||
class="graph-modal-overlay"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
class="window graph-window graph-modal-window"
|
||||
id="graphModalWindow"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="graphModalTitle"
|
||||
>
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text" id="graphModalTitle">Reference Graph</div>
|
||||
<div class="title-bar-controls">
|
||||
<button id="graphModalClose" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<p>
|
||||
Explore how this video links with its neighbors. Adjust depth or node cap to expand the graph.
|
||||
</p>
|
||||
|
||||
<form id="graphForm" class="graph-controls">
|
||||
<div class="field-group">
|
||||
<label for="graphVideoId">Video ID</label>
|
||||
<input
|
||||
id="graphVideoId"
|
||||
name="video_id"
|
||||
type="text"
|
||||
placeholder="e.g. dQw4w9WgXcQ"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="graphDepth">Depth</label>
|
||||
<select id="graphDepth" name="depth">
|
||||
<option value="1" selected>1 hop</option>
|
||||
<option value="2">2 hops</option>
|
||||
<option value="3">3 hops</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="graphMaxNodes">Max nodes</label>
|
||||
<select id="graphMaxNodes" name="max_nodes">
|
||||
<option value="100">100</option>
|
||||
<option value="150">150</option>
|
||||
<option value="200" selected>200</option>
|
||||
<option value="300">300</option>
|
||||
<option value="400">400</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="graphLabelSize">Labels</label>
|
||||
<select id="graphLabelSize" name="label_size">
|
||||
<option value="off">Off</option>
|
||||
<option value="tiny" selected>Tiny</option>
|
||||
<option value="small">Small</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="large">Large</option>
|
||||
<option value="xlarge">Extra large</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit">Build graph</button>
|
||||
</form>
|
||||
|
||||
<div id="graphStatus" class="graph-status">Enter a video ID to begin.</div>
|
||||
<div
|
||||
id="graphContainer"
|
||||
class="graph-container"
|
||||
data-embedded="true"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="status-bar">
|
||||
<p class="status-bar-field">Right-click a node to set a new root</p>
|
||||
<p class="status-bar-field">Colors (and hatches) represent channels</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/graph.js"></script>
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user