OpenAI-HTML-Client/ChatGPT Client.html at main · N1xUser/OpenAI-HTML-Client · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>ChatGPT UI Client</title>
	  <link rel="stylesheet" href="css/style.css">
	  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
	  <script>
		 window.MathJax = {
			 tex: {
				 inlineMath: [['$', '$'], ['\\(', '\\)']],
				 displayMath: [['$$', '$$'], ['\\[', '\\]']],
				 processEscapes: true,
				 processEnvironments: true
			 },
			 options: {
				 skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a']
			 }
		 };
	  </script>
	</head>
	<body>
	  <div class="app-container" id="appContainer">
		 <div class="sidebar" id="sidebar">
			<div class="sidebar-header">
				<h2>💬 ChatGPT UI</h2>
				<button class="new-chat-btn" id="newChatBtn">
				<span>+</span> New Chat
				</button>
			</div>
			<div class="sessions-section">
				<h3>Chats</h3>
				<div class="sessions-list" id="sessionsList"></div>
			</div>
			<div class="sidebar-footer">
				<div class="session-controls">
				  <input type="text" id="sessionNameInput" class="session-name-input" placeholder="Name this chat...">
				  <div id="autoSaveIndicator" class="auto-save-indicator">
					 <span>✔</span> Saved
				  </div>
				</div>
				<div class="sidebar-actions">
				  <button class="sidebar-action-btn" id="importAllBtn">Import</button>
				  <button class="sidebar-action-btn" id="exportAllBtn">Export</button>
				  <button class="sidebar-action-btn delete" id="deleteAllBtn">Delete All</button>
				  <input type="file" id="importFileInput" style="display: none;" accept=".json">
				</div>
			</div>
		 </div>
		 <div class="sidebar-resizer" id="sidebarResizer"></div>
		 <div class="main-content" id="mainContent">
			<div class="chat-container">
				<div class="config-section" id="configSection">
				  <div class="header-controls">
					 <button class="mobile-menu-toggle" id="mobileMenuToggle">
					 <span></span>
					 <span></span>
					 <span></span>
					 </button>
					 <div class="main-config-area">
						<div class="api-key-container">
							 <div style="display: flex; gap: 8px; align-items: flex-end;">
								  <input type="password" class="api-key-input" placeholder="Enter your OpenAI API Key here..." id="apiKeyInput" style="flex: 1;">
								  <button class="submit-key-btn" id="submitKeyBtn">Submit Key</button>
							 </div>
							 <div class="api-key-status" id="apiKeyStatus"></div>
						</div>
						<div class="main-controls" id="mainControls">
							<select class="model-select" id="modelSelect">
							  <option value="">Loading models...</option>
							</select>
							<div class="action-buttons-group">
							  <button class="top-btn" id="refreshModelsBtn" title="Refresh Models">🔄</button>
							  <div class="streaming-toggle">
								 <input type="checkbox" id="streamingCheckbox" class="checkbox" checked>
								 <label for="streamingCheckbox">Stream</label>
							  </div>
							  <button class="top-btn" id="exportSessionBtn" title="Export Chat">📄</button>
							</div>
						</div>
					 </div>
				  </div>
				  <div id="modelInfo" class="model-info">Select a model to see information</div>
				</div>
				<div class="chat-messages" id="chatMessages"></div>
				<div class="typing-indicator" id="typingIndicator">
				  <div class="typing-dots">AI is thinking</div>
				</div>
				<div class="input-section">
				  <div class="input-container">
					 <div class="file-upload-container">
						<div class="uploaded-files" id="uploadedFiles"></div>
						<input type="file" class="file-input" id="fileInput" multiple>
						<button class="icon-btn" id="fileUploadBtn" title="Attach Files">📎</button>
						<button class="icon-btn" id="imageUploadBtn" title="Attach Images">🖼️</button>
					 </div>
					 <textarea class="message-input" id="messageInput" placeholder="Type your message..." rows="1"></textarea>
					 <div class="action-buttons">
						<button class="icon-btn" id="clearButton" title="Clear Chat">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
							  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
							</svg>
						</button>
						<button class="send-button" id="sendButton" title="Send Message">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
							  <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
							</svg>
						</button>
					 </div>
				  </div>
				</div>
			</div>
		 </div>
		 <div class="sidebar-overlay" id="sidebarOverlay"></div>
	  </div>
	  <script src="js/script.js"></script>
	</body>
</html>