-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
163 lines (149 loc) · 7.84 KB
/
index.html
File metadata and controls
163 lines (149 loc) · 7.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT Transcript Viewer</title>
<!-- External dependencies -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/universal-sentence-encoder"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<!-- Platform modules (ES modules) -->
<script type="module" src="js/platforms/platform-utils.js"></script>
<script type="module" src="js/platforms/base-handler.js"></script>
<script type="module" src="js/platforms/chatgpt.js"></script>
<script type="module" src="js/platforms/claude-json.js"></script>
<script type="module" src="js/platforms/claude-specstory.js"></script>
<script type="module" src="js/platforms/platform-interface.js"></script>
<script type="module" src="js/platforms/display-helper.js"></script>
</head>
<body>
<div class="header-row">
<div class="header-left">
<h1 style="vertical-align: middle;">
AI Transcript Viewer
</h1>
</div>
<div class="header-middle">
<span class="message-count-inline">Message <span id="current-index">0</span> of <span id="total-messages">0</span></span>
<span class="token-stats-inline" id="token-stats">0 tokens</span>
<input type="file" id="transcript-file" accept=".json">
</div>
<div class="header-right">
<div class="starred-dropdown-container">
<select id="starred-messages-dropdown" class="form-select form-select-sm" title="Jump to bookmarked message">
<option value="">Bookmarks</option>
</select>
</div>
<button id="copy-starred-btn" class="btn btn-outline-primary btn-sm ms-2" title="Copy all starred messages"><i class="fas fa-copy"></i></button>
<button id="search-btn" class="btn btn-outline-primary btn-sm ms-2" title="Search Transcript"><i class="fas fa-search"></i></button>
<button id="goto-message-btn" class="btn btn-outline-secondary btn-sm ms-2" title="Go to Message Number"><i class="fas fa-circle-right"></i></button>
</div>
</div>
<!-- Search Modal -->
<div id="search-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Search Transcript</h3>
<div>
<button id="clear-search" style="background: none; border: none; color: #0066cc; cursor: pointer; margin-right: 15px; font-size: 0.9rem; padding: 5px;">Clear Search</button>
<button class="modal-close" id="close-modal">×</button>
</div>
</div>
<div class="modal-body">
<div class="search-type-toggle">
<button class="search-type-option active" id="keyword-search-btn">Keyword Search</button>
<button class="search-type-option" id="semantic-search-btn">Semantic Search</button>
</div>
<div class="model-loading" id="model-loading">
<p>Loading semantic search model... This may take a moment.</p>
<div class="progress-bar">
<div class="progress-bar-fill" id="progress-bar-fill"></div>
</div>
<button id="regenerate-embeddings" style="display:none; margin-top:10px; padding:5px 10px; background:#0066cc; color:white; border:none; border-radius:4px; cursor:pointer;">Regenerate Embeddings</button>
</div>
<div class="search-input-container">
<input type="text" id="search-input" class="search-input" placeholder="Enter search term...">
<button id="search-execute" class="search-execute">Search</button>
</div>
<div class="search-result-count"></div>
<div id="search-results" class="search-results"></div>
</div>
</div>
</div>
<!-- Search result display -->
<div class="search-results" id="search-results" style="display: none;">
<div id="search-status">Loading search results...</div>
<div id="search-results-container"></div>
</div>
<!-- Main content area -->
<div id="main-content-area">
<!-- Removed: Single message view container -->
<!-- Three message view container -->
<div id="three-message-container">
<div class="message-box previous">
<div class="message-box-label">User</div>
<div id="previous-message-container">
<p>No current message</p>
</div>
</div>
<div class="message-box current">
<div class="message-box-label">Assistant</div>
<div id="current-message-container">
<p>No next message</p>
</div>
</div>
<div class="message-box next">
<div class="message-box-label">Following</div>
<div id="next-message-container">
<p>No following message</p>
</div>
</div>
</div>
</div>
<!-- New container for metadata -->
<div id="metadata-container"></div>
<div id="navigation" class="mt-3 mb-3">
<button id="prev-btn" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i> Previous Message</button>
<button id="next-btn" class="btn btn-outline-secondary"><i class="fas fa-arrow-right me-1"></i> Next Message</button>
</div>
<div id="instructions">
<h3>Instructions:</h3>
<ul>
<li>Use the up (↑) and down (↓) arrow keys to move one message at a time</li>
<li>Use the left (←) and right (→) arrow keys to navigate between user messages</li>
<li>Or click the Previous/Next buttons</li>
<li>Toggle between single message view and three-message view using the button in the top right</li>
<li>Star messages by clicking the ★ icon, then navigate between starred messages with F (previous) and J (next) keys</li>
<li>Use the dropdown in the header to quickly jump to any starred message</li>
</ul>
</div>
<!-- JavaScript modules -->
<!-- Using fallback tokenization methods instead of external tiktoken libraries -->
<script>
// Set flags for tokenization
window.tokenizerLoaded = false;
window.jstiktoken = null;
window.tiktoken = null;
console.log('Using built-in tokenization methods for token counting');
console.log('These methods provide good approximations for token counts across different models');
// If you want more accurate counts for OpenAI models, please run this app from a proper web server
// and uncomment the tiktoken loading code in this file
</script>
<script src="js/main.js"></script>
<script src="js/transcript.js"></script>
<script src="js/display.js"></script>
<script src="js/keywordSearch.js"></script>
<script src="js/semanticSearch.js"></script>
<script src="js/storage.js"></script>
<script src="js/searchUI.js"></script>
<script src="js/starredMessages.js"></script>
<script type="module" src="js/script.js"></script>
</body>
</html>